/* ================================================================
   NestStork – STYLE SZABLONÓW OPISÓW (DESC TEMPLATES)
   ----------------------------------------------------------------
   JEDNO źródło stylów szablonów opisów produktów (BaseLinker).
   Ładowane w DWÓCH miejscach:
     - front: hookActionFrontControllerSetMedia (obok custom-overrides.css)
     - back office: wstrzykiwane do iframe'a edytorów TinyMCE
       (hookDisplayBackOfficeHeader + views/js/admin-tinymce-content.js),
       żeby opisy w edytorze graficznym wyglądały ~jak na sklepie.
   Dokumentacja użycia: DESC_TEMPLATES.confluence.txt
   ================================================================ */

/* ================================================================
   START: SZABLONY OPISÓW (DESC TEMPLATES)
   ----------------------------------------------------------------
   System siatki dla opisów produktów importowanych z BaseLinker.
   Opis = jedna lub wiele <section class="section">.
   W sekcji kolumny: .item.item-12 (1 kol.), .item.item-6 (2 kol.),
   .item.item-3 (4 kol.). Można je dowolnie mieszać w jednej sekcji
   (suma jednostek w wierszu = 12, np. item-3 + item-3 + item-6).

   Założenie: kompatybilność ze starszymi przeglądarkami (rynek DE).
   Dlatego siatka oparta jest na display:inline-block (a nie flex/grid)
   + reset białych znaków font-size:0 na .section. Dzięki temu kolumny
   o różnej wysokości NIE zaczepiają się o siebie (problem floatów),
   a layout działa od IE9 wzwyż.
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

/* --- KONTENER SEKCJI --- */
/* font-size:0 kasuje odstępy (białe znaki) między elementami inline-block,
   tak by item-6 + item-6 == dokładnie 100% i nie zawijało się do nowej linii. */
section.section {
    display: block;
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    font-size: 0;          /* reset białych znaków między kolumnami */
    text-align: left;
    box-sizing: border-box;
}

section.section:last-child {
    margin-bottom: 0;
}

/* --- KOLUMNY (ITEMS) --- */
/* box-sizing:border-box => padding (gutter) nie powiększa szerokości,
   więc 50% + 50% nadal mieści się w wierszu. */
section.section .item {
    display: inline-block;
    vertical-align: top !important; /* wyrównanie kolumn do góry (motyw bywa nadpisuje na middle) */
    align-self: flex-start !important; /* gdyby motyw wymusił flex na section.section */
    box-sizing: border-box;
    width: 100%;                    /* domyślnie 1 kolumna */
    padding: 0 12px 24px;           /* 12px gutter po bokach, 24px odstęp pionowy */
    font-size: 16px;                /* przywrócenie czytelnej wielkości po font-size:0 */
    line-height: 1.6;
    color: inherit;
    text-align: left;
}

/* Szerokości kolumn (siatka 12-kolumnowa) */
section.section .item-12 { width: 100%; }   /* 1 kolumna  */
section.section .item-6  { width: 50%; }     /* 2 kolumny  */
section.section .item-3  { width: 25%; }     /* 4 kolumny  */

/* --- TYPOGRAFIA WEWNĄTRZ KOLUMN --- */
section.section .item p {
    margin: 0 0 1em;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

section.section .item p:last-child {
    margin-bottom: 0;
}

section.section .item strong {
    font-weight: 700;
    color: #222;
}

section.section .item ul {
    margin: 0 0 1em;
    padding-left: 1.25em;
    list-style: disc outside;
}

section.section .item ul:last-child {
    margin-bottom: 0;
}

section.section .item li {
    margin: 0 0 0.4em;
    font-size: 16px;
    line-height: 1.5;
    color: #444;
}

section.section .item li:last-child {
    margin-bottom: 0;
}

/* --- OBRAZKI --- */
/* Cel: obraz wypełnia całą szerokość kolumny, ale NIGDY nie jest większy niż
   źródłowe zdjęcie (brak upscalingu/rozmycia). Docelowo: min(kolumna, naturalna
   szerokość obrazu).

   Baza (fallback dla starych przeglądarek, np. IE11 bez max-content): max-width:100%
   => obraz nie wychodzi poza kolumnę i nie powiększa się ponad oryginał (mniejsze
   zdjęcie po prostu nie wypełni kolumny — bezpieczna degradacja, bez rozmycia). */
section.section .item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 1em;
    border: 0;
    border-radius: 6px;          /* spójnie z banner-text/header itp. */
}

/* Enhancement: gdzie dostępne max-content (wszystkie nowoczesne przeglądarki),
   width:100% rozciąga obraz do kolumny, a max-width:max-content (= naturalna
   szerokość obrazu) ucina to do rozmiaru źródłowego. Efekt: min(kolumna, oryginał). */
@supports (max-width: max-content) {
    section.section .item img {
        width: 100%;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
    }
}

section.section .item img:last-child {
    margin-bottom: 0;
}

