/* ==========================================================
   BLOG PREVIEW NA HOMEPAGE
========================================================== */

/* 1) přetečení mimo šířku stránky — "row" má ze Shoptetu záporné
   okraje kompenzující gutter potomků typu .col-*, ale tady žádné
   takové potomky nejsou, takže wrapper přetékal ven.

   Mřížka článků je teď CSS grid místo flex + procentuální šířky —
   s procenty (25/50/100 %) nejde zároveň použít "gap" mezi kartami,
   protože 4×25 % + 3×gap přeteče přes 100 %. Grid s "fr" sloupci
   odečte gap automaticky, takže první i poslední karta lícuje s
   okrajem stránky stejně jako zbytek webu. */
.homepage-blog-wrapper.row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: var(--sh-space-md) !important;
    row-gap: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    /* mezera nad/pod sekcí — stejný vzor jako .sh-delivery-section */
    padding-top: var(--sh-space-section) !important;
    padding-bottom: var(--sh-space-md) !important;
}

/* row-gap:0 nahoře platí jen na 4 sloupcích (tam se karty typicky
   nezalamují na víc řádků) - od 991px dolů se sloupce zužují a s
   víc než 2/1 články na řádek už vzniknou další řádky, takže tam
   potřebujeme skutečnou mezeru mezi nimi. */
@media (max-width: 991px) {
    .homepage-blog-wrapper.row {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: var(--sh-space-lg) !important;
    }

    /* nadpis je grid item ve stejné mřížce jako karty - row-gap (lg)
       se přičítá i pod nadpisem, ne jen mezi kartami. Záporný margin
       to vyrovná, takže mezera nadpis → první karta zůstane md jako
       na desktopu. Vyšší specificita (+ .row) než základní pravidlo
       .homepage-group-title níž v souboru, které by jinak (později
       v pořadí) tenhle margin přebilo. */
    .homepage-blog-wrapper.row .homepage-group-title {
        margin-bottom: calc(var(--sh-space-md) - var(--sh-space-lg));
    }
}

@media (max-width: 767px) {
    .homepage-blog-wrapper.row {
        grid-template-columns: 1fr !important;
        row-gap: var(--sh-space-lg) !important;
    }
}

/* 2) nadpis sekce — stejný vzor jako .sh-segmentation-intro__label +
   __title (eyebrow label + nadpis), vlevo zarovnáno. Vlastní text
   vložen přes ::before/::after (stejná technika jako
   .footer-newsletter h2 ve footer.css), protože Shoptet text
   "Nové články" vypisuje přímo do elementu bez podtříd, které by šlo
   cílit zvlášť. Text nadpisu si pak snadno přepíšeš v admin/CSS. */
.homepage-blog-wrapper .homepage-group-title {
    grid-column: 1 / -1;

    display: block;
    width: 100%;
    padding: 0 !important;
    font-size: 0;
    text-align: left;
    margin: 0 0 var(--sh-space-md);
}

.homepage-blog-wrapper .homepage-group-title::before {
    content: "Blog";
    display: block;
    margin: 0 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sh-color-accent);
}

.homepage-blog-wrapper .homepage-group-title::after {
    content: "Sbírka tipů, receptů a nápadů";
    display: block;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* 3) karta — varianta A: obrázek nahoře v normálním toku (žádné
   tmavé překrytí přes text), pod ním titulek/perex/tlačítko, vlevo
   zarovnáno. Stejný vzor jako .sh-segment-card výše na stránce —
   proto doporučená varianta, drží se stávajícího jazyka webu a
   nefightuje s absolutním pozicováním, které Shoptet používá pro
   výchozí "obrázek na pozadí" vzhled.

   Jako grid item nepotřebuje .news-item žádnou šířku/flex-basis —
   o to se stará grid-template-columns na wrapperu. */
.homepage-blog-wrapper .news-item {
    display: block !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.homepage-blog-wrapper .news-item > a {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 0 !important;
    align-items: flex-start;
    text-decoration: none !important;
    color: inherit;
}

.homepage-blog-wrapper .news-item .image {
    position: static !important;
    display: block !important;
    height: auto !important;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
    margin-bottom: var(--sh-space-sm) !important;
}

.homepage-blog-wrapper .news-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform .4s ease;
}

.homepage-blog-wrapper .news-item:hover .image img {
    transform: scale(1.03);
}

.homepage-blog-wrapper .news-item .text {
    position: static !important;
    inset: auto !important;
    background: none !important;
    padding: 0 !important;
    width: 100%;
    overflow: visible !important;
}

