/* Elnet Landing Miejski - style
 * Wersja: 1.5.7 (rewizja 2026-07-21 - selektor a + URL hero)
 * Uzywane przez: fronted single-pellet_city.php + biblioteke 11 shortcodes + elnet_cities_menu
 */

/* overflow-x: clip zapobiega poziomemu scroll z 100vw (sekcje full-bleed) - nie wpływa na sticky (jak hidden) */
body.single-pellet_city {
    overflow-x: clip;
}

.elnet-landing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    font-family: var(--theme-font-family, system-ui, sans-serif);
    color: var(--theme-palette-color-3, #2B2622);
}
.elnet-landing h1,
.elnet-landing h2,
.elnet-landing h3 { color: var(--theme-palette-color-3, #2B2622); }

.elnet-landing h1 {
    font-family: var(--theme-font-headings, system-ui, sans-serif);
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.25;
    margin: 32px 0 16px;
}
.elnet-landing h2 {
    font-family: var(--theme-font-headings, system-ui, sans-serif);
    font-size: clamp(22px, 3.5vw, 32px);
    line-height: 1.3;
    margin: 48px 0 16px;
}
.elnet-landing h3 {
    font-family: var(--theme-font-headings, system-ui, sans-serif);
    font-size: clamp(18px, 2.5vw, 22px);
    margin: 24px 0 12px;
}
.elnet-landing p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 16px;
    color: var(--theme-palette-color-3, #2B2622);
}
.elnet-landing ul {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 24px 0;
    padding-left: 24px;
}
.elnet-landing ul li { margin-bottom: 8px; }
/* underline tylko dla inline linkow w tresci (akapity, listy). Wykluczamy:
 *   - .elnet-cta / .elnet-cta-secondary (buttony CTA maja wlasny styl)
 *   - [href^="tel:"] (numery telefonu w tresci - 2 wystapienia bez klasy cta)
 * FAQ linki (.elnet-faq__a a) maja wlasny override nizej.
 */
.elnet-landing a:not(.elnet-cta):not(.elnet-cta-secondary):not([href^="tel:"]) {
    color: var(--theme-palette-color-1, #F8951E);
    text-decoration: underline;
}

.elnet-landing-hero {
    background: var(--theme-palette-color-6, #F7F2EA);
    border-radius: 16px;
    padding: 48px 32px;
    margin: 32px 0;
}
.elnet-landing-hero .lead { font-size: 19px; line-height: 1.6; margin-bottom: 24px; }

/* === ETAP H (sesja 2026-07-15): hero w full-width - tlo z obrazkiem, overlay forest, tekst bialy === */
/* Hero zaczyna sie na y=0 elnet-landing (pod menu sticky). padding-top: 160px + 96px
   trzyma tresc (h1, lead, CTAs) pod menu + oddech. Grafika (tlo) idzie od y=0 do dolu hero,
   wiec menu "nachodzi" na hero (pokrywa gore hero z obrazem). */
.elnet-landing-hero.elnet-full-width {
    background:
        linear-gradient(rgba(15, 26, 23, 0.55), rgba(15, 26, 23, 0.55)),
        url('/wp-content/uploads/2026/07/elnet-hero-magazyn-paleta-1.webp') center / cover no-repeat;
    color: #FFFFFF;
    text-align: center;
    padding: calc(160px + 96px) 32px 96px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
}
.elnet-landing-hero.elnet-full-width h1 {
    color: #FFFFFF;
    font-size: clamp(32px, 5vw, 48px);
    margin: 0 auto 16px;
    max-width: 800px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.elnet-landing-hero.elnet-full-width .lead {
    color: #FFFFFF;
    font-size: 19px;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 24px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.elnet-landing-hero.elnet-full-width .elnet-microcopy {
    color: #FFFFFF;
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.elnet-landing-hero.elnet-full-width .elnet-cta-secondary {
    color: #FFFFFF !important;
    border-color: #FFFFFF;
}
.elnet-landing-hero.elnet-full-width .elnet-cta-secondary:hover {
    background: #FFFFFF;
    color: var(--theme-palette-color-4, #0F1A17) !important;
}
@media (max-width: 768px) {
    .elnet-landing-hero.elnet-full-width {
        padding: calc(130px + 64px) 20px 64px;
        margin-top: -130px;
    }
}

/* Ukryj obrazek hero w <img> jesli jest w tle przez CSS */
.elnet-landing-hero.elnet-full-width .elnet-landing-hero__img { display: none; }

.elnet-cta {
    display: inline-block;
    background: var(--theme-palette-color-1, #F8951E);
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none !important;
    margin: 8px 8px 8px 0;
    transition: background .2s;
}
.elnet-cta:hover { background: var(--theme-palette-color-2, #D97A1C); }

.elnet-cta-secondary {
    display: inline-block;
    background: transparent;
    color: var(--theme-palette-color-3, #2B2622) !important;
    border: 2px solid var(--theme-palette-color-3, #2B2622);
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none !important;
    margin: 8px 8px 8px 0;
}
.elnet-cta-secondary:hover {
    background: var(--theme-palette-color-3, #2B2622);
    color: #fff !important;
}

.elnet-microcopy {
    font-size: 14px;
    color: var(--theme-palette-color-4, #0F1A17);
    margin-top: 12px;
    opacity: 0.8;
}

.elnet-section { margin: 80px 0; }
@media (max-width: 768px) {
    .elnet-section { margin: 48px 0; }
}

.elnet-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px auto;
    max-width: 1100px;
}
@media (max-width: 768px) {
    .elnet-products { grid-template-columns: 1fr; gap: 16px; }
}
.elnet-product-card {
    background: var(--theme-palette-color-7, #FBF8F3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--theme-palette-color-5, #E7E1D8);
}
.elnet-product-card h3 { margin-top: 0; }

/* === FAQ: accordion (styl /katalog/ - details/summary) === */
.elnet-faq {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 24px;
}
@media (max-width: 768px) {
    .elnet-faq { padding: 0 16px; }
}
.elnet-faq h2 {
    text-align: center;
    margin-bottom: 32px;
    font-size: clamp(24px, 3.5vw, 32px);
}
.elnet-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.elnet-faq__item {
    border: 1px solid var(--theme-palette-color-5, #E7E1D8);
    border-radius: 12px;
    background: var(--theme-palette-color-7, #FBF8F3);
    padding: 0 24px;
    transition: border-color .2s;
}
.elnet-faq__item[open] {
    border-color: var(--theme-palette-color-1, #F8951E);
    background: #FFFFFF;
}
.elnet-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 40px 22px 0;
    position: relative;
    font-family: var(--theme-font-headings, system-ui, sans-serif);
    font-weight: 600;
    color: var(--theme-palette-color-3, #2B2622);
    font-size: 18px;
    line-height: 1.4;
}
.elnet-faq__item summary::-webkit-details-marker {
    display: none;
}
.elnet-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--theme-palette-color-1, #F8951E);
}
.elnet-faq__item[open] summary::after {
    content: '−';
}
.elnet-faq__item summary:hover {
    color: var(--theme-palette-color-1, #F8951E);
}
.elnet-faq__a {
    padding: 0 0 18px;
    color: var(--theme-palette-color-3, #2B2622);
    line-height: 1.7;
    font-size: 16px;
}
.elnet-faq__a p { margin: 0 0 12px; }
.elnet-faq__a p:last-child { margin-bottom: 0; }
.elnet-faq__a a:not(.elnet-cta):not(.elnet-cta-secondary):not([href^="tel:"]) {
    color: var(--theme-palette-color-1, #F8951E);
    text-decoration: underline;
    font-weight: 600;
}

@media (max-width: 600px) {
    .elnet-landing-hero { padding: 32px 20px; }
    .elnet-products { grid-template-columns: 1fr; }
}

/* === ETAP 9: offset pod sticky header (sesja D 2026-07-10) === */
/* Header Blocksy sticky + WP admin bar = ~140-150px (desktop), ~110-130px (mobile).
 * Dajemy 160px (desktop) / 130px (mobile) paddingu na kontenerze - cala
 * tresc zaczyna sie pod sticky header, a anchor linki (np. #kontakt)
 * laduje sie pod headerem. Wczesniej proba z margin-top 48px na hero
 * byla niewystarczajaca (sticky header wyzszy niz 48px).
 *
 * UPDATE 2026-07-15 (sesja H.3 - feedback Michal): padding-top 160px USUNIETY.
 * Tworzyl "bialy pasek" 160px miedzy menu a hero. Teraz hero zaczyna sie
 * na y=0 elnet-landing (pod menu) - menu nachodzi na hero, bialy pasek znika.
 * Hero ma wlasny padding-top 160px (+ 96px oddech) zeby tresc byla pod menu.
 */

/* === ETAP 6: hero image (sesja D 2026-07-10) === */
.elnet-landing-hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 0 24px;
}
@media (max-width: 600px) {
    .elnet-landing-hero__img { max-height: 220px; margin-bottom: 16px; }
}

/* === ETAP 5: pasek zaufania - 4 ikony (sesja D 2026-07-10) === */
.elnet-trust-bar {
    background: #F7F2EA;
    padding: 32px 24px;
    border-radius: 16px;
    margin: 32px 0;
}
/* === ETAP H (sesja 2026-07-15): trust bar w full-width === */
.elnet-trust-bar.elnet-full-width {
    background: #F7F2EA;
    border-radius: 0;
    padding: 56px 24px;
    margin-top: 0;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .elnet-trust-bar.elnet-full-width { padding: 40px 16px; }
}
.elnet-trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.elnet-trust-bar__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.elnet-trust-bar__ico {
    font-size: 28px;
    line-height: 1;
    color: #F8951E;
    flex-shrink: 0;
}
.elnet-trust-bar__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.elnet-trust-bar__txt strong {
    color: #2B2622;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.elnet-trust-bar__txt span {
    color: #6B6259;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 2px;
}
@media (max-width: 768px) {
    .elnet-trust-bar { padding: 24px 16px; }
    .elnet-trust-bar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media (max-width: 420px) {
    .elnet-trust-bar__ico { font-size: 24px; }
    .elnet-trust-bar__txt strong { font-size: 14px; }
    .elnet-trust-bar__txt span { font-size: 12px; }
}

/* === ETAP B: CTA band - styl /katalog/ (sesja D-bloki 2026-07-10) === */
.elnet-cta-band {
    background: var(--theme-palette-color-4, #0F1A17);
    color: #FFFFFF;
    border-radius: 16px;
    padding: 64px 32px;
    margin: 64px 0 32px;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.elnet-cta-band h2 {
    color: #FFFFFF !important;
    background: transparent !important;
    text-align: center !important;
    font-family: var(--theme-font-headings, system-ui, sans-serif);
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.2;
    margin: 0 auto 16px;
    max-width: 800px;
    width: 100%;
    display: block;
}
.elnet-cta-band__lead {
    color: #F7F2EA !important;
    background: transparent !important;
    font-size: 18px;
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 640px;
    width: 100%;
    text-align: center !important;
    text-align-last: center !important;
}
.elnet-cta-band__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 24px;
}
.elnet-cta-band .elnet-cta {
    background: var(--theme-palette-color-1, #F8951E);
    color: #FFFFFF !important;
    padding: 16px 32px;
    font-size: 16px;
    margin: 0;
}
.elnet-cta-band .elnet-cta:hover {
    background: var(--theme-palette-color-2, #D97A1C);
}
.elnet-cta--ghost-light {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF;
    padding: 14px 30px;
}
.elnet-cta--ghost-light:hover {
    background: #FFFFFF !important;
    color: var(--theme-palette-color-4, #0F1A17) !important;
}
.elnet-cta-band__micro {
    color: #FFFFFF !important;
    background: transparent !important;
    font-size: 14px;
    opacity: 0.7;
    margin: 16px auto 0;
    max-width: 720px;
    text-align: center !important;
}
.elnet-cta-band__map {
    margin-top: 32px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* === ETAP H (sesja 2026-07-15): CTA band w full-width (border-radius 0) === */
.elnet-cta-band.elnet-full-width {
    border-radius: 0;
    padding: 96px 32px;
    margin-top: 0;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .elnet-cta-band.elnet-full-width { padding: 64px 20px; }
}

/* UWAGA: produkty 2x2 w landingu wycofane 2026-07-15 (sesja H feedback Michal).
   Wtyczka elnet-pellet-worki renderuje [elnet_pellet_lista] jako epw-row - ten uklad zostaje.
   Patrz tasks/review/2026-07-15-H-landingi-poprawki-wizualne.md (follow-up H.2). */

/* === ETAP C: H2 wycentrowane + 4 filary z ikonami (sesja D-bloki 2026-07-10) === */
.elnet-section--centered h2 {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.elnet-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px 0;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.elnet-pillars__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--theme-palette-color-7, #FBF8F3);
    border: 1px solid var(--theme-palette-color-5, #E7E1D8);
    border-radius: 12px;
}
.elnet-pillars__ico {
    font-size: 32px;
    line-height: 1;
    color: var(--theme-palette-color-1, #F8951E);
    flex-shrink: 0;
}
.elnet-pillars__txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.elnet-pillars__txt strong {
    color: var(--theme-palette-color-3, #2B2622);
    font-family: var(--theme-font-headings, system-ui, sans-serif);
    font-size: 17px;
    font-weight: 600;
}
.elnet-pillars__txt span {
    color: var(--theme-palette-color-3, #2B2622);
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.85;
}
@media (max-width: 600px) {
    .elnet-pillars { grid-template-columns: 1fr; }
}

/* === ETAP H (sesja 2026-07-15): full-bleed - tlo sekcji na cala szerokosc viewport === */
/* Hero/trust/CTA: element sam ma 100vw + margin:calc(50% - 50vw) - tlo i tresc na 100vw.
   Sekcje 3-8 z --white/--cream: tlo rozszerzone przez ::before pseudo-element, tresc zostaje w max-width:1100px. */
.elnet-full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}
@media (max-width: 768px) {
    .elnet-full-width {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* === ETAP H: tla sekcji (naprzemiennie bialy / cream) - pseudo-element na viewport === */
.elnet-section--white,
.elnet-section--cream {
    position: relative;
    z-index: 0;
    padding: 80px 24px;
    margin-top: 0;
    margin-bottom: 0;
}
.elnet-section--white::before,
.elnet-section--cream::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
}
.elnet-section--white::before { background: #FFFFFF; }
.elnet-section--cream::before { background: #F7F2EA; }
@media (max-width: 768px) {
    .elnet-section--white,
    .elnet-section--cream { padding: 48px 16px; }
}

/* === ETAP H: sekcje 2-kolumnowe z obrazkiem (sek 3, 4) === */
.elnet-section--img-right {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
}
.elnet-section--img-left {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
}
.elnet-section--img-right h2,
.elnet-section--img-left h2 {
    text-align: left;
    margin-top: 0;
    font-size: clamp(24px, 3.5vw, 32px);
}
.elnet-section__image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
    .elnet-section--img-right,
    .elnet-section--img-left {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 16px;
    }
    .elnet-section--img-left .elnet-section__image { order: -1; }
}

/* === ETAP H: sekcja dostawa - 2-kolumny (grafika + tekst, sek 7) === */
.elnet-section--delivery {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
}
.elnet-section--delivery h2 {
    text-align: left;
    margin-top: 0;
    font-size: clamp(24px, 3.5vw, 32px);
}
.elnet-section--delivery .elnet-section__image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.elnet-section--delivery ul {
    columns: 2;
    column-gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.elnet-section--delivery ul li {
    padding: 4px 0;
    font-size: 15px;
    break-inside: avoid;
}
@media (max-width: 768px) {
    .elnet-section--delivery {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 16px;
    }
    .elnet-section--delivery ul { columns: 1; }
}