/* landing.css — content styling for landing2.php. Loaded via <link> in head via shell ctx. */
:root{--muted:rgba(255,255,255,.6);--gold:#e7c873}
.hwel{font-size:clamp(1.4rem,2.6vw,1.7rem);font-weight:800;margin:0 0 4px}
.hsub{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.lsect{margin-top:22px}
.lsect:first-of-type{margin-top:0}
.lsect .lh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.lsect .lh h2{font-size:1.02rem;font-weight:800}
.lsect .lh .more{color:var(--muted);font-size:.78rem}
.lsect .lh .more:hover{color:var(--gold)}

/* horizontal strip */
.strp{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 6px}
.strp::-webkit-scrollbar{display:none}
.strp>*{scroll-snap-align:start;flex:0 0 auto}

.ctile{display:block;width:132px;color:#fff}
.ctile .ccov{display:block;width:132px;height:132px;border-radius:11px;background:#1b1b24 center/cover no-repeat;box-shadow:0 8px 18px -8px rgba(0,0,0,.6);margin-bottom:7px;transition:transform .2s}
.ctile:hover .ccov{transform:translateY(-3px)}
.ctile .ctt{font-size:.84rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctile .cta{font-size:.7rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* history mosaic — 1 big + 4 small in 2x2 */
.redisc{display:grid;grid-template-columns:240px 1fr;gap:10px;align-items:start}
.smgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:240px}
.bigtile,.smtile{display:block;position:relative;overflow:hidden;background:#1b1b24 center/cover no-repeat;color:#fff;transition:transform .2s;box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}
.bigtile{width:240px;height:240px;border-radius:15px}
.smtile{height:100%;border-radius:10px}
.bigtile:hover,.smtile:hover{transform:translateY(-3px)}
.bigtile::after,.smtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.8) 100%)}
.bigtile .btxt,.smtile .stxt{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:11px;padding:0 13px;z-index:2}
.smtile .stxt{bottom:8px;padding:0 10px}
.bigtile .btt{font-size:1rem;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.85);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bigtile .bta{font-size:.78rem;opacity:.85;margin-top:2px;text-shadow:0 2px 8px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smtile .sttt{font-size:.74rem;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.85);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smtile .stta{font-size:.64rem;opacity:.85;margin-top:1px;text-shadow:0 1px 5px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.redisc{grid-template-columns:1fr;gap:8px}.bigtile{width:100%;height:auto;aspect-ratio:1}.smgrid{height:auto;grid-template-rows:auto auto}.smtile{aspect-ratio:1}}

/* album + artist tiles */
.albtile{display:block;width:150px;color:#fff}
.albtile .alcov{display:block;width:150px;height:150px;border-radius:11px;background:#1b1b24 center/cover no-repeat;box-shadow:0 10px 20px -10px rgba(0,0,0,.6);margin-bottom:7px;transition:transform .2s}
.albtile:hover .alcov{transform:translateY(-3px)}
.albtile .alt{font-size:.84rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.albtile .als{font-size:.7rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.artile{width:106px;text-align:center;color:#fff}
.artile .acirc{width:106px;height:106px;border-radius:50%;background:#1b1b24 center/cover no-repeat;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;color:rgba(255,255,255,.85);transition:transform .2s}
.artile:hover .acirc{transform:scale(1.05)}
.artile .att{font-size:.8rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}

/* featured podcast card */
.ep-feat{display:flex;align-items:center;gap:14px;padding:12px;background:linear-gradient(120deg,rgba(231,200,115,.1),#15151c 70%);border:1px solid rgba(231,200,115,.28);border-radius:14px;color:inherit;transition:border-color .15s,transform .2s;text-decoration:none}
.ep-feat:hover{border-color:rgba(231,200,115,.55);transform:translateY(-2px)}
.ep-feat .ef-cov{display:block;width:86px;height:86px;border-radius:12px;background:#1b1b24 center/cover no-repeat;flex-shrink:0;box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}
.ep-feat .ef-meta{flex:1;min-width:0}
.ep-feat .ef-k{color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:.04em;margin-bottom:4px}
.ep-feat .ef-t{font-size:1rem;font-weight:800;line-height:1.3;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.ep-feat .ef-s{font-size:.78rem;color:#cdd0db}
.ep-feat .ef-p{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900}

/* CTA */
.brcta{display:flex;align-items:center;gap:13px;background:#15151c;border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:12px 16px;color:inherit;transition:border-color .2s;text-decoration:none}
.brcta:hover{border-color:var(--gold)}
.brcta .brico{font-size:1.5rem}
.brcta .brtxt{flex:1}
.brcta .brtt{font-weight:800;font-size:.92rem}
.brcta .brsub{color:var(--muted);font-size:.74rem;margin-top:2px}
.brcta .brarr{color:var(--gold);font-weight:800}

/* guest login banner */
.gbanner{background:linear-gradient(120deg,rgba(231,200,115,.12),rgba(231,200,115,.03));border:1px solid rgba(231,200,115,.22);border-radius:13px;padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gbanner .gbtxt{flex:1;min-width:160px;font-size:.86rem}
.gbanner .gbtxt b{color:var(--gold)}
.gbanner .gbtn{background:var(--gold);color:#1a1a1a;border:none;border-radius:22px;padding:8px 16px;font:inherit;font-weight:800;font-size:.8rem}

/* ==== Live radio hero cards (landing) ==== */
/* Two big buttons: VIP + قدیمی. Tap = shell.js playLive. Cover + track update
   from AzuraCast polling (shell.js writes into [data-live-cover] / [data-live-track]). */
.live-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 8px;
}
.live-card {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(231,200,115,.28);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(231,200,115,.08), rgba(21,21,28,.6));
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: start;
  transition: border-color .18s, transform .12s;
}
.live-card:hover { border-color: rgba(231,200,115,.55); }
.live-card:active { transform: scale(.98); }
.live-card.on { border-color: var(--gold, #e7c873); background: linear-gradient(120deg, rgba(231,200,115,.16), rgba(21,21,28,.7)); }

.live-card .lc-cov {
  display: block;
  width: 78px; height: 78px;
  border-radius: 12px;
  background: #1b1b24 center/cover no-repeat;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.6);
}
.live-card .lc-meta { min-width: 0; }
.live-card .lc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 800; color: var(--gold, #e7c873);
  letter-spacing: .04em; margin-bottom: 3px;
}
.live-card .lc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff2d55;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.live-card .lc-name { font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.2; }
.live-card .lc-track {
  font-size: .78rem; color: rgba(255,255,255,.62); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-card .lc-play {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold, #e7c873); color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900;
  box-shadow: 0 10px 22px -8px rgba(231,200,115,.55);
}
.live-card.on .lc-play { color: #1a1a1a; }

@media (max-width: 640px) {
  .live-row { grid-template-columns: 1fr; gap: 10px; }
  .live-card { padding: 10px 12px; grid-template-columns: 64px 1fr auto; gap: 10px; }
  .live-card .lc-cov { width: 64px; height: 64px; border-radius: 10px; }
  .live-card .lc-name { font-size: .96rem; }
  .live-card .lc-track { font-size: .72rem; }
  .live-card .lc-play { width: 36px; height: 36px; font-size: .9rem; }
}

/* Fix live-card play/pause toggle: use two SVG icons that CSS toggles cleanly.
   The previous text-node ▶ inside the span couldnt be hidden with > * because
   text nodes arent element children — so both play and pause icons stacked. */
.live-card .lc-play { position: relative; overflow: hidden; }
.live-card .lc-play-ic { width: 20px; height: 20px; display: block; }
.live-card .lc-ic-pause { display: none; }
.live-card.on .lc-ic-play { display: none; }
.live-card.on .lc-ic-pause { display: block; }