/* =============================================================================
   Global Secure Shipping — responsive.css
   -----------------------------------------------------------------------------
   Breakpoint adjustments layered on the mobile-first styles in site.css.

   Breakpoints
     • 640px  — large phones / small tablets (Figma "sm")
     • 768px  — tablets (Figma "md"; same as Bootstrap md)
     • 1024px — desktop navigation, wider gutters, split layouts (Figma "lg")

   Card grids use Bootstrap's row/col classes, so they switch at Bootstrap's own
   breakpoints (sm 576, md 768, lg 992, xl 1200). Everything custom below uses the
   Figma breakpoints so the header and hero behave exactly as designed.
   ========================================================================== */

/* ── ≥ 640px ─────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .site-header__cta { display: inline-flex; }

    .section-head-split { flex-direction: row; align-items: flex-end; }

    .masonry { columns: 2; }

    .advice-banner__content { flex-direction: row; align-items: center; }

    /* Footer: offices in two columns to keep the footer compact */
    .site-footer__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.75rem; }
    .site-footer__offices--stacked { grid-template-columns: 1fr; }
    .site-footer__office { padding: 0.15rem 0.25rem; min-width: 0; }
    .site-footer__office-city { font-size: 0.75rem; line-height: 1.2rem; font-weight: 600; letter-spacing: 0.04em; color: #fff; white-space: normal; overflow-wrap: break-word; min-width: 0; margin-bottom: 0.1rem; }
    .site-footer__office-address { font-size: 0.75rem; line-height: 1.3rem; color: var(--gs-mist); max-height: none; overflow: visible; overflow-wrap: break-word; min-width: 0; margin-bottom: 0; }
}

/* ── ≥ 768px (tablet) ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .page-title { font-size: 3rem; line-height: 1; }
    .page-title--tight { line-height: 1.25; }

    .section-title { font-size: 2.25rem; line-height: 2.5rem; }
    .section-title--tight { line-height: 1.25; }
    .section-title--fixed { font-size: 1.875rem; line-height: 2.25rem; }

    .block-title--md-3xl { font-size: 1.875rem; line-height: 2.25rem; }

    .hero__title { font-size: 3rem; }

    .cta-banner--title-hero .cta-banner__title { font-size: 2.25rem; line-height: 2.5rem; }
    .featured-post__title { font-size: 2.25rem; }
    .post-hero__title { font-size: 1.875rem; }

    /* About: vision | mission side by side with a divider */
    .vision-mission { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
    .vision-mission__item--vision { padding: 0 3rem 0 0; border-right: 1px solid rgb(255 255 255 / 0.15); }
    .vision-mission__item--mission { padding: 0 0 0 3rem; border-top: 0; }

    .site-footer__bottom-inner { flex-direction: row; }
    .site-footer__copyright { text-align: left; }
}

/* ── ≥ 1024px (desktop) ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .container-site { padding-inline: 2rem; }

    /* Header: inline navigation replaces the hamburger */
    .site-nav { display: flex; }
    .hamburger { display: none; }

    .hero__title { font-size: 3.2rem; }

    .stats-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat--light .stat__value { font-size: 3.75rem; }

    .masonry { columns: initial; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; }
    .masonry__item { break-inside: auto; }

    /* Quote: photo panel on the left, form on the right */
    .quote-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-page__aside { display: block; }
    .quote-page__main { padding-inline: 3rem; }
}

/* ── Below desktop: tablet/mobile-only behaviour ─────────────────────────── */
@media (max-width: 1023.98px) {
    /* The enquiry card sits under the content, so it should not stick */
    .enquiry-card { position: static; }
}

/* ── Contact office cards: identical heights ────────────────────────────────── */
/* 4-across (Bootstrap lg): every card reserves the same address height, so all
   cards match the tallest one and every row aligns perfectly. On tablet/mobile
   the cards size naturally (flex still equalizes cards within the same row). */
@media (min-width: 992px) {
    .office-card__details { min-height: 6rem; }
}