/* =====================================================================
   TGL — Mobile padding normalisation (mobile only, <= 768px)
   ---------------------------------------------------------------------
   Policy (gutter unified to 12px — see mobile-ux-precision.css note on
   audit finding N: this file used 10px while mobile-ux-precision.css used
   15px for the same viewport, so surfaces disagreed by 5px):
     1. Boxed sections (cards, panels, lists with a border/background)
        run edge-to-edge: no outer gutter at all. Their own inner padding
        is preserved so the text inside is never cut.
     2. Bare text sections (headings, paragraphs, breadcrumbs, lyrics)
        get a minimal 10px inline gutter — just enough that no glyph
        touches or is clipped by the screen edge.
   Desktop (>= 769px) is completely untouched.
   Loaded last so it wins the cascade.
   ===================================================================== */

@media (max-width: 768px) {

  /* ---- 1. Container gutter ------------------------------------------
     v6.3 — the gutter is no longer killed here. global-alignment.css owns
     ONE shell gutter (12px on mobile, the same value the lyrics column has
     always used), so every band lines up with the lyrics. Inner wrappers
     stay at zero so the gutter is never paid twice. */
  .tgl-main > .tgl-container,
  .tgl-grid,
  .tgl-article,
  .tglv2-section,
  .tgl-alphabet,
  .telugu-alphabet-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }


  /* ---- 2. Boxed sections: full-bleed, square, no outer margin ------- */
  .tgl-pcard,
  .tgl-listing,
  .tgl-summary,
  .tgl-rail,
  .tgl-ts-catcard,
  .tgl-faq-list,
  .tgl-faq-item,
  .tgl-ts-songlist,
  .tgl-alphabet__grid,
  .tgl-continue,
  .tgl-recently-viewed,
  .tgl-toc,
  .tgl-sresults tr {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }

  /* Boxed grids sit flush with the viewport edges. */
  .tgl-ts-catgrid,
  .tgl-alphabet__grid,
  .tgl-home-rail .tgl-rail__songs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- 3. Bare text surfaces ----------------------------------------
     v6.3 — these used to add their own 10-12px on top of whatever their
     section already paid, which is why some blocks looked more indented
     than the lyrics. The shell now supplies the single gutter, so every
     surface below sits at zero and inherits it. */
  .tgl-breadcrumbs,
  .tgl-post-title,
  .tgl-meta,
  .tgl-content,
  .tgl-eyebrow,
  .tgl-section-heading,
  .tgl-listing-head,
  .tgl-listing-empty,
  .tgl-hero__inner,
  .tgl-home-support,
  .tgl-home-support__actions,
  .tgl-share-container,
  .tgl-browse-more,
  .tgl-pagination,
  .tgl-songlist__reset,
  .tgl-faq-band > .tgl-container > h2,
  .tgl-faq-band > .tgl-container > p,
  .tgl-alphabet > h2,
  .tgl-alphabet > p,
  .tgl-container > h1,
  .tgl-container > h2,
  .tgl-container > h3,
  .tgl-container > p {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Lyrics and body copy inherit the .tgl-content gutter — never doubled. */
  .tgl-content p,

  .tgl-content li,
  .tgl-content h2,
  .tgl-content h3,
  .tgl-content h4,
  .tgl-content .tgl-lyrics,
  .tgl-content .tgl-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- 4. Overflow safety ------------------------------------------ */
  body { overflow-x: hidden; }
}

/* =====================================================================
   Small-phone tier (<= 430px) — 320 / 360 / 375 / 390 / 414 / 430
   ---------------------------------------------------------------------
   Padding only. No font-size is touched here, so Telugu readability is
   identical to the 768px tier. Purely reclaims horizontal and vertical
   space on the narrowest devices, which is where the theme's desktop
   padding values were costing the most.
   ===================================================================== */
@media (max-width: 430px) {

  /* Tighter but still comfortable gutter. */
  .tgl-breadcrumbs,
  .tgl-post-title,
  .tgl-meta,
  .tgl-content,
  .tgl-section-heading,
  .tgl-pagination,
  .tgl-share-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Card interiors: reclaim ~8px per card without crowding the text. */
  .tgl-pcard,
  .tgl-listing,
  .tgl-summary,
  .tgl-toc,
  .tgl-ts-catcard {
    padding: 12px !important;
  }

  /* Section stack: 20px -> 16px on the narrowest screens. */
  .tgl-home-rail,
  .tgl-discovery,
  .tgl-continue,
  .tgl-recently-viewed {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Sidebar rails stack flush with the same rhythm. The YouTube Subscribe
     CTA lives in a .tgl-rail and inherits this spacing only — its markup,
     link and URL are untouched. */
  .tgl-rail { margin-bottom: 16px !important; }
  .tgl-rail + .tgl-rail { margin-top: 0 !important; }
}