/* =============================================================================
   responsive.css — breakpoint refinements layered on top of style.css.

   Breakpoints used across the site (min-width, mobile-first):
     sm  640px    md  768px    lg  1024px    xl  1280px
   Most layout media queries live inline in style.css next to their components;
   this file holds cross-cutting responsive tweaks.
   ============================================================================= */

/* --- Small phones: tighten hero + section rhythm ------------------------- */
@media (max-width: 639px) {
    .section { padding-block: 4rem; }
    .section--sm { padding-block: 3rem; }
    .newsletter { padding-block: 4rem; }
    .hero-title { font-size: 2rem; }
    .h1 { font-size: 2rem; }
    .h2 { font-size: 1.875rem; }
    .marquee-item { font-size: 1rem; padding: 0.75rem 1.5rem; }
    .trust-bar-inner { font-size: 0.75rem; }
}

/* --- Tablet: two-up grids, slightly smaller section padding -------------- */
@media (min-width: 640px) and (max-width: 1023px) {
    .section { padding-block: 6rem; }
}

/* --- Hide the trust-bar separator dots at narrow widths ------------------ */
.trust-dot { display: none; }
@media (min-width: 640px)  { .trust-dot.at-sm { display: inline; } }
@media (min-width: 768px)  { .trust-dot.at-md { display: inline; } }
@media (min-width: 1024px) { .trust-dot.at-lg { display: inline; } }
@media (min-width: 1280px) { .trust-dot.at-xl { display: inline; } }

/* --- Desktop: comfortable max text measure ------------------------------- */
@media (min-width: 1280px) {
    .container { padding-inline: 2rem; }
}

/* --- Widgets: keep panels on-screen on very small viewports -------------- */
@media (max-width: 400px) {
    .a11y-panel, .cookie-panel { width: calc(100vw - 2.5rem); }
}