/* ==========================================================================
   PICCADILLY RADIO 261 — INNER PAGE STYLES
   News, Schedule, Presenters, Competitions, About.
   Depends on brand.css + site.css.
   ========================================================================== */

/* ── PAGE HERO BAND ────────────────────────────────────────────────────────
   Every inner page opens with the same banner: photo, dark wash, title and
   a one-line standfirst.                                                   */

.pr-band {
  position: relative;
  background: var(--pr-ink);
  color: var(--pr-white);
  overflow: hidden;
  text-align: center;
}

.pr-band__media { position: absolute; inset: 0; }
.pr-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.pr-band__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,14,.5) 0%, rgba(11,12,14,.72) 100%);
}

.pr-band .pr-wrap { position: relative; padding-block: var(--pr-s8); }
.pr-band__title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--pr-s3); }
.pr-band__lede  { font-size: 1.0625rem; color: var(--pr-grey-400); margin: 0 auto; max-width: 52ch; }

/* ── FILTER PILLS ──────────────────────────────────────────────────────── */

.pr-filters {
  display: flex; flex-wrap: wrap; gap: var(--pr-s2);
  padding-block: var(--pr-s5);
}

.pr-filter {
  font-family: inherit;
  font-size: .8125rem; font-weight: 700;
  padding: .5rem 1.1rem;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-pill);
  background: var(--pr-white);
  color: var(--pr-black);
  cursor: pointer;
  transition: background .2s var(--pr-ease), color .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
.pr-filter:hover { border-color: var(--pr-orange); color: var(--pr-orange); }
.pr-filter.is-on { background: var(--pr-orange); border-color: var(--pr-orange); color: var(--pr-white); }

/* ── NEWS LISTING ──────────────────────────────────────────────────────── */

.pr-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pr-s5); }

.pr-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-xs);
  margin-bottom: var(--pr-s5);
  transition: box-shadow .2s var(--pr-ease);
}
.pr-lead:hover { box-shadow: var(--pr-shadow-lg); }

.pr-lead__media { position: relative; min-height: 300px; background: var(--pr-mist); }
.pr-lead__media img { width: 100%; height: 100%; object-fit: cover; }

.pr-lead__flag {
  position: absolute; top: var(--pr-s4); left: var(--pr-s4);
  font-size: .625rem; font-weight: 700;
  letter-spacing: var(--pr-track-wide);
  text-transform: uppercase;
  padding: .35rem .8rem;
  background: var(--pr-black);
  color: var(--pr-white);
  border-radius: var(--pr-pill);
}

.pr-lead__body {
  padding: var(--pr-s6);
  display: flex; flex-direction: column; gap: var(--pr-s3);
  justify-content: center;
}
.pr-lead__title { font-size: 1.75rem; }
.pr-lead__dek { font-size: 1rem; color: var(--pr-grey-700); margin: 0; }
.pr-lead__by { font-size: .8125rem; color: var(--pr-grey-700); }

/* ── SCHEDULE ──────────────────────────────────────────────────────────────
   One daily list, written into the HTML by build-schedule.py. Each show has a
   daypart colour stripe; the music between shows is a quieter row. The slot
   on air now is marked by pages.js.                                        */

.pr-sched-note {
  padding-block: var(--pr-s5) 0;
  margin-bottom: var(--pr-s5);
  font-size: .875rem; font-weight: 600;
  color: var(--pr-grey-700);
}

.pr-slots { display: grid; gap: var(--pr-s3); }

.pr-slot {
  display: grid;
  grid-template-columns: 4px 132px minmax(0, 1fr) auto;
  gap: var(--pr-s4);
  align-items: center;
  background: var(--pr-white);
  border-radius: var(--pr-radius);
  padding: var(--pr-s4) var(--pr-s5) var(--pr-s4) 0;
  box-shadow: var(--pr-shadow-xs);
  overflow: hidden;
}

/* Category stripe — the reference colours each show by daypart. */
.pr-slot__stripe { align-self: stretch; background: var(--pr-grey-400); }
.pr-slot[data-cat="breakfast"] .pr-slot__stripe { background: #F08A1C; }
.pr-slot[data-cat="daytime"]   .pr-slot__stripe { background: var(--pr-orange); }
.pr-slot[data-cat="drivetime"] .pr-slot__stripe { background: var(--pr-orange-deep); }
.pr-slot[data-cat="evening"]   .pr-slot__stripe { background: #7A5C46; }
.pr-slot[data-cat="latenight"] .pr-slot__stripe { background: #4A4E57; }

.pr-slot__time {
  font-size: .9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-left: var(--pr-s5);
}
.pr-slot__show  { font-size: 1.125rem; margin: 2px 0 4px; line-height: 1.25; }
.pr-slot__type  {
  font-size: .625rem; font-weight: 700;
  letter-spacing: var(--pr-track-wide);
  text-transform: uppercase;
  color: var(--pr-orange-deep);
}
.pr-slot__about { font-size: .875rem; line-height: 1.5; color: var(--pr-grey-700); margin: 0; max-width: 62ch; }

.pr-slot--music { background: transparent; box-shadow: none; padding-block: var(--pr-s2); }
.pr-slot--music .pr-slot__stripe { background: var(--pr-line); }
.pr-slot--music .pr-slot__time { font-weight: 600; color: var(--pr-grey-700); }
.pr-slot--music.is-now { background: var(--pr-white); }
.pr-slot__by   { font-size: .8125rem; color: var(--pr-grey-700); }

.pr-slot__now {
  font-size: .625rem; font-weight: 700;
  letter-spacing: var(--pr-track-wide);
  text-transform: uppercase;
  padding: .3rem .7rem;
  background: var(--pr-orange);
  color: var(--pr-white);
  border-radius: var(--pr-pill);
  white-space: nowrap;
}

.pr-slot.is-now { box-shadow: 0 0 0 2px var(--pr-orange), var(--pr-shadow); }

/* ── PRESENTERS ────────────────────────────────────────────────────────── */

.pr-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pr-s5); }
.pr-people--featured { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--pr-s7); }

