/* ═══════════════════════════════════════════════════════════════════════
   POPRAWKI RWD — jedyne odstępstwo od kopii 1:1
   ═══════════════════════════════════════════════════════════════════════
   Osobny plik, a nie zmiana w oryginalnym `<style>`: dzięki temu widać,
   co jest kopią, a co naszą poprawką, i można ją wyłączyć jedną linią.

   Problem: `.show-title` jest pozycjonowany absolutnie do dolnej krawędzi
   kadru (`position:absolute; bottom:…`), a `.show-desc` leci w normalnym
   przepływie. Na wąskim ekranie tytuł ląduje NA opisie — przy „YES360"
   widać to najlepiej.

   Lekarstwo: poniżej 900 px tytuł wraca do przepływu i staje nad opisem.
   Breakpoint 900 px jest już używany przez oryginał (`.split`, `.fp`),
   więc nie wprowadzamy nowego progu.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    .show-title {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: 100%;
        margin-top: 18px;
    }

    /* Wariant lustrzany trzyma tekst przy prawej krawędzi — na wąskim
       ekranie nie ma czego lustrzać, więc wszystko idzie do lewej. */
    .show.alt .show-title,
    .show.alt .show-desc {
        text-align: left;
        margin-left: 0;
        right: auto;
    }

    .show.alt .show-tags { justify-content: flex-start; }

    /* Opis stoi pod tytułem, a nie obok niego. */
    .show-desc { max-width: 100%; margin-top: 12px; }

    /* Tytuł w tym układzie nie ma już za sobą zdjęcia, więc może być mniejszy
       — przy 320 px „YES360" w 7vw rozpychał wiersz. */
    .show-title h2 { font-size: clamp(1.9rem, 9vw, 3.2rem); }
}