/* Trendy — wspólna siatka `tg` (template-parts/mixed/trendy-grid.php; warianty T7…T37 z tpl_trendy_grid_defs()).
   Obszary i wysokości rzędów przychodzą z PHP jako --tg-areas / --tg-rows (inline). Karty z cards.css. */

.trendy-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.trendy-grid > *{min-width:0;}
.trendy-grid .tg-main .hero-featured-block-title{font-size:var(--fs-mixed-featured-title,28px);}
.trendy-grid .tg-main{grid-column:1 / -1;}
.trendy-grid .tg-list{order:99;display:flex;flex-direction:column;gap:20px;}
.trendy-grid .tg-lg{display:flex;flex-direction:column;gap:16px;}
.trendy-grid .tg-cell > .card-light,.trendy-grid .tg-cell > .ngc{height:100%;}
.trendy-grid .tg-cell--overlay .news-card-overlay-content{top:auto;}
.trendy-grid .tg-cell--overlay .news-card-overlay-content::after{height:100%;}
.trendy-grid .tg-cell--overlay .news-card-overlay-content > div:first-child{margin-bottom:8px;}
@media (min-width:769px){.trendy-grid .tg-cell--overlay .news-card-overlay-image{position:absolute;inset:0;}
}
/* Tablet: 2 kolumny, duży news i overlaye 16/9 (overlay rozciągnięty do wysokości sąsiedniej karty). */
@media (min-width:769px) and (max-width:1024px){.trendy-grid{gap:15px;}
.trendy-grid .tg-main .article-featured{aspect-ratio:16/9;height:auto;min-height:auto !important;}
.trendy-grid .tg-cell--overlay .news-card-overlay{width:100%;height:100% !important;min-height:0;aspect-ratio:16/9;}
.trendy-grid .tg-tabfull.tg-cell--overlay .news-card-overlay{aspect-ratio:21/9;} /* Pojedynczy overlay na całą szerokość — niższy. */
.trendy-grid .tg-cell > .ngc-inset{min-height:260px;}
/* Split bez wstępu na całą szerokość nie zapada się do wysokości tytułu. */
.trendy-grid .tg-cell > .card-light-split{min-height:180px;}
/* Pojedyncza karta ze zdjęciem u góry na całą szerokość — układ poziomy (zdjęcie 50% 16/9 + korpus), zamiast zdjęcia 16/9 na 100%. */
.trendy-grid .tg-tabfull > .ngc:not(.ngc-inset){flex-direction:row;}
.trendy-grid .tg-tabfull > .ngc:not(.ngc-inset) .ngc-ph{flex:0 0 50%;aspect-ratio:16/9;}
.trendy-grid .tg-tabfull > .ngc:not(.ngc-inset) .ngc-bd{flex:1;justify-content:center;}
}
/* Desktop: 4 kolumny; górny pas wyznacza duży news (16/9 z własnej szerokości), rzędy z --tg-rows (inline, trendy-grid.php). */
/* Kolumna-stos (`stack`, T43/T44): na desktopie komórki jedna pod drugą w jednym obszarze — obszar nie wpływa na rzędy (`:cs`),
   pierwsza komórka (boks tekstowy) wypełnia resztę wysokości, pozostałe mają wysokość z treści. Poniżej desktopu stos znika
   (display:contents). Tablet: kolejność newsów (`--tg-o`); mobile niżej. */
.trendy-grid .tg-stack{display:contents;}
@media (max-width:1024px){.trendy-grid .tg-cell{order:var(--tg-o,0);}
.trendy-grid .tg-main{order:-1;}
}
/* Mobile — kolejność jak w Mixed: duży news, karty ze zdjęciem (wiersze 120×80) w kolejności newsów, lista, na końcu karty tekstowe
   (`--tg-om` = kolejność newsa, dla kart tekstowych + 100; lista ma 99). */
