/*
 * Visit (contact) page — ported unchanged from site.legacy.css. Loaded
 * only on this page via inc/enqueue/styles.php's page-slug matching
 * (page-contact.php -> contact.css).
 */

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -68px; position: relative; z-index: 4; }
.contact-card { min-height: 250px; padding: 34px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-lg); }
.contact-card .icon-wrap { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--forest); }
.contact-card .icon { width: 22px; height: 22px; color: white; }
.contact-card h2 { margin: 32px 0 14px; font-size: 1.55rem; }
.contact-card p { color: var(--slate); }
.contact-card a { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 800; text-decoration: none; }

.visit-panel { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: rgba(255,255,255,.74); }
.visit-panel > div { padding: clamp(38px, 6vw, 72px); }
.visit-panel h2 { color: var(--white); }
.visit-panel p { margin-top: 20px; }
.visit-panel .map-side { display: grid; min-height: 460px; place-items: center; background-position: center; background-size: cover; }
.map-marker { display: grid; width: 112px; height: 112px; place-items: center; border: 12px solid rgba(255,255,255,.25); border-radius: 50%; background: var(--white); color: var(--forest); background-clip: padding-box; }
.map-marker .icon { width: 36px; height: 36px; }

/* Contact cards bridge into a full navy visit chapter (a negative-margin
   overlap: the white section housing .visit-panel is pulled up under the
   contact cards and repainted navy). */
.section-white:has(.visit-panel) {
    margin-top: -110px;
    padding-top: calc(clamp(82px, 10vw, 138px) + 110px);
    background-color: var(--navy);
    background-image: linear-gradient(145deg, #081d33, #0b2944);
}
.section-white:has(.visit-panel) .visit-panel {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.055);
    box-shadow: 0 28px 80px rgba(0,0,0,.25);
}

/* --- Scale-down pass, same as the other converted pages ---
   .contact-card h2 already has its own smaller size above (1.55rem) —
   left untouched. .visit-panel h2 had no override and inherited
   global/base.css's much larger default. */
.page-hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.4rem);
}

.visit-panel h2,
.faq-intro h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

@media (max-width: 820px) {
    .visit-panel { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: repeat(2, 1fr); margin-top: -48px; }
}

@media (max-width: 600px) {
    .contact-grid { grid-template-columns: 1fr; margin-top: -26px; }
    .section-white:has(.visit-panel) { margin-top: -54px; padding-top: 132px; }
}