/* FragFM radio experience v2 */

:root {
  --orange-hot: #ff8a12;
  --orange-glow: rgba(245,123,0,.22);
}

.site-header { height: 72px; }
.main-nav a.active::after { bottom: -16px; }

.hero-v2 {
  min-height: 548px;
  background:
    radial-gradient(circle at 82% 42%, rgba(245,123,0,.11), transparent 30rem),
    linear-gradient(180deg, rgba(255,255,255,.008), transparent 60%);
}
.hero-v2::before {
  width: 540px;
  right: 5%;
  top: -34%;
  opacity: .8;
}
.hero-v2::after {
  background:
    linear-gradient(90deg, rgba(8,9,11,.99) 0%, rgba(8,9,11,.92) 45%, rgba(8,9,11,.5) 72%, rgba(8,9,11,.76) 100%),
    repeating-linear-gradient(118deg, transparent 0 42px, rgba(245,123,0,.022) 42px 43px);
}
.hero-v2 .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(430px, .78fr);
  gap: clamp(44px, 7vw, 94px);
  padding: 58px 0 54px;
}
.hero-copy-block { max-width: 720px; }
.hero-v2 h1 { font-size: clamp(76px, 8.2vw, 118px); }
.hero-v2 .hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 23px 0 22px;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: .08em;
}
.hero-v2 .hero-tagline::after {
  content: "";
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}
.hero-v2 .hero-copy { max-width: 610px; }
.hero-mark {
  position: absolute;
  z-index: -1;
  right: -3%;
  bottom: -35%;
  width: min(54vw, 760px);
  opacity: .035;
  transform: rotate(-7deg);
  pointer-events: none;
}
.hero-mark img { width: 100%; }
.btn-live .live-dot { background: #1d1308; box-shadow: none; }

.onair-card-v2 {
  padding: 14px;
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(27,30,37,.96), rgba(12,14,18,.98)),
    #111318;
  box-shadow: 0 30px 90px rgba(0,0,0,.48), 0 0 50px rgba(245,123,0,.055);
}
.onair-card-v2 .onair-heading { padding: 2px 2px 11px; }
.onair-layout {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
}
.onair-card-v2 .onair-art {
  width: 154px;
  aspect-ratio: 1;
  border-radius: 14px;
}
.onair-card-v2 .onair-art::after { top: 9px; left: 9px; font-size: 8px; }
.onair-card-v2 .onair-meta { padding: 2px 1px; min-width: 0; }
.onair-card-v2 .onair-meta h2 {
  font-size: clamp(22px, 2.1vw, 31px);
  overflow-wrap: anywhere;
}
.onair-card-v2 .onair-meta p { font-size: 13px; }
.onair-card-v2 .onair-stats { margin-top: 13px; padding: 12px 2px 1px; }

