/**
 * @file listings.css
 * Views listings from recipes/ggpress_listings in the Broadcast style: the
 * teaser cards (video, article, team), the responsive grids, and the home
 * page composition (docs/design/home/option-1.html, with the gold live band
 * of option-3.html): ticker, "on air" hero with its «A continuación» rail,
 * press conference rundown, Twitch band and strip, empty states.
 *
 * Card markup: templates/content/node--video--teaser.html.twig,
 * node--article--teaser.html.twig, node--team--teaser.html.twig. Shared
 * pieces (chips, timecodes, labels) are in chrome.css.
 */

/* ---------- Grids ---------- */

/* Core's responsive grid sizes the tracks from the view's column count and
   minimum cell width; with 1–2 items the cards keep that width instead of
   stretching. */
.ggpress-listing .views-view-responsive-grid--horizontal {
  gap: 24px;
}

.ggpress-listing .views-view-responsive-grid__item {
  min-width: 0;
}

.ggpress-listing .views-view-responsive-grid__item > .node {
  height: 100%;
}

/* ---------- Thumbnails ---------- */

.ggpress-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--gg-navy);
  isolation: isolate;
}

.ggpress-thumb--3-2 {
  aspect-ratio: 3 / 2;
}

.ggpress-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ggpress-thumb .field,
.ggpress-thumb .field a,
.ggpress-thumb .media,
.ggpress-thumb picture {
  display: block;
  height: 100%;
}

.ggpress-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 19, 41, 0) 45%, rgba(1, 19, 41, 0.85));
}

.ggpress-thumb > .ggpress-chip {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 1;
}

.ggpress-thumb > .ggpress-tc {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
}

/* Branded placeholder when there is no image: outlined wordmark on navy. */
.ggpress-thumb--placeholder {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(0, 196, 214, 0.45), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, var(--gg-royal), var(--gg-navy-deep) 70%);
}

.ggpress-thumb__word {
  position: absolute;
  right: -0.06em;
  bottom: -0.18em;
  z-index: -1;
  font-family: var(--font-heading);
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
}

/* ---------- Cards ---------- */

.ggpress-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card);
  color: var(--card-foreground);
  transition: transform 0.2s;
}

.ggpress-card:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .ggpress-card,
  .ggpress-card:hover {
    transition: none;
    transform: none;
  }
}

.ggpress-card__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.ggpress-card__title a {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the whole card. */
.ggpress-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ggpress-card:hover .ggpress-card__title,
.ggpress-card:focus-within .ggpress-card__title {
  color: var(--gg-gold);
}

.ggpress-card__kicker {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--gg-gold);
}

.ggpress-card__kicker--cyan {
  color: var(--gg-cyan);
}

.ggpress-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.ggpress-card__meta > * + *::before {
  content: "/";
  margin-right: 8px;
  color: #4f6f99;
}

/* Dates come from Drupal's formatter ("5 Oct 2026"): the card style is
   lower case, as in the design. */
.ggpress-card__date {
  text-transform: lowercase;
}

.ggpress-card__lead {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* Fields inside the kicker, meta and tag lines (cards and the hero's
   lower-third) read inline; multi-value fields (Personas, Equipos) as a
   comma list. */
.ggpress-card .field,
.ggpress-card .field__items,
.ggpress-card .field__item,
.ggpress-card__kicker span,
.ggpress-card__lead p,
.ggpress-lower3 .field,
.ggpress-lower3 .field__items,
.ggpress-lower3 .field__item {
  display: inline;
}

.ggpress-card__kicker > span + span::before {
  content: " · ";
}

.ggpress-card__lead p {
  margin: 0;
}

.ggpress-card .field__item:not(:last-child)::after,
.ggpress-lower3 .field__item:not(:last-child)::after {
  content: ", ";
}

.ggpress-thumb .field,
.ggpress-thumb .field__item {
  display: block;
}

/* Video card: thumbnail + title strip with a gold left bar. */
.ggpress-card--video .ggpress-card__strip {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  border-left: 5px solid var(--gg-gold);
  background: linear-gradient(180deg, #05284f, var(--card) 60%);
}

.ggpress-card--video:hover .ggpress-card__strip {
  border-left-color: var(--gg-cyan);
}

/* Article card: cyan top rule, image, kicker, title, lead. */
.ggpress-card--article {
  background: transparent;
  border-top: 3px solid var(--gg-cyan);
  padding-top: 16px;
}

.ggpress-card--article .ggpress-card__thumb {
  margin-bottom: 16px;
}

.ggpress-card--article .ggpress-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ggpress-card--article .ggpress-card__title {
  font-size: 1.5rem;
}

/* Team bar: monogram block (or logo), name, tag. */
.ggpress-card--team {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--card), #032a52);
  overflow: hidden;
}

.ggpress-card--team::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 14px);
}

