/* ==========================================================================
   responsive.css — tablet and mobile adjustments

   Desktop / landscape: full-bleed split layouts sized to the screen.
   Narrow, portrait or very short screens ("stacked mode"): header and footer
   become solid bars, each slide scrolls vertically, the masonry image block
   leads the slide edge to edge, and text follows inside margins.
   Left/right navigation (buttons, keys, swipe) still moves between slides.
   ========================================================================== */

/* ---------- Large tablets / small laptops ---------- */

@media (max-width: 1180px) {
  .process {
    gap: var(--space-4);
  }

  .process__step:not(:last-child)::after {
    right: calc(var(--space-4) * -1);
    width: var(--space-4);
  }

  .capability-list {
    gap: var(--space-4) var(--space-5);
  }
}

/* ---------- Short landscape screens (split layout, ≤ 800px tall) ----------
   Tighter spacing and type so text-heavy slides fit without scrolling.
   Only tokens change; the layout is the same. */

@media (min-width: 901px) and (min-aspect-ratio: 1/1) and (max-height: 800px) {
  :root {
    --header-h: 3.25rem;
    --footer-h: 3.5rem;
    --stage-pad-block: 0.75rem;
    --space-fluid: clamp(0.6rem, 1.4vh, 1rem);
    --fs-heading: clamp(1.45rem, 1.1vw + 1.6vh + 0.2rem, 2.4rem);
    --fs-body: clamp(0.82rem, 0.2vw + 0.6vh + 0.4rem, 0.98rem);
    --fs-small: clamp(0.75rem, 0.12vw + 0.45vh + 0.4rem, 0.85rem);
    --lh-body: 1.45;
  }

  .eyebrow {
    margin-bottom: var(--space-2);
  }

  .scope-list {
    gap: 0.3rem var(--space-5);
  }

  .facts {
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-2);
  }
}

@media (min-width: 901px) and (min-aspect-ratio: 1/1) and (max-height: 660px) {
  :root {
    --header-h: 3rem;
    --footer-h: 3.25rem;
    --stage-pad-block: 0.5rem;
  }

  .work-item,
  .brand-row {
    padding-block: 0.3rem;
  }

  .project-card__media {
    margin-bottom: var(--space-2);
  }

  .note {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
  }

  .pending-tag {
    margin-bottom: var(--space-3);
  }

  .lead + .brand-list {
    margin-top: var(--space-3);
  }

  .subtitle__location {
    margin-top: 0;
  }

  .scope-list {
    font-size: var(--fs-small);
  }

  .facts,
  .body-copy {
    margin-bottom: var(--space-3);
  }
}

/* The Practice on short landscape screens: capability names only, so the
   statement, capabilities and team still fit without scrolling. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .capability-list--compact .capability__desc {
    display: none;
  }

  .capability-list--compact .capability__num {
    grid-row: auto;
  }
}

/* ---------- Stacked mode ---------- */

