/* ===========================================================================
   THE BODY - Visit, phone + tablet (<= 1079px). On top of css/mobile.css.
   Adaptation (no mobile frames in Figma). See MOBILE-CONTRACT.md.
   Section ids from css/visit.css. Base rules = tablet + phone; the phone-only
   (<= 599px) tweaks are at the end of the file.

   Several sections are CSS grids with explicit rows: Figma draws a box (arch,
   photo slot, card, dark panel) as an EMPTY element followed by its texts, so
   the box and its texts are given the same grid cells to keep them together.
   =========================================================================== */

/* tracked labels keep one line (their Figma box is a few px narrower than the
   browser's tracked text) */
.page .sec:not(.footer) .nw { width: auto; }

/* section rhythm: ~72px between sections */
.page .sec[data-f="301:42"],
.page .sec[data-f="302:2"],
.page .sec[data-f="302:44"],
.page .sec[data-f="302:83"],
.page .sec[data-f="303:2"],
.page .sec[data-f="303:29"] { padding-top: 36px; padding-bottom: 36px; }

/* ---------- 01 hero (300:3): status pill, address, buttons, then the arch photo ---------- */
.page .sec[data-f="300:3"] {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 12px; row-gap: 16px; align-items: start; justify-items: start;
  padding-bottom: 48px;
}
.page .sec[data-f="300:3"] > .a { grid-column: 1 / -1; min-width: 0; }
.page .sec[data-f="300:3"] > .status-pill { display: none; }                   /* the text below carries the pill itself */
.page .sec[data-f="300:3"] > [data-f="300:30"] {
  grid-row: 1;
  white-space: nowrap; padding: 10px calc(18px - 0.096em) 10px 18px;           /* Figma drops the trailing tracking */
  border: 1px solid var(--mute); border-radius: 999px; background: var(--paper);
}
/* three address lines, each kept on one line: size follows the column */
.page .sec[data-f="300:3"] > h1 {
  grid-row: 2; margin-top: 8px;
  font-size: min(52px, calc((100cqw - 2 * var(--gut)) / 9.9));
  line-height: 1.1;
}
.page .sec[data-f="300:3"] > [data-f="300:34"] { grid-row: 3; text-wrap: balance; }      /* no lone "parking." */
.page .sec[data-f="300:3"] > [data-f="300:37"] { grid-row: 4; grid-column: 1; margin-top: 8px; }
.page .sec[data-f="300:3"] > [data-f="300:39"] { grid-row: 4; grid-column: 2; margin-top: 8px; }
.page .sec[data-f="300:3"] > .arch-slot {
  grid-row: 5; justify-self: center;
  width: min(100%, 460px); height: auto; aspect-ratio: 460 / 600;
  margin-top: 32px;
}

/* ---------- 02 map + essentials (301:2): one rounded card, map on top, dark panel below ----------
   Columns: panel padding | label | value | panel padding. The empty .essentials
   div is the panel background, spanning every row under the map. */
