/* ==========================================================================
   Shared responsive system — tokens, rhythm, global touch targets
   Loaded via <link rel="stylesheet" href="…/css/responsive.css"> after styles.css.
   Breakpoint reference (documentation only — not usable in @media):
   sm 480 | md 768 | lg 1024 | nav 1080 | xl 1200
   ========================================================================== */

:root {
    /* Reference values only — standard CSS cannot use custom properties in @media */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-nav: 1080px;
    --bp-xl: 1200px;

    /* Desktop default; mobile/tablet overrides below */
    --container-px: var(--page-padding-desktop);

    --page-padding-mobile: clamp(1.25rem, 5vw, 1.75rem);
    --page-padding-tablet: clamp(1.75rem, 4.5vw, 3rem);
    --page-padding-desktop: clamp(1.25rem, 4vw, 2rem);

    --section-space-mobile: clamp(3.5rem, 12vw, 5rem);
    --section-space-tablet: clamp(4.5rem, 8vw, 6.5rem);
    --section-space-desktop: clamp(4rem, 7vw, 6rem);

    --content-gap-mobile: clamp(1.25rem, 5vw, 2rem);
    --content-gap-tablet: clamp(1.75rem, 4vw, 3rem);
    --content-gap-desktop: clamp(2rem, 4vw, 3.5rem);

    --read-max-width: min(42rem, 100%);
    --touch-target-min: 2.75rem;
}

@media (max-width: 767px) {
    :root {
        --container-px: var(--page-padding-mobile);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-px: var(--page-padding-tablet);
    }
}

@media (min-width: 1024px) {
    :root {
        --container-px: var(--page-padding-desktop);
    }
}

/* Anchor targets clear the fixed header */
:where(h1, h2, h3, h4, h5, h6)[id],
:where([id].lr-hero, [id].memory-section, [id].category-grid-section) {
    scroll-margin-top: calc(var(--header-height) + clamp(0.75rem, 3vw, 1.25rem));
}

/* Embedded media cannot exceed the viewport */
:where(iframe, video, img) {
    max-width: 100%;
}

/* Form fields — prevent iOS zoom on focus (minimum 16px) */
@media (max-width: 767px) {
    :where(input, select, textarea, .category-search__input) {
        font-size: max(1rem, 1em);
    }
}

/* Tablet typography — sit between mobile and desktop scales */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --fs-h1: clamp(1.85rem, 3.8vw, 2.65rem);
        --fs-h2: clamp(1.35rem, 2.8vw, 1.85rem);
        --fs-display-hero: clamp(2.1rem, 5vw, 3.25rem);
    }
}

/* Comfortable tap targets for primary interactive controls */
:where(
    .btn,
    .memory-btn,
    .memorial__btn,
    .nav-toggle,
    .site-action,
    .category-search__clear,
    .video-sound-toggle
) {
    min-height: var(--touch-target-min);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .memory-inner {
        gap: var(--content-gap-tablet);
    }

    .memory-left {
        padding-inline: var(--page-padding-tablet);
    }

    .memory-right {
        padding-inline: var(--page-padding-tablet);
    }

    .page-light-monument {
        --lm-section-x: var(--container-px);
    }

    .lm-times-square__inner {
        gap: var(--content-gap-tablet);
    }
}