/* Full-screen hero: the hero fills the viewport below the header on every screen.
   --chrome-h is measured by hero-fit.js; the fallbacks match the header + note heights per breakpoint. */
:root { --chrome-h: 88px; --hero-h: calc(100vh - var(--chrome-h)); }
@supports (height: 100svh) { :root { --hero-h: calc(100svh - var(--chrome-h)); } }

/* Desktop and tablet landscape: three-column grid, collection picker pinned to the bottom. */
.hero {
  min-height: max(var(--hero-h), 520px);
  align-content: center;
}
.hero-studio,
.has-showroom.hero-studio {
  /* Space left after the hero's top padding (26px), reserved picker area (156px) and 3D controls (~50px). */
  height: clamp(300px, calc(var(--hero-h) - 250px), 760px);
}

@media (max-width: 1150px) {
  .hero-studio,
  .has-showroom.hero-studio { height: clamp(300px, min(calc(var(--hero-h) - 250px), 62vw), 680px); }
}

/* Portrait tablets: stack like mobile so the garment can use the full width and height. */
@media (min-width: 651px) and (max-width: 1024px) and (orientation: portrait) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 28px var(--page-gutter) 24px;
  }
  .hero-intro {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 24px;
  }
  .hero-intro .studio-label { grid-column: 1 / -1; margin-bottom: 14px; }
  .hero-intro h1 { font-size: 34px; margin: 0; }
  .hero-intro > p:not(.studio-label) { display: none; }
  .hero-intro .quiet-link { grid-column: 2; grid-row: 2; }
  .hero-studio,
  .has-showroom.hero-studio {
    flex: 1 1 auto;
    height: auto;
    min-height: 340px;
    width: 100%;
    max-width: 620px;
    margin: 12px auto 56px;
  }
  .feature-info {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    align-items: center;
  }
  .feature-info > * { grid-column: 1; }
  .feature-info h2 { margin-bottom: 6px; }
  .feature-info .feature-spec { margin-bottom: 8px; }
  .feature-info .feature-price { margin: 0; }
  .feature-info .primary-link { grid-column: 2; grid-row: 1 / 3; align-self: end; width: auto; min-width: 180px; }
  .feature-info .text-link { grid-column: 2; grid-row: 3 / 5; justify-self: center; align-self: start; margin: 0; }
  .hero-controls { position: relative; inset: auto; margin-top: 20px; display: block; }
  .selection-label { display: none; }
}

/* Phones: single column; the 3D stage grows to take whatever height is left. */
@media (max-width: 650px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: max(var(--hero-h), 560px);
  }
  .hero-studio,
  .has-showroom.hero-studio {
    flex: 1 1 auto;
    height: auto;
    min-height: 280px;
    max-height: 640px;
    width: 100%;
  }
}
@media (max-width: 370px) {
  .hero { min-height: max(var(--hero-h), 520px); }
  .hero-studio,
  .has-showroom.hero-studio { min-height: 250px; }
}

/* Landscape phones and very short windows: keep it usable rather than cramming it into the fold. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: var(--hero-h); }
  .hero-studio,
  .has-showroom.hero-studio { height: 300px; }
}

/* Navbar: with "Laundries" removed there is room for both remaining links on phones. */
@media (max-width: 650px) {
  .site-header nav a:last-child { display: inline-flex; align-items: center; }
}