/*
 * responsive.css — DlaWierzących.pl
 * Media queries i reguły responsywności.
 * Edytuj bezpośrednio i wgrywaj przez WinSCP. Bez npm/Vite.
 *
 * Breakpointy:
 *   Mobile S:  < 380px
 *   Mobile:    < 640px  (domyślnie — mobile first)
 *   Tablet:    640px+   (sm)
 *   Desktop S: 768px+   (md)
 *   Desktop:   1024px+  (lg)
 *   Desktop L: 1280px+  (xl)
 */


/* =========================================================================
   Padding kontenera — skaluje z ekranem
   ========================================================================= */

@media (min-width: 640px) {
    :root {
        --site-padding: var(--site-padding-md);
    }
}

@media (min-width: 1024px) {
    :root {
        --site-padding: var(--site-padding-lg);
    }
} 


/* =========================================================================
   Typografia — skalowanie na większych ekranach
   ========================================================================= */

@media (min-width: 640px) {
    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }

    .section-heading { font-size: var(--font-size-3xl); }

    .hero__title   { font-size: var(--font-size-5xl); }
    .hero__tagline { font-size: 1.35rem; }
}


/* =========================================================================
   Header — nawigacja desktop
   ========================================================================= */

@media (min-width: 768px) {
    /* Pokaż nawigację desktop */
    .site-nav {
        display: flex;
    }

    /* Ukryj przycisk hamburgera */
    .btn-menu {
        display: none;
    }
}


/* =========================================================================
   Hero — odstępy
   ========================================================================= */

@media (min-width: 640px) {
    .hero {
        padding: var(--space-20) 0;
    }
}


/* =========================================================================
   Siatka produktów
   ========================================================================= */

