/* =====================================================================
   NOWY WYGLĄD – strona GRUPY /{slug}/{id}/oferty.php (templates/nowy/sectiongroup.html.twig).
   Źródło: makieta grupa.html – a.css (.c-head, decyzja „5 w rzędzie” .page-group), home.css (.g-stat, .gk*, .gf*, .go*),
   baza.css (.seo-sec). Wspólne klasy (.block, .grid, .pc*, .hbox*, .g-sec*, .g-fot, .seo, .g-seo, .seo-div*) są w nowy.css.
   Ładowany tylko na stronie grupy, zawsze z ?v={{ pm_nowy_v }}.
   ===================================================================== */

/* ---------- nagłówek: H1 + wstęp z panelu + liczby | ramka pomocy */
.grp-main .c-head{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:32px;align-items:start;padding:4px 0 20px}
.grp-main .c-head h1{font-size:40px;font-weight:800;margin-bottom:12px;overflow-wrap:anywhere}
.grp-main .c-intro{font-size:16.5px;line-height:1.7;color:#34424F;max-width:860px;margin:0}
.grp-main .c-intro p{margin:0 0 .6em}
.grp-main .c-intro p:last-child{margin-bottom:0}
.grp-main .c-intro strong,.grp-main .c-intro b{color:var(--navy)}
.grp-main .c-head .hbox{padding:16px}
.grp-main .c-head .hbox-c{padding:7px 10px;gap:10px}
.grp-main .c-head .hbox-ci{width:32px;height:32px}
.g-stat{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-weight:700;color:var(--navy);font-size:14.5px}
.g-stat svg{flex:none;color:var(--blue-700)}

/* ---------- karty kategorii (5 w rzędzie – decyzja Krista 01.10) */
.gk-wrap{padding:8px 0 4px}
.gk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
/* mniej niż 5 kategorii – tyle kolumn, ile kart (bez pustych miejsc w rzędzie); 1–2 karty poziomo (zdjęcie | tekst) */
.gk-grid--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gk-grid--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gk-grid--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gk-grid--n1{grid-template-columns:minmax(0,1fr)}
.gk-grid--n2 .gk,.gk-grid--n1 .gk{flex-direction:row}
.gk-grid--n2 .gk-img,.gk-grid--n1 .gk-img{flex:0 0 44%;aspect-ratio:auto;min-height:220px}
.gk-grid--n1 .gk-img{flex-basis:min(44%,520px)}
.gk-grid--n2 .gk-body,.gk-grid--n1 .gk-body{padding:18px 20px 20px}
.gk-li{display:flex;min-width:0}
.gk{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.gk:hover{box-shadow:var(--shadow-2);border-color:var(--blue)}
.gk-img{display:block;aspect-ratio:700/520;background:#F4F7FA}
.gk-img img{width:100%;height:100%;object-fit:cover;display:block}
.gk-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;flex:1}
.gk h3{font-size:17px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.gk h3 a{color:var(--navy);text-decoration:none}
.gk h3 a:hover{color:var(--blue-700)}
.gk-meta{margin:0;font-size:14px;color:var(--muted)}
.gk-meta b{color:var(--navy)}
.gk-opis{margin:0;font-size:14px;line-height:1.55;color:#34424F;flex:1}
.gk-mini{display:flex;gap:6px;flex-wrap:wrap}
.gk-mini img{width:44px;height:58px;object-fit:contain;background:#fff;border:1px solid var(--line-2);border-radius:6px}
.gk-cta{align-self:flex-start;margin-top:4px;white-space:normal;text-align:left}
.gk-cta svg{flex:none}

/* ---------- „Jaki format masz?” (kartki w skali) */
.gf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gf{display:grid;grid-template-rows:140px auto auto 1fr;gap:6px;padding:18px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none!important;transition:border-color .2s,box-shadow .2s}
.gf:hover{border-color:var(--blue);box-shadow:var(--shadow-2)}
.gf-paper{align-self:end;justify-self:start;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--navy);border-radius:3px;box-shadow:4px 4px 0 var(--sky-50)}
.gf-paper i{font-style:normal;font-weight:800;color:var(--navy);font-size:18px}
.gf-ico{align-self:end;color:var(--blue-700)}
.gf-t b{font-size:20px;color:var(--navy)}
.gf-t small{color:var(--muted);font-size:13.5px;margin-left:4px}
.gf-do{font-size:14px;color:#34424F;line-height:1.5}
.gf-n{align-self:end;font-weight:700;color:var(--blue-700);font-size:14px;display:flex;align-items:center;gap:4px}
.gf-tip{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;color:#34424F;font-size:14.5px}
.gf-tip svg{flex:none;margin-top:2px;color:var(--blue-700)}
.gf-tip a{text-decoration:underline;text-underline-offset:3px}

/* ---------- „Polecane w tej grupie” – kafelki .pc (5 w rzędzie); grp-u{N} = kafelek ponad pełne rzędy przy N kolumnach */
.grp-main .grp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
/* progi jak .grid w ramie: 5 kolumn ≥ 1170 px, 4 do 942, 3 do 761 (kafelek ≥ ok. 210 px – Krist 04.10) */
@media (min-width:1170px){.grp-grid .grp-u5{display:none}}
@media (min-width:942px) and (max-width:1169px){.grp-grid .grp-u4{display:none}}
@media (min-width:761px) and (max-width:941px){.grp-grid .grp-u3{display:none}}
@media (max-width:760px){.grp-grid .grp-u2{display:none}}

/* ---------- poradnik (tekst z panelu, sekcje z grafiką na zmianę) */
.grp-main .seo.g-seo{margin-top:0}
.grp-main .seo-sec{max-width:880px}
.grp-main .seo-sec h2,.grp-main .g-sec-t h2{font-size:24px;margin:0 0 12px}
.grp-main .seo-sec p,.grp-main .g-sec-t p{color:#34424F;font-size:16.5px;line-height:1.75;margin:0 0 12px}
.grp-main .seo-sec p:last-child,.grp-main .g-sec-t p:last-child{margin-bottom:0}
.grp-main .seo ul,.grp-main .seo ol{color:#34424F;font-size:16.5px;line-height:1.75;padding-left:1.3em}
.grp-main .seo a{text-decoration:underline;text-underline-offset:3px}
.grp-main .seo strong{color:var(--navy)}

/* ---------- inne grupy */
.go-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.go{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none!important}
.go:hover{border-color:var(--blue);background:var(--sky-50)}
.go img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex:none}
.go span{min-width:0}
.go b{display:block;color:var(--navy);font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.go small{color:var(--muted);font-size:12.5px}
.grp-inne{padding-bottom:40px}

/* ---------- szerokości ekranu */
/* Siatka kart kategorii: reguły 1280/1100 tylko od 761 px w górę – na telefonie (≤760) nic ich nie przebija,
   bo selektory z :not() mają większą wagę niż .gk-grid w regule telefonu (błąd 4 wąskich kolumn, 04.10). */
@media (min-width:1101px) and (max-width:1280px){.gk-grid--n5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1169px){.grp-main .grp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:941px){.grp-main .grp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1100px){.gk-grid--n5{grid-template-columns:repeat(3,minmax(0,1fr))}.gk-grid--n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){
  .gk-grid--n2 .gk-img{flex-basis:40%;min-height:180px}
  .gf-row,.go-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .grp-main .c-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .grp-main .c-head .hbox-c small{white-space:normal}
}
@media (max-width:760px){
  .grp-main .c-head h1{font-size:30px}
  .grp-main .grp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gk-wrap .gk-grid[class],.gf-row,.go-grid{grid-template-columns:minmax(0,1fr)}
  /* miniatury produktów na karcie: na telefonie tylko pierwsze N (pm_grp.mini_telefon) – ukryte img z loading=lazy
     nie są pobierane (mniej żądań); klasa gk-grid--mt{N} z szablonu */
  .gk-grid--mt0 .gk-mini{display:none}
  .gk-grid--mt1 .gk-mini img:nth-child(n+2),.gk-grid--mt2 .gk-mini img:nth-child(n+3),.gk-grid--mt3 .gk-mini img:nth-child(n+4){display:none}
  .gk-grid--n2 .gk,.gk-grid--n1 .gk{flex-direction:column}
  .gk-grid--n2 .gk-img,.gk-grid--n1 .gk-img{flex:none;aspect-ratio:700/520;min-height:0}
  .gk-grid--n2 .gk-body,.gk-grid--n1 .gk-body{padding:12px 14px 14px}
  .gf{grid-template-rows:110px auto auto auto}
  .grp-main .seo-sec h2,.grp-main .g-sec-t h2{font-size:21px}
  .grp-main .seo-sec p,.grp-main .g-sec-t p{font-size:16px;line-height:1.7}
}

/* ---------- link do wyszukiwarki pod „Inne grupy” (był na starej stronie grupy) */
.go-szuk{display:flex;gap:8px;align-items:center;margin:16px 0 0;color:#34424F;font-size:14.5px}
.go-szuk svg{flex:none;color:var(--blue-700)}
.go-szuk a{text-decoration:underline;text-underline-offset:3px}

/* (06.10, UX nr 9) wstęp grupy na telefonie i tablecie (≤ 860 px) zwinięty do 3 linijek + „Czytaj więcej” – jak w kategoriach (kat.css,
   pm_kat.wstep_zwiniety). Cały tekst w HTML; html.grp-zw daje skrypt w sectiongroup.html.twig (bez JS – pełny tekst, przycisk ukryty). */
.grp-wiecej{display:none}
@media (max-width:860px){
  .grp-zw .grp-main .c-intro--zw:not(.is-open){max-height:calc(3 * 1.7em);overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .grp-zw .grp-wiecej{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;margin-top:2px;border:0;background:none;color:var(--blue-700);font:inherit;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .grp-zw .grp-wiecej[hidden]{display:none}
}