/* contact.html page styles. Owned by wave D (interiors-plan.md); loaded after
   tokens.css, site.css and interior.css on contact.html only. Shared selectors
   (chrome, .sheet, .canvas-wrap, .int-*, .contact) are wave A's: never restyle
   them here; file a request to the main session instead.

   Recipe: mvendo-int/08 contact cards (v2-specs/interiors-spec-contact.md).
   Fixed at all desktop viewports (Pass 1b): 1000 well, 50% columns, gap 15,
   left card = calc(50% - 7.5px), right column uncarded, hours = the homepage
   global .hours-card reused as-is (site.css rules, markup identical). The band
   below the sheet is the stamped CONTACT-BAND (never styled here). */

.ct-page {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px;
  align-items: stretch;
}

/* ---- tall NAP paper card ---- */
.cp-card {
  background: #fff; border-radius: var(--radius-sheet); box-shadow: var(--shadow-sheet);
  padding: 10px 10px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; text-align: center; min-width: 0;
}
.cp-card p { font-size: 18px; line-height: 1.5; }
.cp-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 40px; line-height: 1.2; color: var(--teal-deep);
  margin: 0 0 -18px;                               /* name + doctor line read as one lockup */
}
.cp-doctor { font-weight: 700; color: var(--teal-deep); }
.cp-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; margin-bottom: 4px;
}
.cp-head svg { width: 20px; height: 20px; flex: none; color: var(--teal); }
.cp-link, .cp-inline {
  color: var(--teal); text-decoration: underline; font-size: 18px;
}
.cp-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  overflow-wrap: anywhere;
}
.cp-link svg { width: 20px; height: 20px; flex: none; }
.cp-inline { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 44px hit height */
.cp-pill { width: 350px; max-width: 100%; }

/* ---- uncarded utility column ---- */
.cp-util {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding-top: 25px; min-width: 0;
}
.cp-photo { margin: 0; width: 462.5px; max-width: 100%; }
.cp-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 570 / 456;
  border-radius: 20px; box-shadow: var(--shadow-sheet);
}
.cp-way { font-size: 18px; line-height: 1.5; max-width: 440px; text-align: center; }
.cp-hours { width: var(--nap-card-w); max-width: 100%; }
.cp-hours .hours-card { margin-top: 0; }           /* spacing comes from the column gap */

/* ---- stack (house <=900; mvendo stacks the contact block at 1023) ---- */
@media (max-width: 900px) {
  .ct-page { grid-template-columns: 1fr; row-gap: 32px; }
  .cp-card { padding: 30px 10px; }
  .cp-util { padding-top: 0; }
}

/* ---- phone (mvendo-mobile/08: one centred column, frozen body) ---- */
@media (max-width: 600px) {
  .ct-page { row-gap: 24px; }
  .cp-card { padding: 24px 10px 30px; gap: 24px; }
  .cp-name { font-size: 32px; margin-bottom: -14px; }
  .cp-pill { width: 100%; max-width: 350px; }
  .cp-util { gap: 24px; }
  .cp-photo { width: auto; max-width: none; margin: 0 -12px; align-self: stretch; }  /* sheet-bleed */
  .cp-photo img { border-radius: 0; box-shadow: none; }
  .cp-hours { width: 100%; }
}

/* ==== MAIN-SESSION RULING (Wave R, 2026-09-24) ====
   The injected CONTACT-BAND duplicates the NAP and hours cards already shown
   in this page's own sheet (Wave D report, item 1). Page-scoped fix: this file
   loads only on contact.html, so the chrome/band BYTES stay identical across
   all pages while the duplicate column is hidden here and the form centers. */
.contact .ct-cards { display: none; }
.contact .ct-well { justify-content: center; }

/* ==== OWNER RULING (2026-09-25, revised): interactive map inside .ct-page ====
   DOM order is card -> map -> utility column, so the phone stack is simply the
   source order (card, map, storefront photo, wayfinding, hours). Above 600 the
   items are placed explicitly on the .ct-page grid: info columns on row 1, the
   map on a full-width row under them (grid-column 1 / -1 = the 1000 column,
   edges aligned with the card and utility column). Height = site.css
   .map-strip recipe (400 desktop, 280 phone). The band's bottom strip would
   duplicate the map: hidden on this page only (band bytes stay identical). */
.cp-map {
  height: 400px; min-width: 0;
  border-radius: var(--radius-sheet); overflow: hidden; box-shadow: var(--shadow-sheet);
  background: var(--teal-mist);                  /* holds the box while Google paints */
}
.cp-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact .map-strip { display: none; }

@media (min-width: 901px) {
  /* Owner ruling (2026-09-25, rev 3): the map fills the left column under the
     card instead of the card stretching to the utility column's height.
     Rows auto + 1fr: the card sizes to its content (row 1); the utility column
     spans both rows and sets the grid height; the 1fr row gives the map
     exactly what is left, so both columns bottom-align with no white gap. */
  .ct-page { grid-template-rows: auto 1fr; row-gap: 30px; }
  .cp-card { grid-column: 1; grid-row: 1; padding: 30px 10px; }
  .cp-util { grid-column: 2; grid-row: 1 / span 2; }
  .cp-map  { grid-column: 1; grid-row: 2; height: auto; min-height: 260px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* single stacked column: info first, map after (desktop reading order) */
  .cp-card { grid-row: 1; }
  .cp-util { grid-row: 2; }
  .cp-map  { grid-row: 3; }
}
@media (max-width: 600px) {
  /* source order; sheet-bleed to the side edges (same device as .cp-photo) */
  .cp-map { height: 280px; margin: 0 -12px; border-radius: 0; box-shadow: none; }
}