/* Homepage components share the site's section gutters and active palette. */
@media (min-width: 761px) {
  body.studio-theme .studio-page[data-page-audience] .builder-news--spectrum > .builder-news__container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 60px);
  }

  /* Five stories retain the editorial two-row arrangement as windows narrow. */
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__stage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, clamp(180px, 15.5vw, 215px)));
    grid-auto-rows: clamp(180px, 15.5vw, 215px);
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card.is-pulse {
    grid-column: span 2;
    grid-row: span 2;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card:not(.is-pulse) h3 {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends {
    min-height: 0;
  }
}

@media (min-width: 1051px) and (max-width: 1440px) {
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__layout {
    grid-template-columns: minmax(0, 1fr) clamp(230px, 21vw, 285px);
  }
}

/* When rankings move below the cards, use a concise two-column digest. */
@media (min-width: 761px) and (max-width: 1050px) {
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends {
    padding: 14px 18px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 10px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends header h3 {
    margin: 0;
    font-size: 19px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0 24px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends > div > a {
    padding-block: 9px;
    min-height: 56px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends a span {
    gap: 2px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__all {
    margin-top: 4px;
    padding-top: 8px;
  }
}

/* Membership decoration follows accent/link; success indicators keep their meaning. */
body.studio-theme .studio-page[data-page-audience] .member-premium__ticket {
  border-color: color-mix(in srgb, var(--studio-color-accent) 24%, var(--studio-color-border));
}
body.studio-theme .studio-page[data-page-audience] .member-premium__intro {
  border-inline-end-color: color-mix(in srgb, var(--studio-color-accent) 25%, var(--studio-color-border));
  background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--studio-color-accent) 10%, transparent), transparent 65%), var(--studio-color-surface);
}
body.studio-theme .studio-page[data-page-audience] :is(.member-premium__brand, .member-premium__details, .member-premium__choices button small, .member-premium__price b, .member-premium__devices svg) {
  color: var(--studio-color-link, var(--studio-color-accent));
}
body.studio-theme .studio-page[data-page-audience] .member-premium__brand > span {
  border-color: color-mix(in srgb, var(--studio-color-accent) 35%, transparent);
  background: color-mix(in srgb, var(--studio-color-accent) 7%, transparent);
}
body.studio-theme .studio-page[data-page-audience] .member-premium__watermark {
  color: color-mix(in srgb, var(--studio-color-accent) 4%, transparent);
}

/* Keep the desktop ranking rail flush with the two-row story stage. */
@media (min-width: 1051px) {
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends {
    box-sizing: border-box;
    height: calc(clamp(180px, 15.5vw, 215px) * 2 + 12px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 14px 16px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends header {
    padding-bottom: 9px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends header h3 {
    margin: 4px 0 0;
    font-size: 20px;
    line-height: 1.45;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends > div {
    min-height: 0;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends > div > a {
    min-height: 0;
    padding-block: 6px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends a span {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 6px;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends a small {
    grid-column: 1;
    grid-row: 1;
    line-height: 1.4;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends a i {
    grid-column: 2;
    grid-row: 1;
    line-height: 1.4;
    text-align: end;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__trends a b {
    grid-column: 1 / -1;
    grid-row: 2;
    line-height: 1.5;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum__all {
    margin-top: 0;
    padding-top: 9px;
  }
}

/* Mobile cards place copy on the card surface, outside the photographic overlay. */
@media (max-width: 760px) {
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card__content,
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card h3,
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card footer span b {
    color: var(--studio-color-heading) !important;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card footer {
    color: var(--studio-color-text-muted) !important;
  }
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card footer em,
  body.studio-theme .studio-page[data-page-audience] .news-spectrum-card__pulse {
    color: var(--studio-color-link, var(--studio-color-accent)) !important;
  }
}