/* ==========================================================================
   Contact Info Section — Reusable component (appears on every page).
   Two-column: left = heading + contact details + CTA,
   right = office hours in a white card.

   Root cause of prior overflow: the hours table had no width constraint,
   so its intrinsic width pushed the grid column beyond the viewport on
   small screens. Fixed by: (a) `minmax(0, 1fr)` on the grid to honour
   container bounds, (b) `overflow-x: auto` on the table wrapper so only
   the table scrolls — never the page, (c) `clamp()` typography so
   headings scale fluidly without jumps.
   ========================================================================== */

/* ---- Grid Layout ---- */
.contact-info__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    /* Prevent children from overflowing the viewport. */
    min-width: 0;
}

/* ---- Left Column: Heading + Contact Details ---- */

/*
 * clamp() gives fluid scaling: 2.8rem at 320px → 4rem at ~768px.
 * Avoids abrupt media-query jumps and keeps visual hierarchy.
 */
.contact-info__title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 2rem + 2.5vw, var(--fs-3xl));
    font-weight: var(--fw-medium);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.contact-info__subtitle {
    font-size: clamp(1.6rem, 1.2rem + 1vw, var(--fs-lg));
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

/* Contact detail items */
.contact-info__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.contact-info__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-text-dark);
    margin-top: 0.4rem;
}

.contact-info__item-title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    margin-bottom: var(--space-xs);
}

.contact-info__item-link {
    display: block;
    font-size: var(--fs-md);
    color: var(--color-text-dark);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.contact-info__item-link:hover {
    color: var(--color-sage);
}

.contact-info__item-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 0;
}

.contact-info__item-address {
    font-style: normal;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

/* Schedule CTA button */
.contact-info__cta {
    margin-top: var(--space-md);
}

/* ---- Right Column: Office Hours ---- */

/* Prevent the right column from growing beyond its grid track. */
.contact-info__right {
    min-width: 0;
}

/*
 * The wrapper acts as the scroll boundary: if the table is wider than
 * the available space (very small phones), it scrolls horizontally
 * inside this box — the page itself never scrolls.
 */
.contact-info__hours-wrap {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    max-width: 100%;
}

.contact-info__hours-title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-lg);
}

.contact-info__hours {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    margin-bottom: var(--space-lg);
    /* Ensure the table has a usable minimum width on tiny screens. */
    min-width: 300px;
}

.contact-info__hours thead th {
    text-align: left;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid var(--color-border);
}

.contact-info__hours tbody td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.contact-info__hours tbody tr:last-child td {
    border-bottom: none;
}

.contact-info__hours tbody td:first-child {
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
}

/* Contact summary below hours */
.contact-info__summary {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.contact-info__summary p {
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-sm);
}

.contact-info__summary a {
    color: var(--color-text-dark);
    text-decoration: underline;
}

.contact-info__summary a:hover {
    color: var(--color-sage);
}

/* ---- Responsive: compact spacing on small phones ---- */
@media (max-width: 480px) {
    .contact-info__hours-wrap {
        padding: var(--space-md);
    }

    .contact-info__hours {
        font-size: var(--fs-sm);
    }

    .contact-info__hours thead th,
    .contact-info__hours tbody td {
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ---- Responsive: two columns on desktop ---- */
@media (min-width: 1024px) {
    .contact-info__grid {
        /* minmax(0, 1fr) prevents grid blowout from intrinsic content. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-4xl);
    }

    /* Scale title up on wide screens while keeping clamp() as the base. */
    .contact-info__title {
        font-size: clamp(4rem, 3rem + 2.5vw, 6rem);
        line-height: 1.15;
    }

    .contact-info__item-title {
        font-size: 2.6rem;
        line-height: 1.4;
    }
}