.ggpress-card--team:hover {
  transform: none;
  border-color: var(--gg-gold);
}

.ggpress-card__mono {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 56px;
  border-bottom: 3px solid var(--gg-gold);
  background-color: var(--gg-navy);
  overflow: hidden;
}

.ggpress-card__mono-text {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gg-white);
}

.ggpress-card__mono--logo {
  background-color: var(--gg-white);
}

.ggpress-card__mono img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.ggpress-card--team .ggpress-card__body {
  min-width: 0;
}

.ggpress-card--team .ggpress-card__title {
  font-size: 1.375rem;
  line-height: 1;
}

.ggpress-card__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 6px 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
}

.ggpress-card__tag > * + *::before {
  content: "·";
  margin-right: 6px;
}

/* ---------- Full-bleed strips inside the Canvas section ---------- */

/* The section's container is centred, so pulling both margins out by half
   the difference with the viewport puts the strip edge to edge (the root
   clips the scrollbar's width, see theme.css); the inner .container realigns
   the content with the rest of the page. */
.ggpress-bleed {
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* Blocks that render nothing (the page title on Canvas pages, the Twitch
   band while offline, the strip while live, the ticker and grids when there
   is no content) must not take a gap in the section's grid. */
[id^="block-"]:not(:has(*)) {
  display: none;
}

/* The section that holds the full-bleed strips (band, ticker) stacks them
   with no gap. */
.grid:has(> [id^="block-"] > .ggpress-bleed) {
  gap: 0;
}

/* ---------- «Última hora» ticker ---------- */

.ggpress-ticker {
  border-block: 1px solid var(--border);
  background-color: var(--gg-navy-deep);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

/* After the live band, keep the strip clear of the band's slanted edge. */
[id^="block-"]:has(> .ggpress-twitch-band) + .ggpress-ticker {
  margin-top: clamp(8px, 1.25vw, 16px);
}

/* The inner .container's padding is doubled so the label lines up with the
   section content (band, hero) rather than with the header. */
.ggpress-ticker__wrap {
  display: flex;
  align-items: stretch;
  height: 44px;
  padding-inline: 2rem;
}

.ggpress-ticker__label {
  flex: none;
  display: flex;
  align-items: center;
  margin-right: 16px;
  padding: 0 20px 0 14px;
  font-size: 0.875rem;
  font-weight: 800;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background-color: var(--gg-gold);
  color: var(--gg-navy-deep);
}

.ggpress-ticker__track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.ggpress-ticker__track::-webkit-scrollbar {
  display: none;
}

.ggpress-ticker__track .view-content {
  display: flex;
  gap: 28px;
  white-space: nowrap;
}

.ggpress-ticker__item::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  vertical-align: 2px;
  background-color: var(--gg-gold);
  transform: rotate(45deg);
}

.ggpress-ticker__item a {
  color: var(--gg-white);
  text-decoration: none;
}

.ggpress-ticker__item a:hover,
.ggpress-ticker__item a:focus-visible {
  color: var(--gg-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Live ticker (src/ticker.js): the headlines, repeated, scroll leftwards
   endlessly. Spacing sits on each row instead of the gap, so half the
   list's width is exactly one set and the loop has no seam. Paused by the
   toggle button, on hover and while a headline has keyboard focus. */
.ggpress-ticker.is-marquee .ggpress-ticker__track {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}

.ggpress-ticker.is-marquee .ggpress-ticker__track .view-content {
  width: max-content;
  gap: 0;
  animation: ggpress-ticker var(--ggpress-ticker-duration, 30s) linear infinite;
}

.ggpress-ticker.is-marquee .ggpress-ticker__track .view-content > * {
  padding-right: 28px;
}

.ggpress-ticker.is-marquee .ggpress-ticker__track:hover .view-content,
.ggpress-ticker.is-marquee .ggpress-ticker__track:focus-within .view-content,
.ggpress-ticker.is-marquee.is-paused .ggpress-ticker__track .view-content {
  animation-play-state: paused;
}

@keyframes ggpress-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ggpress-ticker__toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  margin-left: 8px;
  border: 0;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--gg-gold);
  cursor: pointer;
}

/* Pause bars, or a play triangle while paused. */
.ggpress-ticker__toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
  box-sizing: border-box;
}

