/* ============================================================
   KABEX — Garden Section (.garden-section)
   Zielona sekcja DO OGRODU z obrazem zanikającym w zieleń po prawej.
   ============================================================ */

.garden-section {
    --gs-green:        #04861E;
    --gs-green-dark:   #023A0E;
    --gs-green-deep:   #012B0A;
    --gs-green-light:  #16A34A;
    --gs-green-bright: #84CC16;
    --gs-yellow:       #FDE047;
    --gs-text-dim:     rgba(255, 255, 255, 0.7);
    --gs-text-soft:    rgba(255, 255, 255, 0.85);
    --gs-border:       rgba(255, 255, 255, 0.12);
    --gs-border-soft:  rgba(255, 255, 255, 0.06);

    margin: var(--sp-12) 0;
}

.garden-section__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    min-height: 520px;
    overflow: hidden;
    /* Zielony gradient bg sekcji */
    background:
        radial-gradient(circle at 0% 50%, rgba(132, 204, 22, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, var(--gs-green) 0%, var(--gs-green-dark) 65%, var(--gs-green-deep) 100%);
    box-shadow: 0 24px 60px rgba(2, 70, 14, 0.25);
}

/* ── LEFT — Content panel ────────────────────────────────── */
.garden-section__panel {
    position: relative;
    z-index: 2;
    padding: var(--sp-10);
    display: flex;
    flex-direction: column;
    color: #fff;
}

/* Subtle dotted pattern */
.garden-section__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.garden-section__panel > * { position: relative; z-index: 1; }

/* Akcent żółty — vertical bar po lewej */
.garden-section__panel::after {
    content: '';
    position: absolute;
    left: 0;
    top: var(--sp-10);
    bottom: var(--sp-10);
    width: 3px;
    background: linear-gradient(180deg, var(--gs-yellow) 0%, var(--gs-green-bright) 50%, var(--gs-yellow) 100%);
}

/* Kicker */
.garden-section__kicker {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gs-yellow);
    margin-bottom: var(--sp-3);
}

/* H2 */
.garden-section__title {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

.garden-section__lead {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--gs-text-soft);
    max-width: 56ch;
}

.garden-section__divider {
    width: 60px;
    height: 2px;
    background: var(--gs-yellow);
    margin-bottom: var(--sp-5);
}

/* ── Lista podkategorii (2-kol) ──────────────────────────── */
.garden-section__cats {
    list-style: none;
    margin: 0 0 var(--sp-6);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gs-border);
    border: 1px solid var(--gs-border);
}

.garden-section__cat {
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.garden-section__cat-link {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: var(--sp-3);
    padding: 14px 16px;
    color: #fff;
    text-decoration: none;
    transition: background var(--t-fast);
}

.garden-section__cat-link:hover {
    background: rgba(253, 224, 71, 0.15);
}

.garden-section__cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--gs-yellow);
    background: rgba(253, 224, 71, 0.12);
    transition: background var(--t-fast), color var(--t-fast);
}

.garden-section__cat-link:hover .garden-section__cat-icon {
    background: var(--gs-yellow);
    color: var(--gs-green-deep);
}

.garden-section__cat-name {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.garden-section__cat-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--gs-text-dim);
    white-space: nowrap;
}

.garden-section__cat-arrow {
    color: var(--gs-text-dim);
    transition: transform var(--t-fast), color var(--t-fast);
}

.garden-section__cat-link:hover .garden-section__cat-arrow {
    color: var(--gs-yellow);
    transform: translateX(3px);
}

/* ── CTA ─────────────────────────────────────────────────── */
.garden-section__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    align-self: flex-start;
    margin-top: auto;
    padding: var(--sp-4) var(--sp-6);
    background: var(--gs-yellow);
    color: var(--gs-green-deep);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background var(--t-fast), gap var(--t-fast), transform var(--t-fast);
}

.garden-section__cta:hover {
    background: #FACC15;
    gap: var(--sp-3);
    transform: translateY(-2px);
}

/* ── RIGHT — Image panel (obraz zanika w lewo do zieleni) ─ */
.garden-section__media {
    position: relative;
    background-color: var(--gs-green);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: 320px;
    overflow: hidden;
}

/* Gradient overlay: zielony solid od lewej → przezroczysty po prawej */
.garden-section__media-fade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            var(--gs-green) 0%,
            rgba(4, 134, 30, 0.95) 8%,
            rgba(4, 134, 30, 0.75) 22%,
            rgba(4, 134, 30, 0.4) 45%,
            rgba(4, 134, 30, 0.1) 75%,
            transparent 100%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

/* Placeholder gdy brak obrazu */
.garden-section__media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
    background:
        radial-gradient(circle at 70% 50%, rgba(132, 204, 22, 0.2) 0%, transparent 50%);
}

/* Badge "INSPIRACJA SEZONOWA" — pozycja na prawej krawędzi (gdzie obraz najbardziej widoczny) */
.garden-section__media-badge {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(2, 70, 14, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid var(--gs-border);
}

.garden-section__media-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gs-yellow);
    box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.6);
    animation: gs-pulse 2s ease-out infinite;
}

@keyframes gs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(253, 224, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .garden-section__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Na mobile obraz na górze, panel pod spodem */
    .garden-section__panel {
        order: 2;
        padding: var(--sp-8) var(--sp-6);
    }

    .garden-section__media {
        order: 1;
        min-height: 240px;
    }

    /* Na mobile fade gradient z DOŁU do zieleni (panel niżej) */
    .garden-section__media-fade {
        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(4, 134, 30, 0.1) 50%,
                rgba(4, 134, 30, 0.7) 80%,
                var(--gs-green) 100%
            );
    }
}

@media (max-width: 640px) {
    .garden-section {
        margin: var(--sp-8) 0;
    }

    .garden-section__panel {
        padding: var(--sp-6) var(--sp-4);
    }

    .garden-section__title {
        font-size: clamp(28px, 7vw, 40px);
    }

    .garden-section__cats {
        grid-template-columns: 1fr;
    }

    .garden-section__cat-link {
        grid-template-columns: 32px 1fr auto auto;
        padding: 12px 14px;
    }

    .garden-section__media-badge {
        font-size: 9px;
        padding: 6px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .garden-section__media-dot { animation: none; }
}