@media (max-width: 900px), (max-aspect-ratio: 1/1), (max-height: 540px) {

  /* Solid chrome bars; the stage sits between them */
  .js .deck {
    display: grid;
    grid-template-rows: var(--header-h) minmax(0, 1fr) var(--footer-h);
  }

  .js .deck__header,
  .js .deck__footer {
    position: relative;
    height: auto;
    background: var(--color-surface);
    transition: background-color var(--duration-slide) var(--ease-slide);
  }

  .js .deck__header {
    border-bottom: 1px solid var(--color-rule);
  }

  .js .deck__footer {
    border-top: 1px solid var(--color-rule);
  }

  .deck[data-theme="dark"] .deck__header,
  .deck[data-theme="dark"] .deck__footer {
    background: var(--color-charcoal);
    border-color: var(--color-rule-dark);
  }

  .brand,
  .deck__section,
  .counter {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .progress {
    top: -1px;
    bottom: auto;
    background: transparent;
  }

  .js .deck__stage {
    position: relative;
    inset: auto;
  }

  /* Single column: media first, edge to edge; then text in margins */
  .slide__inner {
    min-height: 0;
  }

  .layout-split,
  .layout-split--media-left,
  .layout-process {
    display: flex;
    flex-direction: column;
  }

  .layout-statement {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
    align-content: start;
    padding: var(--space-6) var(--gutter) var(--space-7);
  }

  .statement__body {
    padding-left: 0;
    border-left: 0;
  }

  .heading--statement {
    max-width: none;
  }

  .layout-split > .slide__media,
  .layout-process__media {
    order: -1;
  }

  .slide__text,
  .layout-split > .slide__text,
  .layout-split--media-left > .slide__text,
  .layout-process__head {
    padding: var(--space-6) var(--gutter) 0;
  }

  .layout-split > .slide__text {
    padding-bottom: var(--space-7);
  }

  .slide__text > :first-child {
    margin-top: 0;
  }

  .slide__text > :last-child {
    margin-bottom: 0;
  }

  /* Media blocks take a fixed proportion so the masonry keeps its shape */
  .slide__media,
  .layout-process__media {
    aspect-ratio: var(--m-ratio, 4 / 3);
    min-height: 0;
  }

  .slide__media:has(.media-grid--practice)     { --m-ratio: 1 / 1; }
  .slide__media:has(.media-grid--capabilities) { --m-ratio: 1 / 1; }
  .slide__media:has(.media-grid--oasis)        { --m-ratio: 4 / 5; }
  .slide__media:has(.media-grid--brazil)       { --m-ratio: 1 / 1; }
  .slide__media:has(.media-grid--park)         { --m-ratio: 1 / 1; }
  .slide__media:has(.media-grid--technical)    { --m-ratio: 1 / 1; }
  .slide__media:has(.media-grid--additional)   { --m-ratio: 4 / 5; }

  /* The Practice: stacked intro, capabilities, team */
  .layout-practice {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "caps"
      "team";
    align-content: start;
    gap: var(--space-6);
    padding: var(--space-6) var(--gutter) var(--space-7);
  }

  .practice__intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  /* Selected Projects: cards in two columns, page scrolls */
  .layout-portfolio {
    justify-content: flex-start;
    gap: var(--space-5);
    padding: var(--space-6) var(--gutter) var(--space-7);
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  .slide__media:has(.media-grid--ecosystem)    { --m-ratio: 1 / 1; }

  .layout-process__steps {
    padding: var(--space-6) var(--gutter) var(--space-7);
  }

  .process {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .process__step {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--space-3);
    padding: 0 0 var(--space-5) var(--space-4);
    border-top: 0;
    border-left: 2px solid var(--color-charcoal);
  }

  .process__step:last-child {
    padding-bottom: 0;
  }

  .process__step::before {
    top: 0.35em;
    left: -6px;
  }

  .process__step:not(:last-child)::after {
    display: none;
  }

  .process__num {
    grid-row: span 2;
    margin: 0;
    line-height: 1.6;
  }

  .heading {
    max-width: none;
  }

  .nav-hint {
    margin-top: var(--space-5);
  }

  .subtitle--cover {
    margin-bottom: var(--space-5);
  }
}

/* ---------- Ecosystem tree: vertical on narrow screens ----------
   One rail from the parent down the left; a short tick and dot per studio. */

@media (max-width: 760px) {
  .eco-tree {
    --eco-gap: var(--space-4);
    --eco-rail: 1.25rem;
  }

  .eco-tree__root {
    margin: 0 0 var(--eco-drop);
  }

  /* -1px compensates for the parent box's left border */
  .eco-tree__root::after {
    left: calc(var(--eco-rail) - 1.5px);
  }

  .eco-tree__branches {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--eco-gap);
    margin-left: var(--eco-rail);
  }

  .eco-tree__branches::before,
  .eco-tree__branches::after {
    display: none;
  }

  .eco-node {
    justify-items: start;
    padding: 0 0 0 1.5rem;
    text-align: left;
  }

  /* tick from the rail to each studio */
  .eco-node::before {
    top: 0.75rem;
    left: 0;
    width: 1rem;
    height: 1px;
  }

  /* rail segment: joins this studio to the one above (or to the parent) */
  .eco-node::after {
    content: "";
    position: absolute;
    left: -0.5px;
    top: calc(var(--eco-gap) * -1);
    bottom: 0;
    width: 1px;
    background: var(--eco-line);
  }

  .eco-node:first-child::after {
    top: 0;
  }

  .eco-node:last-child::after {
    bottom: auto;
    height: calc(var(--eco-gap) + 0.75rem);
  }

  .eco-node:first-child:last-child::after {
    height: 0.75rem;
  }

  .eco-node__name::before {
    top: calc(0.75rem - var(--eco-dot) / 2);
    left: calc(1rem - var(--eco-dot) / 2);
  }
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  :root {
    --gutter: 1.25rem;
  }

  .brand__tag {
    display: none;
  }

  /* Recreation Park: four image labels in a small block — lighter on phones */
  #recreation-park .ph__badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-list,
  .capability-list,
  .scope-list--2col,
  .facts,
  .facts--3col {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 400px) {
  .deck__section-num {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print: one slide per page ---------- */

@media print {
  .js body {
    overflow: visible;
  }

  .js .deck {
    position: static;
    display: block;
    height: auto;
  }

  .deck__header,
  .deck__footer,
  .skip-link {
    display: none !important;
  }

  .js .deck__stage {
    position: static;
    overflow: visible;
  }

  .js .slide {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    height: 100vh;
    page-break-after: always;
    break-after: page;
  }

  .slide__text {
    padding-top: var(--stage-pad-block);
    padding-bottom: var(--stage-pad-block);
  }
}