.ggpress-ticker__toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
  border-inline: 11px solid currentColor;
  border-right-width: 0;
}

.ggpress-ticker__toggle:hover,
.ggpress-ticker__toggle:focus-visible {
  color: var(--gg-white);
}

.ggpress-ticker__toggle:focus-visible {
  outline: 2px solid var(--gg-gold);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .ggpress-ticker.is-marquee .ggpress-ticker__track .view-content {
    animation: none;
  }
}

/* ---------- Hero: "on air" frame with a lower-third, and the rail ---------- */

.ggpress-hero__grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 1100px) {
  .ggpress-hero__grid--rail {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
  }
}

.ggpress-onair {
  position: relative;
  border: 1px solid var(--border);
  background-color: #000;
}

.ggpress-onair__frame {
  position: relative;
}

.ggpress-onair__thumb::after {
  background: linear-gradient(180deg, rgba(1, 19, 41, 0.35), rgba(1, 19, 41, 0) 30%, rgba(1, 19, 41, 0) 50%, rgba(1, 19, 41, 0.9));
}

.ggpress-onair__corner {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.ggpress-onair__corner .ggpress-chip {
  clip-path: none;
}

/* Play marker over the thumbnail link: clicks go through to the link. */
.ggpress-onair__play {
  position: absolute;
  left: 50%;
  top: 36%;
  z-index: 2;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
  background-color: rgba(248, 208, 74, 0.95);
  pointer-events: none;
  transition: transform 0.2s;
}

.ggpress-onair__play::before {
  content: "";
  margin-left: 6px;
  border-left: 24px solid var(--gg-navy-deep);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.ggpress-onair:hover .ggpress-onair__play {
  transform: scale(1.06);
}

.ggpress-lower3 {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  max-width: 860px;
}

.ggpress-lower3__top {
  display: flex;
  align-items: stretch;
}

.ggpress-lower3__kicker {
  padding: 9px 22px 8px 14px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background-color: var(--gg-gold);
  color: var(--gg-navy-deep);
}

.ggpress-lower3__title {
  margin: 0;
  padding: 14px 20px 12px;
  border-left: 8px solid var(--gg-gold);
  background-color: var(--gg-white);
  color: var(--gg-navy-deep);
  font-size: clamp(1.625rem, 3.3vw, 2.875rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.02;
}

.ggpress-lower3__title a {
  color: inherit;
  text-decoration: none;
}

.ggpress-lower3__title a:hover,
.ggpress-lower3__title a:focus-visible {
  color: var(--gg-royal);
}

.ggpress-lower3__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 10px 20px;
  border-left: 8px solid var(--gg-cyan);
  background-color: rgba(2, 34, 67, 0.96);
  color: #dbe5f2;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ggpress-lower3__meta .ggpress-tc {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gg-gold);
}

@media (max-width: 767px) {
  .ggpress-onair {
    border: 0;
    background: transparent;
  }

  .ggpress-lower3 {
    position: static;
    max-width: none;
  }

  .ggpress-lower3__kicker {
    font-size: 0.8125rem;
  }

  .ggpress-lower3__title {
    padding: 12px 14px 10px;
    border-left-width: 6px;
    font-size: 1.625rem;
  }

  .ggpress-lower3__meta {
    padding: 10px 14px;
    border-left-width: 6px;
    font-size: 0.875rem;
  }

  .ggpress-onair__play {
    top: 50%;
    width: 60px;
    height: 60px;
  }

  .ggpress-onair__play::before {
    border-left-width: 18px;
    border-top-width: 11px;
    border-bottom-width: 11px;
  }

  .ggpress-onair__corner {
    top: 10px;
    left: 10px;
    right: 10px;
  }
}

/* «A continuación» rail: the view's attachment next to the frame. */
.ggpress-upnext {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background-color: var(--card);
}

.ggpress-upnext__heading {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gg-gold);
}

.ggpress-upnext__view,
.ggpress-upnext__view .view-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.ggpress-upnext__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ggpress-upnext;
}

