/* ==========================================================================
   KASHI RAMYA - responsive.css
   Loaded LAST so these rules win. Fixes the weak points listed in
   docs/polish.md §5. Target widths: 360 / 414 / 768 / 1024 / 1280 / 1440.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Structural guards against horizontal overflow
   -------------------------------------------------------------------------- */

/* Grid and flex children default to min-width:auto, which lets long words and
   wide tables push the page wider than the viewport. This is the single most
   common cause of horizontal scroll. */
.grid > *,
.split > *,
.listing-layout > *,
.detail-layout > *,
.footer-grid > *,
.lead-grid > *,
.newsletter-inner > *,
.inclusion-grid > *,
.spec-grid > *,
.admin-stats > *,
.admin-grid > * {
    min-width: 0;
}

/* Long unbroken strings (emails, slugs, Hindi compounds) wrap instead of
   widening their container. */
body {
    overflow-wrap: break-word;
}

.lead-fields td,
.card-title,
.spec-item-value,
.dropdown-text,
.admin-table td {
    overflow-wrap: anywhere;
}

/* Any table that could exceed its column gets a scroll container. */
.admin-table,
.fare-table,
.lead-fields {
    min-width: 100%;
}

/* --------------------------------------------------------------------------
   1. Header — nav density at 1024–1180 and 1180–1320
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1179px) {
    .nav-link { padding: var(--kr-s3) var(--kr-s2); font-size: 13px; }
    .header-inner { gap: var(--kr-s4); }
    .brand-logo { height: 40px; }
}

@media (min-width: 1024px) and (max-width: 1100px) {
    .header-cta { display: none; }
}

@media (min-width: 1180px) and (max-width: 1319px) {
    .nav-link { padding: var(--kr-s3) var(--kr-s2); }
}

/* The mega-menu must not exceed the viewport on a short desktop window. */
@media (min-width: 1024px) {
    .mega-menu { width: min(880px, calc(100vw - 48px)); }
}

/* --------------------------------------------------------------------------
   2. Detail layout — never squeeze the sticky enquiry panel
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    }
}

@media (min-width: 1024px) and (max-width: 1119px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   3. Admin tables always scroll rather than overflow the page
   -------------------------------------------------------------------------- */
.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-card > .admin-table {
    display: block;
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   4. Fare table — stack below 480px
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .fare-table thead { display: none; }

    .fare-table,
    .fare-table tbody,
    .fare-table tr,
    .fare-table th,
    .fare-table td {
        display: block;
        width: 100%;
    }

    .fare-table tr {
        padding: var(--kr-s3) 0;
        border-bottom: 1px solid var(--kr-line);
    }

    .fare-table th,
    .fare-table td {
        border: 0;
        padding: 2px 0;
    }

    .fare-table .fare-amount {
        text-align: left;
        font-weight: 700;
        color: var(--kr-maroon);
    }

    .table-wrap { overflow-x: visible; border: 0; }
}

/* --------------------------------------------------------------------------
   5. Spec grid — one column on the narrowest screens
   -------------------------------------------------------------------------- */
@media (max-width: 399px) {
    .spec-grid { grid-template-columns: 1fr; }
    .counter-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6. Gallery thumbs on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gallery-hero-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-hero-thumb img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   7. Admin save bar must not cover the final field
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .admin-save-bar {
        margin-inline: calc(-1 * var(--kr-s4));
        margin-bottom: calc(-1 * var(--kr-s4));
        padding: var(--kr-s4);
        padding-bottom: calc(var(--kr-s4) + env(safe-area-inset-bottom));
    }

    .admin-content { padding-bottom: var(--kr-s7); }
}

/* --------------------------------------------------------------------------
   8. Counter band numerals
   -------------------------------------------------------------------------- */
.counter-value { font-size: clamp(30px, 9vw, var(--fs-mega)); }

/* --------------------------------------------------------------------------
   9. Sticky mobile bar vs the WhatsApp float
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .float-actions {
        bottom: calc(64px + env(safe-area-inset-bottom));
        right: var(--kr-s3);
    }

    .float-actions .float-btn { width: 46px; height: 46px; }
    .float-tooltip { display: none; }
}

/* --------------------------------------------------------------------------
   10. Hindi (Devanagari) is wider — stop labels clipping
   -------------------------------------------------------------------------- */
html.lang-hi .nav-link,
html[lang="hi"] .nav-link { letter-spacing: 0; }

html.lang-hi .btn,
html[lang="hi"] .btn {
    white-space: normal;
    line-height: 1.35;
}

html.lang-hi .badge,
html[lang="hi"] .badge {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

html.lang-hi .card-duration-chip,
html[lang="hi"] .card-duration-chip { max-width: calc(100% - 24px); }

@media (max-width: 479px) {
    html.lang-hi .section-title,
    html[lang="hi"] .section-title { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   11. Cards and grids at the narrowest widths
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .card-actions { flex-direction: column; }
    .card-actions .btn { width: 100%; }
    .card-body { padding: var(--kr-s3); }
    .container { padding-inline: var(--kr-s4); }
}

/* --------------------------------------------------------------------------
   12. Timeline rail must not shrink the content column
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .timeline { padding-left: var(--kr-s5); }
    .timeline::before { left: 11px; }
    .timeline-node { left: calc(-1 * var(--kr-s5) + 0px); width: 22px; height: 22px; }
    .timeline-day { gap: var(--kr-s2); }
}

/* --------------------------------------------------------------------------
   13. Hero on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .hero-content { padding-block: var(--kr-s7) var(--kr-s8); }
    .hero-rail { bottom: var(--kr-s5); }
    .hero-count { letter-spacing: .12em; }

    /* The copy spans the full width here, so even the scrim out while keeping
       the photograph bright enough to read as a photograph. */
    .hero-slide-scrim {
        background:
            linear-gradient(180deg, rgba(20, 8, 6, .28) 0%, rgba(20, 8, 6, .18) 26%, rgba(20, 8, 6, .18) 52%, rgba(20, 8, 6, .74) 100%),
            linear-gradient(90deg, rgba(20, 8, 6, .55) 0%, rgba(20, 8, 6, .30) 100%);
    }
}

/* Devanagari needs looser tracking than the Latin display setting. */
html.lang-hi h1.hero-title,
html.lang-hi h2.hero-title,
html[lang="hi"] h1.hero-title,
html[lang="hi"] h2.hero-title { letter-spacing: 0; line-height: 1.3; }

@media (max-width: 480px) {
    .hero-actions .btn { width: 100%; }
    .hero-content { gap: var(--kr-s3); }
    .hero-points { gap: var(--kr-s2) var(--kr-s4); font-size: var(--fs-xs); }
    .hero-rail { gap: var(--kr-s3); }
    .hero-controls { gap: var(--kr-s2); }
    .hero-dot { width: 22px; height: 5px; }
    .hero-dot[aria-selected="true"] { width: 38px; }
    .hero-nav { width: 40px; height: 40px; }
    .hero-count { display: none; }
}

/* --------------------------------------------------------------------------
   14. Filter sheet on very short viewports
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .filters-sidebar { max-height: 84vh; }
    .filter-actions { position: sticky; bottom: 0; background: var(--kr-cream); padding-top: var(--kr-s3); }
}

/* --------------------------------------------------------------------------
   15. Media library grid on the narrowest screens
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .media-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16. Print — motion and sticky chrome must not appear
   -------------------------------------------------------------------------- */
@media print {
    .m-progress,
    .float-actions,
    .mobile-bar { display: none !important; }
}