/* =====================================================================
   TGL — GLOBAL ALIGNMENT LAYER (v6.3)
   Loads LAST. One horizontal rhythm for the whole site.

   WHY THIS FILE EXISTS
   --------------------
   The audit found four competing gutter policies:
     ui-sync.css ............ .tgl-container padding 0 !important
     mobile-padding.css ..... 0 / 10px on mobile
     mobile-ux-precision.css  12px on mobile rails
     single-song.css ........ 12-14px on .tgl-single
   Result: the post page (which the user calls correctly aligned) sat on a
   different left edge than the header, the home rails and the listings, and
   several mobile sections were double-padded (section gutter + card gutter).

   This layer declares ONE gutter token and applies it at the shell level, so
   every surface — header, nav, hero, rails, listings, article, footer —
   starts and ends on the same vertical line as the lyrics column.

   PROTECTED — NEVER TOUCHED BY THIS FILE
   --------------------------------------
   Lyrics presentation is frozen: no rule here sets font-family, font-size,
   line-height, text-align, padding or margin on
     .lgenx-text, .lgenx-title, .lgenx-subtitle, .tgl-lyrics, .lgenx-lyrics,
     .tgl-section--telugu-lyrics, .tgl-section--english-transliteration,
     .tgl-section--meaning, .tgl-chords
   Those selectors appear below only inside `:not()` guards and reset-proofing.
   ===================================================================== */

:root {
  --tgl-shell:  1200px;  /* one page width  */
  --tgl-gutter: 24px;    /* one desktop gutter */
}

/* ---------------------------------------------------------------------
   1. THE SHELL — every band on every template uses .tgl-container, so a
   single rule aligns the entire site. Overrides the historic
   `padding: 0 !important` in ui-sync.css.
   --------------------------------------------------------------------- */
.tgl-container {
  width: 100%;
  max-width: var(--tgl-shell);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tgl-gutter) !important;
  padding-right: var(--tgl-gutter) !important;
  box-sizing: border-box;
}

/* A container nested inside another container must not pay the gutter
   twice — that was the source of the "some sections are indented more"
   report on mobile. */
.tgl-container .tgl-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none;
}

/* ---------------------------------------------------------------------
   2. SURFACES THAT USED TO CARRY THEIR OWN GUTTER
   They now inherit the shell gutter, so their content sits on the same
   line as the header and the lyrics column.
   --------------------------------------------------------------------- */
.tgl-main > .tgl-container,
.tgl-grid,
.tgl-listing-page,
.tgl-home,
.tgl-home-rail,
.tgl-discovery,
.tgl-continue,
.tgl-recently-viewed,
.tgl-hero,
.tgl-alpha,
#trending,
#popular-songs,
#recent-posts {
  box-sizing: border-box;
}

/* .tgl-single already centres .tgl-article at the reading measure; the
   outer gutter is the shell's job now, so drop the duplicate one. */
.tgl-single {
  padding-left: 0;
  padding-right: 0;
}
.tgl-single > section {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------------
   3. FULL-BLEED ESCAPES
   Bands that are meant to run edge to edge keep their background full
   width while their content still lands on the shell line.
   --------------------------------------------------------------------- */
.tgl-topbar,
.tgl-branding-row,
.tgl-navbar,
.tgl-ticker,
.tgl-footer {
  width: 100%;
}

/* ---------------------------------------------------------------------
   4. MOBILE — ONE GUTTER, NO DOUBLE PADDING
   Audit finding: rails paid 12px, cards inside them paid another 12-16px,
   and a few sections added a third level via .tgl-card / .tgl-panel. On a
   360px viewport that left the text 40px in from the edge on some blocks
   and 0px on others. Below, the gutter is paid ONCE by the shell.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --tgl-gutter: 12px; }  /* == the lyrics column gutter */

  /* Sections stop paying their own horizontal padding … */
  .tgl-home-rail,
  .tgl-discovery,
  .tgl-continue,
  .tgl-recently-viewed,
  .tgl-listing-page,
  .tgl-alpha,
  .tgl-hero,
  #trending,
  #popular-songs,
  #recent-posts {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* … and neither do the lists inside them. */
  .tgl-home-rail .tgl-ts-songlist,
  .tgl-discovery .tgl-discovery__list,
  .tgl-continue .tgl-discovery__list,
  .tgl-listing-page .tgl-srow,
  .tgl-alpha .tgl-alpha__grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cards keep their INNER padding (that is card design, not page gutter)
     but never add an outer one. */
  .tgl-card,
  .tgl-panel,
  .tgl-srow,
  .tgl-summary {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Unified vertical rhythm — the audit measured 32/28/24/20/16px between
     the same class of blocks. One value, everywhere. */
  .tgl-home-rail,
  .tgl-discovery,
  .tgl-continue,
  .tgl-recently-viewed,
  #trending,
  #popular-songs,
  #recent-posts {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* The article column matches the rails exactly. */
  .tgl-single,
  .tgl-single > section,
  .tgl-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
  }
}


/* ---------------------------------------------------------------------
   5. LYRICS PROTECTION CONTRACT
   The lyrics stack inherits the shell alignment through its parent only.
   These rules assert that nothing above accidentally re-indents it, and
   they deliberately set NO typography.
   --------------------------------------------------------------------- */
.lgenx-text,
.tgl-lyrics,
.lgenx-lyrics,
.tgl-section--telugu-lyrics,
.tgl-section--english-transliteration,
.tgl-section--meaning,
.tgl-chords {
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------------
   6. AD SLOTS ALIGN WITH THE TEXT
   An ad must start on the same line as the paragraph above it, otherwise
   the page reads as two different grids.
   --------------------------------------------------------------------- */
.tgl-adpos,
.tgl-ad,
.tgl-ad-box,
.tgl-adframe {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  box-sizing: border-box;
}