/*
 * Telugu Gospel Lyrics — PHASE 5.4
 * Single Song page: mobile-first reading presentation.
 * ------------------------------------------------------------------
 * PRESENTATION ONLY. No engine, no query, no metadata contract is touched
 * here. Loaded after ux.css / ads.css so it can refine spacing and
 * typography without !important, and it never restyles ad chrome.
 *
 * Scope: every rule is namespaced under .tgl-single so the homepage
 * (Phase 5.3) and the header (Phase 5.2) are structurally unreachable.
 */

.tgl-single {
  --tgl-lyric-size: 18px;
  --tgl-lyric-leading: 2.0;
  --tgl-read-measure: 74ch;
}

/* --- 1. BREADCRUMB — compact, never overflows a 320px viewport. ---------- */
.tgl-single .tgl-breadcrumbs,
.tgl-single .tgl-breadcrumb {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- 2. TITLE + TRANSLITERATION ----------------------------------------- */
.tgl-single .tgl-post-title {
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.25;
  margin: 4px 0 6px;
  overflow-wrap: break-word;
  hyphens: none;
}
.tgl-song-subtitle {
  margin: 0 0 12px;
  font-size: clamp(14px, 3.6vw, 17px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tgl-muted, #5a6472);
}

/* --- 3. META ROW — wrapping chips, never a table. ------------------------ */
.tgl-single .tgl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
}
.tgl-single .tgl-meta > * {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--tgl-line, rgba(0,33,71,.12));
  border-radius: 999px;
  background: var(--tgl-card, #fff);
  text-decoration: none;
  line-height: 1.5;
}

/* --- 4. ACTIONS — touch-friendly, wraps, no horizontal scroll. ---------- */
.tgl-single .tgl-share {
  gap: 8px;
  margin: 0 0 18px;
}
.tgl-single .tgl-share-btn,
.tgl-single .tgl-share a {
  width: 44px;
  height: 44px;
}
.tgl-song-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.tgl-song-actions .tgl-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tgl-line, rgba(0,33,71,.14));
  border-radius: 10px;
  background: var(--tgl-card, #fff);
  color: var(--tgl-navy, #002147);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.tgl-song-actions .tgl-action-btn:hover,
.tgl-song-actions .tgl-action-btn:focus-visible {
  border-color: var(--tgl-gold, #D4AF37);
}

/* --- 5. FEATURED IMAGE POLICY ------------------------------------------
   The template emits no featured-image markup at all; this is the
   belt-and-braces guard so a legacy/plugin injection can never reserve a
   blank banner. The image stays attached to the post for SEO / OG. */
.tgl-single .post-thumbnail,
.tgl-single .wp-post-image,
.tgl-single .attachment-post-thumbnail,
.tgl-single figure.tgl-featured,
.tgl-single .tgl-featured-image { display: none !important; }

/* --- 6. LYRICS READING EXPERIENCE --------------------------------------- */
.tgl-lyrics-wrap { margin: 0 0 8px; }
.tgl-single .tgl-content {
  max-width: var(--tgl-read-measure);
  font-size: var(--tgl-lyric-size);
}
.tgl-single .tgl-content p,
.tgl-single .tgl-content li,
.tgl-single .tgl-content .lgenx-text {
  font-size: var(--tgl-lyric-size);
  line-height: var(--tgl-lyric-leading);
}
/* Stanza rhythm — spacing only, the stored song HTML is never rewritten. */
.tgl-single .tgl-content p { margin: 0 0 1.35em; }
.tgl-single .tgl-content h3,
.tgl-single .tgl-content h4 { margin-top: 1.5em; }
.tgl-single .tgl-content section + section { margin-top: 1.6em; }
/* Transliteration stays visible but visually secondary where it exists. */
.tgl-single .tgl-content [data-tgl-section="english-transliteration"] p,
.tgl-single .tgl-content .tgl-translit,
.tgl-single .tgl-content .lgenx-translit {
  color: var(--tgl-muted, #4c5666);
  font-size: calc(var(--tgl-lyric-size) - 1px);
}

/* Lyrics controls (font size / copy) when the page provides them. */
.tgl-lyrics-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}
.tgl-lyrics-tools__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tgl-muted, #5a6472);
}
.tgl-lyrics-tools button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--tgl-line, rgba(0,33,71,.14));
  border-radius: 10px;
  background: var(--tgl-card, #fff);
  color: var(--tgl-navy, #002147);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.tgl-lyrics-tools button:focus-visible,
.tgl-song-actions .tgl-action-btn:focus-visible {
  outline: 2px solid var(--tgl-gold, #D4AF37);
  outline-offset: 2px;
}

/* --- 7. VIDEO — responsive 16:9, after the lyrics. ---------------------- */
.tgl-song-video { margin: 22px 0; }
.tgl-song-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.tgl-song-video__frame iframe,
.tgl-song-video__frame > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tgl-single .tgl-content iframe { max-width: 100%; }

/* --- 8. SONG DETAILS — responsive definition list, never a wide table. -- */
.tgl-song-details {
  margin: 22px 0;
  padding: 14px;
  border: 1px solid var(--tgl-line, rgba(0,33,71,.12));
  border-radius: 14px;
  background: var(--tgl-card, #fff);
}
.tgl-song-details__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tgl-navy, #002147);
}
.tgl-song-details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 18px;
  margin: 0;
}
.tgl-song-details__cell { min-width: 0; }
.tgl-song-details__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tgl-muted, #5a6472);
}
.tgl-song-details__value {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: break-word;
}

/* --- 9. DISCOVERY / RECENTLY VIEWED — presentation only ----------------- */
.tgl-single .tgl-discovery,
.tgl-single .tgl-related,
.tgl-rv-section { margin: 22px 0; }
.tgl-single .tgl-discovery img,
.tgl-single .tgl-related img { display: none !important; }

/* --- 10. MOBILE FIRST --------------------------------------------------- */
.tgl-single,
.tgl-single .tgl-content { overflow-wrap: break-word; }
.tgl-single { max-width: 100%; }

@media (max-width: 640px) {
  .tgl-single { --tgl-lyric-size: 18px; --tgl-lyric-leading: 2.0; }
  .tgl-single .tgl-article { padding-left: 0; padding-right: 0; }
  .tgl-song-details { padding: 12px; }
}
@media (min-width: 380px) {
  .tgl-song-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .tgl-single { --tgl-lyric-size: 19px; --tgl-lyric-leading: 2.05; }
}
@media (min-width: 1024px) {
  .tgl-single { --tgl-lyric-size: 19px; --tgl-lyric-leading: 2.1; }
  .tgl-song-details__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Desktop reading measure: the lyrics column never stretches to 1440px. */
@media (min-width: 1280px) {
  .tgl-single { --tgl-read-measure: 78ch; }
}

/* --- 11. COPY LINK FEEDBACK (Phase 5.4 completion) ---------------------- */
.tgl-song-actions .tgl-action-btn.is-copied {
  border-color: var(--tgl-gold, #D4AF37);
  background: rgba(212, 175, 55, .12);
}
.tgl-copy-status {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tgl-navy, #002147);
}