/* =============== ZORNA: PORADNIK (css/artykul.css) ===============
   Dodatki do css/podstrony.css dla huba /poradnik/ i czterech artykulow. Kolejnosc w <head>:
   baza.css, podstrony.css, artykul.css. Zero nowych kolorow, zero nowego ruchu.

   .ph-card .sk       tekst "W skrocie" w karcie naglowka artykulu (liczby <strong> jasne); karta z
                      dluzszym tekstem stoi prosto i nie unosi sie (pochylenie i ruch tylko przy
                      krotkiej tresci, jak na stronie glownej)
   .ph-card .card-h   tytul artykulu w karcie huba ("Od czego zaczac?")
   .hub-intro         akapit wstepny huba (kolumna 720 px); h2 w .sec-in ze skali bazy (.sec h2)
   tr.suma            wiersz sumy w .tabela-karta (lekko rozjasniony)
   .drobny            drobny druk (zastrzezenie) w .proza */

/* ---------- KARTA NAGLOWKA ---------- */
.ph-card .sk{margin:0;font:300 16px/1.65 var(--font);color:rgba(238,240,242,.8)}
.ph-card:has(.sk){--r:0deg}
.ph-card:has(.sk) .card{animation:none}
.ph-card .sk strong{font-weight:500;color:var(--lt)}
.ph-card .sk a{color:var(--lt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ph-card .sk a:hover{text-decoration-thickness:2px}
.ph-card .card-h{margin:0;font:200 28px/1.15 var(--font);letter-spacing:-.02em}

/* ---------- HUB ---------- */
.hub-intro{max-width:720px;font:300 17px/1.7 var(--font)}
@media (max-width:767px){
  .hub-intro{font-size:16.5px}
}

/* ---------- TABELA: wiersz sumy ----------
   tlo jako gradient na kolorze, zeby przyklejona pierwsza komorka tez byla nieprzezroczysta */
.tabela-karta tbody tr.suma>*{background-color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07));color:var(--lt)}
.tabela-karta tbody tr.suma>th,.tabela-karta tbody tr.suma>td:first-child{font-weight:500}

/* ---------- DROBNY DRUK ---------- */
.proza .drobny{font:300 14.5px/1.75 var(--font);color:var(--mut-l)}
.proza .drobny a{color:var(--ink)}

/* linia meta w naglowku jest wspolna dla wszystkich podstron (css/podstrony.css) */
.ph h1 span{text-wrap:balance}

/* ---------- TABELA CENNIKOWA NA TELEFONIE: wiersz sumy ----------
   Sam uklad .tabela-karta--lista jest w css/podstrony.css; tu tylko wyroznienie wiersza sumy */
@media (max-width:767px){
  .tabela-karta.tabela-karta--lista tbody tr.suma{background-color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07))}
  .tabela-karta.tabela-karta--lista tbody tr.suma>*{background:none}
  .tabela-karta.tabela-karta--lista tbody tr.suma>td:not(.num){color:var(--mut)}
}
.ph-lead{text-wrap:balance}
@media (max-width:767px){
  /* szesc kart pod soba: lzejszy cien, zeby sasiednie karty nie zlewaly sie w szara plame */
  .krok{box-shadow:0 18px 36px -26px rgba(5,6,7,.6)}
}