/* ==========================================================================
   Home page — native-app layer for phones
   Added 17 Oct 2026. Loaded last, on index.html only.

   Every rule sits inside the same 768px query the shared tab bar uses
   (site-chrome.css), so desktop and tablet-landscape are untouched. Where
   home.css defines a selector twice in conflicting blocks, the override here
   is scoped to the section's id instead of editing either block (see the
   #the-shift note in home.css for why).

   Colours and type are the page's own: Cinzel headings, Montserrat body, the
   nav gold #c2a74e, the hero's gold button, its deep-violet glass card.

   Nothing here hides content unless home-app.js has first added the class
   that does it (the bio "Read more"), so if the script never loads the page
   is simply the full-length version.
   ========================================================================== */

.app-dots,
.app-cta,
.app-count,
.app-more { display: none; }

@media (max-width: 768px) {

   :root {
      --app-bar: 56px;
      --app-gold: #c2a74e;
      --app-ink: #15131f;
      --app-glass: rgba(16, 13, 34, 0.94);
      --app-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
      --app-tabs: calc(58px + env(safe-area-inset-bottom, 0px));
   }

   html {
      scroll-padding-top: calc(var(--app-bar) + 12px + env(safe-area-inset-top, 0px));
   }

   body {
      overscroll-behavior-x: none;
   }

   /* ---- App bar ------------------------------------------------------------
      The 85px website header becomes a 56px translucent bar that slides away
      while reading down and comes back on the first scroll up.

      The CONTAINER is fixed and moved, never the header itself: the drawer and
      its overlay live inside .bd-nav-wrapper, and a transform on their ancestor
      would turn their position:fixed into position:absolute. The wrapper keeps
      the bar's height as a spacer so the hero does not slide underneath. */

   .bd-nav-wrapper {
      height: calc(var(--app-bar) + env(safe-area-inset-top, 0px));
   }

   .bd-nav-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 997;              /* under the drawer overlay (998), same context */
      height: calc(var(--app-bar) + env(safe-area-inset-top, 0px));
      padding-top: env(safe-area-inset-top, 0px);
      /* near-opaque: the logo video's own white frame must not show as a
         lighter square against a see-through bar */
      background: rgba(255, 255, 255, 0.97);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      transition: transform 0.28s var(--app-ease), box-shadow 0.2s ease;
   }

   body.app-scrolled .bd-nav-container { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); }
   body.app-bar-hidden .bd-nav-container { transform: translateY(-100%); }

   .bd-nav-inner {
      height: var(--app-bar);
      padding: 0 12px 0 8px;
      gap: 8px;
   }

   .bd-nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
   }

   /* The logo is a video with an off-white frame; multiply drops that frame
      into the white bar instead of showing a grey box. Both sizes need
      !important: the markup carries an inline "width:93px; height:auto", and
      width:auto against that inline height:auto renders the video at its
      full native size across the whole screen. */
   .bd-nav-logo video {
      width: auto !important;
      height: 42px !important;
      max-width: 72px;
      object-fit: contain;
      mix-blend-mode: multiply;
   }

   .bd-nav-logo::after {
      content: "Avinash Anand Singh";
      font-family: "Cinzel", Georgia, serif;
      font-weight: 700;
      font-size: clamp(13px, 3.7vw, 15px);
      letter-spacing: 0.02em;
      color: var(--app-ink);
      white-space: nowrap;
   }

   /* The Menu tab opens the drawer (app-shell.js clicks this button, which
      works while it is hidden), so a second menu icon is clutter. */
   .bd-nav-hamburger { display: none; }

   /* Students need the LMS one tap away; Contact already has its own tab. */
   .bd-nav-actions .bd-nav-contact.desktop[href*="coachavinash.com"] {
      display: inline-flex;
      align-items: center;
      height: 34px;
      padding: 0 14px;
      font-size: 12px;
      border-width: 1.5px;
      white-space: nowrap;
   }

   /* ---- Press feedback -----------------------------------------------------
      A pressed control that gives way is most of what makes a tap feel
      native. Hover lifts are cancelled on touch screens, where they stick
      after the finger leaves. */

   .mch-btn, .wa-cta, .enroll, .rs-btn, .btn-style-two, #the-shift .cta,
   .about-btn, .arrow-btn, .app-cta__btn, .app-more, .bdtc-social a {
      transition: transform 0.12s ease, filter 0.12s ease;
      -webkit-tap-highlight-color: transparent;
   }

   .mch-btn:active, .wa-cta:active, .enroll:active, .rs-btn:active,
   .btn-style-two:active, #the-shift .cta:active, .about-btn:active,
   .arrow-btn:active, .app-cta__btn:active, .app-more:active {
      transform: scale(0.96);
      filter: brightness(0.96);
   }

   /* ---- Hero ---------------------------------------------------------------- */

   /* The offer card was centred in a 66svh band with ~120px of empty video
      above and below it; let the content set the height so the first screen
      shows the offer and the next section starts sooner. */
   .hero-section.mch { min-height: 0; padding: 52px 16px 44px; }

   .mch-meta dt { font-size: 0.7rem; }
   .mch-countdown { font-size: 0.75rem; }

   /* ---- Logo strip ---------------------------------------------------------- */

   .featured-logos-wrap { padding-block: 4px; }

   /* ---- About me -------------------------------------------------------------
      Portrait capped at most of a screen, the card lifted over it, and the
      three paragraphs folded behind "Read more" by home-app.js. */

   #about-me-mobile { padding-top: 14px; }

   #about-me-mobile .hero-figure { border-radius: 24px; }

   #about-me-mobile .hero-figure img {
      aspect-ratio: auto;
      height: min(62svh, 118vw);
      object-position: center 15%;
   }

   #about-me-mobile .bio-card {
      margin-top: -30px;
      border-radius: 24px;
      padding: 18px 18px 10px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
   }

   #about-me-mobile .bio-card p { font-size: 15px; line-height: 1.65; }

   #about-me-mobile .bio-card.app-clamp {
      max-height: 300px;
      overflow: hidden;
      padding-bottom: 0;
   }

   #about-me-mobile .bio-card.app-clamp::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 120px;
      border-radius: 0 0 24px 24px;
      background: linear-gradient(rgba(255, 255, 255, 0), #fff 72%);
      pointer-events: none;
   }

   .app-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      position: absolute;
      left: 50%;
      bottom: 14px;
      z-index: 1;
      transform: translateX(-50%);
      min-height: 38px;
      padding: 0 18px;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 999px;
      background: #fff;
      color: var(--app-ink);
      font: 600 13px/1 "Montserrat", sans-serif;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
   }
   .app-more:active { transform: translateX(-50%) scale(0.96); }

   #about-me-mobile .btn-style-two {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-height: 48px;
      margin: 16px 6px 0;
      border-radius: 999px;
   }

   /* ---- Programme rails ------------------------------------------------------
      Live Sessions (3 cards) and Recorded Sessions (4) were seven
      full-screen cards in a column — over 5,000px of scrolling on a phone.
      Each becomes a swipe rail: one card and a peek of the next, snapping,
      with dots under it (home-app.js). The cards themselves keep their
      artwork, meta pill and button. */

   #live-sessions,
   #recorded-sessions { padding-block: 34px 18px; }

   #live-sessions .live-wrap,
   #recorded-sessions .rs-wrap { width: 100%; }

   #live-sessions header,
   #recorded-sessions header { padding-inline: 16px; }

   .live-intro,
   .rs-intro { margin-bottom: 14px; }

   #live-sessions .live-grid,
   #recorded-sessions .rs-grid {
      display: flex;
      gap: 12px;
      margin: 0;
      padding: 6px 16px 14px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 16px;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   #live-sessions .live-grid::-webkit-scrollbar,
   #recorded-sessions .rs-grid::-webkit-scrollbar { display: none; }

   #live-sessions .live-card,
   #recorded-sessions .rs-card {
      flex: 0 0 min(72vw, 290px);
      min-height: 0;
      padding: 10px 10px 14px;
      border-radius: 24px;
      scroll-snap-align: start;
      scroll-snap-stop: always;
   }

   #live-sessions .live-figure,
   #recorded-sessions .rs-figure { border-radius: 18px; margin-bottom: 12px; }

   #live-sessions .live-details,
   #recorded-sessions .rs-details { min-height: 0; gap: 10px; }

   .live-meta,
   .rs-meta { font-size: 13px; }

   /* Full-width buttons inside a card, the way an app lays out an action. */
   #live-sessions .enroll,
   #recorded-sessions .rs-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 46px;
      border-radius: 14px;
   }

   /* "About" was a 53x28 chip; this is a comfortable target. */
   #live-sessions .about-btn,
   #recorded-sessions .about-btn {
      top: 10px;
      right: 10px;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: 12.5px;
      font-weight: 600;
      background: rgba(10, 8, 22, 0.55);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
   }

   /* The live overlays were set in 30px type — five words to a line in a
      280px card. */
   #live-sessions .about-overlay,
   #recorded-sessions .about-overlay {
      padding: 54px 16px 18px;
      font-size: 14.5px;
      line-height: 1.6;
   }
   #live-sessions .about-overlay br { display: none; }
   #live-sessions .about-overlay h5 {
      margin: 0 0 8px;
      font-family: "Cinzel", Georgia, serif;
      font-size: 17px;
      font-weight: 700;
   }

   .app-dots {
      display: flex;
      justify-content: center;
      gap: 7px;
      padding: 2px 0 6px;
   }

   .app-dots span {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(21, 19, 31, 0.22);
      transition: width 0.25s var(--app-ease), background-color 0.25s ease;
   }

   .app-dots span.is-on {
      width: 22px;
      background: var(--app-gold);
   }

   /* ---- Quote ----------------------------------------------------------------- */

   #quote { padding: 40px 16px; }

   #quote .portrait-wrap img {
      width: 100%;
      max-width: none;
      height: min(56svh, 470px);
      object-position: center 18%;
      border-radius: 24px;
      border-width: 4px;
   }

   #quote .quote-panel { padding: 30px 24px 26px; border-radius: 24px; }

   /* The marks sat 36px outside the card and were cut by the screen edge. */
   #quote .quote-panel::before { top: -20px; left: 4px; font-size: 120px; }
   #quote .quote-panel::after { right: 6px; bottom: -40px; font-size: 120px; }

   /* ---- Testimonial rows ------------------------------------------------------ */

   #product-testimonials,
   #resulted-testimonials { padding: 34px 0 !important; }   /* inline 60px */

   /* ---- Photo gallery -----------------------------------------------------------
      Swipe already works; the arrows move onto the photo as glass buttons and
      a counter shows where you are (home-app.js). */

   #gallery-section { position: relative; padding: 6px 0 16px; }

   /* home-app.js moves these inside .carousel, which is the photo frame */
   #gallery-section .controls {
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 2;
      margin: 0;
      gap: 10px;
   }

   #gallery-section .arrow-btn {
      width: 40px;
      height: 40px;
      border: 0;
      background: rgba(255, 255, 255, 0.82);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      font-size: 1.2rem;
      line-height: 1;
   }

   .app-count {
      display: block;
      position: absolute;
      left: 12px;
      bottom: 22px;
      z-index: 2;
      padding: 6px 11px;
      border-radius: 999px;
      background: rgba(10, 8, 22, 0.55);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color: #fff;
      font: 600 12px/1 "Montserrat", sans-serif;
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
   }

   /* ---- Footer ------------------------------------------------------------------ */

   .bdtc-footer { min-height: 0; padding: 44px 18px 26px; }

   /* Footer links were 22px tall rows; the padding makes each one a full
      thumb-sized target without moving the text. */
   .bdtc-col a {
      display: block;
      width: fit-content;
      margin-block: 0;
      padding-block: 7px;
   }
   .bdtc-legal a { display: inline-block; padding: 10px 8px; }

   /* ---- Sticky masterclass bar ----------------------------------------------------
      Built by home-app.js from the hero (same link, date and title), shown
      once the hero card has scrolled away and hidden again wherever the page
      already shows a booking button, so it never doubles one up. */

   .app-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(var(--app-tabs) + 10px);
      z-index: 890;              /* just under the tab bar (900) */
      padding: 8px 8px 8px 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      background: var(--app-glass);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      backdrop-filter: blur(14px) saturate(160%);
      color: #fff;
      box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
      opacity: 0;
      transform: translateY(calc(100% + 90px));
      transition: transform 0.34s var(--app-ease), opacity 0.2s ease;
      pointer-events: none;
   }

   .app-cta.is-on {
      opacity: 1;
      transform: none;
      pointer-events: auto;
   }

   body:has(.bd-nav-drawer.open) .app-cta { opacity: 0; pointer-events: none; }

   .app-cta__text { flex: 1; min-width: 0; line-height: 1.25; }

   .app-cta__eyebrow {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 700 10.5px/1.3 "Montserrat", sans-serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #c6bdf0;
   }

   .app-cta__title {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: "Cinzel", Georgia, serif;
      font-weight: 700;
      font-size: 14px;
      color: #f2d89c;
   }

   .app-cta__btn {
      flex: none;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffd87d, #efb33c);
      color: #2b1d05;
      font: 700 14.5px/1 "Montserrat", sans-serif;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 8px 20px -8px rgba(239, 179, 60, 0.7);
   }
   .app-cta__btn:hover,
   .app-cta__btn:focus { color: #2b1d05; text-decoration: none; }

   /* ---- Welcome video → bottom sheet -------------------------------------------
      Same popup and the same timing; on a phone it rises from the bottom like
      a native sheet, with a grabber you can drag down to close. */

   #yt-popup-system .popup-overlay {
      width: 100%;
      height: 100%;
      align-items: flex-end;
      background: rgba(8, 6, 20, 0.6);
   }

   #yt-popup-system .popup-box {
      width: 100%;
      max-width: none;
      padding: 52px 0 calc(16px + env(safe-area-inset-bottom, 0px));
      border-radius: 22px 22px 0 0;
      background: #0d0b1a;
      animation: app-sheet-up 0.36s var(--app-ease);
      touch-action: none;
   }

   #yt-popup-system .popup-box::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 50%;
      width: 40px;
      height: 5px;
      margin-left: -20px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.35);
   }

   #yt-popup-system .popup-box::after {
      content: "Watch: Avinash at TEDx";
      position: absolute;
      top: 24px;
      left: 18px;
      font: 600 13px/1 "Montserrat", sans-serif;
      color: rgba(255, 255, 255, 0.82);
   }

   #yt-popup-system iframe {
      display: block;
      height: auto;
      aspect-ratio: 16 / 9;
   }

   #yt-popup-system .close-btn {
      top: 14px;
      right: 12px;
      z-index: 2;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 14px;
      line-height: 32px;
   }

   @keyframes app-sheet-up {
      from { transform: translateY(100%); }
      to   { transform: none; }
   }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
   html { scroll-behavior: smooth; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
   .bd-nav-container,
   .app-cta,
   .app-dots span { transition: none; }
   #yt-popup-system .popup-box { animation: none; }
}

@media (max-width: 768px) and (hover: none) {
   .mch-btn:hover,
   .enroll:hover,
   .rs-btn:hover,
   .wa-cta:hover,
   .btn-style-two:hover { transform: none; }
}