.homepage-blog-wrapper .news-item .title {
    display: block !important;
    -webkit-line-clamp: 2;
    margin: 0 0 var(--sh-space-xs) !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading) !important;
    color: var(--sh-color-text) !important;
}

.homepage-blog-wrapper .news-item .description {
    margin: 0 0 var(--sh-space-sm) !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text) !important;
}

.homepage-blog-wrapper .news-item .read-article {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-accent);

    transition: var(--sh-transition);
}

.homepage-blog-wrapper .news-item .read-article i {
    margin-left: 4px;
}

.homepage-blog-wrapper .news-item:hover .read-article {
    color: var(--sh-color-cta-hover);
}


/* ==========================================================
   BLOG — STRÁNKA /blog/ (VÝPIS RUBRIK + ČLÁNKŮ)
========================================================== */

/* ---------- intro text pod nadpisem "Blog" ----------
   Shoptet má na téhle stránce vlastní pole na text pod nadpisem
   (stejné jako "Popis kategorie" u kategorií), vyplňuje se v adminu
   u stránky Blog — jde tam vložit i HTML (odkazy do budoucna).
   Stejný styl jako .category-perex v category.css, ať to sedí. */
.sectionDescription {
    max-width: 60%;
    margin: 0 0 var(--sh-space-md);

    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);

    color: var(--sh-color-text);
}

/* nadpis "Blog"/"Rady a tipy" atd. nad perexem — Shoptet mu dává
   vlastní pevné px hodnoty přes @media (main-14.css), font-size vůbec
   nebyl přepsaný. Clamp() nahrazuje jejich media query jedním plynule
   škálujícím pravidlem, font-weight sjednocen s ostatními nadpisy. */
.sectionDescription h1 {
    font-size: var(--sh-heading-lg);
    font-weight: var(--sh-font-weight-heading);
}

.sectionDescription a {
    color: var(--sh-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--sh-transition);
}

.sectionDescription a:hover {
    color: var(--sh-color-accent-hover);
}

/* odkaz zpět na výpis "Zpět na všechny články →" v popisu rubriky —
   stejná vizuální receptura jako .read-article u karet článků (tučné,
   bez podtržení, jen barva se mění na hover). Ruční třída, protože
   tohle není Shoptetem generovaný odkaz, ale text z admin editoru. */
.sectionDescription a.read-article {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: var(--sh-font-family-headings);
    font-weight: var(--sh-font-weight-bold);
    text-decoration: none;
    color: var(--sh-color-accent);
}

.sectionDescription a.read-article:hover {
    color: var(--sh-color-cta-hover);
    text-decoration: none;
}

@media (max-width: 767px) {
    .sectionDescription {
        max-width: 100%;
    }
}

/* ---------- rubriky (Recenze, Recepty...) ----------
   Stejná vizuální řeč jako .subcategories.with-image u kategorií
   produktů (category.css) — tady ale bez obrázkového pole, jen
   text + šipka, takže žádné .image ke schování. */
.content-inner > ul.subcategories {
    justify-content: flex-start !important;
    margin-left: 0;
    flex-wrap: wrap;
}

.content-inner > ul.subcategories > li {
    padding-left: 0;
    padding-right: var(--sh-space-sm);
}

.content-inner > ul.subcategories li a {
    justify-content: flex-start;
    background: var(--sh-color-surface);
    padding: 22px 18px !important;
    height: auto !important;
    border: 1px solid var(--sh-color-border) !important;
    border-radius: var(--sh-radius-md);
    box-shadow: none;
    transition: var(--sh-transition);
}

.content-inner > ul.subcategories li a:hover {
    background: var(--sh-color-cta);
    border-color: var(--sh-color-cta) !important;
    color: var(--sh-color-on-cta);
}

/* stejný styl jako položky hlavního menu (.navigation-in > ul > li > a
   v header.css) — font body, ne headings, a VELKÁ PÍSMENA */
.content-inner > ul.subcategories li a .text {
    width: auto;
    flex: 1;
    font-size: clamp(14px, 0.9vw, 16px);
    font-family: var(--sh-font-family-body);
    font-weight: var(--sh-font-weight-body);
    text-transform: uppercase;
    /* stejný důvod jako u category.css — s overflow:hidden (ellipsis)
       potřebuje diakritika (háčky nad Č/Š/Ž) víc místa než 1.2 */
    line-height: 1.3;
    letter-spacing: 0;

    /* main-14 dává max-height:32px — u větší velikosti písma to
       zbytečně omezovalo výšku, tak pryč. Ale overflow:hidden necháváme
       (spolu s main-14 white-space:nowrap + text-overflow:ellipsis) —
       jinak se .text jako flex:1 položka nesmrskne pod obsah a dlouhý
       název rubriky přeteče přes kartu místo aby se zkrátil na "…" */
    max-height: none !important;
    overflow: hidden !important;
}

