/* ============================================================================
   modal.css — modal platform „gdzie posłuchać" (js/platform-modal.js)
   Część rozbitego css/style.css — kolejność wczytywania (ta sama na każdej
   podstronie) trzyma kaskadę identyczną jak w jednym pliku.
   ========================================================================== */

/* (Sekcja FAQ i MODAL FAQ — style USUNIĘTE w całości razem z sekcją PYTANIA.) */

/* MODAL PLATFORM — „gdzie posłuchać" dla wydawnictw z Dyskografii (klik w
   aktywną okładkę karuzeli, patrz setupPlatformModal w main.js). Celowo
   ten sam szkielet co dawny modal FAQ (fade całości, blur+przyciemnienie
   tła, panel wjeżdża scale/translate) — ma się czuć jak to samo okno, tylko
   z inną treścią: lista platform, każda w swoim wierszu z ikoną i nazwą po
   lewej oraz pigułką POSŁUCHAJ po prawej, przedzielona cienkimi liniami jak
   lista pytań FAQ. */
.platform-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s ease}
.platform-modal[hidden]{display:none}
.platform-modal.is-open{opacity:1}
.platform-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.platform-modal-panel{
  position:relative;width:min(560px,100%);max-height:min(84vh,680px);overflow-y:auto;
  background:#0d0d0d;box-shadow:0 40px 120px rgba(0,0,0,0.65);
  padding:clamp(26px,5vw,44px);
  transform:translateY(16px) scale(.97);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.platform-modal.is-open .platform-modal-panel{transform:none}
.platform-modal-close{position:absolute;top:14px;right:16px;background:none;border:0;color:rgba(255,255,255,0.5);font-size:30px;line-height:1;cursor:pointer;padding:6px;font-family:inherit;transition:color .2s ease,transform .2s ease}
.platform-modal-close:hover{color:#fff;transform:rotate(90deg)}
.platform-modal-kind{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px}
.platform-modal-title{font-size:clamp(17px,2.4vw,24px);font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:clamp(14px,2.4vh,24px);padding-right:34px}
.platform-modal-list{list-style:none;margin:0;padding:0}
/* Wiersze wjeżdżają kaskadą (opóźnienie od --i nadawanego w JS) DOPIERO gdy
   modal dostaje .is-open — stan bazowy to opacity:0, więc otwarcie ma miękką
   choreografię zamiast jednego skoku. */
.platform-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(13px,1.9vh,17px) 0;border-bottom:1px solid rgba(255,255,255,0.1);
  opacity:0;transform:translateY(10px);
}
.platform-row:last-child{border-bottom:0}
.platform-modal.is-open .platform-row{
  opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(.1s + var(--i,0)*.055s);
}
.platform-row-brand{display:flex;align-items:center;gap:13px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.4px;min-width:0;white-space:nowrap}
.platform-row-brand svg{width:27px;height:27px;flex-shrink:0;display:block}
.platform-row-btn{
  flex-shrink:0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);
  color:#fff;padding:9px 20px;border-radius:999px;text-decoration:none;
  font-family:inherit;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease;
}
.platform-row-btn:hover{background:#fff;color:#0d0d0d;transform:translateY(-1px)}
.platform-row-btn:active{transform:none}
/* Wąski telefon — lekko mniejsze ikony/typografia, żeby nazwa platformy i
   pigułka POSŁUCHAJ zawsze siedziały w jednej linii, bez łamania nazwy. */
@media (max-width: 520px){
  .platform-row-brand{font-size:13.5px;gap:10px}
  .platform-row-brand svg{width:23px;height:23px}
  .platform-row-btn{padding:8px 14px;font-size:11px;letter-spacing:1.2px}
}