.page .sec[data-f="301:2"] {
  display: grid; grid-template-columns: 24px 104px minmax(0, 1fr) 24px;
  column-gap: 0; row-gap: 0; align-items: start;
  padding: 8px max(10px, calc(50cqw - 330px)) 36px;
}
.page .sec[data-f="301:2"] > * { min-width: 0; grid-column: 2; }
.page .sec[data-f="301:2"] > [data-f="301:3"] {
  grid-area: 1 / 1 / 2 / -1;
  width: auto; height: auto; aspect-ratio: 912 / 520;
  border-radius: 24px 24px 0 0; overflow: hidden;
  background: #e7e3d2;                                    /* the SVG's own ground, under its rounded left corners */
}
.page .sec[data-f="301:2"] > [data-f="301:3"] > img { object-fit: cover; }
.page .sec[data-f="301:2"] > .essentials {
  grid-area: 2 / 1 / 14 / -1; align-self: stretch;
  width: auto; height: auto; border-radius: 0 0 24px 24px;
}
.page .sec[data-f="301:2"] > [data-f="301:17"] { grid-area: 2 / 2 / 3 / 4; margin: 30px 0 20px; }
.page .sec[data-f="301:2"] > [data-f="301:21"] { grid-row: 3; }
.page .sec[data-f="301:2"] > [data-f="301:24"] { grid-row: 5; }
.page .sec[data-f="301:2"] > [data-f="301:27"] { grid-row: 7; }
.page .sec[data-f="301:2"] > [data-f="301:30"] { grid-row: 9; }
.page .sec[data-f="301:2"] > [data-f="301:33"] { grid-row: 11; }
.page .sec[data-f="301:2"] > p.up { padding-top: 5px; }                         /* label on the value's first line */
.page .sec[data-f="301:2"] > [data-f="301:22"] { grid-area: 3 / 3; }
.page .sec[data-f="301:2"] > [data-f="301:25"] { grid-area: 5 / 3; }
.page .sec[data-f="301:2"] > [data-f="301:28"] { grid-area: 7 / 3; }
.page .sec[data-f="301:2"] > [data-f="301:31"] { grid-area: 9 / 3; }
.page .sec[data-f="301:2"] > [data-f="301:34"] { grid-area: 11 / 3; }
.page .sec[data-f="301:2"] > .t.hl { width: auto; overflow-wrap: anywhere; }
.page .sec[data-f="301:2"] > a.t.hl { justify-self: start; padding: 10px 0; margin: -10px 0; }   /* 44px tap rows, same rhythm */
.page .sec[data-f="301:2"] > .kv-rule { grid-column: 2 / 4; margin: 15px 0; }
.page .sec[data-f="301:2"] > [data-f="301:20/rule"] { grid-row: 4; }
.page .sec[data-f="301:2"] > [data-f="301:23/rule"] { grid-row: 6; }
.page .sec[data-f="301:2"] > [data-f="301:26/rule"] { grid-row: 8; }
.page .sec[data-f="301:2"] > [data-f="301:29/rule"] { grid-row: 10; }
.page .sec[data-f="301:2"] > [data-f="301:32/rule"] { grid-row: 12; }
.page .sec[data-f="301:2"] > .btn { grid-row: 13; grid-column: 2 / 4; justify-self: start; margin: 26px 0 30px; }
.page .sec[data-f="301:2"] > [data-f="301:40"] { margin-left: calc(123 * var(--u) + 10px); }

/* ---------- 03 getting here (301:42), rebuilt 2026-10-28: label, heading, three steps ----------
   Each step is one box (.gh-step): ring beside its title, copy under the title.
   Optional photos (.gh-photos, from STEPS in build_visit.py) go 2-up below. */
.page .sec[data-f="301:42"] { padding-top: 64px; }
.page .sec[data-f="301:42"] > h2 { margin-bottom: 10px; }
.page .sec[data-f="301:42"] > h2 br { display: none; }                         /* desktop break only; balance wraps it here (no lone "PARKING.") */
.page .sec[data-f="301:42"] .gh-step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 18px; row-gap: 6px; align-items: center;
  width: 100%; height: auto; margin-top: 10px;
}
.page .sec[data-f="301:42"] .gh-step > * { width: auto; min-width: 0; }
.page .sec[data-f="301:42"] .gh-step > .ring44 { grid-area: 1 / 1; }
.page .sec[data-f="301:42"] .gh-step > h3 { grid-area: 1 / 2; }
.page .sec[data-f="301:42"] .gh-step > p { grid-area: 2 / 2; align-self: start; }
.page .sec[data-f="301:42"] .gh-step .tel { display: inline-block; padding: 9px 0; margin: -9px 0; }   /* 44px tap row, same line */
.page .sec[data-f="301:42"] .gh-photos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  width: 100%; height: auto; margin-top: 16px;
}
.page .sec[data-f="301:42"] .gh-photo { width: 100%; align-self: start; border-radius: 16px; }   /* start: WebKit lets stretch beat aspect-ratio */

/* ---------- 04 ways to reach us (302:2): four cards, 2-up on tablet, stacked on phone ----------
   Each card = the empty .way box (the link) + label, value, note and arrow on top
   of it. Columns per card: padding | copy | arrow | padding; a 12px gutter column
   between the two cards. Card position comes from --r0..3 (rows) and --c0..4
   (columns), set per card. */
