/* css/page-contact.css : contact.html. Owner: wave B.
   Body composition: mahwah-int/05 letterhead contact sheet (centred NAP column beside a real photo,
   the live map strip closing the sheet inside its border).
   Adapted spec: v2-specs/interiors-spec-contact.md (delta ids CT1-CT13 cited inline).
   Loaded LAST, after tokens.css + site.css + interior.css. Every selector is scoped to this
   page's own .ct-* classes inside .sheet-body; the chassis (.sheet, .pill, the prefooter band) is
   used as is, never restyled. */

/* ------------------------------------------------------------------ 1 the split
   Recipe: two .x-1-2 floats, 48% + 4% gutter + 48% of the well (540.5 / 45 / 540.5 at 1440);
   height content-driven (no vh anywhere) */
.ct-split { display: grid; grid-template-columns: 48fr 4fr 48fr; align-items: start; }
.ct-col--nap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ct-col--media { grid-column: 3; }

/* ------------------------------------------------------------------ 2 the letterhead (left column, all centred)
   Recipe: Playfair 27.4 pale name; glyph + ~13px uppercase labels (glyphs dropped: CT1); values
   16/27.2; group break = one 27.2 line + ~30 */
.ct-name { font: 400 27.424px/1.25 var(--font-display); color: var(--steel-pale); text-wrap: balance; }
.ct-doc { margin-top: 2px; font: 600 15px/22px var(--font-body); color: var(--ink); }          /* CT4 */
/* Gelasio micro-heads, the engraved-label read of the recipe's caps (CT1, size CT9) */
.ct-label { margin-top: 20px; font: 400 15px/27.2px var(--font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.ct-label--gap { margin-top: 30px; }
.ct-val { font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
/* 44px hit areas that keep the recipe's 27.2 line pitch: the negative block margin cancels the
   extra (44 - 27.2) / 2 = 8.4px, so the line box counts 27.2 while the target stays 44 tall */
.ct-link, .ct-tel {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -8.4px;
  color: var(--steel); text-decoration: underline; text-underline-offset: 2px;
}
.ct-link { font: 400 16px/27.2px var(--font-body); }
.ct-link:hover, .ct-tel:hover { color: var(--ink); }
.ct-val .ct-tel { vertical-align: middle; }
/* hours: 7 rows "Day | time", the bar in the structural grey, hidden from screen readers */
.ct-hours { margin: 0; padding: 0; list-style: none; font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
.ct-sep { margin: 0 4px; color: var(--rule); }
.ct-appt { margin-top: 4px; }                          /* CT3 */
/* the template's fixed 400px "important CTA", auto-centred in the column, as the FLAVOR atom (CT6) */
.ct-btn { width: min(400px, 100%); margin-top: 30px; }

/* ------------------------------------------------------------------ 3 the right column
   Recipe: a 4:3 photo at the column width, top = content top; the white under it carries the T1
   driving directions (CT5) */
.ct-photo { margin: 0; }
.ct-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.ct-dir { margin-top: 28px; }
.ct-dir .ct-label { margin-top: 0; }
.ct-dir__text { margin-top: 4px; font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }

/* ------------------------------------------------------------------ 4 the map strip
   Recipe: 1198x300, edge to edge inside the sheet border, button + 61, the sheet's last band.
   Width = the sheet's inner width = the well / 0.94 (chassis: the well is 94% of it); height is
   the recipe's FIXED 300 at every viewport (Pass 1b: JS-set, not a ratio). The negative bottom
   margin cancels the chassis end gap and the sheet's bottom padding, so the strip meets the
   bottom border like the recipe's (CT7) */
.ct-map {
  display: block; width: calc(100% / 0.94); max-width: none; height: 300px;
  margin: 60px 0 calc(-1 * (var(--sheet-end-gap) + var(--sheet-pad-bottom))) calc(50% - 50% / 0.94);
  border: 0; border-radius: 0; background: rgb(229, 227, 223);
}

/* ------------------------------------------------------------------ one column to 767 (CT10)
   mahwah-mobile/06: text -> photo -> button -> map; the recipe's unpinned re-split (391-766) is
   overridden by holding one column to the phone-sheet cliff. The columns dissolve so the button
   can follow the photo, as in the recipe's phone order */
@media (max-width: 767px) {
  .ct-split { grid-template-columns: 1fr; }
  .ct-col { display: contents; }
  .ct-nap { order: 1; text-align: center; }
  .ct-photo { order: 2; margin-top: 24px; }
  .ct-btn { order: 3; justify-self: center; width: auto; margin-top: 24px; }   /* CT13 */
  .ct-dir { order: 4; }
  .ct-map { margin-top: 34px; }
}

/* ------------------------------------------------------------------ phone (<= 600, house system) */
@media (max-width: 600px) {
  .ct-name { font-size: 24px; }                        /* CT11: explicit */
  .ct-photo { margin-inline: calc(50% - var(--sheet-inner) / 2); }   /* full-bleed in the sheet */
  .ct-map { width: var(--sheet-inner); margin-left: calc(50% - var(--sheet-inner) / 2); }
}