/* ==========================================================================
   PICCADILLY RADIO 261 — STATIONS PAGE
   The tuner, the channel grid and the directory tiles. Loaded on
   stations.html only. Depends on brand.css + site.css + pages.css.
   ========================================================================== */

/* ── Tuner ─────────────────────────────────────────────────────────────── */

.pr-tuner {
  background: linear-gradient(180deg, #171717 0%, var(--pr-black) 100%);
  color: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-s6);
  box-shadow: var(--pr-shadow-lg);
}

.pr-tuner__display {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--pr-s6);
  align-items: center;
  margin-bottom: var(--pr-s6);
}

.pr-tuner__readout { line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pr-tuner__freq {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--pr-orange);
  text-shadow: 0 0 28px rgba(252, 92, 2, .35);
}

.pr-tuner__unit { font-size: 1rem; font-weight: 700; color: var(--pr-grey-400); margin-left: .35rem; }

.pr-tuner__label {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: var(--pr-track-wide); text-transform: uppercase;
  color: var(--pr-grey-400);
  margin: 0;
}

.pr-tuner__name { font-size: 1.375rem; font-weight: 800; letter-spacing: var(--pr-track-tight); margin: .2rem 0 .35rem; }

.pr-tuner__link { font-size: .8125rem; font-weight: 600; color: var(--pr-orange); }
.pr-tuner__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The dial */
.pr-dial {
  position: relative;
  height: 92px;
  border-radius: var(--pr-radius);
  background: #1C1C1C;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.is-dragging .pr-dial { cursor: grabbing; }
.pr-dial:focus-visible { outline: 3px solid var(--pr-orange); outline-offset: 3px; }

/* One tick per MHz, drawn with a gradient rather than dozens of elements.
   28.5 = the dial's span in MHz (87.5 to 116). */
.pr-dial__ticks {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .30) 0 1px,
    transparent 1px calc(100% / 28.5));
  pointer-events: none;
}

.pr-dial__num {
  position: absolute; bottom: 26px;
  transform: translateX(-50%);
  font-size: .6875rem; font-weight: 600;
  color: var(--pr-grey-400);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* The medium-wave end of the dial, where 261 m and 1152 kHz sit */
.pr-dial__mw {
  position: absolute; top: 0; bottom: 0; right: 0;
  border-left: 1px dashed rgba(255, 255, 255, .28);
  background: rgba(252, 92, 2, .07);
  pointer-events: none;
}
.pr-dial__mw span {
  position: absolute; right: 8px; bottom: 26px;
  font-size: .625rem; font-weight: 700;
  letter-spacing: var(--pr-track-wide);
  color: var(--pr-orange);
}

.pr-dial__mark {
  position: absolute; top: 10px;
  transform: translateX(-50%);
  font-size: .625rem; font-weight: 700;
  white-space: nowrap;
  padding: .15rem .45rem;
  border-radius: var(--pr-pill);
  background: rgba(252, 92, 2, .18);
  color: var(--pr-white);
  pointer-events: none;
}

.pr-dial__needle {
  position: absolute; top: 0; bottom: 0;
  width: 3px; margin-left: -1.5px;
  background: var(--pr-orange);
  box-shadow: 0 0 14px 2px rgba(252, 92, 2, .6);
  transition: left .35s var(--pr-ease);
  pointer-events: none;
}
.is-dragging .pr-dial__needle { transition: none; }

/* Presets */
.pr-tuner__presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--pr-s2);
  margin-top: var(--pr-s5);
}

.pr-preset {
  display: grid; gap: 2px;
  font-family: inherit;
  text-align: center;
  padding: .6rem .4rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--pr-radius);
  background: rgba(255, 255, 255, .05);
  color: var(--pr-white);
  cursor: pointer;
  transition: background .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
.pr-preset:hover { border-color: var(--pr-orange); }
.pr-preset[aria-pressed="true"] { background: var(--pr-orange); border-color: var(--pr-orange); }
.pr-preset b { font-size: .8125rem; font-weight: 700; }
.pr-preset small { font-size: .6875rem; opacity: .75; font-variant-numeric: tabular-nums; }

/* ── Channel grid: flagship and Heritage lead, the four decades follow ──── */

.pr-stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pr-s5); }

.pr-station {
  display: flex; flex-direction: column; gap: var(--pr-s3);
  background: var(--pr-white);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-xs);
  padding: var(--pr-s5);
  transition: box-shadow .2s var(--pr-ease), transform .2s var(--pr-ease);
}
.pr-station:hover { box-shadow: var(--pr-shadow-lg); transform: translateY(-2px); }

.pr-station--lead { grid-column: span 2; padding: var(--pr-s6); }
.pr-station--flagship { background: var(--pr-black); color: var(--pr-white); }

/* Set like a station ident: small PICCADILLY over a big channel name */
.pr-station__ident { line-height: .95; margin: 0; }
.pr-station__ident small {
  display: block;
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pr-grey-700);
}
.pr-station--flagship .pr-station__ident small { color: var(--pr-grey-400); }
.pr-station__ident b {
  display: block;
  font-family: var(--pr-font-mark);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -.02em;
  color: var(--pr-orange);
}
.pr-station--lead .pr-station__ident b { font-size: 2.75rem; }

.pr-station__freq { font-size: .75rem; font-weight: 700; color: var(--pr-grey-700); font-variant-numeric: tabular-nums; }
.pr-station--flagship .pr-station__freq { color: var(--pr-grey-400); }

.pr-station__desc { font-size: .9375rem; line-height: 1.6; color: var(--pr-grey-700); margin: 0; flex: 1; }
.pr-station--flagship .pr-station__desc { color: rgba(255, 255, 255, .8); }

.pr-station__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pr-s4); }
.pr-station__more { font-size: .8125rem; font-weight: 700; color: var(--pr-orange); }
.pr-station__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Intro and directory tiles ─────────────────────────────────────────── */

.pr-lede-block { max-width: 62ch; margin: 0 0 var(--pr-s6); }
.pr-lede-block p { font-size: 1.0625rem; line-height: 1.7; color: var(--pr-grey-700); margin: 0 0 var(--pr-s3); }

.pr-directories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pr-s3); }

.pr-directory {
  display: grid; gap: 2px;
  background: var(--pr-white);
  border-radius: var(--pr-radius);
  box-shadow: var(--pr-shadow-xs);
  padding: var(--pr-s4) var(--pr-s5);
  transition: box-shadow .2s var(--pr-ease);
}
.pr-directory:hover { box-shadow: var(--pr-shadow); }
.pr-directory b { font-size: .9375rem; }
.pr-directory span { font-size: .8125rem; color: var(--pr-grey-700); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .pr-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-directories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-tuner__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pr-tuner { padding: var(--pr-s5) var(--pr-s4); }
  .pr-tuner__display { grid-template-columns: 1fr; gap: var(--pr-s3); text-align: center; }
  .pr-tuner__play { justify-self: center; }
  .pr-dial__mark { display: none; }          /* the presets carry the names on phones */
  .pr-dial__num[data-n="88"] { display: none; }   /* sits on the dial's edge and gets cut in half */
  .pr-stations, .pr-directories { grid-template-columns: 1fr; }
  .pr-station--lead { grid-column: auto; }
  .pr-station--lead .pr-station__ident b { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-dial__needle { transition: none; }
  .pr-station:hover { transform: none; }
}