/* ==========================================================================
   Eleganz Kids International Preschool — Contact page
   Loads after style.css. The page banner and the card/tint system are shared
   components and live there; the three detail cards, the enquiry block and
   the map strip are defined here.

   The enquiry block follows the approved reference: a layered pair of photos
   with a badge over them on the left, and a placeholder-only form on the
   right whose fields carry their icon inside the box. Those fields still have
   real <label>s — visually hidden, but read out — because a placeholder
   vanishes the moment someone starts typing and a form with nothing but
   placeholders is unusable with a screen reader.

   This is the site's first form, so the field styling below is new.
   ========================================================================== */

/* ------------------------------------------------------------ detail cards */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(36px, 4vw, 56px);
}

.contact-card h3 { margin-bottom: var(--sp-3); }
.contact-card p,
.contact-card address {
  margin: 0;
  font-size: 15.5px;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-muted);
}
.contact-card .link-arrow { margin-top: var(--sp-3); }
/* The mail address is long enough to overflow a narrow card otherwise. */
.contact-card .link-arrow--mail { word-break: break-word; }

/* The enquiry block — the photo collage, the two-column split it sits in and
   the form itself — all live in style.css now. Contact and Admissions both
   close with it, so none of it is this page's to own. What is left here is
   the detail cards above and the map strip below. */

/* ------------------------------------------------- enquiry thank-you page */
/* thank-you.html, where the form's `_next` lands the visitor. It loads this
   stylesheet because it is the other half of the enquiry flow. */
.thanks {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* A tick in the brand green, sized like an illustration rather than an icon —
   it is the first thing that has to say "that worked". */
.thanks-mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-6);
  border-radius: 50%;
  background: var(--green-50);
  border: 2px solid var(--teal-300);
  color: var(--green-700);
}
.thanks-mark svg { width: 40px; height: 40px; }
/* 404.html reuses this block. A green tick would be saying "that worked" on a
   page that exists to say the opposite, so the not-found variant is a neutral
   peach with a magnifier in it. */
.thanks-mark--lost {
  background: var(--peach-50);
  border-color: var(--peach-200);
  color: var(--peach-600);
}

.thanks h1 {
  margin-top: var(--sp-2);
  font-size: clamp(28px, 3.4vw, 42px);
}
.thanks p {
  margin-top: var(--sp-5);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.thanks p a { font-weight: 700; color: var(--green-800); }
.thanks p a:hover { color: var(--pink-800); }

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: clamp(28px, 3.4vw, 42px);
}

/* ------------------------------------------------------------- map strip */
/* Full-bleed, so it sits outside .shell. Height rather than aspect-ratio: a
   map has no intrinsic shape, and on a phone a 16:9 strip is too short to be
   worth scrolling past. */
.map-strip {
  position: relative;
  height: clamp(320px, 40vw, 470px);
  background: var(--teal-50);
  border-block: 1px solid var(--teal-200);
}
.map-strip iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------- responsive */
/* The enquiry block's own breakpoints moved to style.css with it. */
@media (max-width: 980px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .contact-cards > *:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .contact-cards { grid-template-columns: 1fr; }
  .contact-cards > *:nth-child(3) { grid-column: auto; }
}