@media (max-width: 991px) {
    .content-inner > ul.subcategories {
        display: flex !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: var(--sh-space-sm);
    }

    .content-inner > ul.subcategories > li {
        flex: 0 0 calc(50% - (var(--sh-space-sm) / 2)) !important;
        width: calc(50% - (var(--sh-space-sm) / 2)) !important;
        max-width: calc(50% - (var(--sh-space-sm) / 2)) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .content-inner > ul.subcategories > li > a {
        width: 100% !important;
        height: 100%;
        padding: 16px 14px !important;
    }
}

@media (max-width: 767px) {
    .content-inner > ul.subcategories > li {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- výpis článků ----------
   Shoptet dává #newsWrapper.blog-wrapper stejné .news-item karty jako
   na homepage, ale bez naší úpravy (tmavý overlay přes obrázek,
   nadpis bílý přes fotku). Sjednoceno se vzhledem karet na homepage
   (viz "BLOG PREVIEW NA HOMEPAGE" výše) — obrázek nahoře v normálním
   toku, text pod ním, vlevo zarovnáno. Grid místo Shoptet flexu ze
   stejného důvodu jako u homepage wrapperu (gap + %šířky se perou). */
#newsWrapper.news-wrapper.blog-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--sh-space-md) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--sh-space-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    #newsWrapper.news-wrapper.blog-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    #newsWrapper.news-wrapper.blog-wrapper {
        grid-template-columns: 1fr !important;
    }
}

#newsWrapper.news-wrapper.blog-wrapper .news-item {
    display: block !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item > a {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 0 !important;
    align-items: flex-start;
    text-decoration: none !important;
    color: inherit;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .image {
    position: static !important;
    display: block !important;
    height: auto !important;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
    margin-bottom: var(--sh-space-sm) !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform .4s ease;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item:hover .image img {
    transform: scale(1.03);
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .text {
    position: static !important;
    inset: auto !important;
    background: none !important;
    padding: 0 !important;
    width: 100%;
    overflow: visible !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .title,
#newsWrapper.news-wrapper.blog-wrapper .news-item .title-link {
    display: block !important;
    -webkit-line-clamp: 2;
    margin: 0 0 var(--sh-space-xs) !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading) !important;
    color: var(--sh-color-text) !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .description {
    margin: 0 0 var(--sh-space-sm) !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text) !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .read-article {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-accent);

    transition: var(--sh-transition);
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .read-article i {
    margin-left: 4px;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item:hover .read-article {
    color: var(--sh-color-accent-hover);
}


/* ==========================================================
   ČLÁNEK — DETAIL
   Vše pod .news-item-detail .text je obsah, který klient vkládá
   přes HTML editor v administraci (viz blog-article-template.html).
   Třídy s prefixem .sh-article__ patří ke komponentám ze šablony
   (tip box, CTA, FAQ, obrázky vedle sebe, autor, zdroje...).
   Prosté h2/h3/p/ul/a/strong/img se stylují přímo, beze třídy,
   protože je klient píše/vkládá jako čistý formátovaný text.
========================================================== */

/* Shoptet dává stránkám s .content.wide pevný max-width:820px (zřejmě
   defaultní "čitatelná" šířka pro CMS obsah) — na detailu článku ho
   nechceme, chceme celou šířku layoutu webu jako zbytek stránek.
   Scoped na body.type-post, aby to neovlivnilo jiné "wide" stránky. */
body.type-post main.content.wide {
    max-width: none !important;
    width: 100%;
}

/* nadpis článku */
.news-item-detail article > header h1 {
    margin: 0 0 var(--sh-space-md);
    max-width: 60%;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-lg);
    line-height: var(--sh-line-height-heading);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
    text-align: left;
}

/* stejná rezerva nahoře jako u .pageArticleDetail (pages.css) —
   na tabletu/mobilu je hlavička position:fixed a nadpis by jinak
   sedněl hned na hranu obsahu */
@media (max-width: 991px) {
    .news-item-detail article > header h1 {
        margin-top: var(--sh-space-xs);
    }
}

/* pod 767px se .sh-article__row zlomí na 1 sloupec (viz níže), takže
   nadpis má zase jet na celou šířku */
@media (max-width: 767px) {
    .news-item-detail article > header h1 {
        max-width: none;
    }
}

/* ---------- dvousloupcový layout ----------
   Šablona (viz blog-article-template.html) obaluje obsah do dvou divů:
   .sh-article__col-main (hlavní text, nadpisy, obrázky v textu...)
   a .sh-article__col-side (náhledový obrázek, CTA, autor) — obě jsou
   nezávislé, samostatně rostoucí "koleje" vedle sebe (ne float, kde
   se prvky lepí hned pod sebe bez ohledu na obsah v hlavním sloupci).

   Nativní obrázek článku (article > img, samostatné pole v adminu
   mimo textový editor) se pro tenhle layout nepoužívá — skutečný
   náhledový obrázek je součástí šablony uvnitř .col-side
   (.sh-article__hero), aby šel dát do stejného sloupce jako CTA
   a autor. Pole v adminu proto schováváme, ať omylem nezůstane
   viditelné, když do něj klient něco nahraje. */
.news-item-detail article > img {
    display: none;
}

.sh-article__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-xl);
}

/* 60/40 rozdělení místo "hlavní sloupec + pevných 320px" — na širokém
   layoutu (blog.css/pages.css) 320px vedle nafouknutého hlavního textu
   působilo, že jsou sloupce nalepené na sebe. flex-basis v procentech
   + stejný flex-grow/shrink na obou udrží poměr 60/40 při zmenšování
   okna až do zlomu na 1 sloupec (viz media queries níže). */
.sh-article__col-main {
    flex: 1 1 60%;
    min-width: 0;
}

.sh-article__col-side {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    gap: var(--sh-space-md);
}

.sh-article__hero {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
}

/* první row (blog-article-template-guide.html) páruje náhledový
   obrázek jen s krátkým úvodem + obsahem, ne s celým textem článku
   jako dřív — pevný poměr stran 3:4 by tu vedl k náhodné výšce
   nesedící na sloupec vedle. Místo toho fotka vyplní (cover) celou
   výšku řádku danou úvodním sloupcem.

   height:100% na .sh-article__hero samo o sobě nefungovalo — dokud
   je obrázek součástí normálního "flow" layoutu, jeho vlastní
   (přirozená) výška vstupuje do výpočtu výšky celého řádku ještě
   PŘED tím, než se aplikuje stretch, takže řádek vycházel podle
   obrázku, ne podle textu/TOC vedle něj. Řešení: obrázek vyjmout
   z flow (position:absolute, inset:0) — pak do výšky řádku
   nepočítá vůbec, .col-side je "prázdný" a stretch ho natáhne přesně
   na výšku druhého sloupce (textu), na kterou se pak obrázek
   přichytí. */
.sh-article__row--intro {
    align-items: stretch;
}

.sh-article__row--intro .sh-article__col-side {
    position: relative;
}

.sh-article__row--intro .sh-article__hero {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

/* mezera mezi 1. row (úvod+TOC / obrázek) a 2. row (zbytek článku /
   CTA+autor) — bez tohohle by na sebe druhý řádek nalepil rovnou,
   nejvíc vidět na straně s obrázkem, kde by CTA blok "lepil" přímo
   na fotku */
.sh-article__row--intro {
    margin-bottom: var(--sh-space-lg);
}

.sh-article__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}

/* uvnitř .col-side dělá odstup mezi bloky "gap" na rodiči, takže
   vlastní horní/dolní margin (pro použití mimo boční sloupec) tu
   není potřeba */
.sh-article__col-side > .sh-article__cta,
.sh-article__col-side > .sh-article__author,
.sh-article__col-side > .sh-article__side-image {
    margin: 0;
}

@media (max-width: 767px) {
    .sh-article__row {
        flex-direction: column;
    }

    .sh-article__col-side {
        flex-basis: auto;
        width: 100%;
    }

    /* na 1 sloupci nemá "stretch na výšku sloupce vedle" smysl (stretch
       ve flex-direction:column řeší jen šířku, ne výšku) — bez tohohle
       by .col-side s position:absolute obrázkem uvnitř spadl na
       výšku 0. Vrací obrázek zpět do normálního flow s pevným
       poměrem stran. */
    .sh-article__row--intro .sh-article__col-side {
        position: static;
    }

    .sh-article__row--intro .sh-article__hero {
        position: static;
        aspect-ratio: 3 / 4;
    }
}

/* ---------- základní typografie vloženého obsahu ---------- */

.news-item-detail .text {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
}

.news-item-detail .text > p {
    margin: 0 0 var(--sh-space-sm);
}

.news-item-detail .text h2 {
    margin: var(--sh-space-xl) 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* obecné pravidlo pro cokoliv, co je první věc v hlavním sloupci
   2. row (h2, tip, definice, takeaways...) — horní odstup dělá
   margin-bottom na .sh-article__row--intro, vlastní margin-top
   navíc by ho jen zdvojil. Vyšší specificita (přidané
   .news-item-detail .text) je nutná, jinak prohraje se stejně
   specifickým pravidlem u jednotlivých komponent. */
.news-item-detail .text .sh-article__col-main > *:first-child {
    margin-top: 0;
}

.news-item-detail .text h3 {
    margin: var(--sh-space-md) 0 var(--sh-space-s);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.news-item-detail .text ul,
.news-item-detail .text ol {
    margin: 0 0 var(--sh-space-sm);
    padding-left: 1.25em;
}

/* věta uvozující seznam ("Na intenzitu UV záření má vliv...:") nemá
   mít stejný odstup jako mezi běžnými odstavci — jinak seznam vypadá,
   že k ní nepatří. Seznam sám nemá margin-top, takže tímhle "sedne"
   hned pod uvozující větu. */
.news-item-detail .text p:has(+ ul),
.news-item-detail .text p:has(+ ol) {
    margin-bottom: var(--sh-space-xs);
}

.news-item-detail .text li {
    margin-bottom: var(--sh-space-xs);
}

.news-item-detail .text li::marker {
    color: var(--sh-color-accent);
}

.news-item-detail .text a {
    color: var(--sh-color-accent);
    text-decoration: underline;
    transition: var(--sh-transition);
}

.news-item-detail .text a:hover {
    color: var(--sh-color-accent-hover);
}

.news-item-detail .text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sh-radius-md);
    margin: var(--sh-space-sm) 0;
}

.news-item-detail .text sup {
    color: var(--sh-color-text-muted);
}

/* ---------- úvodní odstavec (zvýrazněný lead) ---------- */

.sh-article__lead {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-lg);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-medium);
    color: var(--sh-color-text);
    margin: 0 0 var(--sh-space-md);
}

