/* ==========================================================================
   Plymouth Dance Centre — contact.css
   Loads AFTER dance-classes.css (hero/strip reused). Adds: contact cards,
   department email grid, map frame.
   ========================================================================== */

.contact-cards {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--coral);
    padding: 14px 16px;
}

.contact-card i { color: var(--coral); width: 18px; text-align: center; margin-top: 3px; }
.contact-card b { display: block; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; }
.contact-card span, .contact-card a { color: #dce5e3; font-size: 14px; }
.contact-card a:hover { color: var(--coral); }

/* --- Department emails --- */
.depts-section {
    padding: 96px clamp(24px, 7vw, 112px);
    background: var(--sand);
}

.depts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: var(--container);
    margin: 0 auto;
}

.dept-card {
    background: var(--paper);
    padding: 26px 24px;
    border-top: 3px solid var(--coral);
}

.dept-card__label { color: #4a5c63; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.dept-card h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 10px; color: var(--ink); }
.dept-card p { font-size: 13px; color: #52626a; line-height: 1.6; margin: 0 0 14px; }
.dept-card a { font-size: 12px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--coral); word-break: break-all; }
.dept-card a:hover { color: var(--coral); }

/* --- Map --- */
.map-section {
    padding: 102px clamp(24px, 8vw, 128px);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(35px, 6vw, 90px);
    align-items: center;
    background: var(--paper);
}

.map-section__copy h2 { font-size: clamp(46px, 5.4vw, 76px); margin-bottom: 29px; }
.map-section__copy p:not(.eyebrow) { max-width: 440px; line-height: 1.8; color: #516269; }
.map-section__copy .signal-bar { margin-top: 33px; max-width: 440px; }

.map-section__frame { position: relative; min-height: 460px; border-radius: 0 120px 0 0; overflow: hidden; background: var(--mist); }
.map-section__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-section__caption { position: absolute; bottom: 0; right: 0; padding: 17px 21px; background: var(--coral); color: #fff; font-family: var(--serif); font-size: 24px; line-height: 0.95; pointer-events: none; }

@media (max-width: 1024px) { .depts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .map-section { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .depts-section { padding: 72px 20px; }
    .depts-grid { grid-template-columns: 1fr; }
    .map-section { display: block; padding: 72px 24px; }
    .map-section__copy h2 { font-size: 48px; }
    .map-section__frame { min-height: 320px; margin-top: 40px; border-radius: 0 75px 0 0; }
}