/* ==========================================================================
   eGateweb — Contact (page-contact.php)
   --------------------------------------------------------------------------
   Section order matches the template:
     1 Hero  2 Contactgegevens  3+4 Formulier + aside  5 CTA

   Hero, form controls, alerts and CTA come from css/eg-page.css. Only this
   page's own blocks live here. No hardcoded colors — see inc/eg-colors.php.
   ========================================================================== */

/* ==========================================================================
   2. CONTACTGEGEVENS
   ========================================================================== */
.eg-ccards {
    padding-bottom: 8px;
}

.eg-ccards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--eg-gap);
}

.eg-ccard {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 22px 20px;
    text-decoration: none;
    border-width: 1px;
    min-width: 0;
}

/* Only the linked cards (tel:, mailto:, WhatsApp) react to hover. */
a.eg-ccard:hover {
    transform: translateY(-4px);
    box-shadow: var(--eg-shadow);
    border-color: rgba(var(--eg-brand-rgb), .4);
}

a.eg-ccard:hover .eg-chip {
    background: var(--eg-brand);
    color: var(--eg-brand-ink);
}

.eg-ccard .eg-chip { transition: all .3s var(--eg-ease); }

.eg-ccard__body { min-width: 0; }

.eg-ccard__label {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--eg-muted);
}

.eg-ccard__value {
    margin-top: 5px;
    /* Sized so a typical company email fits this narrow card on one line.
       break-word is the safety net for unusually long addresses — it only
       splits a word that genuinely cannot fit, rather than at any opportunity
       the way `anywhere` does. */
    font-size: .87rem;
    font-weight: 700;
    color: var(--eg-heading);
    line-height: 1.45;
    overflow-wrap: break-word;
}

.eg-ccard__note {
    margin-top: 5px;
    font-size: .8rem;
    color: var(--eg-muted);
}

/* ==========================================================================
   3 + 4. FORMULIER + ASIDE
   ========================================================================== */
.eg-cform__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--eg-gap);
    align-items: start;
}

.eg-cform__panel {
    background: var(--eg-card);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius-lg);
    padding: 38px;
}

.eg-cform__panel h2 { font-size: 1.5rem; }

.eg-cform__intro {
    margin-top: 10px;
    margin-bottom: 26px;
    font-size: .95rem;
    color: var(--eg-muted);
}

.eg-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.eg-form__submit {
    margin-top: 8px;
    width: 100%;
}

.eg-form__note {
    margin-top: 16px;
    text-align: center;
    font-size: .86rem;
}

.eg-form__note a {
    color: var(--eg-brand);
    font-weight: 600;
    text-decoration: none;
}

.eg-form__note a:hover { text-decoration: underline; }

/* ---- Aside ---- */
.eg-cform__aside {
    display: grid;
    gap: var(--eg-gap);
}

.eg-cform__aside h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.02rem;
}

.eg-cform__aside .eg-icon { color: var(--eg-brand); }

/* Opening hours */
.eg-hours__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.eg-hours__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--eg-border);
    margin: 0;
}

.eg-hours__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.eg-hours__label {
    font-size: .88rem;
    color: var(--eg-muted);
}

.eg-hours__value {
    font-size: .88rem;
    font-weight: 700;
    color: var(--eg-heading);
    white-space: nowrap;
}

/* USP list */
.eg-cusp .eg-list { margin-top: 18px; }
.eg-cusp .eg-list li { font-size: .9rem; font-weight: 600; }

/* Map embed */
.eg-map {
    padding: 0;
    overflow: hidden;
    line-height: 0;
}

/* The Google Maps snippet ships fixed width/height attributes; override them. */
.eg-map iframe {
    width: 100%;
    height: 260px;
    border: 0;
    display: block;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .eg-ccards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .eg-cform__inner { grid-template-columns: 1fr; }
    .eg-cform__panel { padding: 30px 26px; }
}

@media (max-width: 600px) {
    .eg-ccards__grid { grid-template-columns: 1fr; }
    .eg-form__row { grid-template-columns: 1fr; gap: 0; }
    .eg-cform__panel { padding: 24px 20px; }
}