/* --- RESPONSYWNOŚĆ --- */
/* Tablet: 4 kolumny -> 2 kolumny, 2 kolumny -> pełna szerokość. */
@media (max-width: 768px) {
    section.section .item-6 { width: 100%; }
    section.section .item-3 { width: 50%; }
}

/* Telefon: wszystko jedna pod drugą. */
@media (max-width: 480px) {
    section.section .item-6,
    section.section .item-3 { width: 100%; }
}

/* ================================================================
   END: SZABLONY OPISÓW (DESC TEMPLATES)
   ================================================================ */


/* ================================================================
   START: BANNER TEKSTOWY (BANNER-TEXT)
   ----------------------------------------------------------------
   Sekcja <section class="banner-text"> z nagłówkiem h3 i paragrafem.
   Tło granatowe (#263580), h3 turkusowy (#00b2b2), tekst biały.
   Utrzymane skromnie: stonowane odstępy, delikatne zaokrąglenie.
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

section.banner-text {
    display: block;
    width: 100%;
    margin: 0 0 30px;
    padding: 32px 30px;
    background-color: #263580;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
}

section.banner-text:last-child {
    margin-bottom: 0;
}

section.banner-text h3 {
    margin: 0 0 12px;
    color: #00b2b2;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

section.banner-text p {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
}

section.banner-text p + p {
    margin-top: 0.75em;
}

/* Skromniej na mniejszych ekranach */
@media (max-width: 480px) {
    section.banner-text {
        padding: 24px 20px;
    }
    section.banner-text h3 {
        font-size: 20px;
    }
}

/* ================================================================
   END: BANNER TEKSTOWY (BANNER-TEXT)
   ================================================================ */


/* ================================================================
   START: SEKCJA NAGŁÓWKOWA (HEADER)
   ----------------------------------------------------------------
   Sekcja <section class="header"> z nagłówkiem h2 i paragrafem.
   Bliźniacza do banner-text, ale jaśniejsza: tło #e4efe8, h2 i tekst
   granatowe (#263580). Selektor kwalifikowany elementem (section.header),
   bo .header to częsta klasa motywu.
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

section.header {
    display: block;
    width: 100%;
    margin: 0 0 30px;
    padding: 32px 30px;
    background-color: #e4efe8;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
}

section.header:last-child {
    margin-bottom: 0;
}

section.header h2 {
    margin: 0 0 12px;
    color: #263580;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

section.header p {
    margin: 0;
    color: #42729f;
    font-size: 16px;
    line-height: 1.6;
}

section.header p + p {
    margin-top: 0.75em;
}

/* Skromniej na mniejszych ekranach */
@media (max-width: 480px) {
    section.header {
        padding: 24px 20px;
    }
    section.header h2 {
        font-size: 23px;
    }
}

/* ================================================================
   END: SEKCJA NAGŁÓWKOWA (HEADER)
   ================================================================ */


/* ================================================================
   START: BLOK ZALET (ADVENTAGES-LIST)
   ----------------------------------------------------------------
   Blok <div class="adventages-list"> osadzany WEWNĄTRZ kolumn (.item)
   lub samodzielnie. Zawiera nagłówek h3 (#263580), paragraf oraz
   listę cech <ul>, w której punktorem jest „ptaszek" (✓) w kolorze
   #00b2b2 rysowany przez ::before (bez obrazków => działa na starszych
   przeglądarkach).

   Uwaga: !important na ul/li jest tu konieczne, bo reguły siatki
   (section.section .item ul/li) mają wyższą specyficzność i inaczej
   nadpisałyby list-style/padding (wracałyby kropki disc).
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

.adventages-list {
    margin: 0 0 1em;
}

.adventages-list:last-child {
    margin-bottom: 0;
}

.adventages-list h3 {
    margin: 0 0 10px;
    color: #263580;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.adventages-list > p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.adventages-list ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.adventages-list li {
    position: relative;
    margin: 0 0 8px !important;
    padding-left: 28px !important;        /* miejsce na ptaszek */
    font-size: 16px;
    line-height: 1.5;
    color: #444;
    list-style: none !important;
}

.adventages-list li:last-child {
    margin-bottom: 0 !important;
}

/* Punktor „ptaszek" (✓) */
.adventages-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #00b2b2;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;                     /* wyrównanie do pierwszej linii tekstu */
}

/* ================================================================
   END: BLOK ZALET (ADVENTAGES-LIST)
   ================================================================ */


/* ================================================================
   START: SEKCJA „WARTO WYBRAĆ" (WHY-CHOOSE)
   ----------------------------------------------------------------
   Sekcja <section class="why-choose">: nagłówek h3 (#263580) + lista
   <ul> rozłożona na DWIE kolumny. Punktor = gwiazdka (★) #00b2b2.
   W <li> dozwolony <strong> => pogrubienie + kolor #263580. Bez tła.

   Dwie kolumny przez column-count z prefiksami (-webkit-/-moz-) =>
   działa też na starszych przeglądarkach. break-inside: avoid zapobiega
   rozcięciu pozycji listy między kolumnami.
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

section.why-choose {
    display: block;
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    background: none;
    box-sizing: border-box;
}

section.why-choose:last-child {
    margin-bottom: 0;
}

section.why-choose h3 {
    margin: 0 0 16px;
    color: #263580;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

section.why-choose ul {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

section.why-choose li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 26px;                  /* miejsce na gwiazdkę */
    font-size: 16px;
    line-height: 1.5;
    color: #444;
    list-style: none;
    /* nie tnij pozycji między kolumnami */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

