/**
 * App-like mobile & tablet shell for Pandal Explorer
 * Active below lg (992px). Desktop unchanged.
 */

/* ── Safe areas & base touch UI ── */
@media (max-width: 991.98px) {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 4.25rem;
        scroll-padding-bottom: 5.5rem;
    }

    body.pe-has-app-tabbar {
        padding-bottom: calc(4.35rem + env(safe-area-inset-bottom, 0px));
        background: #f7f3ee;
    }

    body.pe-has-app-tabbar main#main-content {
        padding-top: 0;
        min-height: 60vh;
    }

    /* Compact sticky top bar */
    .site-navbar {
        padding: 0.35rem 0 !important;
        padding-top: max(0.35rem, env(safe-area-inset-top)) !important;
        min-height: 3.4rem;
    }
    .site-navbar .container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        max-width: 100%;
        padding-left: max(0.85rem, env(safe-area-inset-left));
        padding-right: max(0.85rem, env(safe-area-inset-right));
    }
    .site-navbar .navbar-brand {
        font-size: 1.05rem;
        margin-right: auto;
    }
    .site-navbar .brand-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        margin-right: 0.4rem;
    }
    .pe-brand-text {
        max-width: 11rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pe-nav-search-icon {
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 999px;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.1);
        text-decoration: none !important;
        flex-shrink: 0;
    }
    .pe-nav-search-icon:hover { color: var(--pe-gold, #f4c430); background: rgba(244, 196, 48, 0.15); }
    .site-navbar .navbar-collapse {
        display: none !important;
    }

    /* Bottom tab bar */
    .pe-app-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        gap: 0;
        min-height: 3.85rem;
        padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(26, 10, 15, 0.08);
        box-shadow: 0 -8px 28px rgba(26, 10, 15, 0.08);
    }
    .pe-app-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.12rem;
        min-height: 3.1rem;
        padding: 0.2rem 0.15rem;
        border: 0;
        background: transparent;
        color: #7a6a72;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none !important;
        line-height: 1.1;
        -webkit-tap-highlight-color: transparent;
    }
    .pe-app-tab i {
        font-size: 1.25rem;
        line-height: 1;
    }
    .pe-app-tab.is-active {
        color: #b01b33;
    }
    .pe-app-tab--center {
        position: relative;
        top: -0.55rem;
    }
    .pe-app-tab-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border-radius: 999px;
        background: linear-gradient(145deg, #c41e3a, #8b1530);
        color: #fff;
        box-shadow: 0 8px 20px rgba(176, 27, 51, 0.35);
        margin-bottom: 0.1rem;
    }
    .pe-app-tab--center.is-active .pe-app-tab-fab {
        background: linear-gradient(145deg, #f4c430, #d4a017);
        color: #1a0a0f;
    }
    .pe-app-tab--center span:last-child {
        margin-top: 0.05rem;
    }

    /* More sheet */
    .pe-app-more-sheet {
        height: auto !important;
        max-height: min(78vh, 560px);
        border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .pe-app-more-sheet .offcanvas-header {
        padding: 1rem 1.15rem 0.5rem;
        border-bottom: 0;
    }
    .pe-app-more-sheet .offcanvas-body {
        padding: 0.5rem 1.15rem 1.25rem;
    }
    .pe-app-more-search {
        position: relative;
    }
    .pe-app-more-search > i {
        position: absolute;
        left: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
        color: #8a7a82;
        pointer-events: none;
    }
    .pe-app-more-search .form-control {
        padding-left: 2.4rem;
        border-radius: 999px;
        background: #f4efe8;
        border-color: transparent;
        min-height: 2.75rem;
    }
    .pe-app-more-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.65rem;
    }
    .pe-app-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 5.25rem;
        padding: 0.75rem 0.4rem;
        border-radius: 1rem;
        background: #fff;
        border: 1px solid rgba(26, 10, 15, 0.08);
        color: #1a0a0f !important;
        text-decoration: none !important;
        font-size: 0.78rem;
        font-weight: 700;
        text-align: center;
        box-shadow: 0 4px 12px rgba(26, 10, 15, 0.04);
    }
    .pe-app-more-item i {
        font-size: 1.35rem;
        color: #b01b33;
    }

    /* Lift WhatsApp above tab bar */
    .pe-wa-float {
        bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px)) !important;
        right: max(0.75rem, env(safe-area-inset-right)) !important;
    }

    /* Compact footer on mobile */
    .site-footer {
        padding-bottom: 1.5rem;
        font-size: 0.9rem;
    }
    .site-footer .row > [class*="col-"] {
        margin-bottom: 1.25rem;
    }

    /* Page heroes — app header feel */
    .page-hero,
    .page-hero--compact,
    .page-hero--inner {
        padding-top: 4.5rem !important;
        padding-bottom: 1.25rem !important;
        min-height: 0 !important;
    }
    .page-hero h1 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
        margin-bottom: 0.35rem !important;
    }
    .page-hero p {
        font-size: 0.92rem !important;
        margin-bottom: 0 !important;
    }

    .section-padding,
    .section-padding-lg,
    .home-section {
        padding: 2rem 0 !important;
    }

    .page-content {
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }
    .page-content > .container,
    .page-content .container {
        padding-left: max(0.9rem, env(safe-area-inset-left));
        padding-right: max(0.9rem, env(safe-area-inset-right));
    }

    /* Hero CTAs stay compact; other page btn-lg can still stretch */
    .home-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
        gap: 0.45rem;
    }
    .home-hero-actions .btn,
    .home-hero-actions .home-hero-cta {
        width: auto !important;
        flex: 0 1 auto;
        justify-content: center;
        min-height: 0 !important;
        font-size: 0.8125rem !important;
        padding: 0.4rem 0.85rem !important;
        border-radius: 999px !important;
    }
    .page-content .btn-lg:not(.home-hero-cta) {
        width: 100%;
        justify-content: center;
        min-height: 2.85rem;
        border-radius: 0.9rem !important;
    }

    /* Home hero — flush edges (no curved card look), compact height */
    .home-hero-carousel {
        height: min(52dvh, 380px) !important;
        min-height: 300px !important;
        max-height: 400px !important;
        border-radius: 0 !important;
        overflow: hidden;
        margin: 0 !important;
    }
    .home-hero-carousel .carousel,
    .home-hero-carousel .carousel-inner,
    .home-hero-carousel .carousel-item.home-hero-slide {
        border-radius: 0 !important;
    }
    .home-hero-overlay {
        padding: 3.25rem 0 1.25rem !important;
        align-items: flex-end !important;
        inset: 0 !important;
    }
    .home-hero-brand {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        margin-bottom: 0.2rem !important;
    }
    .home-hero-carousel h1 {
        font-size: 1rem !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
        margin-bottom: 0.4rem !important;
    }
    .home-hero-lead {
        font-size: 0.88rem !important;
        margin-bottom: 0.65rem !important;
        line-height: 1.4 !important;
    }
    .home-hero-caption {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
    }
    .home-hero-edge {
        display: none !important;
    }
    .home-hero-indicators {
        bottom: 0.65rem !important;
    }
    .home-welcome-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .home-welcome-section .section-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }
    .home-welcome-lead {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    /* What's new — 2-col app tiles */
    .pe-home-new {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    .pe-home-new-card {
        min-height: 0 !important;
        padding: 0.95rem 0.85rem !important;
        border-radius: 0.9rem;
    }
    .pe-home-new-card h3 {
        font-size: 0.92rem !important;
    }
    .pe-home-new-card p {
        font-size: 0.78rem !important;
        margin-bottom: 0.5rem !important;
    }
    .pe-home-new-icon {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1rem;
        margin-bottom: 0.45rem;
    }
    .pe-home-new-tools {
        flex-direction: column;
        align-items: stretch;
    }
    .pe-home-new-chips {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }
    .pe-home-new-chips .pe-tool-chip {
        flex: 0 0 auto;
    }

    /* Guide ranked cards — horizontal app list on phone */
    .guide-ranked-card {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        border-radius: 0.9rem;
    }
    .guide-ranked-media {
        max-height: none !important;
        min-height: 100% !important;
        aspect-ratio: auto !important;
        height: 100%;
    }
    .guide-ranked-body {
        padding: 0.75rem 0.8rem !important;
    }
    .guide-ranked-title {
        font-size: 0.98rem !important;
    }
    .guide-ranked-desc {
        font-size: 0.82rem !important;
        margin-bottom: 0.5rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .guide-ranked-footer {
        gap: 0.4rem;
    }
    .guide-ranked-cta {
        width: 100%;
        margin-top: 0.25rem;
    }
    .pe-guide-pandal-tags .pandal-tag,
    .pe-guide-pandal-tags .pe-crowd-badge {
        font-size: 0.68rem;
        padding: 0.18rem 0.45rem;
    }

    /* Home grids — 2 cards per row on phones */
    .pandal-mini-img,
    .pandal-showcase-img {
        aspect-ratio: 4 / 3;
        height: 118px !important;
        max-height: 118px !important;
    }
    .pandal-showcase-img img {
        height: 100%;
        object-fit: cover;
    }
    .pandal-showcase-body {
        padding: 0.7rem 0.75rem !important;
    }
    .pandal-showcase-body .h5,
    .pandal-showcase-body h3 {
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.25rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pandal-showcase-body .pandal-meta {
        font-size: 0.72rem !important;
        margin-bottom: 0 !important;
    }
    .pandal-showcase-body .pandal-desc {
        display: none !important;
    }
    .pandal-rating {
        font-size: 0.68rem !important;
        padding: 0.2rem 0.4rem !important;
        bottom: 8px !important;
        right: 8px !important;
    }
    .guide-hub-card-mini .card-body,
    .area-hub-card .card-body {
        padding: 0.75rem 0.7rem !important;
    }
    .guide-hub-card-mini .h6,
    .area-hub-card .h6 {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .guide-hub-card-mini .badge,
    .area-hub-card .badge {
        font-size: 0.65rem !important;
        margin-bottom: 0.4rem !important;
    }
    .festival-card-lg .festival-content {
        padding: 0.85rem 0.75rem !important;
    }
    .festival-card-lg .h5 {
        font-size: 0.9rem !important;
    }
    .festival-card-lg .festival-desc {
        display: none !important;
    }
    .festival-card-lg .festival-emoji {
        font-size: 1.35rem !important;
    }
    .festival-card-lg .festival-dates {
        font-size: 0.7rem !important;
    }

    /* Ganga / Howrah boat scene */
    .pe-ganga-stage {
        height: 172px !important;
    }
    .pe-ganga-bridge {
        width: 170% !important;
        bottom: 26% !important;
    }
    .pe-ganga-boat {
        width: 104px !important;
    }
    .pe-ganga-idol {
        width: 54px !important;
        height: 54px !important;
    }
    .pe-ganga-copy {
        padding-inline: 0.85rem !important;
    }

    /* Tram strip — compact, no huge empty tan gap */
    .pe-tram {
        padding: 0.45rem 0 0.75rem !important;
        background: #e8f0f6 !important;
        border-block: 1px solid rgba(30, 50, 80, 0.1);
    }
    .pe-tram-sky {
        inset: 0 0 0 0 !important;
        height: 100%;
        opacity: 0.85;
    }
    .pe-tram-track-wrap {
        height: 78px !important;
        margin-bottom: 0 !important;
    }
    .pe-tram-car {
        width: 160px !important;
        height: 60px !important;
    }
    .pe-tram-copy {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0.4rem !important;
        max-width: none !important;
        margin: 0.55rem 0.75rem 0 !important;
        padding: 0.75rem 0.85rem !important;
        background: #f7f0e4;
        border-radius: 0.75rem;
        border: 1px solid rgba(30, 50, 80, 0.08);
    }
    .pe-tram-kicker {
        margin: 0 !important;
        font-size: 0.7rem !important;
    }
    .pe-tram-text {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
        color: #2a3038 !important;
    }
    .pe-tram-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.65rem 1rem !important;
        margin: 0.15rem 0 0 !important;
        width: 100%;
    }
    .pe-tram-cta {
        font-size: 0.88rem;
    }

    /* Forms / trip create */
    .pe-trip-stop {
        padding: 0.55rem 0.65rem;
    }
    .form-control,
    .form-select {
        font-size: 16px !important; /* prevent iOS zoom */
        min-height: 2.65rem;
    }

    /* Ads — keep compact */
    .home-sponsor-strip .pe-ad-frame,
    .home-sponsor-strip .ad-banner-link {
        max-height: 110px !important;
        min-height: 80px !important;
    }
    .home-sponsor-strip .pe-ad-img,
    .home-sponsor-strip .ad-banner-image {
        max-height: 110px !important;
    }

    /* Hide bulky desktop-only chrome */
    .logo-slider-section {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
}

/* Tablet (portrait + landscape under lg) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pe-app-more-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .guide-ranked-card {
        grid-template-columns: 180px minmax(0, 1fr) !important;
    }
    .home-hero-actions {
        flex-direction: row;
    }
    .home-hero-actions .btn {
        width: auto;
        flex: 0 1 auto;
    }
    .pe-home-new-card {
        min-height: 10rem !important;
    }
    .page-content > .container {
        max-width: 920px;
    }
}

/* Very small phones */
@media (max-width: 379.98px) {
    .pe-app-tab span {
        font-size: 0.58rem;
    }
    .pe-app-tab-fab {
        width: 2.7rem;
        height: 2.7rem;
    }
    .guide-ranked-card {
        grid-template-columns: 96px minmax(0, 1fr) !important;
    }
}

/* In-app WebView (?app=1): still use bottom tabs for web pages opened in browser-like tabs */
body.app-embed.pe-has-app-tabbar {
    padding-bottom: 0;
}
body.app-embed .pe-app-tabbar,
body.app-embed .pe-app-more-sheet {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .pe-app-tab,
    .pe-app-more-item,
    .guide-ranked-card {
        transition: none !important;
    }
}