/* =========================================================
   responsive.css
   Load LAST — after style.css and banner.css.

   <link rel="stylesheet" href="<?= e(base_url('assets/css/responsive.css?v=2')) ?>">

   This does not restyle anything. It fixes what breaks or
   becomes hard to tap on small screens. Banner layout lives
   entirely in banner.css; nothing here touches it.
   ========================================================= */

/* =========================================================
   1. NO HORIZONTAL SCROLL
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden; }

/* Long Tamil compounds can exceed a 320px column. break-word
   wraps only as a last resort, and word-break stays normal so a
   grapheme cluster is never split mid-letter. */
h1, h2, h3, h4, p, li, td {
    overflow-wrap: break-word;
    word-break: normal;
}

/* iOS: 100vh measures the viewport *under* the address bar. */
.admin-shell   { min-height: 100dvh; }
.login-section { min-height: auto; padding: 48px 20px; }

/* =========================================================
   2. TAP TARGETS — 44px minimum
   ========================================================= */

.gallery-tabs button,
.pagination a,
.share-row a,
.share-row button,
.ios-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* Table action links are bare text — expand the hit area without
   changing how they look. */
.actions a,
.actions button {
    position: relative;
    padding: 12px 4px;
}

/* =========================================================
   3. LARGE TABLET / SMALL LAPTOP  (1001–1200px)
   Three-column grids are cramped well before 1000px.
   ========================================================= */

@media (max-width: 1200px) and (min-width: 1001px) {
    .feature-grid,
    .card-grid,
    .home-three-grid { grid-template-columns: repeat(2, 1fr); }

    .section       { padding: 72px 0; }
    .two-column    { gap: 44px; }
    .contact-grid  { gap: 44px; }

    .main-nav      { gap: 2px; font-size: 14px; }
    .main-nav > a  { padding: 10px 12px; }
}

/* =========================================================
   4. TABLET  (≤1000px)
   ========================================================= */

@media (max-width: 1000px) {

    /* The drawer must scroll if the menu is taller than the screen
       in landscape, and never open past the bottom of the page. */
    .main-nav {
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .portal-panel  { padding: 32px; }
    .welcome-panel { padding: 26px 28px; }

    /* The admin sidebar drawer has no backdrop, so the page behind
       stays tappable and scrollable while it is open.
       Add `document.body.classList.toggle('sidebar-open')` wherever
       you toggle .admin-sidebar.open. */
    body.sidebar-open { overflow: hidden; }

    body.sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(7, 31, 73, .45);
    }
}

/* =========================================================
   5. PHONE  (≤680px)
   ========================================================= */

@media (max-width: 680px) {

    /* style.css hides this, which left the header as a bare logo
       with nothing saying whose site it is. */
    .brand span { display: flex; min-width: 0; }

    .brand strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        font-size: 15px;
        line-height: 1.35;
    }

    .brand small { font-size: 11px; }
    .brand img   { width: 52px; height: 52px; }

    /* Two fixed-height 13px spans overflow a 360px screen. */
    .topbar-inner {
        height: auto;
        min-height: 34px;
        padding: 6px 0;
        gap: 10px;
        font-size: 12px;
    }

    .topbar-inner > span:first-child {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* iOS zooms the whole page when a focused field is under 16px.
       Labels stay 13px; only the field grows. */
    input, select, textarea { font-size: 16px; }

    .section              { padding: 52px 0; }
    .home-gallery-section { padding: 52px 0; }

    .portal-panel    { padding: 26px; border-radius: 20px; }
    .login-card      { padding: 26px; border-radius: 18px; }
    .login-card > img { width: 88px; height: 88px; }

    .gallery-grid img { height: 100px; }

    /* Notch and home indicator. */
    .site-footer { padding-bottom: env(safe-area-inset-bottom, 0); }
    .container {
        padding-left:  env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
}

/* =========================================================
   6. SMALL PHONE  (≤420px)
   ========================================================= */

@media (max-width: 420px) {
    .stat-grid    { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid img { height: 150px; }

    .hero h1      { font-size: 29px; }
    .page-hero h1 { font-size: 27px; }

    .section-heading h2,
    .two-column h2 { font-size: 25px; }

    /* Full-width buttons everywhere except inside the banner,
       where the CTA should stay hugging its text. */
    .btn { width: 100%; }
    .banner-content .btn { width: auto; }
}

/* =========================================================
   7. ADMIN TABLES
   Every cell is white-space: nowrap, which is right for dense
   data. This just makes the sideways scroll obvious and keeps
   the first column readable while you scroll.
   ========================================================= */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    background:
        linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 32px 100% no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%) right / 32px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(10, 37, 84, .16), transparent) left / 12px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(10, 37, 84, .16), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

@media (max-width: 1000px) {
    .table-scroll th:first-child,
    .table-scroll td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
    }
    .table-scroll th:first-child { background: #f3f6fa; }
    .table-scroll tbody tr:hover td:first-child { background: #fbfcfe; }

    .actions     { flex-wrap: wrap; gap: 6px 14px; }
    .table-tools { max-width: none; flex-wrap: wrap; }
}

/* =========================================================
   8. LANDSCAPE PHONES
   ========================================================= */

@media (max-height: 480px) and (orientation: landscape) {
    .login-section { padding: 28px 20px; }
    .section       { padding: 40px 0; }

    /* A sticky header eats half a landscape screen. */
    .site-header   { position: static; }
}