/*
 * Arkusz stylów opisu produktu - Magiczny Ogród, Szablon #1.
 *
 * TEN PLIK PISZE PROGRAM. Przy każdym "npm run arkusz" powstaje od nowa,
 * więc ręczne zmiany tutaj przepadną.
 *
 * Zmiany wyglądu wpisuj w szablon-opisu-poprawki.css - ten plik wczytuje się
 * po tym i nadpisuje jego reguły. Program go nigdy nie rusza.
 *
 * Wszystkie reguły są pod #opis, więc nie ruszają reszty sklepu.
 */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('https://media.magicznyogrod.pl/fonts/Fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('https://media.magicznyogrod.pl/fonts/Fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Signika';font-style:normal;font-weight:300 700;font-display:swap;src:url('https://media.magicznyogrod.pl/fonts/Signika-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Signika';font-style:normal;font-weight:300 700;font-display:swap;src:url('https://media.magicznyogrod.pl/fonts/Signika-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
#opis, #opis *{box-sizing:border-box}
#opis{margin:0 auto;font-family:'Signika',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:400;color:#565b4d;line-height:1.7}
#opis .sec{padding:28px 0;border-top:1px solid #e6e8de}
#opis .ff{font-family:'Fraunces',Georgia,serif}
#opis h3{margin:0 0 16px;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:24px;color:#216545}
#opis h4{margin:0 0 8px;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:21px;color:#216545}
#opis p{margin:0 0 14px;text-wrap:pretty}
#opis p:last-child{margin-bottom:0}
/* Odstęp nad kreską ma być taki sam jak pod nią, czyli sam padding sekcji.
   Bez tego ostatni akapit dokładał swój margines i kreska odjeżdżała w dół. */
#opis .sec :last-child{margin-bottom:0}
#opis strong{font-weight:600;color:#3d5833}
#opis a{color:#3d5833}
#opis .lead{font-size:17px;line-height:1.72}
#opis .body{font-size:15px;color:#5f6455}
#opis .prose{font-size:16.5px;line-height:1.78;color:#565b4d}
#opis .grid{display:grid;gap:18px}
#opis .g1{grid-template-columns:1fr;gap:28px}
#opis .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
#opis .g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#opis .tile{background:#f1f5ec;border:1px solid #dde6d2;border-radius:16px;padding:24px}
#opis .row{display:flex;gap:18px}
#opis .ico{flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:#eef2e6;display:flex;align-items:center;justify-content:center}
#opis .ico img{width:34px;height:34px;object-fit:contain;display:block}
#opis .chip{font-size:13px;font-weight:600;color:#3d5833;background:#eef0e4;border:1px solid #dbe0cb;padding:7px 14px;border-radius:999px}
#opis .banner{padding-bottom:28px}
#opis .banner img{display:block;width:100%;height:auto;border-radius:16px}
#opis .eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6e8256}
#opis ul,#opis ol{margin:0;padding-left:20px;font-size:15px;line-height:1.7;color:#5f6455;text-wrap:pretty}
#opis details{background:#f1f5ec;border:1px solid #dde6d2;border-radius:14px;padding:18px 22px;margin-bottom:12px}
#opis summary{cursor:pointer;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:19px;color:#216545}
#opis details>div{padding-top:12px;font-size:15.5px;line-height:1.72;color:#5f6455;text-wrap:pretty}
/* Stosowanie i Short obok siebie. Short ma stałą szerokość, tekst bierze resztę -
   przy auto-fit obie kolumny wychodziły równe i film robił się ogromny. */
#opis .stosowanie-film{grid-template-columns:minmax(240px,1fr) 340px;gap:24px;align-items:start}
#opis .film-obok{display:flex;justify-content:center}
/* Element przez całą szerokość siatki - dzięki temu odstęp nad nim bierze się
   z odstępu wierszy siatki, a nie z osobnej liczby wpisanej z palca. */
#opis .pelny-rzad{grid-column:1/-1}
#opis .sec-film{padding-top:24px}
@media (max-width:700px){#opis .stosowanie-film{grid-template-columns:1fr}}
#opis .filmy{gap:24px}
/* film wyśrodkowany marginesem, a nie justify-items - przy justify-items
   kafelek siatki kurczy się do treści i szerokość 100% nie ma się do czego odnieść */
#opis .film{position:relative;width:100%;margin:0 auto;overflow:hidden;border-radius:16px;background:#eef2ea}
#opis .film[data-format="poziomy"]{max-width:720px;aspect-ratio:16/9}
#opis .film[data-format="pionowy"]{max-width:340px;aspect-ratio:9/16}
#opis .film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#opis .filmy h4{text-align:center}
/* Prog 220px dobrany tak, zeby siatka sama schodzila do jednej kolumny na
   telefonie (2x220+14 = 454 > szerokosc kazdego telefonu), a na komputerze
   dawala cztery zdjecia w rzedzie (4x220+42 = 922 <= 1000). Nie opieramy sie
   na @media, bo sklep potrafi wyciac reguly warunkowe przy zapisie opisu. */
#opis .galeria{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
/* Na telefonie zdjęcia idą jedno pod drugim. Pozostałe siatki zwężają się same
   (minmax 220-280px), ale przy galerii na ekran wchodziły dwie kolumny po ok.
   170px - za mało, żeby odczytać napisy z infografik. */
@media (max-width:600px){#opis .galeria{grid-template-columns:1fr;gap:16px}}