/* Radio Spin — RESPONSIVE MOBILE v2 — 05.11.2026.
   Fluid sizing: phones from 320px up to 650px, and compact mobile player
   in landscape/tablet widths 651–899px. No changes to stream, JS or desktop.
   Uses existing markup and panoramas.  Drop-in replacement of v1 filename.
*/
@media screen and (max-width: 650px) {
  /* Card layout: retain the desktop two-column composition but scale sensibly
     for 320–430px phones. No global changes to the approved panoramas. */
  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: clamp(64px, 19.5vw, 104px) minmax(0, 1fr);
    gap: clamp(8px, 2.4vw, 13px);
    align-items: center;
    min-height: 182px;
    height: auto;
    margin-top: 10px;
    padding: clamp(8px, 2.5vw, 13px);
    border-radius: 12px;
    overflow: hidden;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-photo"] {
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: clamp(148px, 40vw, 188px);
    align-self: center;
    overflow: hidden;
    border-radius: 10px;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-details"] {
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(3px, 1vw, 5px);
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
    background: transparent;
    box-shadow: none;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-details"] time {
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-details"] h3 {
    max-width: none;
    font-size: clamp(13px, 3.8vw, 17px);
    line-height: 1.17;
    letter-spacing: -.02em;
    margin: 0;
    overflow-wrap: break-word;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-details"] p {
    font-size: clamp(10.5px, 2.8vw, 12px);
    line-height: 1.35;
    margin: 0;
    overflow-wrap: break-word;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) button.spin-remind {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 4px 0 0;
    padding: 9px clamp(8px, 2.4vw, 12px);
    font: 700 clamp(10.5px, 2.9vw, 12px)/1.2 system-ui, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    position: static;
    border-radius: 999px;
  }

  #ramowka #shows article.show.spin-jacek-card .spin-jacek-eye {
    padding: 3px 9px;
    margin: 1px 0;
    font-size: clamp(10px, 2.6vw, 11px);
    line-height: 1.2;
  }

  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) .repeat-tag {
    padding: 2px 7px;
    margin: 1px 0;
    font-size: clamp(9px, 2.5vw, 10px);
    line-height: 1.2;
  }

  /* Reduce the heavy mobile scrim on Jacek's card to reveal more studio. */
  #ramowka #shows article.show.spin-jacek-card {
    background-image:
      linear-gradient(90deg,rgba(6,8,24,.88) 0%,rgba(8,8,24,.58) 55%,rgba(8,8,24,.16) 100%),
      url('assets/ramowka/jacek-studio-panorama.jpg');
    background-size: cover, cover;
    background-position: center, 65% center;
  }

  /* Compact, functional mobile player. No changes to audio stream or JS. */
  :root { --player-height: 76px; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .player {
    min-height: 76px;
    padding: 9px clamp(10px, 3vw, 16px) calc(9px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: nowrap !important;
    gap: 10px;
    align-items: center;
  }
  .player .spin-info { display: none !important; }
  .player .cover { width: clamp(38px, 11vw, 48px); height: clamp(38px, 11vw, 48px); flex-shrink: 0; }
  .player .track { flex: 1 1 0; min-width: 0; }
  .player .track .eyebrow { font-size: 8px; }
  .player .track strong { max-width: none; font-size: clamp(11px, 2.8vw, 14px); line-height: 1.3; }
  .player #player-status { font-size: 10px; line-height: 1.25; }
  .player .play { flex-shrink: 0; width: clamp(44px, 12vw, 52px); height: clamp(44px, 12vw, 52px); min-width: 44px; margin: 0; font-size: 20px; }
  .player .equalizer, .player .volume, .player .player-station { display: none !important; }
}
@media screen and (max-width: 355px) {
  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    min-height: 184px;
  }
  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-photo"] { height: 150px; }
  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) > [class$="-details"] h3 { font-size: 13px; }
  #ramowka #shows article.show:is(
    .spin-jacek-card, .spin-adam-card, .spin-moc-card,
    .spin-drwal-card, .spin-szeptunki-card, .spin-dagmara-card,
    .spin-oksibp-card, .spin-future-card, .spin-tomek-card,
    .spin-auto-card
  ) button.spin-remind { font-size: 10.5px; padding: 8px 8px; min-height: 44px; }
}

/* Space between the day tabs and cards also scales on varying phone widths.
   Every day remains a comfortable >=44px touch target. */
@media screen and (max-width: 650px) {
  #ramowka .schedule { padding: clamp(10px, 3vw, 18px); }
  #ramowka .days { gap: clamp(2px, .65vw, 5px); margin-bottom: clamp(10px, 3vw, 18px); }
  #ramowka .day { min-height: 44px; padding: 8px 0; }
  #ramowka .schedule-bottom { flex-wrap: wrap; gap: 8px; }
  #ramowka .schedule-bottom > * { min-width: 0; }
  #ramowka #shows article.show[class*="spin-"] > [class$="-details"] {
    overflow-wrap: anywhere;
  }
  #ramowka #shows article.show[class*="spin-"] button.spin-remind {
    max-width: 100%;
    touch-action: manipulation;
  }
}
/* Landscape phones / small tablets: prevent the second player row
   (weather ticker) from covering the actual page content. */
@media screen and (min-width: 651px) and (max-width: 899px) {
  .player { flex-wrap: nowrap !important; }
  .player .spin-info { display: none !important; }
}