.page .sec[data-f="302:2"] {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 24px 12px 24px minmax(0, 1fr) auto 24px;
  column-gap: 0; row-gap: 10px; align-items: start;
}
.page .sec[data-f="302:2"] > * { grid-column: 1 / -1; min-width: 0; }
.page .sec[data-f="302:2"] > [data-f="302:5"] { margin-bottom: 18px; }
.page .sec[data-f="302:2"] > :is([data-f="302:8"], [data-f="302:9"], [data-f="302:11"], [data-f="302:15"], [data-f="302:16"]) {
  --r0: 3; --r1: 4; --r2: 5; --r3: 6; --c0: 1; --c1: 2; --c2: 3; --c3: 4; --c4: 5;
}
.page .sec[data-f="302:2"] > :is([data-f="302:17"], [data-f="302:18"], [data-f="302:20"], [data-f="302:24"], [data-f="302:25"]) {
  --r0: 3; --r1: 4; --r2: 5; --r3: 6; --c0: 6; --c1: 7; --c2: 8; --c3: 9; --c4: 10;
}
.page .sec[data-f="302:2"] > :is([data-f="302:26"], [data-f="302:27"], [data-f="302:29"], [data-f="302:33"], [data-f="302:34"]) {
  --r0: 6; --r1: 7; --r2: 8; --r3: 9; --c0: 1; --c1: 2; --c2: 3; --c3: 4; --c4: 5;
}
.page .sec[data-f="302:2"] > :is([data-f="302:35"], [data-f="302:36"], [data-f="302:38"], [data-f="302:42"], [data-f="302:43"]) {
  --r0: 6; --r1: 7; --r2: 8; --r3: 9; --c0: 6; --c1: 7; --c2: 8; --c3: 9; --c4: 10;
}
.page .sec[data-f="302:2"]:not(:has(> [data-f="302:26"])) > :is([data-f="302:35"], [data-f="302:36"], [data-f="302:38"], [data-f="302:42"], [data-f="302:43"]) {
  --c0: 1; --c1: 2; --c2: 3; --c3: 4; --c4: 5;                                  /* no Email card (STUDIO_EMAIL empty): Booking moves into its place */
}
.page .sec[data-f="302:2"] > .way {
  grid-area: var(--r0) / var(--c0) / var(--r3) / var(--c4);
  width: auto; height: auto; align-self: stretch; border-radius: 20px;
}
.page .sec[data-f="302:2"] > .way + p {                                         /* label */
  grid-area: var(--r0) / var(--c1) / auto / var(--c3);
  margin-top: 26px; pointer-events: none;                                       /* the whole card is the link */
}
.page .sec[data-f="302:2"] > .way + p + p {                                     /* value */
  grid-area: var(--r1) / var(--c1) / auto / var(--c3); overflow-wrap: anywhere;
}
.page .sec[data-f="302:2"] > .way + p + p + p {                                 /* note */
  grid-area: var(--r2) / var(--c1); margin: 16px 0 26px;
}
.page .sec[data-f="302:2"] > .way + p + p + p + img {                           /* arrow, on the note's line */
  grid-area: var(--r2) / var(--c2); justify-self: end;
  width: 14px; height: 10px; margin: 20px 0 0 12px;
}

/* ---------- 05 hours (302:44) ----------
   greedy wrap (balance broke the line before the "·", so it started a line): tablets read
   "OPEN SEVEN DAYS · BY / APPOINTMENT"; phones get an 8em measure (end of file) for
   "OPEN SEVEN / DAYS · BY / APPOINTMENT" */
.page .sec[data-f="302:44"] > h2 { text-wrap: wrap; }
.page .sec[data-f="302:44"] > [data-f="302:50"] { margin-top: 4px; }

/* ---------- 06 write to us (302:83): the Netlify form, fields stacked in a grid ----------
   Tablet: Name + Phone share a row, the note sits beside Send (as in Figma).
   Phone (end of file): one full-width field per row, full-width Send. */
