/* =====================================================================
   CONTACT — info panel + enquiry form + map
   ===================================================================== */

/* ---- Hero — no photo, big heading + short description, same scale as
   academic-journey.css's .ac10 .hero/h1 (client wants matching sizing). No
   nc-subnav on this page, so plain header-clearance (no +48px). ---- */
.contact-hero { padding-top: calc(var(--topbar-h, 38px) + var(--nav-h, 74px) + clamp(46px, 6vw, 84px)); padding-bottom: clamp(30px, 4vw, 48px); text-align: center; }
.contact-hero .eyebrow { justify-content: center; color: var(--maroon); }
.contact-hero .eyebrow::before { background: var(--maroon); }
.contact-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 7vw, 88px); line-height: .98; letter-spacing: -.02em; color: var(--maroon-900); margin: 20px 0 14px; }
.contact-hero p { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.7; color: var(--text-soft); max-width: 58ch; margin: 0 auto; }
.contact-hero .breadcrumb { justify-content: center; margin-top: 18px; }
.contact-hero .breadcrumb, .contact-hero .breadcrumb a { color: var(--text-soft); }
.contact-hero .breadcrumb .current { color: var(--maroon); font-weight: var(--fw-semi); }

.contact__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 1.6rem; align-items: stretch; }

/* Two campus cards side by side, above the shared enquiry form */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 1.6rem; }
.contact-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.2rem; padding: 0 .2rem; }
.contact-meta__hours { display: flex; align-items: center; gap: .5em; font-size: var(--fs-sm); color: var(--text-soft); }
.contact-meta__hours svg { width: 16px; height: 16px; color: var(--green-600); }

/* ---- Info panel (deep green — contact-us.php is a standalone main-nav
   page, not part of the Academics/Resources subnav cluster, so it uses the
   site's normal green accent rather than the cluster's maroon-only rule) ---- */
.contact-info { position: relative; overflow: hidden; background: var(--grad-green); color: #fff; border-radius: var(--r-xl); padding: clamp(1.8rem,4vw,2.6rem); box-shadow: var(--sh-lg); }
.contact-info::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.05); }
.contact-info h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: .4rem; }
.contact-info > p { color: rgba(255,255,255,.82); font-size: var(--fs-sm); margin-bottom: 1.6rem; max-width: 36ch; }
.ci-list { display: grid; gap: 1.1rem; position: relative; z-index: 1; }
.ci-item { display: flex; gap: .9rem; align-items: flex-start; }
.ci-item__ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: var(--gold-300); }
.ci-item__ic svg { width: 23px; height: 23px; }
.ci-item .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--gold-300); font-weight: var(--fw-bold); }
.ci-item .v { font-size: var(--fs-sm); color: #fff; line-height: 1.5; }
.ci-item .v a:hover { color: var(--gold-300); }
.ci-social { display: flex; gap: .55rem; position: relative; z-index: 1; }
.ci-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; transition: transform var(--dur-base) var(--ease-back), background var(--dur-base); }
.ci-social a:hover { background: var(--gold); color: var(--green-900); transform: translateY(-4px); }
.ci-social svg { width: 20px; height: 20px; }

/* Two maps side by side, one per campus */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.map-embed__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--green-900); margin-bottom: .6rem; }

/* ---- Enquiry links (replaces the old on-page form — each campus links
   out to its own real enquiry form instead) ---- */
.contact-enquiry { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(2.2rem,5vw,3.4rem); box-shadow: var(--sh-sm); }
.contact-enquiry h3 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.contact-enquiry .sub { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: 1.6rem; max-width: 52ch; margin-inline: auto; }
.contact-enquiry__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ---- Enquiry form (unused now that contact-us.php links out to each
   campus's real form instead — admissions.php reuses .btn/.field
   elsewhere, kept here in case an on-page form is wanted back later) ---- */
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.8rem,4vw,2.6rem); box-shadow: var(--sh-sm); }
.contact-form h3 { font-size: var(--fs-lg); margin-bottom: .3rem; }
.contact-form .sub { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: 1.4rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--green-900); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8em 1em; font: inherit; font-size: var(--fs-sm);
  color: var(--charcoal); background: var(--cream-2);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--maroon); background: #fff;
  box-shadow: 0 0 0 4px rgba(139,30,45,.1);
}
.contact-form .btn { margin-top: .4rem; }
.form-note { font-size: var(--fs-xs); color: var(--text-soft); margin-top: .8rem; }
.form-note svg { width: 14px; height: 14px; color: var(--green-600); vertical-align: -2px; }

/* ---- Map ---- */
.map-embed { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--line); line-height: 0; }
.map-embed iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; display: block; filter: grayscale(.15); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact-cards, .map-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}