/* když je lead rozdělený do víc odstavců, mezi nimi chceme jen malý
   odstup (jako mezi běžnými odstavci), ne celý --sh-space-md, který
   zůstává jen za posledním leadem před zbytkem obsahu */
.sh-article__lead:has(+ .sh-article__lead) {
    margin-bottom: var(--sh-space-xs);
}

/* ---------- obsah článku (kotvy) ---------- */

.sh-article__toc {
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: 0 0 var(--sh-space-lg);
}

/* v 1. row (úvod+TOC / náhledový obrázek) je TOC poslední věc v hlavním
   sloupci — bez spodního marginu jde spodní hrana TOC zarovno se spodní
   hranou obrázku vedle (mezeru mezi řádky pořád dělá margin-bottom na
   .sh-article__row--intro, na mobilu i mezeru mezi sloupci dělá gap na
   .sh-article__row — tohle na ně nemá vliv). Scoped jen na tenhle
   konkrétní případ, obecná .sh-article__toc zůstává beze změny. */
.sh-article__row--intro .sh-article__col-main > .sh-article__toc:last-child {
    margin-bottom: 0;
}

.sh-article__toc-title {
    display: block;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* varianta nadpisu podbarveného boxu bez uppercase, o něco menší
   než H2 nad ním (ne kotvy "obsah článku", ale samostatný box, např.
   "Výše členství" na stránce Spolku) */
.sh-article__toc-title--plain {
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    text-transform: none;
    letter-spacing: normal;
}

.sh-article__toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .news-item-detail .text ul má padding-left: 1.25em a margin-bottom
   (viz "základní typografie vloženého obsahu") a bije se specificitou
   s .toc/.related ul — tady to explicitně vynulujeme, aby odkazy
   lícovaly vlevo se zbytkem obsahu a seznam neměl zbytečnou mezeru
   dole (o mezeru mezi bloky se stará margin na .toc/.related samotném) */
.news-item-detail .text .sh-article__toc ul,
.news-item-detail .text .sh-article__related ul {
    padding-left: 0;
    margin: 0;
}

.sh-article__toc li {
    margin: 0 0 var(--sh-space-xs);
}

.sh-article__toc li::marker {
    content: none;
}

.sh-article__toc a {
    font-weight: var(--sh-font-weight-medium);
}

/* ---------- tip / zvýrazněný box ---------- */

.sh-article__tip {
    background: var(--sh-color-cta-subtle);
    border-left: 4px solid var(--sh-color-cta);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-sm) var(--sh-space-md);
    margin: var(--sh-space-md) 0;

    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
    text-align: left;
}

