/* ===========================
   Short-Viewport Boilerplate
   =========================== */

/* 1) Global scale via CSS vars (override on short screens) */
:root{
  --sz-1: 1rem;         /* base */
  --sz-2: 1.25rem;
  --sz-3: 1.5rem;
  --space-1: .75rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --radius: 10px;
}

/* 2) Utility classes (use anywhere) */
.short-hide { display: none !important; }
.short-only { display: none; }
@media (max-height: 720px){ .short-only { display: initial; } }

.short-tight * { margin-top: 0 !important; margin-bottom: 0 !important; }
.short-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* tweak per use */
  overflow: hidden;
}
.short-center { display: grid; place-items: center; text-align: center; }

/* 3) Generic component tightening */
@media (max-height: 720px){
  html { scrollbar-gutter: stable both-edges; }
  body { line-height: 1.35; }

  #intro-content .fs-110 {
    font-size: 10vh;
    line-height: 10.5vh;
  }

  .site-header{ padding-block: .5rem; }
  .site-header .logo{ height: clamp(20px, 5vh, 28px); }
  .site-nav a{ padding: .4rem .6rem; font-size: clamp(12px, 1.8vh, 14px); }

  h1{ font-size: clamp(22px, 4.2vh, 32px); margin-bottom: .5rem; }
  h2{ font-size: clamp(18px, 3.6vh, 26px); margin-bottom: .5rem; }
  h3{ font-size: clamp(16px, 3.0vh, 22px); margin-bottom: .5rem; }
  p { font-size: clamp(16px, 2.2vh, 16px); margin-bottom: .5rem; margin-top: 4vh; }

  .btn{
    padding: .5rem .75rem;
    border-radius: calc(var(--radius) - 4px);
    font-size: clamp(12px, 1.9vh, 14px);
  }

  /* Card / section vertical rhythm */
  .section{ padding-block: var(--space-2); }
  .card{ padding: var(--space-2); gap: .5rem; }

  /* Grids that should stack when tall space is tight */
  .short-stack,
  .grid-short-stack{ display: grid; grid-template-columns: 1fr; gap: var(--space-2); }

  /* Reduce ornamental chrome */
  .decor, .hero-illustration, .big-wave { display:none; }
}

/* 4) Ultra short (really tight) */
@media (max-height: 600px){
  .site-nav{ gap: .25rem; }
  .hero{ min-height: auto; padding-block: var(--space-2); }
  .short-4lines{ -webkit-line-clamp: 4; }
  .short-2lines{ -webkit-line-clamp: 2; }

  /* Tables/lists become dense */
  table, .list{ font-size: clamp(12px, 1.8vh, 13px); }
  table td, table th{ padding: .35rem .5rem; }
}

/* 5) Phone landscape helper */
@media (orientation: landscape) and (max-height: 480px){
  .sticky-footer, .mega-banner{ display:none; }
  .toolbar{ min-height: 36px; }
}

/* 6) Prefer dvh (handles mobile browser UI bars) */
@supports (height: 1dvh){
  @media (max-height: 720px){
    .hero,
    .vh-block{ min-height: 42dvh; }  /* swap vh -> dvh */
  }
}

/* 7) Short viewport – center key media & size by width not vh */
@media (min-width: 768px) and (max-height: 620px){
  .media-row{ flex-wrap: wrap; align-items: flex-start; --bs-gutter-x: .75rem; }
  .media-slot{ flex: 0 0 100%; max-width: 100%; display: grid; place-items: center; }
  .media-box{ width: auto; max-height: min(520px, 62vw); margin: 0 auto; }
}

/* 8) Tabs/buttons: compact mode */
@media (max-height: 720px){
  .tabs{ gap: .5rem; margin-bottom: .5rem; }
  .tabs .tab{ padding: .4rem .6rem; font-size: clamp(12px, 1.8vh, 14px); border-radius: 8px; }
}

/* 9) Optional: toggle “is-short” class from JS for precise control */
:is(html, body).is-short{
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
}