/* ==========================================================================
   MOBILE LAYER — बिटटू बेकार
   --------------------------------------------------------------------------
   Loaded after styles.css, so every rule here wins on equal specificity.

   styles.css is written desktop-first: its base rules describe the large
   screen and max-width queries walk back down. Rewriting 6,000 lines to
   invert that would churn every page with no way to see the result, so this
   file supplies the mobile-first half instead — the small-screen defaults
   that should have been the base (readable type, thumb-sized targets, no
   sideways scroll, safe-area awareness), plus the phone breakpoints the
   original cascade stops short of.

   Read it as five layers:
     1  Foundations         — apply at every width
     2  Touch input         — pointer/hover capability, not screen size
     3  Tablet   769-900px
     4  Phone    <= 640px
     5  Small    <= 430px, tiny <= 360px, and short landscape
   ========================================================================== */


/* ==========================================================================
   1. FOUNDATIONS
   ========================================================================== */

html {
    /* Stop iOS inflating type when a phone is turned to landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* The navbar is sticky, so a jump to #contact would land under it */
    scroll-padding-top: 100px;
}

/* clip, not hidden: overflow-x hidden on the body turns it into a scroll
   container, which is what makes a sticky navbar come unstuck in Chrome.
   Engines without clip fall back to the hidden already in styles.css. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Devanagari compounds, long URLs and pasted email addresses are the usual
   causes of a page that scrolls sideways on a 360px screen. */