.ggpress-upnext__list > li {
  flex: 1;
  margin: 0;
  border-bottom: 1px solid var(--border);
  counter-increment: ggpress-upnext;
}

.ggpress-upnext__list > li:last-child {
  border-bottom: 0;
}

.ggpress-upnext__link {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-content: center;
  height: 100%;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.ggpress-upnext__link::before {
  content: counter(ggpress-upnext, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gg-gold);
  opacity: 0.9;
}

.ggpress-upnext__link:hover,
.ggpress-upnext__link:focus-visible {
  background-color: var(--surface-raised);
}

.ggpress-upnext__text {
  min-width: 0;
}

.ggpress-upnext__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-transform: uppercase;
}

.ggpress-upnext__meta {
  display: block;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.ggpress-upnext__meta em {
  font-style: normal;
  color: var(--gg-cyan);
}

/* ---------- Ruedas de prensa: numbered rundown ---------- */

.ggpress-rundown {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
  counter-reset: ggpress-rundown;
}

@media (min-width: 960px) {
  .ggpress-rundown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

.ggpress-rundown > li {
  margin: 0;
  border-bottom: 1px solid var(--border);
  counter-increment: ggpress-rundown;
}

/* The teaser card laid out as a row: numeral, thumbnail, body. */
.ggpress-rundown .ggpress-card--video {
  display: grid;
  grid-template-columns: 56px 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  background: transparent;
}

@media (min-width: 960px) {
  .ggpress-rundown .ggpress-card--video {
    grid-template-columns: 64px 200px minmax(0, 1fr);
  }
}

.ggpress-rundown .ggpress-card--video:hover {
  transform: none;
}

.ggpress-rundown .ggpress-card--video::before {
  content: counter(ggpress-rundown, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gg-gold);
}

.ggpress-rundown .ggpress-thumb > .ggpress-chip {
  top: 8px;
  padding: 5px 10px 4px 7px;
  font-size: 0.6875rem;
}

.ggpress-rundown .ggpress-thumb > .ggpress-tc {
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  font-size: 0.75rem;
}

.ggpress-rundown .ggpress-card__strip {
  min-width: 0;
  padding: 0;
  border-left: 0;
  background: transparent;
}

.ggpress-rundown .ggpress-card__kicker {
  color: var(--gg-cyan);
}

.ggpress-rundown .ggpress-card__title {
  font-size: 1.3125rem;
  line-height: 1.12;
}

.ggpress-rundown .ggpress-card__meta {
  margin-top: 8px;
  padding-top: 0;
}

@media (max-width: 599px) {
  .ggpress-rundown .ggpress-card--video {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }

  .ggpress-rundown .ggpress-card--video::before,
  .ggpress-rundown .ggpress-thumb > .ggpress-chip {
    display: none;
  }

  .ggpress-rundown .ggpress-card__title {
    font-size: 1.125rem;
  }
}

/* ---------- Twitch (ggpress_twitch): live band and offline strip ---------- */

/* «Estamos en directo»: the gold full-bleed band at the top of the home page
   while live (option-3.html, section.band). Structure in the module's CSS. */
.ggpress-twitch-band {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  clip-path: polygon(0 clamp(16px, 2.5vw, 40px), 100% 0, 100% calc(100% - clamp(16px, 2.5vw, 40px)), 0 100%);
  background-color: var(--gg-gold);
  color: var(--gg-navy-deep);
}

.ggpress-twitch-band::before {
  content: "EN DIRECTO EN DIRECTO EN DIRECTO";
  position: absolute;
  left: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-size: clamp(120px, 20vw, 320px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 34, 67, 0.12);
  pointer-events: none;
}

.ggpress-twitch-band__grid {
  position: relative;
  padding-inline: clamp(20px, 4vw, 56px);
}

.ggpress-twitch-band__label {
  padding: 8px 12px 7px;
  background-color: var(--gg-navy-deep);
  color: var(--gg-gold);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ggpress-twitch-band__label .ggpress-twitch-badge__dot {
  color: var(--live);
  background-color: var(--live);
}

.ggpress-twitch-band__heading {
  margin: 20px 0 16px;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.92;
  color: var(--gg-navy-deep);
}

.ggpress-twitch-band__title {
  margin: 0 0 24px;
  max-width: 34ch;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
}

.ggpress-twitch-band__cta,
.ggpress-twitch-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%);
}

.ggpress-twitch-band__cta {
  background-color: var(--gg-navy-deep);
  color: var(--gg-gold);
}

.ggpress-twitch-band__cta:hover,
.ggpress-twitch-band__cta:focus-visible {
  background-color: var(--gg-white);
  color: var(--gg-navy-deep);
}

.ggpress-twitch-band .ggpress-twitch-player {
  background-color: var(--gg-navy-deep);
  box-shadow: 18px 18px 0 var(--gg-navy-deep);
}

.ggpress-twitch-band__caption {
  margin-top: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--gg-navy-deep);
}