.pr-person {
  display: flex; flex-direction: column;
  background: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-xs);
  transition: box-shadow .2s var(--pr-ease), transform .2s var(--pr-ease);
}
.pr-person:hover { box-shadow: var(--pr-shadow-lg); transform: translateY(-3px); }

.pr-person__media { aspect-ratio: 4 / 3; background: var(--pr-mist); }
.pr-people--featured .pr-person__media { aspect-ratio: 16 / 9; }
.pr-person__media img { width: 100%; height: 100%; object-fit: cover; }

.pr-person__body { padding: var(--pr-s5); display: flex; flex-direction: column; gap: var(--pr-s2); flex: 1; }
.pr-person__name { font-size: 1.25rem; }
.pr-person__show { font-size: .75rem; font-weight: 700; letter-spacing: var(--pr-track-wide); text-transform: uppercase; color: var(--pr-orange); }
.pr-person__bio  { font-size: .875rem; color: var(--pr-grey-700); margin: 0; flex: 1; }

.pr-person__link { font-size: .8125rem; font-weight: 700; color: var(--pr-orange); align-self: flex-start; }
.pr-person__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── COMPETITIONS ──────────────────────────────────────────────────────── */

.pr-comp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow);
}

.pr-comp__media { position: relative; min-height: 340px; background: var(--pr-mist); }
.pr-comp__media img { width: 100%; height: 100%; object-fit: cover; }

.pr-comp__body { padding: var(--pr-s7) var(--pr-s6); display: flex; flex-direction: column; gap: var(--pr-s4); justify-content: center; }
.pr-comp__title { font-size: 1.875rem; }

.pr-comp__prize {
  font-size: .9375rem; font-weight: 700;
  color: var(--pr-orange);
}
.pr-comp__desc { font-size: 1rem; color: var(--pr-grey-700); margin: 0; }

.pr-comp__ends {
  display: inline-flex; align-items: center; gap: var(--pr-s2);
  align-self: flex-start;
  font-size: .8125rem; font-weight: 700;
  padding: .45rem .9rem;
  background: var(--pr-mist);
  border-radius: var(--pr-pill);
}

.pr-comp__terms { font-size: .75rem; color: var(--pr-grey-700); margin: 0; }

/* ── PROSE (About, article bodies) ─────────────────────────────────────── */

.pr-prose { max-width: 68ch; }
.pr-prose p { font-size: 1.0625rem; color: var(--pr-grey-700); margin: 0 0 var(--pr-s5); }
.pr-prose h2 { font-size: 1.5rem; margin: var(--pr-s7) 0 var(--pr-s4); }
.pr-prose h2:first-child { margin-top: 0; }
.pr-prose strong { color: var(--pr-black); }

.pr-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pr-s4);
  margin-top: var(--pr-s6);
}
.pr-fact {
  background: var(--pr-white);
  border-radius: var(--pr-radius);
  padding: var(--pr-s5);
  box-shadow: var(--pr-shadow-xs);
}
.pr-fact b { display: block; font-size: 1.75rem; letter-spacing: var(--pr-track-tight); }
.pr-fact span { font-size: .8125rem; color: var(--pr-grey-700); }

.pr-empty { color: var(--pr-grey-700); font-size: .9375rem; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */

@media (max-width: 1060px) {
  .pr-list   { grid-template-columns: repeat(2, 1fr); }
  .pr-people { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .pr-lead { grid-template-columns: 1fr; }
  .pr-lead__media { min-height: 220px; }
  .pr-comp { grid-template-columns: 1fr; }
  .pr-comp__media { min-height: 220px; }
  .pr-people, .pr-people--featured { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pr-list { grid-template-columns: 1fr; }
  .pr-people, .pr-people--featured { grid-template-columns: 1fr; }
  .pr-facts { grid-template-columns: 1fr; }

  /* Slot collapses to two rows: time above, show below. */
  .pr-slot {
    grid-template-columns: 4px minmax(0, 1fr) auto;
    padding-right: var(--pr-s4);
  }
  .pr-slot__stripe { grid-column: 1; grid-row: 1 / span 2; }
  .pr-slot__time { grid-column: 2; grid-row: 1; padding-left: var(--pr-s4); font-size: .8125rem; color: var(--pr-grey-700); }
  .pr-slot__main { grid-column: 2 / -1; grid-row: 2; padding-left: var(--pr-s4); }
  .pr-slot__badge { grid-column: 3; grid-row: 1; }
}

/* ==========================================================================
   ARTICLE PAGES — history cluster and channel pages carried over from the
   old site. Text, schema and addresses are unchanged; only the design is new.
   ========================================================================== */

.pr-band__meta { font-size: .875rem; color: var(--pr-grey-400); margin: var(--pr-s3) 0 0; }

.pr-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--pr-s7);
  align-items: start;
}

.pr-article__body {
  background: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-xs);
  padding: var(--pr-s7);
  min-width: 0;
}