.sh-article__tip p:last-child {
    margin-bottom: 0;
}

.sh-article__tip-title {
    display: block;
    margin-bottom: var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

/* varianta pro upozornění/pozor si dej na... (např. u receptů — sůl,
   alergeny, bezpečnost kvašení) — odlišná barva od běžného tipu, ať
   jde vizuálně poznat "dobrá rada" od "na tohle si dej pozor".
   Jde o jedinou výjimku z brand palety (Deep Clay + Dusty Blue-Grey)
   — záměrně pevné hodnoty, ne proměnné, protože jantarová/amber
   barva pro varování není součástí rebrand palety v base.css. */
.sh-article__tip--warning {
    background: #fdf3e0;
    border-left-color: #c9902a;
}

.sh-article__tip--warning .sh-article__tip-title {
    color: #7a5a16;
}

/* ---------- definice pojmu ----------
   Pro krátké "Co je X?" definice hned na začátku sekce — stejný box
   jako .sh-article__tip (stejné odsazení/pozadí/barva). Title uvnitř
   dělá práci nadpisu, takže tenhle box nahrazuje h3 + zvýrazněný
   odstavec za ním. */
.sh-article__definition {
    background: var(--sh-color-cta-subtle);
    border-left: 4px solid var(--sh-color-cta);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-sm) var(--sh-space-md);
    margin: var(--sh-space-md) 0;

    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
    text-align: left;
}