body {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* styles.css caps img and iframe; the rest of the embedded box types need it
   just as much, and a table is the one element that will happily run wider
   than its parent for ever. */
video, svg, canvas, table { max-width: 100%; }

/* Notched and rounded-corner phones: keep chrome out of the cut-outs. env()
   resolves to 0 everywhere else, so max() leaves other devices untouched. */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(var(--page-x), env(safe-area-inset-left));
        padding-right: max(var(--page-x), env(safe-area-inset-right));
    }

    .float-actions {
        right: max(20px, env(safe-area-inset-right));
        bottom: max(22px, env(safe-area-inset-bottom));
    }

    .footer-bottom { padding-bottom: env(safe-area-inset-bottom); }

    /* Full-screen overlays, whose own chrome sits at the very edges */
    .lightbox { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .video-modal { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
    .ev-modal { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .book-reader { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   2. TOUCH INPUT
   Keyed to what the pointer can do, not to how wide the screen is — a 1280px
   tablet needs these as much as a 360px phone, and a touchscreen laptop
   should not be handed the phone layout just because it can be tapped.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2a. Form fields — iOS Safari zooms the page in whenever a focused field is
   set smaller than 16px, and does not zoom back out. Every field on the site
   was between 12.8px and 13.5px. 16px is the whole fix.
   Scoped by width as well so a desktop form keeps its designed proportions.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    input,
    select,
    textarea,
    .contact-form input,
    .contact-form textarea,
    .search-box input,
    .blog-search input,
    .newsletter-form input,
    .ev-field input,
    .ev-field textarea,
    .ev-captcha-row input,
    .captcha-row input#cfCaptcha {
        font-size: 16px;
    }

    /* The captcha answer is short and set in wide tracking; 16px plus 3px of
       letter-spacing overflowed its row. */
    .ev-captcha-row input { letter-spacing: 2px; }
}

/* --------------------------------------------------------------------------
   2b. Target size — a fingertip is about 9mm, which is why 44px is the floor
   in both the Apple and the WCAG guidance. Most controls here were 29-36px.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .btn,
    .filter-btn,
    .bi-btn,
    .er-cta,
    .invite-btn,
    .pdf-btn,
    .share-chip,
    .btn-whatsapp,
    .wa-offer-dismiss {
        min-height: 44px;
    }

    /* The unmodified pill and the dismiss link are plain buttons, so their
       label would sit at the top of the taller box rather than in it. (The
       -pill variants and .btn are inline-flex already.) */
    .filter-btn,
    .wa-offer-dismiss {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Round icon buttons */
    .nav-arrow,
    .br-tool,
    .captcha-refresh-btn,
    .ev-captcha-refresh,
    .vm-close,
    .ev-modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Carousel dots are 8-10px by design. Rather than make them bigger and
       break the look, grow the invisible box that receives the tap. */
    .hero-dot,
    .carousel-dots .dot { position: relative; }

    .hero-dot::after,
    .carousel-dots .dot::after {
        content: '';
        position: absolute;
        inset: -14px;
    }

    /* The heart and the share control on a quote card are spans, so they get
       no padding of their own from a button reset. */
    .like-btn,
    .pc-like,
    .share-btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Footer link lists: 13px rows sat 8px apart, which is a lottery to hit.
       Padding rather than min-height, so the chevron and the label keep the
       baseline alignment .footer-list li a sets. */
    .footer-list li a { padding: 9px 0; }
    .contact-info li { padding: 4px 0; }
}

/* --------------------------------------------------------------------------
   2c. No hover — a tap latches :hover on until the next tap somewhere else,
   so every lift, zoom and slide stays frozen on screen behind the finger.
   Colour and background changes are harmless and stay; motion goes.
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .btn:hover,
    .book-card:hover .book-cover,
    .feature-item:hover .feature-icon,
    .poem-card:hover,
    .event-card:hover,
    .event-row:hover,
    .book-item:hover,
    .video-card:hover,
    .blog-card:hover,
    .review-card:hover,
    .share-chip:hover,
    a.an-item:hover,
    .social-links a:hover,
    .float-btn:hover,
    .nav-arrow:hover,
    .star-input label:hover,
    .filter-btn.gallery-pill:hover,
    .filter-btn.poem-pill:hover,
    .filter-btn.book-pill:hover,
    .gallery-item:hover img,
    .poem-card:hover .poem-art,
    .event-featured:hover .ef-media img,
    .event-card:hover .ec-media img,
    .video-featured:hover .vf-media img,
    .video-card:hover .vc-media img,
    .blog-featured:hover .bf-media img,
    .blog-card:hover .bc-media img {
        transform: none;
    }

    .btn:hover,
    .share-chip:hover,
    .float-btn:hover { box-shadow: none; }

    /* These are centred by their own transform, so it has to be restored
       rather than dropped — none would fling them into the corner. */
    .hero-arrow:hover { transform: translateY(-50%); }
    .video-featured:hover .vf-play,
    .video-card:hover .vc-play { transform: translate(-50%, -50%); }

    /* Content that only exists on hover cannot be reached at all by touch:
       show the gallery captions, drop the book cover's "Read" veil. */
    .gallery-overlay { opacity: 1; }
    .bi-peek { display: none; }
}


/* ==========================================================================
   3. TABLET  769-900px
   The gap the original cascade leaves: below 992px the page columns stack,
   but several card grids keep a desktop column count until 768px.

   The lower bound is not optional. This file loads after styles.css, so a
   plain max-width: 900px here would also outrank every phone rule in the
   768px block below it — which is exactly what happened: the footer went to
   two columns on a 320px screen and pushed a column off the side.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 900px) {
    /* Six across put the home-page covers at ~110px wide, narrower than the
       same covers on a phone. */
    .books-grid { grid-template-columns: repeat(3, 1fr); }

    /* Banner media sized for a desktop hero eats a tablet screen */
    .ef-media { height: 260px; }
    .vf-media { height: 280px; }
    .bf-media { height: 250px; }

    .about-gallery { height: 280px; }

    /* Five footer columns at two-up left "Get In Touch" sharing a row with
       the newsletter form; two even columns read straight down. */
    .footer-expanded .footer-top { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   4. PHONE  <= 640px
   ========================================================================== */
@media (max-width: 640px) {

    /* ---------------------------------------------------------- foundations
       92vw containers plus 20-30px of section padding spent a third of a
       360px screen on gutters. One gutter, set once, is enough — and having
       it in a variable lets the edge-to-edge strips below cancel it exactly. */
    :root {
        --container: 100%;
        --container-narrow: 100%;
        --gutter: 16px;
    }

    .quotes-page-main,
    .video-page-main,
    .blogs-page-main,
    .events-page-main,
    .gallery-page-main,
    .event-detail-main,
    .article-main,
    .contact-main,
    .who-section,
    .journey-inner,
    .about-stats-section,
    .feedback-summary-section,
    .feedback-list-section,
    .feedback-form-section,
    .books-page-main,
    .poems-page-main {
        /* .feedback-summary-section hard-codes 92vw rather than the variable,
           so none is needed here as well as the container override above. */
        max-width: none;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .books-section { padding: 22px var(--gutter); margin: 30px auto; border-radius: 12px; }
    .about-section,
    .features-section,
    .quote-banner-section {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    /* ------------------------------------------------------------- reading
       Body copy sat at 12.5-13.6px, below the 15px that reads comfortably at
       arm's length on a phone. Line height comes up with it. */
    .about-text,
    .who-text { font-size: 0.95rem; line-height: 1.85; }
    .who-text-hindi { font-size: 1rem; line-height: 2; }
    .journey-step p { font-size: 0.9rem; line-height: 1.75; }
    .feature-item p { font-size: 0.88rem; line-height: 1.65; max-width: none; }
    .hindi-quote-text { font-size: 0.98rem; line-height: 1.8; }
    .pc-lines { font-size: 0.92rem; line-height: 1.95; }
    .footer-brand > p.footer-desc,
    .footer-desc { font-size: 0.88rem; line-height: 1.8; }
    .article-body { font-size: 1rem; line-height: 1.95; }
    .article-body p { margin-bottom: 18px; }
    .ev-detail-text { font-size: 15.5px; line-height: 1.85; }
    .lightbox-caption p { font-size: 0.95rem; }

    /* ------------------------------------------------------------ hero
       Layout is handled by the stacked-banner section below; this is just
       the type coming down to phone size. */
    .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .script-subtitle { font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero-description { font-size: 0.95rem; line-height: 1.75; }
    .hero-designation { letter-spacing: 1.6px; font-size: 0.8rem; }
    .hero-buttons { gap: 10px; }
    .hero-buttons .btn { flex: 1 1 44%; }

    /* ------------------------------------------------------------ stats
       Four cards in one column is a screen and a half of scrolling before
       the page proper starts; two-up keeps the bar a bar. */
    .stats-section { margin-top: -24px; padding: 0 var(--gutter); }
    .stats-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 10px;
        padding: 18px 14px;
    }
    .stat-card { gap: 10px; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.05rem; flex-shrink: 0; }
    .stat-info h3 { font-size: 1.15rem; }
    .stat-info p { font-size: 0.72rem; line-height: 1.3; }

    /* ------------------------------------------------------------ sections */
    .section-title { font-size: 1.55rem; }
    .features-title { font-size: 2rem; margin-bottom: 26px; }
    .features-grid { gap: 26px; }

    /* ------------------------------------------------------------ cards
       The home strip keeps two covers per row. The covers used to be given a
       height here too, which is what cut the author's face: the column is
       wider than 150px on most phones, so object-fit: cover took the
       difference off the top. styles.css shapes them 3:4 like the artwork
       now, so only the padding belongs here. */
    .book-cover { padding: 14px 10px; }
    .book-cover h3 { font-size: 0.95rem; }

    /* ------------------------------------------------------------ filters
       Pills wrap to three or four ragged rows on a phone. A single row that
       scrolls sideways keeps the categories in one place and the page short.
       Snap points stop it resting mid-pill. */
    .filter-buttons,
    .gallery-filters,
    .poems-filters,
    .books-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        /* These three sit inside a space-between toolbar; without this they
           would size to their content and push the toolbar wide instead of
           scrolling inside it. */
        flex: 1 1 100%;
        min-width: 0;
        /* Centring an overflowing row puts its first pills out of reach in
           Chrome and Safari — the scroll range starts at the visible edge. */
        justify-content: flex-start;
        /* Bleed into the page gutter so the row reads as scrollable */
        margin-left: calc(var(--gutter) * -1);
        margin-right: calc(var(--gutter) * -1);
        padding: 2px var(--gutter) 6px;
        scrollbar-width: none;
    }
    .filter-buttons::-webkit-scrollbar,
    .gallery-filters::-webkit-scrollbar,
    .poems-filters::-webkit-scrollbar,
    .books-filters::-webkit-scrollbar { display: none; }

    .filter-buttons .filter-btn,
    .gallery-filters .filter-btn,
    .poems-filters .filter-btn,
    .books-filters .filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* The search box takes the row's full width, under the pills */
    .quotes-filter-bar { gap: 12px; }
    .search-box { width: 100%; }

    /* ------------------------------------------------------------ gallery */
    .lightbox { padding: 56px 10px 78px; }
    .lightbox-content img { max-height: 58vh; }
    /* Arrows sat on top of the photo at full width; a bar under it is clear
       of the image and lands under the thumb rather than over the subject. */
    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 16px;
        transform: none;
    }
    .lightbox-prev { left: 26%; }
    .lightbox-next { right: 26%; }

    /* ------------------------------------------------------------ forms */
    .panel-card { padding: 20px 16px; }
    .contact-form textarea { min-height: 130px; }
    .btn-send { width: 100%; justify-content: center; }
    .newsletter-form { width: 100%; }
    .wa-offer-actions { flex-direction: column; align-items: stretch; }
    .wa-offer-actions .btn-whatsapp { justify-content: center; }

    /* Captcha: image, refresh and field on one line is too much for 360px */
    .captcha-row,
    .ev-captcha-row { row-gap: 12px; }
    .captcha-row input#cfCaptcha,
    .ev-captcha-row input { flex: 1 1 100%; min-width: 0; }

    /* ------------------------------------------------------------ events */
    .ev-detail-title { font-size: 22px; }
    .ev-detail-media img { max-height: 240px; }
    .ev-detail-actions .btn { width: 100%; justify-content: center; }
    .ev-related-grid { grid-template-columns: 1fr; }

    /* ------------------------------------------------------------ footer
       (.site-footer already takes its gutter from --page-x) */
    .footer-top { gap: 22px; }
    /* Five stacked link lists is a long tail on a phone; two-up shortens it */
    .footer-col h4 { margin-bottom: 8px; }
    .footer-list { display: flex; flex-wrap: wrap; column-gap: 18px; }
    .footer-list li { flex: 0 0 calc(50% - 9px); }
    .footer-hits { justify-content: center; }
    .footer-bottom { font-size: 0.72rem; }

    /* --------------------------------------------------------- float buttons
       Two 52px circles over a phone screen cover real content, and the same
       number is in the footer. Keep them, smaller. */
    .float-btn { width: 46px; height: 46px; font-size: 1.15rem; }
    .float-actions { gap: 10px; }

    /* ------------------------------------------------------------ reader
       The reader sizes the book from the space its own padding leaves, and
       has a tuned phone block of its own in styles.css — only the title bar
       needs loosening here. */
    .br-bar { gap: 10px; }
}


/* ==========================================================================
   4b. HOME HERO — the banner becomes a band instead of a backdrop
   --------------------------------------------------------------------------
   The three banners are 2:1 artwork built for a desktop hero: the copy sits
   in the empty left half and the subject — the author on slide one, the quill
   and books on the others — lives out at the right edge. Cropped to a phone
   the visible slice was mostly empty paper, and what artwork survived was
   under a 0.55 white wash with an 80%-opaque copy panel on top of that. The
   banner was there, but there was nothing left of it to see.

   So on a phone the slide stops being one composition and becomes two stacked
   parts: the artwork in a band of its own, at full strength, and the copy
   below it on clean ground. .hero-bg is a bare <span> that was absolutely
   filling the slide, so returning it to the flow is the whole move — no
   markup change, and the carousel is untouched.

   992px, not 768px, is the boundary: that is where styles.css drops the
   side-by-side composition and centres the copy panel over the artwork, so a
   tablet had the author's face behind a translucent white box too.
   ========================================================================== */
@media (max-width: 992px) {
    .hero-slide {
        display: block;
        padding: 0 0 54px;     /* the dots sit in the band this leaves */
        background: #fffdfa;   /* the cream the artwork fades into */
    }

    .hero-bg {
        position: relative;
        /* The base rule pins it with inset: 0, which on a relative box would
           just be a zero offset — clearing it says what is meant. */
        inset: auto;
        display: block;
        width: 100%;
        /* A fixed ratio rather than a height, so the crop is the same at every
           phone width. The cap is in vh rather than px because what makes a
           banner too tall is the screen it is on, not its pixel count: this
           keeps it to about half the viewport on a tablet. */
        aspect-ratio: 16 / 10;
        max-height: 52vh;
    }

    /* Softens the join, so the band reads as part of the slide rather than a
       photo dropped on top of it. */
    .hero-bg::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 58px;
        background: linear-gradient(to top, #fffdfa 12%, rgba(255, 253, 250, 0));
    }

    /* Focal points for the much narrower crop. `top` matters only on a tablet,
       where the cap makes the band wider than 2:1 and the crop turns vertical:
       it is what keeps the author's head in frame. */
    .slide-author .hero-bg { background-position: 74% top; }
    /* b3 is a frame: quill and ink pot at the left edge, books and branch at
       the right. The band is 78% of its width, so something has to go — and a
       quill sliced down its length looked like a smudge. Shifting right drops
       it cleanly and keeps the books, which are the larger element. */
    .slide-words .hero-bg { background-position: 62% center; }
    /* bg.jpg is the portrait one: full width fits, so this is choosing how far
       down to look — the quill and ink pot sit just below the top. */
    .slide-journey .hero-bg { background-position: center 12%; }

    /* The zoom drift scales the element itself, and in the flow that would
       push the artwork out over the copy. It is also the kind of always-on
       animation a phone is better off without. */
    .hero-slide.is-active .hero-bg { animation: none; }

    /* Both washes existed to hold copy legible over artwork. Nothing sits over
       the artwork any more, so the banner is seen as it was painted. */
    .hero-slide::after,
    .slide-author::after { display: none; }

    /* And with no artwork behind it, the copy needs no panel of its own. */
    .hero-text {
        max-width: none;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .hero-container { padding: 26px var(--page-x) 0; }

    /* The arrows are pinned to the middle of the slider, which in a stacked
       slide is the copy, not the artwork. The dots and the swipe handler in
       js/main.js both still move the carousel. */
    .hero-arrow { display: none; }
}


/* ==========================================================================
   5a. SMALL PHONE  <= 430px
   The width most phones actually report. Anything still in two columns here
   is narrower than the text it holds.
   ========================================================================== */
@media (max-width: 430px) {
    .books-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .book-cover h3 { font-size: 0.85rem; line-height: 1.3; }

    .stats-container { gap: 14px 8px; }
    .stat-info h3 { font-size: 1.05rem; }

    .hero-buttons .btn { flex: 1 1 100%; }

    /* Two touch tiles side by side leave no room for their labels */
    .touch-item { flex: 0 0 100%; }
    .about-stat { flex: 0 0 100%; }

    .section-title { font-size: 1.4rem; }
    .page-title { font-size: 2rem; }
    .page-subtitle { font-size: 1.45rem; }
    .about-script-name { font-size: 2.1rem; }
    .contact-title { font-size: 2.1rem; }
    .gallery-heading { font-size: 1.7rem; }
    .article-title { font-size: 1.45rem; }

    .footer-list li { flex: 0 0 100%; }

    .lightbox-prev { left: 18%; }
    .lightbox-next { right: 18%; }

    /* Modal actions read as one column of full-width buttons */
    .ev-modal-actions .btn,
    .bm-actions .btn { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   5b. TINY PHONE  <= 360px
   Galaxy A-series, iPhone SE 1st gen, and any phone with display zoom on.
   ========================================================================== */
@media (max-width: 360px) {
    :root { --page-x: 12px; --gutter: 12px; }

    /* The page wrappers need no rule of their own here — they already take
       their gutter from --gutter, which this block has just narrowed. */

    .logo-name { font-size: 1.6rem; }
    .logo-tagline { font-size: 0.58rem; letter-spacing: 1.2px; }

    /* One column: at 360px a pair of covers is 150px each, and the titles
       on this site run long. The cover's height came off with the others -
       it is the artwork's 3:4 now, so a single column shows a whole cover
       rather than a letterboxed slice of one. */
    .books-grid { grid-template-columns: 1fr; }

    .stats-container { grid-template-columns: 1fr; }

    .hero-title { font-size: 1.85rem; }
    .script-subtitle { font-size: 1.4rem; }

    .filter-btn { padding: 8px 12px; font-size: 0.74rem; }
    .footer-list { column-gap: 0; }
}


/* ==========================================================================
   5c. SHORT VIEWPORT — a phone held sideways, or a small window
   The heroes and overlays are sized from the width, so in landscape they end
   up taller than the screen they are on.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-slider { min-height: 0; }
    .hero-slide { padding: 0 0 40px; }
    /* A small phone on its side still matches the block above, where the band
       would be taller than the screen. Height off the viewport instead. */
    .hero-bg { aspect-ratio: auto; height: 46vh; max-height: none; }
    .hero-bg::after { height: 34px; }
    .hero-container { padding: 18px var(--page-x) 0; }
    .hero-title { font-size: 1.9rem; }
    .script-subtitle { font-size: 1.3rem; }
    .hero-description { margin-bottom: 14px; }
    .hero-dots { bottom: 10px; }

    .contact-hero,
    .about-hero,
    .quotes-hero,
    .poems-hero,
    .books-hero { min-height: 0; padding-top: 26px; padding-bottom: 26px; }

    .lightbox { padding: 44px 56px 12px; }
    .lightbox-content img { max-height: 74vh; }
    .lightbox-prev { left: 12px; top: 50%; bottom: auto; transform: translateY(-50%); }
    .lightbox-next { right: 12px; top: 50%; bottom: auto; transform: translateY(-50%); }

    .float-actions { flex-direction: row; }
}

/* The open menu is already capped against the viewport in styles.css; in
   landscape there is much less of it, so tighten the cap. Scoped to the width
   where .nav-links is the slide-down panel rather than the desktop row. */
@media (max-width: 992px) and (max-height: 500px) and (orientation: landscape) {
    .nav-links.open {
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
    }
}