.track-progress {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  margin-top: 17px;
  border-radius: 99px;
  background: rgba(255,255,255,.085);
}
.track-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f36f00, #ff9c2f);
  box-shadow: 0 0 12px rgba(245,123,0,.3);
  transition: width .8s linear;
}
.track-times {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted-2);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.next-up-mini {
  display: grid;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.next-up-mini > span { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.next-up-mini strong { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-up-mini small { margin-top: 2px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.station-strip {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(245,123,0,.045), rgba(255,255,255,.012) 40%, rgba(245,123,0,.025));
}
.station-strip-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .9fr .8fr;
  min-height: 92px;
}
.station-strip-item,
.station-strip-action {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 22px;
  border-left: 1px solid var(--line);
}
.station-strip-grid > :first-child { border-left: 0; padding-left: 0; }
.station-strip-action {
  color: white;
  background: rgba(245,123,0,.055);
  transition: background .18s ease;
}
.station-strip-action:hover { background: rgba(245,123,0,.11); }
.strip-label,
.station-strip-action > span {
  color: var(--orange);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 5px;
}
.station-strip-item strong,
.station-strip-action strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-strip-item small { margin-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.recent-section { padding-top: 62px; }
.history-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.history-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(155deg, #15181e, #0e1014);
  transition: transform .18s ease, border-color .18s ease;
}
.history-card:hover { transform: translateY(-3px); border-color: rgba(245,123,0,.3); }
.history-art { aspect-ratio: 1; overflow: hidden; background: #171a20; }
.history-art img { width: 100%; height: 100%; object-fit: cover; }
.history-art img[src$="fragfm-emblem.png"] { object-fit: contain; padding: 20%; background: radial-gradient(circle, rgba(245,123,0,.12), transparent 60%), #101217; }
.history-copy { min-width: 0; padding: 13px; display: flex; flex-direction: column; }
.history-copy > span { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.history-copy strong { margin-top: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-grid-full { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.schedule-home {
  background:
    radial-gradient(circle at 12% 0%, rgba(245,123,0,.055), transparent 27rem),
    rgba(255,255,255,.006);
}
.source-note,
.schedule-source-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}
.source-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 12px rgba(98,217,136,.45);
}
.schedule-source-banner {
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.schedule-source-banner > div { display: flex; align-items: center; gap: 8px; }
.schedule-source-banner strong { color: #dfe2e8; font-size: 10px; letter-spacing: .04em; }
.schedule-preview-v2 .schedule-row { position: relative; overflow: hidden; }
.schedule-preview-v2 .schedule-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(245,123,0,.24);
}
.schedule-preview-v2 .schedule-row.is-now {
  border-color: rgba(245,123,0,.4);
  background: linear-gradient(90deg, rgba(245,123,0,.11), rgba(16,18,23,.98) 34%);
}
.schedule-preview-v2 .schedule-row.is-now::before { background: var(--orange); box-shadow: 0 0 18px var(--orange-glow); }

.feature-card-v2 { min-height: 218px; }
.feature-link {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 18px;
  color: var(--orange-2);
  font-size: 10px;
  font-weight: 850;
}

.listen-layout { align-items: start; }
.listen-copy { padding-top: 10px; }
.listen-progress { max-width: 760px; margin: 28px 0 0; }
.listen-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}
.listen-stats > div { min-width: 0; padding: 13px 14px; background: #11141a; display: flex; flex-direction: column; }
.listen-stats span { color: var(--muted-2); font-size: 8px; letter-spacing: .12em; }
.listen-stats strong { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-up-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(245,123,0,.055), rgba(255,255,255,.015));
  display: grid;
}
.next-up-panel > span { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.next-up-panel strong { margin-top: 5px; font-size: 14px; }
.next-up-panel small { margin-top: 3px; color: var(--muted); }
.stream-options { margin-top: 25px; }
.stream-options-label { display: block; margin-bottom: 8px; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.stream-options-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.stream-option {
  min-width: 126px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #11141a;
  color: white;
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
}
.stream-option strong { display: block; font-size: 10px; }
.stream-option span { display: block; margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.stream-option.active { border-color: rgba(245,123,0,.5); background: rgba(245,123,0,.09); }

.global-player { min-height: 78px; }
.global-player::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: rgba(255,255,255,.045);
}
.player-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  pointer-events: none;
}
.player-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  box-shadow: 0 0 10px var(--orange-glow);
  transition: width .8s linear;
}

@media (max-width: 1100px) {
  .hero-v2 .hero-grid { grid-template-columns: minmax(0,1fr) 420px; gap: 38px; }
  .history-grid, .history-grid-full { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .station-strip-grid { grid-template-columns: 1fr 1fr 1fr; }
  .station-strip-action { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; min-height: 54px; }
}

@media (max-width: 860px) {
  .hero-v2 { min-height: auto; }
  .hero-v2 .hero-grid { grid-template-columns: 1fr; padding: 54px 0; }
  .hero-copy-block { max-width: none; }
  .onair-card-v2 { max-width: 620px; }
  .history-grid, .history-grid-full { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .station-strip-grid { grid-template-columns: 1fr 1fr; }
  .station-strip-grid > :nth-child(3) { border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
  .station-strip-grid > :nth-child(4) { grid-column: auto; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding-left: 22px; }
  .listen-stats { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero-v2 h1 { font-size: clamp(64px, 22vw, 92px); }
  .hero-v2 .hero-tagline::after { display: none; }
  .hero-v2 .hero-meta { gap: 14px; }
  .hero-v2 .hero-stat { min-width: calc(50% - 10px); }
  .onair-layout { grid-template-columns: 104px minmax(0,1fr); gap: 13px; }
  .onair-card-v2 .onair-art { width: 104px; }
  .onair-card-v2 .onair-meta h2 { font-size: 19px; }
  .next-up-mini { display: none; }
  .station-strip-grid { grid-template-columns: 1fr; }
  .station-strip-item,
  .station-strip-action,
  .station-strip-grid > :nth-child(3),
  .station-strip-grid > :nth-child(4) { border-left: 0; border-top: 1px solid var(--line); padding: 13px 0; min-height: 66px; }
  .station-strip-grid > :first-child { border-top: 0; }
  .history-grid, .history-grid-full { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .history-copy { padding: 10px; }
  .history-copy strong { font-size: 11px; }
  .source-note { display: none; }
  .schedule-source-banner { align-items: flex-start; flex-direction: column; }
  .stream-options-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .stream-option { min-width: 0; }
}