/* Gatunki species — below-fold defer */

/* FAQ: layout w gatunki-species-critical.css; tu tylko dekoracja */
.gatunek-faq-details-wrap summary {
    transition: background-color 0.2s;
}

/* Karuzela rekordów — layout/min-height w critical; tu animacje, hover, przyciski, typografia */
.records-carousel-lowisko .carousel-track-new {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.records-carousel-lowisko .carousel-slide-new {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.records-carousel-lowisko .carousel-slide-new .news-card-new {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

.records-carousel-lowisko .news-content-new h3 {
    font-size: var(--font-size-lg);
    color: #1a1a1a;
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    padding: 0 var(--spacing-xs);
}

.records-carousel-lowisko .news-content-new p {
    margin: var(--spacing-xs) 0;
    padding: 0 var(--spacing-xs);
    color: #4b5563;
}

.records-carousel-lowisko .news-content-new p:first-of-type {
    font-size: var(--font-size-base);
    color: #2563eb;
    font-weight: 600;
}

.records-carousel-lowisko .news-content-new p:last-of-type {
    font-size: var(--font-size-sm);
    color: #6b7280;
    font-weight: 400;
}

.records-carousel-lowisko .record-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.records-carousel-lowisko .record-link:hover .news-card-new {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
}

.carousel-button-new {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: var(--spacing-md);
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    font-size: var(--font-size-xl);
    line-height: 1;
    transition: background-color 0.3s ease;
}

.carousel-button-new:hover {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-button-prev-new { left: var(--spacing-md); }
.carousel-button-next-new { right: var(--spacing-md); }

@media (max-width: 768px) {
    .records-carousel-lowisko .news-card-new {
        border-radius: 12px;
    }

    .records-carousel-lowisko .news-content-new h3 {
        font-size: 1.1rem;
        margin-bottom: 6px;
        padding: 0;
    }

    .records-carousel-lowisko .news-content-new p {
        margin: 2px 0;
        padding: 0;
        font-size: 0.9rem;
        line-height: 1.4;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .records-carousel-lowisko .news-content-new h3 {
        font-size: 1rem;
    }

    .records-carousel-lowisko .news-content-new p {
        font-size: 0.85rem;
    }
}

        /* Modal dla szczegółów rekordowej ryby (nowy wygląd) */
        .record-modal-lowisko[hidden] {
            display: none !important;
        }

        .record-modal-lowisko {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(12px, 2.5vw, 24px);
            /* Mobile: pozwól przewijać zawartość modala (bez przewijania tła) */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .record-modal-lowisko-overlay {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.72);
        }

        .record-modal-lowisko-card {
            position: relative;
            z-index: 1;
            width: min(1100px, 100%);
            background: #ffffff;
            border-radius: 22px;
            border: 1px solid rgba(2, 6, 23, 0.10);
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
            /* Mobile: karta ma się mieścić w ekranie i być przewijalna */
            max-height: calc(100vh - 24px);
            max-height: calc(100dvh - 24px);
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .record-modal-lowisko-grid {
            display: grid;
            grid-template-columns: 1fr;
        }

        .record-modal-lowisko-media {
            margin: 0;
            height: clamp(240px, 45vh, 560px);
            padding: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
        }

        .record-modal-lowisko-img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            object-position: center center;
            display: block;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 8px 30px rgba(2, 6, 23, 0.12);
        }

        /* Bezpiecznik: jeśli globalny CSS ustawi object-fit/rozmiary na img */
        #recordModalLowiskoImage {
            object-fit: contain !important;
            object-position: center center !important;
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
        }

        .record-modal-lowisko-panel {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            /* Mobile: scroll realizuje cała karta modala */
            max-height: none;
            overflow: visible;
        }

        .record-modal-lowisko-header {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .record-modal-lowisko-title {
            margin: 0;
            font-weight: 750;
            font-size: clamp(22px, 2.2vw, 32px);
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: #0f172a;
        }

        .record-modal-lowisko-subtitle {
            font-size: 14px;
            color: rgba(15, 23, 42, 0.70);
        }

        .record-modal-lowisko-kv {
            margin: 0;
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .record-modal-lowisko-kv .kv-item {
            padding: 12px;
            border-radius: 14px;
            border: 1px solid rgba(2, 6, 23, 0.08);
            background: rgba(2, 6, 23, 0.02);
        }

        .record-modal-lowisko-kv dt {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(15, 23, 42, 0.62);
        }

        .record-modal-lowisko-kv dd {
            margin: 2px 0 0;
            font-size: 15px;
            font-weight: 650;
            color: #0f172a;
        }

        .record-modal-lowisko-desc-wrap {
            padding-top: 14px;
            border-top: 1px solid rgba(2, 6, 23, 0.08);
        }

        .record-modal-lowisko-desc-title {
            margin: 0 0 8px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(15, 23, 42, 0.62);
        }

        .record-modal-lowisko-desc {
            margin: 0;
            font-size: 15px;
            line-height: 1.7;
            color: rgba(15, 23, 42, 0.88);
            white-space: pre-line;
        }

        .record-modal-lowisko-x {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 42px;
            height: 42px;
            border-radius: 999px;
            border: 1px solid rgba(2, 6, 23, 0.12);
            background: rgba(255, 255, 255, 0.92);
            color: #0f172a;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            line-height: 1;
        }

        .record-modal-lowisko-x:hover {
            background: #ffffff;
            box-shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
        }

        .record-modal-lowisko-x:focus-visible {
            outline: 3px solid var(--primary-alpha-55);
            outline-offset: 3px;
        }

        .record-modal-lowisko.is-open .record-modal-lowisko-card {
            animation: rm-pop 0.16s ease-out;
        }

        .record-modal-lowisko.is-open .record-modal-lowisko-overlay {
            animation: rm-fade 0.16s ease-out;
        }

        @keyframes rm-pop {
            from {
                transform: translateY(10px) scale(0.985);
                opacity: 0.98;
            }
            to {
                transform: none;
                opacity: 1;
            }
        }

        @keyframes rm-fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @media (min-width: 900px) {
            .record-modal-lowisko-grid {
                grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 0.95fr);
            }

            .record-modal-lowisko-media {
                height: min(78vh, 720px);
                border-right: 1px solid rgba(2, 6, 23, 0.08);
            }

            .record-modal-lowisko-panel {
                padding: 26px;
                max-height: min(78vh, 720px);
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Desktop: zachowaj "kartę" jako nieprzewijalną (scroll tylko w panelu) */
            .record-modal-lowisko-card {
                overflow: hidden;
            }
        }

        @media (min-width: 700px) {
            .record-modal-lowisko-kv {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .record-modal-lowisko {
                /* Na telefonie wygodniej przewijać modal wyrównany do góry */
                align-items: flex-start;
                /* Nie chowaj górnej części pod sticky navbarem */
                padding: 12px;
                padding-top: calc(var(--navbar-height, 70px) + 12px);
            }

            .record-modal-lowisko-card {
                /* Zostaw miejsce na navbar */
                max-height: calc(100vh - var(--navbar-height, 70px) - 24px);
                max-height: calc(100dvh - var(--navbar-height, 70px) - 24px);
            }

            .record-modal-lowisko-media {
                height: clamp(220px, 40vh, 420px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .record-modal-lowisko.is-open .record-modal-lowisko-card,
            .record-modal-lowisko.is-open .record-modal-lowisko-overlay {
                animation: none !important;
            }
        }
        
        .gatunek-description {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-2xl);
        }

        /* Dopisek o rekordach krajowych: złączony z białą treścią nad nim (bez przerwy) */
        .gatunek-kraj-national-note {
            box-sizing: border-box;
            padding: var(--spacing-md) var(--spacing-lg);
            background: #f8fafc;
            font-size: var(--font-size-sm);
            color: #475569;
            line-height: 1.55;
        }

        .gatunek-kraj-national-note strong {
            color: #334155;
        }

        .gatunek-kraj-national-note a {
            color: #2563eb;
            text-decoration: underline;
        }

        .gatunek-kraj-national-note a:hover {
            color: #1d4ed8;
        }

        .gatunek-detail-card .gatunek-kraj-national-note {
            margin: 0;
            border-top: 1px solid #e5e7eb;
            border-radius: 0 0 16px 16px;
        }

        .gatunek-description-stack {
            max-width: 1400px;
            margin: 0 auto var(--spacing-2xl);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            background: #fff;
            box-sizing: border-box;
        }

        .gatunek-description-stack .gatunek-description {
            margin-bottom: 0;
            margin-top: 0;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }

        .gatunek-description-stack .gatunek-kraj-national-note--stacked {
            margin-top: 0;
            border-top: 1px solid #e5e7eb;
        }

        .gatunek-kraj-national-note--standalone {
            margin-top: var(--spacing-xl);
            max-width: 100%;
            border-radius: 8px;
        }

        .gatunek-description-content strong {
            font-weight: 600;
            color: #111827;
        }
        .gatunek-description-content em {
            font-style: italic;
            color: #4b5563;
        }
        .gatunek-description-content b {
            font-weight: 600;
            color: #111827;
        }
        .gatunek-description-content i {
            font-style: italic;
            color: #4b5563;
        }
        .gatunek-description-content ul li,
        .gatunek-description-content ol li {
            margin-left: 0;
        }
        /* Kafelki łowisk: CSS przeniesione do `css/lowisko-card.css` */
        .lowiska-presentation-section h2 { color: #ffffff; }
        /* (style kafelków łowisk są w `css/lowisko-card.css`) */

        /* ===== MOBILE FIX – BEZ ZMIANY JUSTOWANIA (ATF opisu w species-critical) ===== */
        @media (max-width: 768px) {
            .gatunek-header {
                margin-bottom: 16px;
            }

            .section-title {
                font-size: 1.75rem;
                margin-bottom: 12px;
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 1.5rem;
            }
        }