.sh-article__definition p:last-child {
    margin-bottom: 0;
}

.sh-article__definition-title {
    display: block;
    margin-bottom: var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

/* ---------- obrázky vedle sebe ---------- */

.sh-article__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sh-space-sm);
    margin: var(--sh-space-md) 0;
}

.sh-article__images img {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

@media (max-width: 600px) {
    .sh-article__images {
        grid-template-columns: 1fr;
    }
}

/* ---------- citace ---------- */

.news-item-detail .text blockquote {
    margin: var(--sh-space-md) 0;
    padding: 0 0 0 var(--sh-space-md);
    border-left: 4px solid var(--sh-color-cta);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    font-style: normal;
    color: var(--sh-color-text);
}

.news-item-detail .text blockquote p {
    margin: 0;
}

.news-item-detail .text blockquote cite {
    display: block;
    margin-top: var(--sh-space-xs);

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    font-style: normal;
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text-muted);
}

/* ---------- CTA banner ---------- */

.sh-article__cta {
    background: var(--sh-color-cta-subtle);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-box);
    margin: var(--sh-space-lg) 0;
    text-align: left;
}

.sh-article__cta-title {
    display: block;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-cta-dark);
}

.sh-article__cta p {
    max-width: 480px;
    margin: 0 0 var(--sh-space-sm);
    color: var(--sh-color-text);
}

.sh-article__cta .sh-btn {
    margin-top: var(--sh-space-xs);
}

/* ---------- FAQ (nativní <details>/<summary>, bez JS) ---------- */

/* pojistka: kdyby byl budoucí článek kratší než plovoucí boční sloupec
   (obrázek+CTA+autor), tahle a další "závěrečné" sekce se i tak vždy
   zarovnají na celou šířku, ne vedle zbytku sloupce */
.sh-article__faq,
.sh-article__sources,
.sh-article__related {
    clear: both;
}

/* zpátky na 1 sloupec – 2 sloupce přes CSS grid (grid-auto-flow:
   column) měly nečekaný postranní efekt: položky ve stejném řádku
   mřížky (1↔4, 2↔5, 3↔6) sdílely výšku řádku, takže otevření jedné
   otázky "nafouklo" i buňku sousední otázky ve druhém sloupci, i
   když se ve skutečnosti otevřela jen jedna. Šířka se řeší per
   kontext (blog vs. Spolek/Kontakty/Doprava) – viz níže / pages.css. */
.sh-article__faq {
    margin: 0;
}

/* margin přesunut z .sh-article__faq na nadpis "Časté otázky" před ním,
   ať box s otázkami sedí hned pod nadpisem bez mezery navíc */
h2:has(+ .sh-article__faq) {
    margin: var(--sh-space-md) 0 0;
}

.sh-article__faq-item {
    border-bottom: 1px solid var(--sh-color-border);
    padding: var(--sh-space-s) 0;
}

.sh-article__faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-space-sm);
    cursor: pointer;
    list-style: none;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.sh-article__faq-item summary::-webkit-details-marker {
    display: none;
}

.sh-article__faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: var(--sh-heading-sm);
    line-height: 1;
    color: var(--sh-color-accent);
    transition: var(--sh-transition);
}

.sh-article__faq-item[open] summary::after {
    content: "–";
}

