/* ==========================================================================
   GAC — per-video transcript pages (design block 7a, TRANSCRIPT-PAGE-SPEC.md)
   Loaded ONLY on children of the four watch-back pages, after gac-homepage.css
   (declared dependent on it) so the tokens and Archivo are already in place.
   All selectors are namespaced .gac-tr-* and scoped under body.gac-home.
   ========================================================================== */

/* Divi's default page template prints its own <h1 class="entry-title"> above
   the content; the shortcode renders the real header block, so the theme's
   title (and Divi's post-title module variant) is hidden on these pages. */
body.gac-tr-page .entry-title,
body.gac-tr-page h1.main_title { display: none; }

/* These pages are created programmatically with Divi's DEFAULT template,
   which reserves a right sidebar (#left-area ~75% + #sidebar) — that is why
   the content sat off-centre. Kill the sidebar, its divider line, and let
   the container breathe to the design's 1152px + gutters. */
body.gac-tr-page #left-area { width: 100% !important; float: none; padding: 0 0 40px !important; }
body.gac-tr-page #sidebar { display: none; }
body.gac-tr-page #main-content .container::before { display: none; }
body.gac-tr-page #main-content .container { width: 90%; max-width: 1248px; }

.gac-home .gac-tr { max-width: 1152px; margin: 0 auto; }

/* --- 2 · Header block --------------------------------------------------- */
.gac-home .gac-tr-head { padding: 40px 0 0; text-align: left; }

