/* Additions to the PR #3 design: video embeds, the newsroom, the story dialog and the Patreon tiers. */

.embed-frame { aspect-ratio: 16 / 9; }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.review-body > p { color: #c9c3b6; margin: 0 0 1rem; }
.review-body > p.mono { color: var(--gold-hi); margin-bottom: .6rem; }

/* Top Stories */
.nr-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.nr-tab {
  border: 1px solid var(--line-soft); background: rgba(0,8,20,.5); color: #cfc9bb;
  border-radius: 999px; padding: .45rem 1rem; min-height: 38px; cursor: pointer;
  font: 400 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.nr-tab:hover { border-color: rgba(0,229,255,.5); color: #fff; }
.nr-tab[aria-selected="true"] { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.08); }
.nr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.nr-card {
  display: flex; flex-direction: column; text-align: left; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  background: rgba(5,13,28,.75); color: inherit; transition: border-color .2s, transform .2s;
}
.nr-card:hover { border-color: rgba(212,175,55,.5); transform: translateY(-2px); }
.nr-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #0b1220; }
.nr-card-noimg { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #0f1d3a, #050b18); color: var(--gold); font: 400 .7rem var(--mono); letter-spacing: .2em; }
.nr-card-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .45rem; }
.nr-kicker { margin: 0; font: 400 .64rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.nr-title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nr-excerpt { margin: 0; color: #a8a294; font-size: .88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nr-note { color: var(--muted); grid-column: 1 / -1; margin: 0; }
.nr-more { margin-top: 1.6rem; display: flex; justify-content: center; }

/* Temporal Breaks */
.nr-breaks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.nr-breaks li { border-bottom: 1px solid var(--line-soft); }
.nr-break {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  width: 100%; padding: 1rem .25rem; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
}
.nr-break:hover .nr-break-title { color: var(--gold-hi); }
.nr-break-date { font: 400 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.nr-break-title { font-weight: 600; }
.nr-break-age { font: 400 .65rem var(--mono); letter-spacing: .12em; color: var(--muted); }

/* Story dialog */
.story-body { padding: 1.4rem; display: grid; gap: 1rem; }
.story-body h3 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; line-height: 1.15; }
.story-body p { margin: 0; color: #cfc9bb; }
.story-body .story-q { color: var(--gold-hi); font-weight: 600; }
.story-body .story-embed { width: 100%; height: 175px; border: 0; border-radius: 10px; }
.story-body img { width: min(320px, 100%); border-radius: 8px; }
.story-body dl { margin: 0; display: grid; gap: .3rem; }

/* Patreon tiers reuse .tiers; the nested lists need their own styling. */
.patreon-tiers > li { gap: .6rem; }
.patreon-tiers > li.is-featured { border-color: rgba(212,175,55,.5); background: rgba(212,175,55,.06); }
.nr-list { list-style: none; margin: 0 0 1rem; padding: 0; flex: 1; display: grid; gap: .35rem; align-content: start; }
.tiers .nr-list li { border: 0; padding: 0 0 0 1.1rem; background: none; position: relative; display: block; color: #c2bcae; font-size: .9rem; }
.tiers .nr-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.patreon-tiers .btn { align-self: flex-start; }

@media (max-width: 1080px) { .nr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .nr-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .nr-break { grid-template-columns: 1fr; gap: .25rem; }
}