.sh-article__faq-item p {
    margin: var(--sh-space-sm) 0 0;
    color: var(--sh-color-text);
}

/* ---------- související články ---------- */

.sh-article__related {
    margin: var(--sh-space-lg) 0;
}

/* nadpis teď jede přes sdílený label+title pár (.sh-segmentation-intro__label
   / __title z homepage.css), stejný vzor jako jinde na webu – obojí
   jsou <span> bez vlastního display:block (na homepage title sedí na
   <h2>, který je blokový sám o sobě), tady proto sedly vedle sebe na
   jeden řádek místo pod sebe; vynuceno jen v tomhle kontextu. Ta
   sdílená třída sama nemá margin-bottom (na homepage o to řeší
   rodič), tady ho doplňujeme jen v tomhle kontextu */
.sh-article__related .sh-segmentation-intro__label,
.sh-article__related .sh-segmentation-intro__title {
    display: block;
}

.sh-article__related .sh-segmentation-intro__title {
    margin-bottom: var(--sh-space-md);
}

.sh-article__related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sh-article__related li {
    margin-bottom: var(--sh-space-xs);
}

.sh-article__related li::marker {
    content: none;
}

.sh-article__related a {
    font-weight: var(--sh-font-weight-medium);
}

/* ---------- autor ---------- */

.sh-article__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sh-space-s);
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: var(--sh-space-lg) 0;
    text-align: left;
}

/* ---------- volný obrázek v bočním sloupci ----------
   Prázdné místo pro další fotku v .sh-article__col-side (např. pod
   autorkou) — stejný poměr stran a zaoblení jako u produktových
   fotek, ať sedí vizuálně k ostatním obrázkům v článku. */
.sh-article__side-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
    margin: var(--sh-space-lg) 0;
}

.sh-article__side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}

/* specificita .news-item-detail .text img (0,2,1) by jinak přebila
   .sh-article__author img (0,1,1) a vrátila hranaté rohy z var(--sh-radius-md) */
.news-item-detail .text .sh-article__author img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 !important;
}

.sh-article__author-name {
    display: block;
    margin-bottom: var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

.sh-article__author p {
    margin: 0;
    font-size: var(--sh-text-sm);
    color: var(--sh-color-text-muted);
}

/* ---------- zdroje ---------- */

.sh-article__sources {
    margin: var(--sh-space-lg) 0 var(--sh-space-md);

    font-size: var(--sh-text-xs);
    color: var(--sh-color-text-muted);
}

.sh-article__sources ol {
    padding-left: 1.25em;
}

/* ---------- klíčové poznatky (shrnutí na úvod) ----------
   Na rozdíl od .sh-article__tip (krátká vsuvka uprostřed textu) jde
   o prominentnější box hned na začátku článku — bez levého pruhu,
   se seznamem opatřeným fajfkami místo běžných odrážek. Specificita
   .news-item-detail .text ... (0,2,1) jinak přebíjí prosté
   .sh-article__takeaways ul (0,1,1), proto nested override stejně
   jako u .toc/.related výše. */
/* bez horního marginu — když je takeaways první v .sh-article__row
   (2. row v blog-article-template-guide.html), odstup nad ním dělá
   .sh-article__row--intro (margin-bottom), takže by se odstupy
   sčítaly. Odstup pod krabičkou zůstává. */
.sh-article__takeaways {
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: 0 0 var(--sh-space-lg);
}

.sh-article__takeaways-title {
    display: block;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.news-item-detail .text .sh-article__takeaways ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.sh-article__takeaways li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: var(--sh-space-xs);
    color: var(--sh-color-text);
}

.sh-article__takeaways li:last-child {
    margin-bottom: 0;
}

.sh-article__takeaways li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-accent);
}

/* ---------- podbarvený blok "nadpis + text + produkty" ----------
   Celá sekce doporučující produkty (h3 + úvodní odstavec +
   .sh-article__products) obalená v jedné podbarvené kartě
   (--sh-color-surface) — ne každá produktová karta zvlášť. */
.sh-article__product-section {
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: var(--sh-space-md) 0;
}

.sh-article__product-section > h3:first-child {
    margin-top: 0;
}

.sh-article__product-section > .sh-article__products:last-child {
    margin-bottom: 0;
}

/* ---------- seznam ingrediencí (recepty) ----------
   Stejná podbarvená karta jako .sh-article__product-section — buď
   jeden prostý <ul>, nebo víc podskupin přes h3 + ul (např. "Základ
   misky" / "Dresink"), když recept má víc částí. */
.sh-article__ingredients {
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: var(--sh-space-md) 0;
}