.gac-home .gac-tr-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gac-home .gac-tr-crumb a { color: #7A2384; font-weight: 600; text-decoration: none; }
.gac-home .gac-tr-crumb a:hover { color: #4B1257; }
.gac-home .gac-tr-crumb i { color: #C9B9D2; font-style: normal; }
.gac-home .gac-tr-crumb em { color: #8A7396; font-style: normal; }

.gac-home .gac-tr-kicker {
  margin-top: 22px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.18em; color: #8A7396; text-transform: uppercase;
}
.gac-home .gac-tr-kicker i { color: #E58E1A; font-style: normal; }

.gac-home h1.gac-tr-h1 {
  margin: 12px 0 0; font-size: 38px; line-height: 1.12; font-weight: 800;
  font-stretch: 115%; letter-spacing: -0.015em; max-width: 820px;
  color: #241B2E; padding: 0; text-align: left;
}

.gac-home .gac-tr-byline { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #5C5266; max-width: 820px; }
.gac-home .gac-tr-byline strong { color: #241B2E; }

/* --- Page band: transcript column + sticky rail -------------------------- */
.gac-home .gac-tr-band {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px;
  gap: 48px; align-items: start; padding: 32px 0 0;
}

/* --- 3 · Transcript column ----------------------------------------------- */
.gac-home .gac-tr-col { display: flex; flex-direction: column; gap: 26px; max-width: 680px; }

.gac-home .gac-tr-seghead { display: flex; align-items: center; gap: 10px; }

.gac-home .gac-tr-ts {
  display: inline-block; border: 1px solid #D8CCE0; color: #7A2384;
  background: #fff; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px;
  font-family: inherit; line-height: 1.4; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease;
}
.gac-home .gac-tr-ts:hover { border-color: #7A2384; }
.gac-home .gac-tr-ts:focus-visible { outline: 2px solid #7A2384; outline-offset: 2px; }

.gac-home .gac-tr-name {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.gac-home .gac-tr-name--presenter { color: #7A2384; }
.gac-home .gac-tr-name--guest     { color: #2E7CC3; }
.gac-home .gac-tr-name--host      { color: #5C5266; }
.gac-home .gac-tr-name--x1        { color: #B8730B; }
.gac-home .gac-tr-name--x2        { color: #43197F; }

.gac-home .gac-tr-np { display: none; font-size: 11px; font-weight: 600; color: #8A7396; letter-spacing: 0; text-transform: none; }

.gac-home .gac-tr-text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; color: #3E3448; }

/* "Now playing" — exactly one at a time. The box outdents so the text stays
   optically aligned with the other paragraphs. */
.gac-home .gac-tr-seg { transition: background-color .2s ease, border-color .2s ease; border-left: 3px solid transparent; margin-left: -20px; padding: 0 0 0 17px; }
.gac-home .gac-tr-seg.gac-tr-on {
  background: #F7F3F9; border-left-color: #7A2384;
  border-radius: 0 12px 12px 0; padding: 14px 18px 14px 17px;
}
.gac-home .gac-tr-seg.gac-tr-on .gac-tr-ts { background: #7A2384; border-color: #7A2384; color: #fff; }
.gac-home .gac-tr-seg.gac-tr-on .gac-tr-np { display: inline; }
.gac-home .gac-tr-seg.gac-tr-on .gac-tr-text { color: #241B2E; }

@media (prefers-reduced-motion: reduce) {
  .gac-home .gac-tr-seg { transition: none; }
}

/* --- Prev/next row ------------------------------------------------------- */
.gac-home .gac-tr-navrow {
  margin-top: 36px; border-top: 1px solid #F1EBF4; padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  max-width: 680px;
}
.gac-home .gac-tr-navrow a { text-decoration: none; }
.gac-home .gac-tr-prev, .gac-home .gac-tr-next { font-size: 14px; font-weight: 700; color: #7A2384; }
.gac-home .gac-tr-prev:hover, .gac-home .gac-tr-next:hover { color: #4B1257; }
.gac-home .gac-tr-all { font-size: 14px; font-weight: 600; color: #5C5266; }
.gac-home .gac-tr-all:hover { color: #7A2384; }

/* --- 4 · Video rail ------------------------------------------------------ */
.gac-home .gac-tr-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
body.admin-bar .gac-home .gac-tr-rail, body.admin-bar.gac-home .gac-tr-rail { top: 56px; }

.gac-home .gac-tr-player {
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 1px 2px rgba(36,27,46,0.04); background: #241B2E;
}
.gac-home .gac-tr-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Facade: real thumbnail + play affordance; the YouTube IFrame API player is
   created only on first interaction, so no Google request before intent. */
.gac-home .gac-tr-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.gac-home .gac-tr-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gac-home .gac-tr-playbtn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.22);
  backdrop-filter: blur(2px);
}
.gac-home .gac-tr-playbtn::after {
  content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff;
}
.gac-home .gac-tr-facade:hover .gac-tr-playbtn { background: rgba(122,35,132,0.65); }
.gac-home .gac-tr-durchip {
  position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.45);
  color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* Embed-blocked fallback tile (YouTube error 101/150/153). */
.gac-home .gac-tr-blocked {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2B1152, #7A2384);
}
.gac-home .gac-tr-blocked a {
  background: #fff; color: #7A2384; font-size: 14.5px; font-weight: 700;
  padding: 12px 24px; border-radius: 999px; text-decoration: none;
}
.gac-home .gac-tr-blocked a:hover { background: #FFC24B; color: #241B2E; }
.gac-tr-noembed .gac-tr-ts { pointer-events: none; color: #5C5266; border-color: #EFE9F1; }
.gac-tr-noembed .gac-tr-hint { display: none; }

/* Speaker key */
.gac-home .gac-tr-key { display: flex; flex-wrap: wrap; gap: 8px; }
.gac-home .gac-tr-chip {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid #E7DEEE; border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: #3E3448;
}
.gac-home .gac-tr-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gac-home .gac-tr-dot--presenter { background: #7A2384; }
.gac-home .gac-tr-dot--guest     { background: #2E7CC3; }
.gac-home .gac-tr-dot--host      { background: #5C5266; }
.gac-home .gac-tr-dot--x1        { background: #B8730B; }
.gac-home .gac-tr-dot--x2        { background: #43197F; }

/* Hint + YouTube cards */
.gac-home .gac-tr-hint {
  background: rgba(240,180,55,0.13); border: 1px solid rgba(224,160,40,0.35);
  border-radius: 14px; padding: 12px 16px; font-size: 13px; line-height: 1.55; color: #4B4054;
}
.gac-home .gac-tr-yt {
  background: #fff; border: 1px solid #E7DEEE; border-radius: 14px; padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.gac-home .gac-tr-yt span { font-size: 13px; color: #5C5266; }
.gac-home .gac-tr-yt a { font-size: 13.5px; font-weight: 700; color: #7A2384; text-decoration: none; }
.gac-home .gac-tr-yt a:hover { color: #4B1257; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .gac-home .gac-tr-band { grid-template-columns: minmax(0, 1fr); }
  /* Single column: player + key + cards ABOVE the transcript. */
  .gac-home .gac-tr-rail { position: static; order: -1; }
  .gac-home .gac-tr-col, .gac-home .gac-tr-navrow { max-width: none; }
}

@media (max-width: 768px) {
  .gac-home .gac-tr-head { padding-top: 24px; }
  .gac-home h1.gac-tr-h1 { font-size: 28px; }
  .gac-home .gac-tr-byline { font-size: 14px; }
  .gac-home .gac-tr-text { font-size: 15px; }
  .gac-home .gac-tr-seg { margin-left: 0; padding-left: 0; border-left-width: 0; }
  .gac-home .gac-tr-seg.gac-tr-on { border-left-width: 3px; padding: 14px 14px 14px 14px; border-radius: 0 12px 12px 0; }
  .gac-home .gac-tr-ts { padding: 8px 12px; }
  .gac-home .gac-tr-navrow { flex-wrap: wrap; }
}