/* =========================================================================
   RESPONSIVE — breakpoint refinements
   The header nav panel + backdrop are handled in components.css (toggled via
   the [hidden] attribute); here we only tune sizes at small widths.
   ========================================================================= */

@media (max-width: 1024px) {
    :root { --header-height: 64px; }

    /* Nav panel stacks to a single column on small screens */
    .mdt-nav-panel .mdt-menu { grid-template-columns: 1fr; gap: var(--space-md); }

    body.mdt-nav-locked { overflow: hidden; }
}

@media (max-width: 640px) {
    .mdt-featured__body { padding: var(--space-lg); }
    .mdt-hero__actions { flex-direction: column; align-items: stretch; }
    .mdt-hero__actions .mdt-btn { justify-content: center; }
    /* Hero description spans the full width on phones */
    .mdt-hero__desc { max-width: 100%; }
    /* Background-image hero: anchor the image to the left edge on phones so the
       subject starts from the far left instead of being centre-cropped. */
    .mdt-hero__bg { background-position: left center; }
    .mdt-archive__toolbar { flex-direction: column; align-items: stretch; }
    .mdt-footer__bottom { flex-direction: column; }
}

/* Larger screens widen the container */
@media (min-width: 1600px) {
    :root { --container-width: 1320px; }
}