/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FOUNDATION — site-wide
   Loaded on every page (layout/default.blade.php), after
   custom-style.css and before any page-specific sheet.

   BREAKPOINTS (Bootstrap 5 aligned — use these, don't invent new ones)
   ---------------------------------------------------------------
     ≤ 575.98px   xs   phones (portrait)
     ≤ 767.98px   sm   phones (landscape) / small tablets
     ≤ 991.98px   md   iPad portrait
     ≤ 1199.98px  lg   iPad landscape / small laptops
     ≥ 1200px     xl   desktop

   Page sheets should only add rules that are specific to that page.
   Anything reused twice belongs in this file.
═══════════════════════════════════════════════════════════════ */

/* ── 0. Horizontal overflow guard ──────────────────────────────
   Stops the page scrolling sideways into empty background. Uses
   `clip`, NOT `hidden`: `hidden` turns the element into a scroll
   container, which silently breaks `position: sticky` on the header. */
html, body { overflow-x: clip; }

/* Scroll lock for open drawers/modals. Use this class instead of
   setting body.style.overflow from JS — an inline `overflow: auto`
   sets overflow-x too and brings the sideways scroll back. */
body.no-scroll { overflow-y: hidden; }

/* ── 1. Fluid spacing tokens ───────────────────────────────────
   Use var(--sec-y) for vertical section padding instead of a
   hard-coded 80px so every section shrinks together. */
:root {
    --sec-y: 80px;   /* standard section padding-top/bottom */
    --sec-y-sm: 56px; /* compact section */
    --gap: 24px;      /* generic block gap */
}
@media (max-width: 991.98px) {
    :root { --sec-y: 60px; --sec-y-sm: 44px; --gap: 20px; }
}
@media (max-width: 575.98px) {
    :root { --sec-y: 44px; --sec-y-sm: 34px; --gap: 16px; }
}

/* ── 2. Media safety ───────────────────────────────────────────
   Nothing should ever be wider than its column. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* ── 3. Fluid headings ─────────────────────────────────────────
   Replaces the fixed px sizes that used to live in default.blade.php.
   clamp(min, preferred, max) — the max matches the old desktop size,
   so desktop is unchanged and only small screens scale down. */
h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem) !important; line-height: 1.3; }
h3 { font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.3; }
h4 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h5 { font-size: clamp(1.05rem, 2vw, 1.25rem); }
h6 { font-size: 1rem; }

/* ── 4. Container gutters ──────────────────────────────────────
   The theme (assets/css/app.css) forces
     @media (max-width:1099px) .container { padding: ...gutter-x * .5 !important }
   which leaves only ~6px of side padding on a phone, so content sits
   almost flush against the screen edge. !important here to outrank it. */
@media (max-width: 1099px) {
    .container, .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 575.98px) {
    .container, .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── 4b. Restore vertical gutters on phones ────────────────────
   The theme sets `.row { --bs-gutter-y: 0 }` under 576px, which has the
   same specificity as Bootstrap's own .g-* classes but loads later — so
   EVERY `g-3`/`g-4` lost its vertical gutter and stacked columns ended up
   touching. Re-assert the gutter classes here (this file loads last), so
   only rows that actually asked for a gutter get one back. */
@media (max-width: 575.98px) {
    .g-0, .gy-0 { --bs-gutter-y: 0; }
    .g-1, .gy-1 { --bs-gutter-y: 0.25rem; }
    .g-2, .gy-2 { --bs-gutter-y: 0.5rem; }
    .g-3, .gy-3 { --bs-gutter-y: 1rem; }
    .g-4, .gy-4 { --bs-gutter-y: 1.5rem; }
    .g-5, .gy-5 { --bs-gutter-y: 3rem; }
}

/* ── 5. Reusable helpers ───────────────────────────────────────
   Small, named utilities so pages don't each write their own
   media query for the same three problems. */

/* Buttons/links that should go full-width on phones */
@media (max-width: 575.98px) {
    .r-stack-xs { flex-direction: column; align-items: stretch; }
    .r-full-xs,
    .r-full-xs > a,
    .r-full-xs > button { width: 100%; justify-content: center; }
}

/* Header rows: "Title ............ View all" — stack under sm */
.r-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
@media (max-width: 767.98px) {
    /* Stacked and centred — a left title with a lone button under it
       reads as a mistake on a narrow screen. */
    .r-section-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }
}

/* Centre text on phones only */
@media (max-width: 575.98px) {
    .r-center-xs { text-align: center; }
}

/* Horizontal scroll strip — for card rows that shouldn't wrap on
   phones. Add to the .row wrapper; children keep their col widths. */
@media (max-width: 575.98px) {
    .r-scroll-xs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .r-scroll-xs > * { scroll-snap-align: start; }
    .r-scroll-xs::-webkit-scrollbar { height: 4px; }
    .r-scroll-xs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
}

/* ── 6. Touch ergonomics ───────────────────────────────────────
   On touch devices, hover-only reveals never fire — make sure
   transform-based hover effects don't leave elements shifted. */
@media (hover: none) {
    .no-hover-touch:hover { transform: none !important; }
}