.pr-article__body > :first-child { margin-top: 0; }
.pr-article__body h2 { font-size: 1.5rem; margin: var(--pr-s7) 0 var(--pr-s3); }
.pr-article__body h3 { font-size: 1.125rem; margin: var(--pr-s5) 0 var(--pr-s2); }
.pr-article__body p  { font-size: 1.0625rem; line-height: 1.75; color: var(--pr-grey-700); margin: 0 0 var(--pr-s4); max-width: 68ch; }
.pr-article__body strong { color: var(--pr-black); }
.pr-article__body a  { color: var(--pr-orange-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pr-article__body a:hover { color: var(--pr-orange); }
.pr-article__body ul, .pr-article__body ol { color: var(--pr-grey-700); padding-left: 1.25rem; margin: 0 0 var(--pr-s5); max-width: 68ch; }
.pr-article__body li { line-height: 1.65; margin-bottom: var(--pr-s2); }

/* The direct answer under the H1 — the block Google lifts into answer boxes. */
.pr-answer {
  border-left: 4px solid var(--pr-orange);
  background: var(--pr-orange-tint);
  border-radius: 0 var(--pr-radius) var(--pr-radius) 0;
  padding: var(--pr-s5) var(--pr-s5);
  margin: 0 0 var(--pr-s6);
}
.pr-answer p { font-size: 1.125rem; line-height: 1.7; color: var(--pr-black); margin: 0; max-width: none; }

.pr-sources { margin-top: var(--pr-s7); padding-top: var(--pr-s5); border-top: 1px solid var(--pr-line); }
.pr-sources h2 { font-size: 1rem; margin: 0 0 var(--pr-s2); }
.pr-sources p  { font-size: .875rem; line-height: 1.7; }

/* Live player on the channel pages */
.pr-player {
  background: var(--pr-black);
  color: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-s5);
  margin: 0 0 var(--pr-s6);
}
.pr-player__live {
  display: inline-flex; align-items: center; gap: var(--pr-s2);
  font-size: .6875rem; font-weight: 700; letter-spacing: var(--pr-track-wide); text-transform: uppercase;
  color: var(--pr-orange); margin: 0 0 var(--pr-s3) !important;
}
.pr-player__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pr-live); flex: none; }
.pr-player audio { display: block; width: 100%; }

/* Sidebar */
.pr-aside { display: grid; gap: var(--pr-s5); position: sticky; top: calc(var(--pr-header-h) + var(--pr-s5)); }

.pr-box {
  background: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-xs);
  padding: var(--pr-s5);
}
.pr-box h2 { font-size: 1rem; margin: 0 0 var(--pr-s3); }
.pr-box p  { font-size: .875rem; line-height: 1.6; color: var(--pr-grey-700); margin: 0 0 var(--pr-s4); }
.pr-box--dark { background: var(--pr-black); color: var(--pr-white); }
.pr-box--dark p { color: var(--pr-grey-400); }

.pr-section-nav { list-style: none; margin: 0; padding: 0; }
.pr-section-nav li + li { border-top: 1px solid var(--pr-line); }
.pr-section-nav a, .pr-section-nav span { display: block; padding: .65rem 0; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.pr-section-nav a:hover { color: var(--pr-orange); }
.pr-section-nav [aria-current="page"] { color: var(--pr-orange); }

@media (max-width: 960px) {
  .pr-article { grid-template-columns: 1fr; }
  .pr-aside { position: static; }
}

@media (max-width: 640px) {
  .pr-article__body { padding: var(--pr-s5); }
  .pr-article__body h2 { font-size: 1.3rem; }
  .pr-answer { padding: var(--pr-s4); }
  .pr-answer p { font-size: 1.0625rem; }
}

/* Player box text. Two-class selectors so they beat .pr-article__body p/a/strong. */
.pr-player .pr-player__live { color: var(--pr-orange); font-size: .6875rem; line-height: 1; max-width: none; }
.pr-player .pr-player__name { color: var(--pr-white); font-size: 1.25rem; font-weight: 800; letter-spacing: var(--pr-track-tight); line-height: 1.2; margin: 0 0 var(--pr-s3); max-width: none; }
.pr-player p { color: var(--pr-grey-400); font-size: .9375rem; margin: var(--pr-s3) 0 0; }
.pr-player strong { color: var(--pr-white); }
.pr-player a { color: var(--pr-orange); }