/* radio.metodai.se — bygger på metodai.se/static/style.css (samma tokens). */

.radio{max-width:1440px;padding-bottom:110px}
.sr{position:absolute;left:-9999px}

.rd-hero{padding:28px 0 6px}
.rd-hero h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:0}
/* ingen radbrytning mitt i meningen på stora skärmar — texten är kort nog */
.rd-hero p{color:#4a5568;font-size:16px;max-width:none;margin-top:8px;text-wrap:pretty}

/* ---- filter ---- */
.rd-filter{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.rd-sok input{width:100%;max-width:420px;font:inherit;font-size:15px;border:1px solid var(--line);
  border-radius:11px;padding:11px 15px;background:#fff;color:var(--ink)}
.rd-sok input:focus{outline:none;border-color:var(--orange)}
.rd-land,.rd-genre{display:flex;flex-wrap:wrap;gap:8px}
.lchip,.gchip{font:inherit;font-size:13.5px;font-weight:700;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:#4a5568;padding:8px 15px;transition:.15s}
.lchip span{color:#94a3b8;font-weight:600;margin-left:4px}
.lchip:hover,.gchip:hover{border-color:var(--orange);color:var(--ink)}
.lchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.lchip.on span{color:#8a97ad}
.gchip{font-size:13px;padding:6px 13px}
.gchip.on{background:var(--orange);border-color:var(--orange);color:#2a1c00}
.lchip.fav.on{background:var(--orange);border-color:var(--orange);color:#2a1c00}

.rd-status{color:#64748b;font-size:14px;padding:26px 0;text-align:center}
.rd-kalla{color:#64748b;font-size:12.5px;margin:34px 0 0;max-width:70ch}
.rd-kalla a{color:var(--orange-ink);font-weight:700;text-decoration:none}

/* ---- landsrubrik + rutnät ---- */
.rd-landrubrik{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.rd-landrubrik h2{font-size:19px;margin:0}
.rd-landrubrik span{font-size:13px;color:#64748b;font-weight:600}
/* minmax(0,…) — annars vägrar kolumnen krympa under stationsnamnet och
   hela rutnätet blir bredare än sidan */
.rd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rd-sektion{grid-column:1/-1}

.st{position:relative;display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:14px 15px;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,26,38,.06);transition:.15s;text-align:left;
  font:inherit;width:100%}
.st:hover{transform:translateY(-2px);border-color:var(--orange);
  box-shadow:0 8px 24px -8px rgba(20,26,38,.18)}
.st.spelar{border-color:var(--orange);background:rgba(245,166,35,.07)}
.st-logo{width:46px;height:46px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--navy);color:#f5a623;font-weight:800;font-size:15px;overflow:hidden}
.st-logo img{width:100%;height:100%;object-fit:cover;display:block}
.st-txt{flex:1;min-width:0}
.st-namn{display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-meta{display:block;font-size:12px;color:#64748b;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-stjarna{position:absolute;top:8px;right:8px;border:0;background:none;cursor:pointer;
  font-size:15px;line-height:1;color:#cbd5e1;padding:4px}
.st-stjarna:hover,.st-stjarna.pa{color:var(--orange)}
.st-osaker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:#94a3b8;border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:6px}

/* ---- spelare ---- */
.rd-spelare{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;
  z-index:60;box-shadow:0 -6px 24px rgba(10,15,30,.28)}
.sp-inner{display:flex;align-items:center;gap:14px;padding:12px 20px;max-width:1440px}
.sp-logo{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:#1e2636;color:#f5a623;font-weight:800;overflow:hidden}
.sp-logo img{width:100%;height:100%;object-fit:cover;display:block}
.sp-info{flex:1;min-width:0}
.sp-namn{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sub{display:block;font-size:12.5px;color:#aeb9cb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-knapp{width:44px;height:44px;border-radius:50%;border:0;flex:none;cursor:pointer;
  background:var(--orange);color:#2a1c00;display:grid;place-items:center;transition:.15s}
.sp-knapp:hover{background:#ffc260}
.sp-knapp svg{width:22px;height:22px}
.sp-vol{display:flex;align-items:center;gap:8px;flex:none;color:#aeb9cb}
.sp-vol svg{width:18px;height:18px}
.sp-vol input{width:100px;accent-color:#f5a623}
.sp-stang{border:0;background:none;color:#8a97ad;font-size:17px;cursor:pointer;
  padding:6px 4px;flex:none}
.sp-stang:hover{color:#fff}
.sp-laddar .sp-knapp{opacity:.55}
.sp-nu{color:#f5a623;font-weight:800}

@media(max-width:1100px){.rd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.rd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-vol{display:none}}

/* ---- mobil ---- */
@media(max-width:620px){
  .radio{padding-bottom:96px}
  .rd-hero{padding:18px 0 2px}
  .rd-hero p{font-size:15px}
  .rd-grid{grid-template-columns:1fr;gap:10px}

  /* filtren blir band man drar i sidled i stället för fyra radbrutna rader */
  .rd-land,.rd-genre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;
    margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .rd-land::-webkit-scrollbar,.rd-genre::-webkit-scrollbar{display:none}
  .lchip,.gchip{flex:none}
  .lchip{padding:10px 16px}
  .gchip{padding:9px 14px}
  /* 16px gör att iOS inte zoomar in när fältet får fokus */
  .rd-sok input{max-width:none;padding:13px 15px;font-size:16px}

  .st{padding:12px 13px;gap:11px}
  .st-logo{width:42px;height:42px}
  .st-stjarna{top:6px;right:6px;padding:8px;font-size:16px}

  .sp-inner{gap:10px;padding:10px 16px}
  .sp-logo{width:40px;height:40px}
  .sp-knapp{width:46px;height:46px}
  .sp-stang{padding:10px 6px}
  .sp-namn{font-size:14.5px}
  .sp-sub{font-size:12px}
}
@media(max-width:380px){
  .rd-hero h1{font-size:26px}
  .st-meta{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.st{transition:none}.st:hover{transform:none}}