/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* --- Tablet: <= 992px ---
   Major layout shift: multi-column grids become single-column stacks.
   Desktop nav/actions hidden in favor of hamburger menu.
   Header height shrinks from 130px to 80px. */
@media (max-width: 992px) {
    .hero__heading { font-size: 2.5rem; }
    /* About cards stack vertically instead of side-by-side */
    .about__grid { flex-direction: column; gap: var(--space-lg); }
    /* Services split-layout collapses: bg image removed, full-width checklist */
    .services__content { flex-direction: column; }
    .services__spacer { display: none; }  /* no longer need the invisible left column */
    .services { background-image: none; background-color: var(--color-bg); }
    .services__right { padding: 0 var(--space-lg); }
    .services__columns { flex-direction: column; gap: var(--space-md); }
    .services__main-heading { font-size: 1.75rem; }
    /* Service detail rows stack image below text */
    .services-detail__row,
    .services-detail__row--reverse { flex-direction: column; }
    .services-detail__img { height: auto; max-height: 200px; }
    .team-transition__heading { font-size: 2.5rem; }
    .team__group-heading { font-size: 3rem; }
    /* Team grid: 2 members per row instead of 3 or 4 */
    .team__grid--cols-3 .team__member,
    .team__grid--cols-4 .team__member { flex: 0 1 calc(50% - var(--space-xl)); }

    /* Header: collapse to hamburger-only navigation */
    .site-header__utility { display: none; }
    .site-nav { display: none; }
    .site-header__actions { display: none; }
    .site-header__hamburger { display: flex; }

    /* Topbar: keep contact links visible, spaced to edges */
    .site-header__topbar-inner {
        justify-content: space-between;
    }

    /* Shorter header for more content visibility */
    :root { --header-height: 80px; }
}

/* --- Tablet (narrow): <= 980px ---
   Fine-tune: remove the blue divider stripe and shrink nav text.
   Separate from 992px because the divider looks odd slightly before
   the full hamburger switch. */
@media (max-width: 980px) {
    .site-header__divider { display: none; }
    .site-nav__link { font-size: 1.125rem; }
}

/* --- Mobile: <= 768px ---
   Single-column everything. Header further reduced to 60px.
   Team members go full-width (one per row). Service images hidden
   to save vertical space. Flash messages go full-width. */
@media (max-width: 768px) {
    :root { --header-height: 60px; }
    .site-header__divider { display: none; }
    .site-header__main-inner { height: 60px; }
    .site-header__logo-img { max-width: 150px; }

    .hero { min-height: 500px; }
    .hero__heading { font-size: 1.75rem; letter-spacing: 1px; }
    .stats__heading { font-size: 1.25rem; }
    .about__card-icon svg { width: 64px; height: 64px; }
    .team-transition { height: 120px; }
    .team-transition__heading { font-size: 1.75rem; }
    .team__group-heading { font-size: 2rem; }
    /* Team: one member per row on phones */
    .team__grid--cols-3 .team__member,
    .team__grid--cols-4 .team__member { flex: 0 1 100%; }
    .team__photo-wrap { width: 140px; height: 140px; }
    /* Hide service detail images to reduce scroll length */
    .services-detail__row,
    .services-detail__row--reverse { flex-direction: column; text-align: center; }
    .services-detail__img-col { display: none; }
    /* Flash messages span full width instead of fixed right-side toast */
    .flash-messages { left: var(--space-md); right: var(--space-md); max-width: none; }
    .auth__card { padding: var(--space-lg); }

    /* Topbar: tighten padding and shrink contact link text */
    .site-header__topbar-inner { padding: 8px 1rem; }
    .site-header__contact-link { font-size: 14px; }
}

/* --- Small Mobile: <= 480px ---
   Final size reduction for very narrow screens.
   Topbar hidden entirely to maximize content area. */
@media (max-width: 480px) {
    .hero__heading { font-size: 1.375rem; }
    .about__card { padding: var(--space-md); }
    .auth__card { padding: var(--space-md); }
    .form-input--code { font-size: 1.5rem; letter-spacing: 0.5rem; }

    /* Hide topbar completely — phone/email accessible via footer instead */
    .site-header__topbar { display: none; }
}