/* Vitamin Shop - tresc.css
   Strony i wpisy poza sklepem: regulamin, polityka prywatnosci, dostawa,
   blog, wyniki wyszukiwania, 404. Wszystkie tokeny pochodza z baza.css.
   Warunek ladowania: widok NIE nalezy do WooCommerce. */

/* ---------- Strona redakcyjna ---------- */
/* Regulamin, polityka i wpis to teksty czytane liniowo. Kolumna tresci ma miare
   czytania, wiec bez zawezenia calego artykulu naglowek ciagnal sie przez
   1280 px, a tekst pod nim konczyl w jednej trzeciej ekranu - uklad wygladal
   na uciety. Wartosc jest wieksza od --measure-lg, bo w max-width siedzi jeszcze
   padding kontenera. */
.strona{max-width:calc(var(--measure-lg) + 10em)}

/* ---------- Naglowek strony ---------- */
.naglowek-strony{margin-bottom:var(--s7)}
.naglowek-strony__kicker{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-ink);
  margin-bottom:var(--s2)}
/* 700, nie 800. Barlow Condensed jest wgrany w odmianach 500, 600 i 700
   (assets/fonts) - przy 800 przegladarka pogrubia krój sztucznie i tytul
   regulaminu wyglada na rozmazany obok naglowka .h1 z baza.css, ktory ma 700. */
.naglowek-strony__tytul{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(1.875rem,3.2vw + 1rem,3rem);line-height:1.08;letter-spacing:-.01em;
  text-transform:uppercase}
.naglowek-strony__tytul span{color:var(--brand-ink);text-transform:none}
.naglowek-strony__opis{margin-top:var(--s3);color:var(--slate);font-size:1.0625rem;
  max-width:var(--measure)}

/* ---------- Proza: tresc z edytora ----------
   Miara w em, nie w ch. Zero Barlow jest o okolo jedna trzecia szersze od
   sredniej litery, wiec 62ch daloby w praktyce 78 znakow w wierszu. */
.proza{max-width:var(--measure-lg);font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.proza>*+*{margin-top:var(--s5)}
.proza h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.75rem;
  line-height:1.15;text-transform:uppercase;letter-spacing:.01em;margin-top:var(--s9)}
.proza h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3125rem;
  line-height:1.2;margin-top:var(--s7)}
.proza h2:first-child,.proza h3:first-child{margin-top:0}
.proza a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.proza a:hover{color:var(--ink)}
.proza ul,.proza ol{padding-left:22px}
.proza ul{list-style:disc}
.proza ol{list-style:decimal}
.proza li+li{margin-top:6px}
.proza blockquote{border-left:3px solid var(--brand);padding:var(--s2) 0 var(--s2) var(--s5);
  color:var(--slate);font-size:1.125rem}
.proza img{border-radius:var(--r-md)}
.proza figure{margin-inline:0}
.proza figcaption{margin-top:var(--s2);font-size:.875rem;color:var(--slate-2)}
.proza code{background:var(--surface);border-radius:var(--r-xs);padding:2px 6px;font-size:.9375em}
/* border-collapse:collapse z resetu blokuje border-radius - stad separate. */
.proza table{width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.proza th,.proza td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.proza th{background:var(--surface);font-weight:700}
.proza tr:last-child td{border-bottom:0}
/* Tabela z edytora bywa szersza niz telefon. Przewija sie WEWNATRZ wlasnego
   pojemnika, zeby nie zmusic do przewijania calej strony w bok. */
.proza .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.proza .wp-block-table table{min-width:32em}
.proza__strony{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s7)}

.strona__foto{margin-bottom:var(--s7);border-radius:var(--r-lg);overflow:hidden}
.strona__foto img{width:100%;height:auto;display:block}

/* Notka prawna - taka sama jak na karcie produktu. Wyglad niesie klasa bazowa,
   modyfikator odpowiada tylko za osadzenie pod trescia wpisu. Wczesniej caly
   zapis siedzial w modyfikatorze, wiec sama klasa .prawne nie malowala niczego
   i kazde inne uzycie notki wychodzilo bez stylu. */
.prawne{max-width:var(--measure-lg);font-size:.8125rem;color:var(--slate-2);line-height:1.55}
.prawne--wpis{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--line)}

/* ---------- Listy wpisow i wynikow ---------- */
.wpisy,.wyniki{display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.wyniki__produkt{display:flex}
/* Karta produktu w wynikach jest elementem listy, wiec nie ma wlasnej siatki -
   rozciagamy ja na cala komorke, zeby nie zapadla sie do szerokosci tresci. */
.wyniki__produkt>.card{flex:1 1 auto}

.wpis{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:box-shadow var(--dur-2),transform var(--dur-2)}
.wpis:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.wpis__foto{display:block;aspect-ratio:16/9;background:var(--surface);overflow:hidden}
.wpis__foto img{width:100%;height:100%;object-fit:cover;display:block}
.wpis__tresc{padding:var(--pad-panel);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.wpis__tytul{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;
  line-height:1.2}
.wpis__tytul a{color:var(--ink)}
.wpis__tytul a:hover{color:var(--brand-ink)}
.wpis__meta{font-size:.8125rem;color:var(--slate-2);font-variant-numeric:tabular-nums}
.wpis__zajawka{font-size:.9375rem;color:var(--slate);line-height:1.6}
.wpis__link{margin-top:auto;padding-top:var(--s2);display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.9375rem;color:var(--brand-ink);min-height:44px}
.wpis__link:hover{color:var(--ink)}

/* ---------- Pusto: brak wynikow, 404 ---------- */
.pusto{max-width:var(--measure);margin-inline:auto;text-align:center;
  padding-block:var(--rhythm-md)}
.pusto__tytul{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.625rem;
  text-transform:uppercase;line-height:1.15}
.pusto__opis{margin-top:var(--s3);color:var(--slate)}
.pusto__szukaj{display:flex;gap:8px;margin-block:var(--s6);flex-wrap:wrap}
.pusto__szukaj input{flex:1 1 220px;min-height:48px;padding:0 16px;
  border:2px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);font-size:1rem}   /* 16 px: nizej iOS sam przybliza strone */
.pusto__szukaj input:focus{border-color:var(--brand);outline:none}
.pusto__szukaj .btn{flex:none}

/* ---------- Komentarze ---------- */
.comment-list{list-style:none;display:grid;gap:var(--s5);max-width:var(--measure-lg)}
.comment-list .comment-body{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--pad-panel)}
.comment-form{max-width:var(--measure-lg);display:grid;gap:var(--s4)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{width:100%;min-height:48px;
  padding:12px 14px;border:2px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font-size:1rem;font-family:inherit}
.comment-form textarea{min-height:140px;line-height:1.6}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--brand);outline:none}