@media (max-width:768px){.trendy-grid .tg-cell{order:var(--tg-om,0);}
}
@media (min-width:1025px){.trendy-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:var(--tg-areas);grid-template-rows:var(--tg-rows);gap:20px;}
.trendy-grid .tg-stack{display:flex;flex-direction:column;gap:20px;}
.trendy-grid .tg-stack > .tg-cell{flex:none;}
.trendy-grid .tg-stack > .tg-cell:first-child{flex:1 1 0;min-height:0;overflow:hidden;}
.trendy-grid .tg-main{grid-area:a;}
.trendy-grid .tg-list{order:0;}
.trendy-grid .tg-main .article-featured{height:100%;min-height:0;}
/* Duży news 16/9 z własnej szerokości wyznacza pas (rzędy 'auto' / 1fr), komórki pasa `:cs`. */
.trendy-grid .tg-main .article-featured{width:100%;aspect-ratio:16/9;height:auto;min-height:100%;} /* Nie niższy niż 16/9; gdy pas urośnie od treści obok — wypełnia go. */
.trendy-grid .tg-cell--overlay .news-card-overlay{height:100%;min-height:0;}
.trendy-grid .tg-cell > .ngc-inset,.trendy-grid .tg-cell > .ngc-glass-panel,.trendy-grid .tg-cell > .ngc-glass-band{min-height:0;}
/* Karty ze zdjęciem u góry (T, Istniejący): zdjęcie wypełnia wysokość komórki, korpus wg treści. */
.trendy-grid .tg-cell > .ngc-accent .ngc-ph,.trendy-grid .tg-cell > .ngc-frame .ngc-ph,.trendy-grid .tg-cell > .ngc-typo .ngc-ph,.trendy-grid .tg-cell > .ngc-dark .ngc-ph{flex:1 1 0;aspect-ratio:auto;min-height:90px;}
/* Zdjęcie bez własnej wysokości (absolutne) — o wysokości kafla decyduje siatka, nie naturalna proporcja obrazka. */
.trendy-grid .tg-cell > .ngc-accent .ngc-ph .ngc-img,.trendy-grid .tg-cell > .ngc-frame .ngc-ph .ngc-img,.trendy-grid .tg-cell > .ngc-typo .ngc-ph .ngc-img,.trendy-grid .tg-cell > .ngc-dark .ngc-ph .ngc-img,.trendy-grid .tg-cell > .ngc .ngc-ph > img{position:absolute;inset:0;}
.trendy-grid .tg-cell > .ngc-accent .ngc-bd,.trendy-grid .tg-cell > .ngc-frame .ngc-bd,.trendy-grid .tg-cell > .ngc-typo .ngc-bd,.trendy-grid .tg-cell > .ngc-dark .ngc-bd{flex:none;}
.trendy-grid .tg-cell > .ngc-accent .ngc-bd,.trendy-grid .tg-cell > .ngc-frame .ngc-bd{flex:none;}
/* Lista w wysokim obszarze: grupy dzielą wysokość, pozycje rozłożone równo. */
.trendy-grid .tg-lg{flex:1 1 auto;}
.trendy-grid .tg-lg.list-mod--box > *{flex:1 1 auto;align-items:center;}
.trendy-grid .tg-lg.list-mod--cards{justify-content:space-between;}
/* Bento (band 3): karty listy (J/K/L) rozciągnięte równo na wysokość obszaru, jak w news-card-variants. */
/* Bento: tytuły pozycji listy max 2 linie, karty J/K/L z mniejszym paddingiem — lista mieści się w zaplanowanej wysokości i nie rozpycha rzędów. */
.tg-bento .trendy-grid .tg-list .article-horizontal-mini-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tg-bento .trendy-grid div.tg-lg.list-mod--cards{gap:12px;}
.tg-bento .trendy-grid div.tg-lg.list-mod--cards > *{padding:12px 16px;}
.tg-bento .trendy-grid div.tg-lg.list-mod--box > *{padding-top:12px;padding-bottom:12px;}
/* Lista bento w trybie `auto` (`:cs`, stała wysokość kolumny): mniejszy minimalny odstęp — pozycje i tak rozciągają się (flex),
   a na węższym desktopie (~1025–1150px) 6–7 pozycji mieści się bez ucinania. */
