/* ========================================
   NEW TEMPLATE STYLES - Only for specific templates
   ======================================== */

body.single .main-content,
body.archive .main-content,
body.search .main-content,
body.error404 .main-content {
    min-height: 60vh;
}

/* Archive/search result counter (homepage counter was intentionally removed). */
.archive-results .results-count,
.search-results .results-count {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-dark);
}

/* ========================================
   Article sections – desktop: układ „docs” (nawigacja | panel z rolką);
   mobile: bez zmian – accordion.
   Markup: .pg-sections-wrapper--tabbed (article-sections.js)
   ======================================== */

.pg-article-intro {
    margin-bottom: 1.5rem;
}

/* ── Title heading (e.g. "OPIS PRODUKTU") ── */

.pg-sections-title {
    margin-bottom: 1.25rem;
}

.pg-sections-title > h2,
.pg-sections-title > h3,
.pg-sections-title > h4,
.pg-sections-title > h5 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-normal);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0;
    padding: 0;
}

.pg-sections-title__body {
    margin-top: 0.75rem;
    color: var(--gray-dark);
    line-height: var(--line-height-relaxed);
}

.pg-sections-title__body > *:last-child {
    margin-bottom: 0;
}

/* ── Panels (baza: ukryte z wyjątkiem aktywnego; nagłówek tylko na mobile) ── */

.pg-panel {
    display: none;
    background: var(--plp-card-bg, var(--white));
    border: 1px solid var(--color-border-subtle, #e2e4e9);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    scroll-margin-top: 130px;
}

.pg-panel--active {
    display: block;
}

.pg-panel__header {
    display: none;
}

.pg-panel__body {
    padding: 1.5rem 1.25rem;
    line-height: var(--line-height-relaxed);
    color: var(--gray-dark);
    animation: pgPanelFadeIn 0.2s ease;
}

@keyframes pgPanelFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pg-panel__body-title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-normal);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--plp-text, var(--black));
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gold);
}

.pg-panel__body > *:first-child {
    margin-top: 0;
}

.pg-panel__body > *:last-child {
    margin-bottom: 0;
}

/* ── Desktop (≥769px): nawigacja jak lista docs po lewej, treść w przewijanym panelu ── */

@media (min-width: 769px) {
    .pg-sections-wrapper--tabbed {
        display: grid;
        grid-template-columns: minmax(200px, 16rem) minmax(0, 1fr);
        gap: 0 1.5rem;
        align-items: start;
    }

    .pg-sections-wrapper--tabbed > .pg-sections-title {
        grid-column: 1 / -1;
    }

    .pg-sections-wrapper--tabbed > .pg-tabs-nav {
        grid-column: 1;
    }

    .pg-sections-wrapper--tabbed > .pg-tabs-panels {
        grid-column: 2;
    }

    .pg-tabs-nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.25rem;
        margin: 0;
        padding: 0.5rem 0.75rem 0.5rem 0;
        border: none;
        border-right: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.1));
        position: sticky;
        top: calc(var(--header-height, 80px) + 2rem);
        max-height: calc(100vh - var(--header-height, 80px) - 2.5rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .pg-tab {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0.6rem 0.75rem 0.6rem 0.7rem;
        font-family: var(--font-family-ui);
        font-size: var(--font-size-sm, 0.875rem);
        font-weight: 500;
        text-transform: none;
        text-align: left;
        line-height: 1.4;
        letter-spacing: 0.01em;
        color: var(--gray, #6c757d);
        background: transparent;
        border: none;
        border-left: 3px solid transparent;
        border-radius: 0 6px 6px 0;
        cursor: pointer;
        white-space: normal;
        box-shadow: none;
        transition:
            color 0.15s ease,
            background-color 0.15s ease,
            border-color 0.15s ease;
    }

    .pg-tab:hover {
        color: var(--plp-text, var(--black));
        background: var(--plp-page-bg, #f4f5f7);
        border-left-color: rgba(212, 175, 55, 0.45);
    }

    .pg-tab--active {
        color: var(--plp-text, var(--black));
        font-weight: 600;
        background: var(--plp-page-bg, #f4f5f7);
        border-left-color: var(--gold, #d4af37);
        box-shadow: none;
    }

    .pg-tab--active:hover {
        color: var(--plp-text, var(--black));
        background: var(--plp-page-bg, #f4f5f7);
        border-left-color: var(--gold-dark, #b8941f);
    }

    .pg-tabs-panels {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: var(--plp-card-bg, var(--white));
        border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.1));
        border-radius: var(--border-radius-lg, 8px);
        box-shadow: var(--plp-card-shadow, 0 4px 10px rgba(0, 0, 0, 0.06));
    }

    .pg-sections-wrapper--tabbed .pg-panel {
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .pg-sections-wrapper--tabbed .pg-panel__body {
        animation: none;
    }
}

/* ========================================
   Mobile accordion
   ======================================== */

@media (max-width: 768px) {
    /* Grid / sticky / scroll z desktopu tutaj nie obowiązują */
    .pg-sections-wrapper--tabbed {
        display: block;
    }

    .pg-tabs-panels {
        overflow: visible;
        box-shadow: none;
    }

    .pg-tabs-nav {
        display: none;
    }

    .pg-panel {
        display: block;
        margin-bottom: 0.5rem;
    }

    .pg-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.875rem 1rem;
        font-family: var(--font-family-ui);
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        line-height: 1.4;
        color: var(--black);
        background: var(--gray-light);
        border: none;
        border-bottom: 1px solid transparent;
        cursor: pointer;
        transition: background-color var(--transition-fast);
        -webkit-user-select: none;
        user-select: none;
    }

    .pg-panel__header:hover {
        background: #ececec;
    }

    .pg-panel--expanded > .pg-panel__header {
        border-bottom-color: #e2e4e9;
    }

    .pg-panel__title {
        flex: 1;
        min-width: 0;
    }

    .pg-panel__chevron {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--border-radius-full);
        transition: transform 0.25s ease,
                    background-color var(--transition-fast);
        color: var(--gray);
    }

    .pg-panel__header:hover .pg-panel__chevron {
        background: rgba(0, 0, 0, 0.06);
    }

    .pg-panel--expanded .pg-panel__chevron {
        transform: rotate(180deg);
    }

    .pg-panel__body {
        display: none;
        padding: 1rem;
        animation: none;
    }

    .pg-panel--expanded > .pg-panel__body {
        display: block;
    }

    .pg-sections-title {
        margin-bottom: 0.75rem;
    }

    .pg-sections-title > h2,
    .pg-sections-title > h3,
    .pg-sections-title > h4,
    .pg-sections-title > h5 {
        font-size: clamp(1.1rem, 3vw, 1.5rem);
    }
}