/* Klaro's click-to-load placeholder inside the band. */
.ggpress-twitch-band .klaro .cm-placeholder,
.ggpress-twitch-band .klaro-element-placeholder {
  aspect-ratio: 16 / 9;
}

@media (max-width: 860px) {
  .ggpress-twitch-band .ggpress-twitch-player {
    box-shadow: 10px 10px 0 var(--gg-navy-deep);
  }

  .ggpress-twitch-band__caption {
    margin-top: 20px;
  }
}

/* «Síguenos en Twitch»: the compact strip after Ruedas de prensa while
   offline. */
.ggpress-twitch-strip {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 8px solid var(--gg-gold);
  background: linear-gradient(90deg, var(--card), #032a52);
  color: var(--card-foreground);
}

.ggpress-twitch-strip__tag {
  padding: 8px 12px 7px;
  background-color: var(--gg-gold);
  color: var(--gg-navy-deep);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.ggpress-twitch-strip__heading {
  font-size: 1.375rem;
  line-height: 1;
}

.ggpress-twitch-strip__text {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.ggpress-twitch-strip__cta {
  flex: none;
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.ggpress-twitch-strip__cta:hover,
.ggpress-twitch-strip__cta:focus-visible {
  background-color: var(--gg-white);
  color: var(--gg-navy-deep);
}

/* ---------- Empty states ---------- */

.ggpress-listing__empty {
  margin: 0;
  padding: 2rem 1rem;
  border: 1px dashed var(--border);
  text-align: center;
  color: var(--muted-foreground);
}

/* «Próximamente»: the on-air frame with a branded placeholder and the
   lower-third (block_hero's empty text). */
.ggpress-hero-empty .ggpress-onair__frame {
  aspect-ratio: 16 / 9;
}

.ggpress-hero-empty .ggpress-thumb__word {
  font-size: clamp(80px, 14vw, 220px);
  right: 2%;
  bottom: auto;
  top: 8%;
}

.ggpress-hero-empty__text {
  margin: 12px 0 0;
  padding: 0 4px;
  max-width: 60ch;
  color: var(--muted-foreground);
}

.ggpress-hero-empty__text a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .ggpress-hero-empty .ggpress-onair__frame {
    aspect-ratio: 21 / 9;
  }

  .ggpress-hero-empty__text {
    color: #dbe5f2;
  }
}

/* Blocks placed by the Canvas home page: space between sections. */
.ggpress-listing,
.ggpress-hero__grid,
.ggpress-twitch-strip {
  margin-bottom: 1rem;
}