.tg-bento .trendy-grid .tg-list.tg-cell--cs div.tg-lg.list-mod--box > *{padding-top:8px;padding-bottom:8px;}
.tg-bento .trendy-grid .tg-list.tg-cell--cs div.tg-lg.list-mod--cards{gap:8px;}
.tg-bento .trendy-grid .tg-list.tg-cell--cs div.tg-lg.list-mod--cards > *{padding:10px 16px;}
.tg-bento .trendy-grid .tg-lg.list-mod--cards{justify-content:flex-start;}
.tg-bento .trendy-grid .tg-lg.list-mod--cards > *{flex:1 1 0;align-items:center;}
/* Bento (band 3): kompaktowy overlay (`ov-sm`) — bez kategorii i daty, tytuł max 2 linie; `mid` (2/3 pasa) — wstęp max 2 linie. */
.trendy-grid .tg-cell--sm .news-card-overlay .badge,.trendy-grid .tg-cell--sm .card-overlay-meta{display:none;}
.trendy-grid .tg-cell--sm .news-card-overlay-content{padding:14px 16px;}
.trendy-grid .tg-cell--sm .card-overlay-title{font-size:var(--fs-news-title-base);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.trendy-grid .tg-cell--mid .card-light-excerpt{-webkit-line-clamp:2;}
.trendy-grid .tg-cell--mid .card-light-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* `:p169` — zdjęcie karty ngc stałe 16/9, korpus bierze resztę wysokości kafla. */
.trendy-grid .tg-cell--p169 > .ngc .ngc-ph{flex:none !important;aspect-ratio:16/9 !important;min-height:0 !important;}
.trendy-grid .tg-cell--p169 > .ngc .ngc-bd{flex:1 1 auto !important;}
.trendy-grid .tg-cell--p169 > .ngc .ngc-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* `:p169` także dla overlayu (16/9, wysokość z proporcji) i splitu (zdjęcie 16/9 wyznacza wysokość karty). */
.trendy-grid .tg-cell--p169 .news-card-overlay{aspect-ratio:16/9;height:auto !important;}
.trendy-grid .tg-cell--p169 > .card-light-split .card-light-photo{aspect-ratio:16/9;}
/* `:hzs` — niska karta pozioma w ramce: dwie jedna pod drugą obok karty Istniejący — komórka nie wpływa na rzędy (`contain:size`),
   wysokość = połowa pary rzędów wyznaczonej przez kartę obok; zdjęcie 16/9 z wysokości karty (szerokość z proporcji). */
.trendy-grid .tg-cell--hzs{contain:size;min-height:0;overflow:hidden;}
.trendy-grid .tg-cell--hzs > .card-light-split{display:flex;flex-direction:row;height:100%;}
.trendy-grid .tg-cell--hzs > .card-light-split .card-light-photo{flex:none;height:100%;width:auto;aspect-ratio:16/9;}
.trendy-grid .tg-cell--hzs > .card-light-split .card-light-body{flex:1 1 0;min-width:0;}
/* `:cs` — komórka / lista sięgająca pasa: nie wpływa na wysokość rzędów, rozciąga się do nich. */
.trendy-grid .tg-cell--cs{contain:size;min-height:0;overflow:hidden;}
/* `:nm` — karta bez linii meta (data). */
.trendy-grid .tg-cell--nm .ngc-meta{display:none;}
.trendy-grid .tg-cell--hzs .card-light-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Wstęp karty ngc (Istniejący+): 2 linie, `:l` — 3. */
.trendy-grid .tg-cell > .ngc .ngc-lead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.trendy-grid .tg-cell--l > .ngc .ngc-lead{-webkit-line-clamp:3;}
/* `list_fit`: lista nie wpływa na wysokość rzędów (dają ją karty), pozycje rozłożone na całą kolumnę. */
.trendy-grid .tg-list--fit{contain:size;overflow:hidden;}
.trendy-grid .tg-list--fit .tg-lg.list-mod--cards{justify-content:flex-start;gap:8px;}
.trendy-grid .tg-list--fit .tg-lg.list-mod--cards > *{flex:1 1 0;align-items:center;padding:10px 16px;}
/* Węższy desktop: w liście o stałej wysokości bez kategorii pozycji (tytuł + data) — 7 pozycji mieści się obok niższej siatki. */
@media (max-width:1199px){.trendy-grid .tg-list--fit .article-horizontal-mini-cat{display:none;}
}
/* Min. odstępy listy o stałej wysokości — pozycje i tak rozciągają się (flex), mniejsze minimum = mieści się też ~1100px. */
.trendy-grid .tg-list--fit div.tg-lg.list-mod--box > *{padding-top:8px;padding-bottom:8px;}
.trendy-grid .tg-list--fit .article-horizontal-mini-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Wąska kolumna listy (1/4): miniatura 80×60 i ciaśniejszy boks — tytuły w 2-3 liniach, lista nie wydłuża rzędów. */
.trendy-grid .tg-list .img-fixed{width:80px;height:60px;}
.trendy-grid div.tg-lg.list-mod--box{padding:2px 16px;}
.trendy-grid div.tg-lg.list-mod--box > *{padding-top:12px;padding-bottom:12px;}
.trendy-grid div.tg-lg.list-mod--cards > *{padding:14px;}
/* Lista na 2 kolumny (np. T17, obok dużego newsa): grupy listy obok siebie, każda pionowo. */
.trendy-grid .tg-list--w2{flex-direction:row;}
.trendy-grid .tg-list--w2 > .tg-lg{flex:1 1 0;min-width:0;}
.trendy-grid .tg-list--w2 div.tg-lg.list-mod--box > *,.trendy-grid .tg-list--band div.tg-lg.list-mod--box > *{padding-top:8px;padding-bottom:8px;}
.trendy-grid .tg-list--w2 .article-horizontal-mini-cat,.trendy-grid .tg-list--band .article-horizontal-mini-cat{display:none;}
.trendy-grid .tg-list--band .article-horizontal-mini-title,.trendy-grid .tg-list--w2 .article-horizontal-mini-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
}
/* Tablet/mobile: obszary z inline style wyłączone, szerokie komórki i lista na całą szerokość. */
@media (max-width:1024px){.trendy-grid .tg-cell,.trendy-grid .tg-list{grid-area:auto !important;}
.trendy-grid .tg-w2,.trendy-grid .tg-tabfull,.trendy-grid .tg-list{grid-column:1 / -1 !important;}
}
/* Mobile — wzorzec M29: duży news pełna szerokość, karty ze zdjęciem jako wiersze 120×80, bez wstępów. */
@media (max-width:768px){.mixed-section-tg.section-py{padding-top:0;}
.trendy-grid{grid-template-columns:1fr;gap:15px;}
.trendy-grid .tg-list,.trendy-grid .tg-lg{gap:15px;}
.trendy-grid .card-light .card-light-excerpt,.trendy-grid .hero-featured-block-excerpt{display:none;}
.trendy-grid .tg-main{margin-left:-15px;margin-right:-15px;}
.trendy-grid .tg-main .article-featured{aspect-ratio:16/9;border-radius:0;height:auto;min-height:auto !important;}
.trendy-grid .tg-main .article-featured .overlay-gradient{padding:24px 16px;}
.trendy-grid .tg-main .article-featured .news-title-base{margin-bottom:0;}
.trendy-grid .tg-cell > .card-light{height:auto;padding:16px;}
.trendy-grid .tg-cell > .card-light.card-light-split{padding:0;}
.trendy-grid .card-light .card-light-title{font-size:var(--fs-news-title-base);}
.trendy-grid .cards-row-mobile .ngc-meta{display:none;}
.trendy-grid .article-horizontal{padding:0;}
.trendy-grid .img-fixed{width:120px;height:80px;}
.trendy-grid .article-horizontal-mini-title{font-size:var(--fs-news-title-base);line-height:1.4;margin-bottom:6px;}
.trendy-grid .tg-row .news-card-overlay{aspect-ratio:auto;height:auto;min-height:0;border-radius:0;display:flex;flex-direction:row;gap:15px;align-items:center;padding:0;background:transparent;}
.trendy-grid .tg-row .news-card-overlay-image{width:120px !important;height:80px !important;flex-shrink:0;border-radius:var(--news-border-radius);object-fit:cover;}
.trendy-grid .tg-row .news-card-overlay-content{position:static;padding:0;flex:1;display:flex;flex-direction:column;justify-content:flex-start;}
.trendy-grid .tg-row .news-card-overlay-content::after{display:none;}
.trendy-grid .tg-row .news-card-overlay-content > div:first-child{order:2;margin-bottom:0;}
.trendy-grid .tg-row .news-card-overlay-content > div:last-child{order:1;position:static;margin-top:0;}
.trendy-grid .tg-row .news-card-overlay .badge{position:static;background-color:transparent;color:var(--color-news-date);padding:0;font-size:var(--hero-fs-meta);font-weight:500;text-transform:none;letter-spacing:normal;margin-top:6px;}
.trendy-grid .tg-row .news-card-overlay .card-overlay-title{color:var(--color-news-title);text-decoration-line:none;font-size:var(--fs-news-title-base);line-height:1.4;}
.trendy-grid .tg-row .news-card-overlay .card-overlay-meta{display:none;}
}
@media (max-width:768px) and (hover:hover){.trendy-grid .tg-row article:hover .news-title-base.card-overlay-title{color:var(--color-primary);}
}