/* ============================================================================
   Joporas — shared responsive layer
   ----------------------------------------------------------------------------
   Loaded AFTER Tailwind so it can correct layout at screen sizes the page
   authors did not target. Deliberately conservative: it fixes structural
   problems (overflow, media, tables, tap targets, TV scale) and only touches
   spacing/grids for the specific classes used in this project that have no
   responsive variant of their own.

   Selectors use [class~="x"] (exact whitespace-separated token), never
   [class*="x"] — a substring match would also hit unrelated classes such as
   `top-24` when targeting `p-24`.

   Breakpoints
     ≤ 380px    very small phone
     ≤ 640px    phone
     641–1024   tablet
     1025–1599  laptop / desktop
     ≥ 1600px   large desktop
     ≥ 1920px   full HD desktop / TV
     ≥ 2560px   4K / large TV
   ========================================================================== */


/* ── 1. Global overflow safety ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    /* Never let one long word (URL, API key, token) widen the page. */
    overflow-wrap: break-word;
}

/* Long unbroken strings — API keys, endpoints, emails — wrap instead of
   forcing a horizontal scrollbar. */
.mono, code, kbd, samp {
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre {
    max-width: 100%;
    overflow-x: auto;
}


/* ── 2. Media — images, video, embeds ("picha preview") ──────────────────── */

/* Never overflow the container. Tailwind size utilities (w-56, h-full, …)
   are single-class selectors and still win over these element selectors. */
img, video, canvas, svg, iframe, embed, object {
    max-width: 100%;
}

img, video {
    height: auto;
}

/* Images that fill a fixed-ratio frame must keep filling it — the rule above
   would otherwise collapse them to intrinsic height. */
.media-frame img,
.media-frame video,
img.slide {
    height: 100%;
    max-width: none;
}

/* Preview frames stay fluid and never exceed their column. */
.media-frame,
.preview-frame,
.img-preview {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Thumbnail grids built at runtime (staff dashboard upload previews). */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.preview-grid > * {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}
.preview-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A single standalone preview (QR code, screenshot) shrinks on small screens. */
.preview-single {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-inline: auto;
}


/* ── 3. Tables — the worst offender on phones ────────────────────────────── */

/* .table-responsive is added by responsive.js; .table-scroll is hand-written
   in the legal pages. */
.table-scroll,
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll > table,
.table-responsive > table {
    min-width: 100%;
    width: auto;
}

@media (max-width: 767px) {
    .table-scroll > table,
    .table-responsive > table {
        font-size: 0.8rem;
    }
    .table-scroll :is(th, td),
    .table-responsive :is(th, td) {
        padding: 7px 9px;
        white-space: nowrap;
    }
}


/* ── 4. Safe areas (notches, rounded corners) ───────────────────────────── */

@supports (padding: env(safe-area-inset-left)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}


/* ── 5. Phones (≤ 640px) ─────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* iOS Safari zooms the whole page when focusing an input under 16px. */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Grids in this project that carry no responsive variant of their own.
       Grids already written as `grid-cols-1 sm:grid-cols-2 …` are untouched. */
    [class~="grid-cols-3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Vertical rules between columns look wrong once columns wrap. */
    [class~="divide-x"] > * + * {
        border-left-width: 0 !important;
    }

    /* Desktop padding leaves too little content width on a phone. */
    [class~="p-10"], [class~="p-12"], [class~="p-14"], [class~="p-24"],
    [class~="lg:p-9"], [class~="md:p-14"] {
        padding: 1.25rem !important;
    }
    [class~="py-12"], [class~="py-20"], [class~="sm:py-12"] {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    /* Hero preview at 16:10 is too tall on a narrow screen. */
    .media-frame {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
    .media-frame .media-overlay {
        padding: 11px 13px;
        font-size: 12px;
    }
    .media-frame .media-badge {
        top: 9px;
        left: 9px;
        padding: 4px 9px;
        font-size: 10px;
    }

    /* Heavy decorative blurs are expensive on mobile GPUs and add nothing. */
    .orb, .hero-bg, .grid-pattern, .mesh-bg, .form-mesh, .form-grid, .panel-grid {
        display: none !important;
    }

    /* A sticky sidebar has nothing to stick beside in one column. */
    .toc {
        position: static !important;
    }
}

/* Very small phones — Galaxy Fold closed, iPhone SE 1st gen. */
@media (max-width: 380px) {
    [class~="grid-cols-2"], [class~="grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }
    .media-frame { aspect-ratio: 1 / 1; }
}


/* ── 6. Tablets (641–1024px) ─────────────────────────────────────────────── */

@media (min-width: 641px) and (max-width: 1024px) {
    /* Five and six columns are unreadable on a tablet. */
    [class~="md:grid-cols-5"], [class~="lg:grid-cols-5"],
    [class~="grid-cols-5"], [class~="grid-cols-6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Landscape phones and short windows: full-height centring cuts content off. */
@media (max-height: 520px) and (orientation: landscape) {
    body {
        align-items: flex-start !important;
    }
    [class~="min-h-screen"], [class~="lg:h-screen"] {
        min-height: auto !important;
        height: auto !important;
    }
}


/* ── 7. Large desktop and TV ─────────────────────────────────────────────── */

/* Tailwind sizes in rem, so lifting the root font size scales type, spacing
   and max-width containers together — the page grows to fill a big screen
   instead of stranding a narrow column in the middle of it. */

@media (min-width: 1600px) {
    html { font-size: 17px; }
}

@media (min-width: 1920px) {
    html { font-size: 18px; }
}

@media (min-width: 2560px) {
    html { font-size: 19px; }
}

/* TVs are read from across a room, and are usually driven by a remote rather
   than a mouse. Bias larger, keep content clear of the bezel, and make focus
   unmistakable for D-pad navigation. */
@media (min-width: 1920px) and (pointer: coarse),
       (min-width: 1920px) and (hover: none) {
    html { font-size: 21px; }

    body {
        padding-left: max(2.5vw, env(safe-area-inset-left));
        padding-right: max(2.5vw, env(safe-area-inset-right));
    }

    a:focus-visible, button:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 3px solid #6366f1;
        outline-offset: 3px;
    }
}


/* ── 8. Touch ergonomics ─────────────────────────────────────────────────── */

@media (pointer: coarse) {
    /* Every standalone control needs a real tap target (WCAG 2.5.5). */
    button, [role="button"],
    input[type="submit"], input[type="button"],
    input[type="checkbox"], input[type="radio"],
    label.switch {
        min-height: 44px;
    }

    /* Links that are buttons get a tap target; links inside prose stay inline
       so they do not break the line box. */
    a[class*="btn-"], a[class*="rounded"], nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}


/* ── 9. Motion and print ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    nav, footer, .toc, .no-print { display: none !important; }
    body { background: #fff !important; }
    .doc-card, .card, .form-card {
        box-shadow: none !important;
        border: none !important;
    }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
    table, img { page-break-inside: avoid; }
}