.page .sec[data-f="302:83"] [data-f="302:91"] a {
  padding: 8px 0;                                                                /* taller tap box, same line */
  text-decoration: underline 1px; text-underline-offset: 3px;
}
.page .sec[data-f="302:83"] .enquiry { position: relative; width: 100%; margin-top: 18px; }
.page .sec[data-f="302:83"] .form-ui {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; align-items: center;
}
.page .sec[data-f="302:83"] .form-ui > * { grid-column: 1 / -1; min-width: 0; }
.page .sec[data-f="302:83"] .field {
  width: 100%; height: 56px;
  padding: 0 20px; border-radius: 14px;
  font-size: 16px; line-height: 1.3;                                             /* 16px: iOS Safari won't zoom the page on focus */
}
.page .sec[data-f="302:83"] .field-select { padding-right: 84px; }
.page .sec[data-f="302:83"] textarea.field { height: auto; min-height: 156px; padding: 16px 20px; resize: vertical; }
.page .sec[data-f="302:83"] [data-f="302:94"] { grid-area: 1 / 1; }
.page .sec[data-f="302:83"] [data-f="302:96"] { grid-area: 1 / 2; }
.page .sec[data-f="302:83"] [data-f="302:98"] { grid-row: 2; }
.page .sec[data-f="302:83"] [data-f="302:100"] { grid-row: 3; }
.page .sec[data-f="302:83"] [data-f="302:102"] { grid-row: 3; justify-self: end; width: auto; margin-right: 20px; }
.page .sec[data-f="302:83"] [data-f="302:103"] { grid-row: 4; }
.page .sec[data-f="302:83"] [data-f="302:107"] { grid-area: 5 / 1; width: auto; margin-top: 8px; }
.page .sec[data-f="302:83"] [data-f="302:108"] { grid-area: 5 / 2; justify-self: end; margin-top: 8px; }
/* optional Netlify reCAPTCHA (FORM_RECAPTCHA in build_visit.py): its own row above the note + Send */
.page .sec[data-f="302:83"] .form-captcha { grid-row: 5; width: 304px; height: 78px; margin-top: 4px; }
.page .sec[data-f="302:83"] .form-ui:has(.form-captcha) [data-f="302:107"] { grid-row: 6; }
.page .sec[data-f="302:83"] .form-ui:has(.form-captcha) [data-f="302:108"] { grid-row: 6; }
/* sent (?sent=1): the thank-you replaces the fields instead of floating over an empty gap */
.page .sec[data-f="302:83"] .enquiry.is-sent .form-ui { display: none; }
.page .sec[data-f="302:83"] .form-sent {
  width: 100%;
  padding: 30px 26px; border: 1px solid var(--hair); border-radius: 20px; background: #f6f5ec;
  text-wrap: balance;
}

/* ---------- 07 coming for the first time (303:2): heading, intro, then the shared
   accordion (css/faq.css + the .faq rules in mobile.css) ---------- */
.page .sec[data-f="303:2"] > h2 { margin-bottom: 0; }
.page .sec[data-f="303:2"] .faq-a-in a { display: inline-block; padding: 11px 0; margin: -11px 0; }   /* 44px tap row, same line */

