/* ==========================================
   Mobile 2-column station cards — EXPERIMENTAL
   Scope: .stations-grid .grid ONLY (the main station-listing
   grid used on index.php, radio-tara.php, radio-limba.php,
   gen.php, radio/international/country.php - NOT the
   ".station-related" "posturi similare" sections on radio.php,
   which already have their own compact styling and different
   markup: <div class="stations-grid"> with no nested .grid).

   Was previously stuck at 1 column on mobile (grid-template-columns:
   repeat(auto-fill, minmax(220px, 1fr)) in radio-card-modern-v2.css
   has no mobile override), so each card took ~500px of height and
   browsing required a lot of scrolling.

   To revert: delete this file. Everything here is additive/override
   only, scoped to max-width:600px, nothing else was changed.
========================================== */

@media (max-width: 600px) {

  /* element-type selector added on purpose: radio-card-modern-v2.css's
     .stations-grid .grid rule has identical specificity, and that file
     sorts after this one alphabetically in header.php's autoload glob,
     so it would otherwise win on source order alone. */
  section.stations-grid .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stations-grid .grid .radio-card {
    padding: 10px 8px 8px;
    gap: 6px;
    min-height: 0;
    border-radius: 12px;
    /* Grid items default to min-width:auto, meaning they refuse to
       shrink below their content's intrinsic (unwrapped) size. The
       now-playing text has white-space:nowrap + text-overflow:ellipsis
       (card-live-indicator.css), which only truncates if the box is
       actually allowed to be narrower than the full track title - a
       long song name (e.g. "Artist - Very Long Song Title") was
       forcing the whole card wider than its 1fr column, pushing
       right-column cards off the edge of the screen once a track
       title populated after pressing play. */
    min-width: 0;
    /* Cards were blending into the page/each other at this size (thin
       #1e2130 border on a near-black card over a near-black page) - a
       soft shadow gives each card its own visual "tile" regardless of
       border color (featured/paid/playing all keep their own colored
       borders below, untouched). */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  }

  /* Border contrast bump only for the plain (non-featured, non-playing)
     state - featured/paid/is-playing already have their own, more
     visible colored borders (z-card-featured.css, radio-card-modern-v2.css)
     and should keep them exactly as-is. */
  .stations-grid .grid .radio-card:not(.is-featured):not(.is-playing) {
    border-color: #2b3044;
  }

  .stations-grid .grid .radio-card .badge {
    top: 6px;
    font-size: 9px;
    padding: 3px 6px;
    gap: 4px;
  }

  .stations-grid .grid .radio-card .badge-country {
    left: 6px;
  }

  .stations-grid .grid .radio-card .badge-country img {
    width: 14px;
    height: 10px;
  }

  .stations-grid .grid .radio-card .badge-genre {
    right: 6px;
  }

  .stations-grid .grid .radio-card .card-logo {
    margin-top: 18px;
    height: 52px;
  }

  .stations-grid .grid .radio-card .card-logo img {
    max-height: 44px;
  }

  .stations-grid .grid .radio-card .station-name {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .stations-grid .grid .radio-card .card-now-playing {
    font-size: 0.62rem;
  }

  .stations-grid .grid .radio-card .card-footer {
    gap: 6px;
    /* grid-template-columns minmax(0,...) fix now lives in the base
       .card-footer rule (radio-card-modern-v2.css) - it's not a
       mobile-only bug, just easier to spot at mobile's tighter widths. */
  }

  .stations-grid .grid .radio-card .listen-counter {
    font-size: 10px;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 0;
  }

  .stations-grid .grid .radio-card .listen-counter .listeners-count {
    font-size: 9px;
  }

  .stations-grid .grid .radio-card .btn-play-card {
    width: 40px;
    height: 40px;
    /* The "▶" text glyph rendered thin/pointy at this size (font-shape
       dependent, looks "sharp" rather than a solid play icon) - drawn
       as an actual filled triangle instead via border-trick below,
       which stays a consistent bold shape regardless of font/device.
       Only hidden while NOT playing though: js/script.js toggles this
       button's innerHTML between "▶" and "❚❚" (pause) on click - font-
       size:0 here would have hidden the pause glyph too, leaving the
       button stuck showing a play triangle even while a station was
       actually playing. */
    position: relative;
  }

  .stations-grid .grid .radio-card:not(.is-playing) .btn-play-card {
    font-size: 0;
  }

  .stations-grid .grid .radio-card:not(.is-playing) .btn-play-card::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #ffffff;
    /* triangles read as visually off-center in a symmetric box - nudge
       right to compensate */
    margin-left: 3px;
  }

  /* Playing: fall back to the JS-injected "❚❚" pause glyph, just sized
     up to match the bigger button instead of the base 16px. */
  .stations-grid .grid .radio-card.is-playing .btn-play-card {
    font-size: 20px;
  }

  .stations-grid .grid .radio-card .btn-like {
    width: 34px;
    height: 34px;
  }

  .stations-grid .grid .radio-card .btn-like .heart {
    width: 16px;
    height: 16px;
    /* was inheriting opacity:.55 from radio-card-modern-v2.css - on a
       dark #1f222d button over a dark card, the heart was nearly
       invisible until liked. */
    opacity: 0.85;
  }

  .stations-grid .grid .radio-card .btn-like.is-liked .heart {
    opacity: 1;
  }
}