section.why-choose li:last-child {
    margin-bottom: 0;
}

/* Punktor „gwiazdka" (★) */
section.why-choose li::before {
    content: "\2605";
    position: absolute;
    left: 0;
    top: 0;
    color: #00b2b2;
    font-size: 15px;
    line-height: 1.5;                    /* wyrównanie do pierwszej linii */
}

/* Wyróżnienie w pozycji listy */
section.why-choose li strong {
    font-weight: 700;
    color: #263580;
}

/* Telefon: jedna kolumna */
@media (max-width: 480px) {
    section.why-choose ul {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

/* ================================================================
   END: SEKCJA „WARTO WYBRAĆ" (WHY-CHOOSE)
   ================================================================ */


/* ================================================================
   START: SEKCJA SPECYFIKACJI (SPECIFICATION-LIST)
   ----------------------------------------------------------------
   Wariant why-choose: nagłówek h3 (#263580, wyśrodkowany) + lista <ul>
   w DWÓCH kolumnach. Różnice: punktor = „ptaszek" (✓) #00b2b2, cała
   sekcja zamknięta borderem 1px solid #e4efe8, a kolumny rozdzielone
   tym samym borderem (column-rule). W <li> dozwolony <strong> => bold
   + #263580.
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

section.specification-list {
    display: block;
    width: 100%;
    margin: 0 0 30px;
    padding: 24px 28px;
    border: 1px solid #e4efe8;
    border-radius: 6px;
    background: none;
    box-sizing: border-box;
}

section.specification-list:last-child {
    margin-bottom: 0;
}

section.specification-list h3 {
    margin: 0 0 16px;
    color: #263580;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

section.specification-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    /* rozdzielacz kolumn tym samym borderem co ramka sekcji */
    -webkit-column-rule: 1px solid #e4efe8;
    -moz-column-rule: 1px solid #e4efe8;
    column-rule: 1px solid #e4efe8;
}

section.specification-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 26px;                  /* miejsce na ptaszek */
    font-size: 16px;
    line-height: 1.5;
    color: #444;
    list-style: none;
    /* nie tnij pozycji między kolumnami */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

section.specification-list li:last-child {
    margin-bottom: 0;
}

/* Punktor „ptaszek" (✓) */
section.specification-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #00b2b2;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;                    /* wyrównanie do pierwszej linii */
}

/* Wyróżnienie w pozycji listy */
section.specification-list li strong {
    font-weight: 700;
    color: #263580;
}

/* Telefon: jedna kolumna (rozdzielacz kolumn znika sam) */
@media (max-width: 480px) {
    section.specification-list ul {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

/* ================================================================
   END: SEKCJA SPECYFIKACJI (SPECIFICATION-LIST)
   ================================================================ */


/* ================================================================
   START: WYRÓŻNIONA RAMKA W TEKŚCIE (FEATURED-LIST)
   ----------------------------------------------------------------
   Blok <div class="featured-list"> zagnieżdżany W TEKŚCIE, np. pomiędzy
   paragrafami wewnątrz kolumny .item. Jasne tło #e4efe8, nagłówek h4
   wielkości tekstu (#263580) i lista <ul> ze standardowym punktorem
   (kropka). Kropka i tekst w kolorze #42729f.

   Uwaga: !important przy ul/li, bo reguły siatki (section.section .item
   ul/li) mają wyższą specyficzność i inaczej nadpisałyby kolor/padding.
   Kropka dziedziczy kolor z `color` pozycji listy (#42729f) — działa na
   starszych przeglądarkach (bez ::marker).
   Dokumentacja: app/modules/neststorkcustomstyles/DESC_TEMPLATES.md
   ================================================================ */

.featured-list {
    margin: 1.5em 0;
    padding: 18px 22px;
    background-color: #e4efe8;
    border-radius: 6px;
    box-sizing: border-box;
}

.featured-list h4 {
    margin: 0 0 10px;
    color: #263580;
    font-size: 16px;                     /* wielkość zwykłego tekstu */
    font-weight: 700;
    line-height: 1.4;
}

.featured-list ul {
    margin: 0 !important;
    padding-left: 1.25em !important;
    list-style: disc outside !important;
}

.featured-list li {
    margin: 0 0 6px !important;
    font-size: 16px;
    line-height: 1.5;
    color: #42729f !important;           /* tekst + kropka (marker dziedziczy color) */
    list-style: disc !important;
}

.featured-list li:last-child {
    margin-bottom: 0 !important;
}

.featured-list li strong {
    font-weight: 700;
    color: #263580;
}

/* ================================================================
   END: WYRÓŻNIONA RAMKA W TEKŚCIE (FEATURED-LIST)
   ================================================================ */