@media (min-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* =========================================================================
   Prezentowniki
   ========================================================================= */

@media (min-width: 640px) {
    .guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .guide-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================================
   Poradniki + Okazje — dwie kolumny na desktop
   ========================================================================= */

@media (min-width: 768px) {
    .two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }
}


/* =========================================================================
   Okazje — 3 kolumny na szerszych ekranach
   ========================================================================= */

@media (min-width: 480px) {
    .occasion-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================================
   Stopka — poziomy układ na tablet+
   ========================================================================= */

@media (min-width: 640px) {
    .site-footer__inner {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}


/* =========================================================================
   Sekcje — większe odstępy na desktop
   ========================================================================= */

@media (min-width: 768px) {
    .page-section {
        padding: var(--space-16) 0;
    }
}


/* =========================================================================
   Bardzo małe ekrany (< 380px)
   ========================================================================= */

@media (max-width: 379px) {
    :root {
        --site-padding: 0.75rem;
    }

    h1         { font-size: 1.75rem; }
    .hero__title { font-size: 2rem; }
    .hero__tagline { font-size: 1rem; }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .btn--hero-primary,
    .btn--hero-secondary {
        width: 100%;
        justify-content: center;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================================
   Zoom do 200% — brak poziomego scrolla i czytelność
   ========================================================================= */

body {
    overflow-x: hidden;
}

/* Przy bardzo dużym powiększeniu tekstowym (200%+):
   Tailwind był tutaj zbędny — zwykły CSS działa dobrze.
   Kluczowe zasady zaimplementowane w main.css:
   - brak fixed font-size na body (używamy rem, skaluje z przeglądarką)
   - brak max-height blokującego scroll
   - brak overflow:hidden na main
   - flex-wrap: wrap wszędzie tam, gdzie elementy mogą się przepełnić
*/


/* =========================================================================
   Print
   ========================================================================= */

@media print {
    .site-header,
    .site-footer,
    .affiliate-bar,
    .hero__actions,
    .btn,
    .mobile-menu {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}


/*
 * Sekcja własnych reguł responsywności — dodawaj tutaj bez npm build
 * -------------------------------------------------------------------
 */


/* =========================================================================
   Katalog — filtry i siatka
   ========================================================================= */

/* Mobile: filtry w kolumnie */
@media (max-width: 639px) {
    .catalog-filters__row {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-filters__search,
    .catalog-filters__select {
        width: 100%;
        flex: none;
    }

    .catalog-filters__row .btn {
        width: 100%;
    }

    .catalog-layout {
        grid-template-columns: 1fr;
    }

    /* Siatka: 1 kolumna na małych ekranach */
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet: 2 kolumny */
@media (min-width: 480px) and (max-width: 767px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: min 3 kolumny */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .catalog-header__title {
        font-size: var(--font-size-4xl);
    }
}

@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* =========================================================================
   Detal produktu — układ responsywny
   ========================================================================= */

/* Mobile: kolumna mediów pełna szerokość */
@media (max-width: 767px) {
    .product-detail__title {
        font-size: var(--font-size-xl);
    }

    .offer-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .offer-item__actions {
        align-items: flex-start;
        width: 100%;
    }

    .offer-item__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .product-detail__cover {
        border-radius: var(--radius-lg);
    }
}

/* Tablet+ : cover mniejszy, content obok */
@media (min-width: 640px) and (max-width: 767px) {
    .product-detail {
        grid-template-columns: 280px 1fr;
    }

    .offer-item {
        flex-direction: row;
        align-items: center;
    }

    .offer-item__actions {
        align-items: flex-end;
        width: auto;
    }

    .offer-item__actions .btn {
        width: auto;
    }
}


/* =========================================================================
   Paginacja — mobile
   ========================================================================= */

@media (max-width: 479px) {
    .pagination {
        gap: var(--space-2);
    }

    .pagination__btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .pagination__info {
        display: none;
    }
}


/* =========================================================================
   Sekcje redakcyjne — mobile
   ========================================================================= */

@media (max-width: 639px) {
    .editorial-sections {
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   Treści — siatka kart
   ========================================================================= */

/* 1 kolumna na małych ekranach */
@media (max-width: 479px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .search-bar {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
    }

    .search-bar__btn {
        width: 100%;
    }
}

/* 2 kolumny na tablecie */
@media (min-width: 640px) and (max-width: 1023px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 kolumny na desktopie */
@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================================
   Strona szczegółowa treści — mobile
   ========================================================================= */

@media (max-width: 639px) {
    .content-detail__hero {
        border-radius: var(--radius-lg);
        aspect-ratio: 16 / 9;
    }

    .content-detail__title {
        font-size: 1.5rem;
    }

    .content-detail__lead {
        font-size: var(--font-size-base);
    }
}


/* =========================================================================
   Ranking — mobile
   ========================================================================= */

/* Na małych ekranach: pionowy układ pozycji */
@media (max-width: 639px) {
    .ranking-item {
        grid-template-columns: 2rem 5rem 1fr;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .ranking-item__position {
        font-size: 1.25rem;
    }

    .ranking-item__pros-cons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .ranking-item {
        grid-template-columns: 1fr;
    }

    .ranking-item__position {
        font-size: 1.1rem;
        text-align: left;
    }

    .ranking-item__image {
        width: 5rem;
        height: 5rem;
    }
}


/* =========================================================================
   Wyszukiwarka treści — tablet
   ========================================================================= */

@media (max-width: 639px) {
    .search-bar {
        max-width: 100%;
    }
}


/* =========================================================================
   Etap 8B — strona główna, kategorie, trust, stopka
   ========================================================================= */

/* ── Hero — większy tytuł na tablet+ ─────────────────────────────────────── */
@media (min-width: 640px) {
    .hero__title {
        font-size: var(--font-size-5xl);
    }
    .hero__desc {
        font-size: var(--font-size-lg);
        max-width: 600px;
    }
}

/* ── Kafle kategorii ─────────────────────────────────────────────────────── */

/* 4 kolumny na desktopie → domyślnie (zdefiniowane w main.css) */

@media (max-width: 1023px) {
    .category-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .category-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 479px) {
    .category-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
    .category-tile {
        padding: var(--space-4) var(--space-3);
        min-height: 4rem;
    }
    .category-tile__name {
        font-size: var(--font-size-sm);
    }
}

/* ── Trust grid ─────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .trust-item {
        padding: var(--space-4);
        text-align: left;
    }
    .trust-item__icon {
        font-size: 1.5rem;
    }
}

/* ── Section links (wiersz na dole sekcji treści) ───────────────────────── */

@media (max-width: 479px) {
    .section-links {
        gap: var(--space-2) var(--space-4);
    }
    .section-link {
        font-size: var(--font-size-xs);
    }
}

/* ── Home affiliate note ────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .home-affiliate-note__text {
        text-align: left;
        font-size: var(--font-size-xs);
    }
}

/* ── Section header (heading + link w jednym wierszu) ───────────────────── */

@media (max-width: 479px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}

/* ── Mega menu — tylko na desktopie ─────────────────────────────────────── */

/* Na mobile mega menu jest ukryte — tam jest accordion w #mobile-menu */
@media (max-width: 767px) {
    .site-nav__item--mega {
        display: none;
    }
    .mega-menu {
        display: none !important;
    }
}

/* Skalowanie kolumn mega menu na węższych desktopach */
@media (min-width: 768px) and (max-width: 1023px) {
    .mega-menu__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mega-menu__inner {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Stopka — 3 kolumny na desktop, 1 na mobile ─────────────────────────── */

@media (max-width: 767px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
        padding: var(--space-8) 0 var(--space-6);
    }
    .site-footer__brand {
        grid-column: 1 / -1;
    }
    .site-footer__about {
        max-width: 100%;
    }
}

@media (max-width: 479px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .site-footer__brand {
        grid-column: auto;
    }
}

@media (max-width: 639px) {
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}

/* ── CMS Content — responsywność (Etap 10B) ─────────────────────────────── */

@media (max-width: 767px) {
    .cms-content {
        font-size: var(--font-size-base);
    }

    .cms-content h2 { font-size: var(--font-size-xl); }
    .cms-content h3 { font-size: var(--font-size-lg); }
    .cms-content h4 { font-size: var(--font-size-base); }

    .cms-toc {
        display: block;
        padding: var(--space-4);
    }

    .cms-video--youtube {
        border-radius: 0;
        margin-left: calc(-1 * var(--site-padding));
        margin-right: calc(-1 * var(--site-padding));
    }

    .cms-audio {
        padding: var(--space-4);
    }

    .cms-download-file {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .cms-pdf-preview__embed {
        /* Na mobile PDF preview mało użyteczny — pokazuj tylko fallback */
        display: none;
    }
}

@media (max-width: 480px) {
    .cms-content blockquote {
        padding: var(--space-3) var(--space-4);
        margin: var(--space-4) 0;
    }

    .cms-toc__item--h3,
    .cms-toc__item--h4 {
        padding-left: var(--space-3);
    }

    /* Legacy: kolumny → jedna kolumna na mobile */
    .cms-content .column-count2,
    .cms-content .column-count3 {
        column-count: 1;
    }

    /* Legacy: floaty → bez floatów na mobile */
    .cms-content .fleft,
    .cms-content .fright {
        float: none;
        max-width: 100%;
        margin: var(--space-4) 0;
    }

    /* cms-image float → pełna szerokość na mobile */
    .cms-content .cms-image--left,
    .cms-content .cms-image--right {
        float: none;
        max-width: 100%;
        margin: var(--space-4) 0;
        text-align: center;
    }

    /* cms-image--left/right + clearfix niepotrzebny na mobile */
    .cms-content .cms-image--left + *,
    .cms-content .cms-image--right + * {
        display: block;
    }
}