/* Studio (/soon) — page layout only; components, type and motion come from base.css.
   Breakpoints: tablet max-width 1279.98px, phone max-width 767.98px. */

/* ---------- C07 hero: statement line, gradient word alone on the next line ---------- */
.st-title { display: flex; flex-direction: column; align-items: center; }
.st-title .line { display: block; }
/* cream "Button w Icon" is 55 tall, the outline button 57 (Kakadu buttons): centre them on one axis */
.hero-c .btn-row { align-items: center; }
.st-soon { max-width: 758px; margin: 40px auto 0; }

/* ---------- C08 photo bento (1185×691): portrait left; one photo (--2) or two stacked (--3) on the right ---------- */
.st-bento {
  display: grid; gap: var(--gap); margin-top: 120px; text-align: left;
  grid-template-columns: minmax(0, 474fr) minmax(0, 691fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1185 / 691;
}
.st-bento .st-b1 { grid-row: 1 / 3; }
.st-bento--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); aspect-ratio: 16 / 9; }
.st-bento--1 .st-b1 { grid-row: auto; }
.st-bento--2 .st-b2 { grid-row: 1 / 3; }
.st-bento .media > img, .st-caps-photo > img { object-position: var(--pos, 50% 50%); }
.st-video { margin-top: var(--gap); }

/* ---------- C10 rotating H2 + numbered process ---------- */
.st-produce-title { max-width: 948px; }
.st-produce-title .line { display: block; }
.st-process { margin-top: 80px; }
.st-process-title { margin-bottom: 40px; }
.st-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
/* fallback: number top, label + text bottom-aligned */
.st-step { display: flex; flex-direction: column; min-height: 360px; }
.st-step-label { margin-top: auto; padding-top: 40px; }
.st-step-text { margin-top: 10px; }
.st-step-label, .st-step-text, .st-caps-card .checklist span { min-width: 0; overflow-wrap: break-word; }
/* subgrid: labels and texts share one baseline across a row of cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .st-steps { grid-template-rows: auto minmax(110px, auto) auto auto; }
    .st-steps > .st-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; min-height: 0; }
    .st-step .st-num { grid-row: 1; }
    .st-step-label { grid-row: 3; margin: 0; padding: 0; }
    .st-step-text { grid-row: 4; margin: 0; }
  }
  @media (min-width: 768px) and (max-width: 1279.98px) {
    /* 2×2: the text tracks are flexible, so both card rows get the height of the longest text */
    .st-steps { grid-template-rows: repeat(2, auto minmax(60px, auto) auto 1fr); }
  }
}

/* ---------- C12b capabilities card beside a photo (583 + 583) ---------- */
.st-caps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.st-caps-card .checklist { margin-top: 40px; }
.st-caps-card:only-child, .st-case-body:only-child { grid-column: 1 / -1; } /* no photo in data */

/* ---------- C20-style split case card (outlined, 1185×520) ---------- */
.st-case-card { padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 520px; }
.st-case-body { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.st-case-body .t-h2 { margin-top: 20px; }
.st-case-text { margin-top: 20px; max-width: 513px; }
.st-case-body .btn { margin-top: 40px; }
.st-case-media { position: relative; min-height: 100%; background: var(--ink); }
.st-case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- tablet ---------- */
@media (max-width: 1279.98px) {
  .st-bento { margin-top: 80px; }
  .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-step { min-height: 280px; }
  .st-case-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .st-case-media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 767.98px) {
  .st-bento { margin-top: 60px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; }
  .st-bento .st-b1 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 335 / 301; }
  .st-bento .st-b2, .st-bento .st-b3 { aspect-ratio: 1; }
  .st-bento--2 .st-b2 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 335 / 301; }
  .st-produce-title .rot-word { white-space: pre-wrap; }
  /* under ~340px the longest word (FR "tables rondes") would wrap and the heading would jump on every swap: scale it instead */
  .st-produce-title { font-size: min(40px, calc((100vw - 40px) / 7.5)); }
  .st-process { margin-top: 40px; }
  .st-process-title { margin-bottom: 20px; }
  .st-steps { grid-template-columns: minmax(0, 1fr); }
  .st-step { min-height: 0; }
  .st-steps > .st-step { padding: 20px; } /* the gradient card matches its cream siblings in the stack */
  .st-caps-grid { grid-template-columns: minmax(0, 1fr); }
  .st-caps-photo { aspect-ratio: 1; }
  .st-case-body { padding: 20px; }
  .st-case-body .t-h2 { font-size: 48px; } /* C20 M: H2 48/48 */
  .st-case-body .btn { margin-top: 30px; }
  .st-case-media { aspect-ratio: 335 / 350; }
}