/* ---------- 08 closing (303:29): copy, buttons, then the photo collage ---------- */
.page .sec[data-f="303:29"] {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 12px; row-gap: 16px; align-items: start; justify-items: start;
  padding-bottom: 64px;
}
.page .sec[data-f="303:29"] > * { grid-column: 1 / -1; min-width: 0; }
.page .sec[data-f="303:29"] > [data-f="303:31"] { grid-row: 1; }
.page .sec[data-f="303:29"] > h2 { grid-row: 2; }
.page .sec[data-f="303:29"] > [data-f="303:35"] { grid-row: 3; }
.page .sec[data-f="303:29"] > [data-f="303:38"] { grid-row: 4; grid-column: 1; margin-top: 8px; }
.page .sec[data-f="303:29"] > [data-f="303:40"] { grid-row: 4; grid-column: 2; margin-top: 8px; }
.page .sec[data-f="303:29"] > [data-f="388:31"] {
  grid-row: 5; justify-self: end;
  width: min(74%, 400px); margin: 36px max(0px, calc(50% - 240px)) 64px 0;
  border-radius: 20px;
}
.page .sec[data-f="303:29"] > [data-f="303:47"] {
  grid-row: 5; justify-self: start; align-self: end; z-index: 1;
  width: min(44%, 230px); margin-left: max(0px, calc(50% - 270px));
  border-radius: 20px;
}
.page .sec[data-f="303:29"] > [data-f="303:47"] > img { left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.page .sec[data-f="303:29"] > [data-f="303:43"] {
  grid-row: 5; justify-self: end; align-self: end; z-index: 2;
  width: 150px; height: 150px;
  margin: 0 calc(max(0px, 50% - 240px) - 70px) 10px 0;          /* over the big photo's bottom-right corner */
}

/* ---------- footer: "Team" is a 32px-wide word; give every link a 44px-wide tap box ---------- */
.page .footer.sec a.t { min-width: 44px; }

/* ===========================================================================
   PHONES (<= 599px)
   =========================================================================== */
@media (max-width: 599px) {
  /* 01: full-width buttons, stacked; the arch takes the column */
  .page .sec[data-f="300:3"] > [data-f="300:37"],
  .page .sec[data-f="300:3"] > [data-f="300:39"] { grid-column: 1 / -1; justify-self: stretch; width: auto; }
  .page .sec[data-f="300:3"] > [data-f="300:39"] { grid-row: 5; margin-top: 0; }
  .page .sec[data-f="300:3"] > .arch-slot { grid-row: 6; margin-top: 24px; }
  .page .sec[data-f="300:3"] > .arch-slot { width: 100%; }

  /* 02: a taller map card, zoomed on the studio pin (pin at 49% / 43% of the SVG) */
  .page .sec[data-f="301:2"] { grid-template-columns: 22px 92px minmax(0, 1fr) 22px; }
  .page .sec[data-f="301:2"] > [data-f="301:3"] { aspect-ratio: 5 / 4; }
  .page .sec[data-f="301:2"] > [data-f="301:3"] > img { scale: 1.22; transform-origin: 49% 43%; }

  /* 04: one card per row */
  .page .sec[data-f="302:2"] { grid-template-columns: 22px minmax(0, 1fr) auto 22px; }
  .page .sec[data-f="302:2"] > :is([data-f="302:17"], [data-f="302:18"], [data-f="302:20"], [data-f="302:24"], [data-f="302:25"]) {
    --r0: 6; --r1: 7; --r2: 8; --r3: 9; --c0: 1; --c1: 2; --c2: 3; --c3: 4; --c4: 5;
  }
  .page .sec[data-f="302:2"] > :is([data-f="302:26"], [data-f="302:27"], [data-f="302:29"], [data-f="302:33"], [data-f="302:34"]) {
    --r0: 9; --r1: 10; --r2: 11; --r3: 12;
  }
  .page .sec[data-f="302:2"] > :is([data-f="302:35"], [data-f="302:36"], [data-f="302:38"], [data-f="302:42"], [data-f="302:43"]) {
    --r0: 12; --r1: 13; --r2: 14; --r3: 15; --c0: 1; --c1: 2; --c2: 3; --c3: 4; --c4: 5;
  }
  .page .sec[data-f="302:2"] > .way + p { margin-top: 22px; }
  .page .sec[data-f="302:2"] > .way + p + p + p { margin: 12px 0 22px; }
  .page .sec[data-f="302:2"] > .way + p + p + p + img { margin-top: 16px; }

  /* 06: one field per row, full-width Send */
  .page .sec[data-f="302:83"] [data-f="302:94"] { grid-area: 1 / 1 / auto / -1; }
  .page .sec[data-f="302:83"] [data-f="302:96"] { grid-area: 2 / 1 / auto / -1; }
  .page .sec[data-f="302:83"] [data-f="302:98"] { grid-row: 3; }
  .page .sec[data-f="302:83"] [data-f="302:100"],
  .page .sec[data-f="302:83"] [data-f="302:102"] { grid-row: 4; }
  .page .sec[data-f="302:83"] [data-f="302:103"] { grid-row: 5; }
  .page .sec[data-f="302:83"] [data-f="302:107"] { grid-area: 6 / 1 / auto / -1; margin-top: 4px; }
  .page .sec[data-f="302:83"] [data-f="302:108"] { grid-area: 7 / 1 / auto / -1; justify-self: stretch; width: auto; height: 56px; margin-top: 4px; }
  .page .sec[data-f="302:83"] .form-sent { font-size: 25px; padding: 26px 22px; }
  .page .sec[data-f="302:83"] .form-captcha { grid-row: 6; }
  .page .sec[data-f="302:83"] .form-ui:has(.form-captcha) [data-f="302:107"] { grid-row: 7; }
  .page .sec[data-f="302:83"] .form-ui:has(.form-captcha) [data-f="302:108"] { grid-row: 8; }

  /* 08: full-width buttons, stacked */
  .page .sec[data-f="303:29"] > [data-f="303:38"],
  .page .sec[data-f="303:29"] > [data-f="303:40"] { grid-column: 1 / -1; justify-self: stretch; width: auto; }
  .page .sec[data-f="303:29"] > [data-f="303:40"] { grid-row: 5; margin-top: 0; }
  .page .sec[data-f="303:29"] > [data-f="388:31"],
  .page .sec[data-f="303:29"] > [data-f="303:47"],
  .page .sec[data-f="303:29"] > [data-f="303:43"] { grid-row: 6; }
  .page .sec[data-f="303:29"] > [data-f="303:43"] { width: 120px; height: 120px; margin-right: -46px; }

  /* 05 */
  .page .sec[data-f="302:44"] > h2 { max-width: 8em; }

  /* 04 without the Email card: Booking follows Instagram */
  .page .sec[data-f="302:2"]:not(:has(> [data-f="302:26"])) > :is([data-f="302:35"], [data-f="302:36"], [data-f="302:38"], [data-f="302:42"], [data-f="302:43"]) {
    --r0: 9; --r1: 10; --r2: 11; --r3: 12;
  }

  /* 03: steps a touch tighter */
  .page .sec[data-f="301:42"] .gh-step { column-gap: 14px; }
}