.sh-article__ingredients > h3:first-child,
.sh-article__ingredients > p:first-child {
    margin-top: 0;
}

.sh-article__ingredients > ul:last-child,
.sh-article__ingredients > ol:last-child {
    margin-bottom: 0;
}

/* ---------- produktové karty v textu ----------
   Foto 4:3 (jednotný poměr pro všechny nahrané produktové fotky),
   titulek, popisek, tlačítko — bez nutnosti obalovat celou kartu
   odkazem (výrobce/tlačítko je vlastní <a>, obrázek i titulek
   zůstávají prostý text/obrázek). Wrapper má modifikátory pro 1–3
   karty vedle sebe, podle toho kolik produktů v dané sekci ukazuješ. */
.sh-article__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sh-space-sm);
    margin: var(--sh-space-md) 0;
}

.sh-article__products--1 {
    grid-template-columns: minmax(0, 320px);
}

.sh-article__products--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
    .sh-article__products,
    .sh-article__products--3 {
        grid-template-columns: 1fr;
    }
}

.sh-article__product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* celá karta je klikací: odkaz v názvu se přes ::after roztáhne přes
   celou kartu. Název sám vypadá jako běžný nadpis (ne hnědý odkaz
   s podtržením jako v textu článku). Tlačítko má vyšší z-index, ať
   funguje jeho vlastní hover (jinak by ho překrylo ::after). */
.news-item-detail .text .sh-article__product-title a {
    color: inherit;
    text-decoration: none;
}

.news-item-detail .text .sh-article__product-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sh-article__product .sh-btn {
    position: relative;
    z-index: 1;
}

.sh-article__product-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
    margin-bottom: var(--sh-space-sm);
}

.sh-article__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    margin: 0 !important;
    transition: transform .4s ease;
}

.sh-article__product:hover .sh-article__product-image img {
    transform: scale(1.03);
}

.sh-article__product-title {
    display: block;
    margin: 0 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.sh-article__product-desc {
    margin: 0 0 var(--sh-space-sm);
    font-size: var(--sh-text-sm);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text-muted);
}

/* stejný vzor jako .sh-segment-card .sh-btn na homepage — klidová
   sytější "subtle" s tmavým textem, na hoveru plná CTA se světlým */
.sh-article__product .sh-btn {
    margin-top: auto;
    background: var(--sh-color-cta-subtle-deep) !important;
    border: 1.5px solid var(--sh-color-cta-subtle-deep) !important;
    color: var(--sh-color-text) !important;
}

.sh-article__product:hover .sh-btn,
.sh-article__product .sh-btn:hover {
    background: var(--sh-color-cta) !important;
    border-color: var(--sh-color-cta) !important;
    color: var(--sh-color-on-cta) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

/* ---------- tabulky ----------
   overflow-x na wrapperu řeší 3sloupcové tabulky na mobilu, aniž by
   se muselo cokoliv řešit v samotné tabulce (žádné pevné šířky). */
.sh-article__table-wrap {
    overflow-x: auto;
    margin: var(--sh-space-md) 0;
    border: 1px solid var(--sh-color-border);
    border-radius: var(--sh-radius-md);
}

.news-item-detail .text table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sh-text-sm);
}

.news-item-detail .text th,
.news-item-detail .text td {
    padding: var(--sh-space-xs) var(--sh-space-sm);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--sh-color-border);
}

.news-item-detail .text thead th {
    background: var(--sh-color-surface);
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

.news-item-detail .text tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- ikony ano/ne/dočasně v tabulkách ----------
   Náhrada za barevné emoji (✅❌⚠️) — jednoduché glyfy v naší CTA
   barvě, stejný jazyk jako fajfky v .sh-article__takeaways. */
.sh-article__icon-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sh-article__icon {
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-accent);
}

.sh-article__icon--yes::before {
    content: "✓";
}

.sh-article__icon--no::before {
    content: "✕";
}

.sh-article__icon--warn::before {
    content: "!";
}

/* ---------- tlačítko na další článek (footer) ---------- */

/* main-14 dává i sem obecnou třídu .text-center{text-align:center} */
.news-item-detail .next-prev {
    text-align: left;
    padding: var(--sh-space-md) 0;
}

.news-item-detail .next-prev .btn {
    background: var(--sh-color-cta) !important;
    color: var(--sh-color-on-cta) !important;
    border-radius: var(--sh-radius-btn) !important;
    border: none !important;
    padding: var(--sh-space-s) var(--sh-space-md);
    transition: var(--sh-transition);
}

.news-item-detail .next-prev .btn:hover {
    background: var(--sh-color-cta-hover) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}