/* podnozje.css -- javno podnozje na sve tri stranice (GH #458).

   ZASTO VLASTITA DATOTEKA. Podnozje je do #458 bilo prepisano u tri predloska
   i oblikovano u tri razlicite datoteke: v5-base.css (naslovnica), main.css
   (/vise-informacija) i splash.css (splash). Sada je jedan fragment, pa mu
   treba i jedan izgled. Datoteka se ucitava samo na te tri stranice, i
   dizajnerove datoteke se time diraju samo ondje gdje su pravila postala
   mrtva.

   BOJE SE NE PISU OVDJE. Tri stranice nose dva razlicita sloja stilova:
   naslovnica i splash v5-base.css s tokenima --v5-*, /vise-informacija
   main.css s tokenima bez prefiksa. Oba ta popisa vec imaju sva tri stanja
   teme (svijetla na golom :root, tamna pod medijskim upitom i jos jednom pod
   :root[data-tema="tamno"]), pa ovdje stoje samo pokazivaci: --v5-ink ako
   postoji, inace --ink. Nijedna vrijednost ispod nije boja, nego lanac var(),
   sto je tocno onaj slucaj koji TemaPaletaTest opisuje kao "izuzet po
   konstrukciji" -- tema se mijenja na jednom mjestu i podnozje ide za njom.
   PublicFooterRenderTest drzi da tako i ostane.

   RASPORED. Stupci s naslovima umjesto niza poveznica: brend lijevo, uz njega
   dva do cetiri stupca, ispod njih red sa znakovima placanja, pa pravni red.
   Na sirini mobitela stupci padaju na dva, a ne na jedan, jer okomit niz bez
   skupina je tocno ono stanje od kojeg se islo.

   ZASTO JE SVAKO PRAVILO PISANO ".podnozje .podnozje__x". Oba sloja stilova
   oblikuju gole elemente unutar svoje stranice -- v5-base.css ima ".v5 h2",
   ".v5 p" i ".v5 ul", main.css svoje "h2" -- a ".v5 h2" je specificniji od
   ".podnozje__naslov". Bez ovog dvostrukog razreda naslov stupca izlazi kao
   naslov odjeljka od 42 px, sto je i bio prvi rezultat u pregledniku. */

:root {
  --pd-ink: var(--v5-ink, var(--ink));
  --pd-tekst: var(--v5-body, var(--text-muted));
  --pd-prigusen: var(--v5-faint, var(--text-faint));
  --pd-crta: var(--v5-line, var(--border));
  --pd-crta-blaga: var(--v5-line-soft, var(--text-a08));
  --pd-akcent: var(--v5-accent-dark, var(--coral-700));
}

.podnozje {
  /* Odmak prvog bloka ispod stupaca. Nosi ga blok sa znakovima placanja kad
     ga ima, a kad ga nema -- clansko podnozje, GH #707 -- pravni red. Jedna
     vrijednost, jer dva ista broja na dva mjesta su dva broja. */
  --pd-odmak-od-stupaca: clamp(40px, 5vw, 64px);
  margin-top: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--pd-crta);
  color: var(--pd-tekst);
  font-size: 15px;
  line-height: 1.6;
}

.podnozje .podnozje__traka {
  width: min(1360px, 100% - clamp(32px, 6vw, 88px));
  margin-inline: auto;
  /* Donji je razmak velik namjerno: i ljepljivi CTA na naslovnici i traka o
     kolacicima stoje fiksno uz dno prozora i inace bi pokrili pravni red. */
  padding-block: clamp(48px, 6vw, 88px) clamp(64px, 7vw, 104px);
}

/* --- brend i stupci --- */
.podnozje .podnozje__vrh {
  display: grid;
  gap: clamp(36px, 4vw, 64px);
}

@media (min-width: 900px) {
  .podnozje .podnozje__vrh.ima-brend {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.5fr);
  }
}

.podnozje .podnozje__ime {
  display: block;
  color: var(--pd-ink);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.podnozje .podnozje__geslo {
  max-width: 26ch;
  margin: 12px 0 0;
  color: var(--pd-prigusen);
  font-size: 14px;
}

.podnozje .podnozje__gore {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 14px;
  color: var(--pd-akcent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.podnozje .podnozje__gore:hover {
  text-decoration: underline;
}

.podnozje .podnozje__stupci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.podnozje .podnozje__stupac {
  min-width: 0;
}

.podnozje .podnozje__naslov {
  margin: 0 0 10px;
  color: var(--pd-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
}

.podnozje .podnozje__popis {
  margin: 0;
  padding: 0;
  list-style: none;
}

.podnozje .podnozje__popis a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--pd-tekst);
  text-decoration: none;
  /* Adresa e-poste je najduzi redak u podnozju i na uskom zaslonu je jedina
     stvar koja moze prerasti svoj stupac.

     GH #496: sama po sebi je ova crta rezala adresu usred rijeci, jer 1fr traka
     ne raste po sadrzaju -- izmjereno 24 znaka u prvom redu i posljednji znak
     domene sam u drugom, na sirinama gdje traka ispadne uza od adrese (184,0 px
     pri 15 px Manropea). Mjesto reza sada stoji u predlosku, kao prilika za lom
     odmah iza @, a ovo je ostalo kao mreza ispod njega: bez njega bi adresa u
     traci uzoj od same domene izasla iz stupca umjesto da se prelomi. */
  overflow-wrap: anywhere;
}

.podnozje .podnozje__popis a:hover,
.podnozje .podnozje__popis a:focus-visible {
  color: var(--pd-ink);
  text-decoration: underline;
}

/* Znak uz poveznicu u stupcu Kontakt (GH #496). Znak je ugradjen u predlozak,
   pa su ovdje samo mjere: boju nosi currentColor u samom znaku, a ne ovo
   pravilo, sto je jedini nacin da jedan zapis vrijedi u obje teme (vidi BOJE SE
   NE PISU OVDJE na vrhu). flex: none jer je poveznica inline-flex, pa bi se
   znak inace stisnuo u trenutku kad se tekst uz njega prelomi u dva reda. */
.podnozje .podnozje__ikona {
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline-end: 8px;
}

.podnozje .podnozje__vrijeme {
  margin: 0;
  padding-block: 8px;
}

/* --- znakovi placanja --- */
/*
   VISINA BLOKA. Ovaj je red u prvoj verziji bio visok 152 px na desktopu i
   zauzimao je vise od naslova i poveznica zajedno. Smanjivan je dvaput: prvo
   na 91 px iz samih razmaka (razmak natpisa 16 -> 8, okomiti razmak bloka
   40 -> 20, unutarnji razmak plocice 6 -> 2) i izjednacene visine znakova, pa
   jos jednom, ovaj put i samim znakovima, na oko 73 px. Na uskom zaslonu je
   put isti: 308 -> 132 -> oko 108 px. Tu je i stao: posljednji zahvat na ovom
   bloku nije smanjivanje nego poravnanje, i blok ostaje iste visine.

   MJERE ZNAKOVA PISU SE OVDJE, a ne u placanje-logotipi.css, jer isti blok
   stoji i na /placanje, gdje je red znakova sam sadrzaj stranice i smije biti
   krupan. U podnozju je to zavrsni red uz pravne podatke.

   JEDNAKA VISINA PLOCE, a ne datoteke. Visina slike ne govori koliko se od
   nje vidi, a to se od znaka do znaka jako razlikuje. Izmjereno iz samih
   datoteka, udio vidljivog u visini platna:

     visa.jpg         49 %  (ostalo je bijelo, a bijelo je dio znaka)
     visa-secure.jpg  87 %  i lezi 6,6 % ispod sredine platna
     mastercard.png   85 %  (crna ploca; oko nje je prozirno)
     maestro.png      86 %
     identity check   51 %  (ostalo je propisana praznina u datoteci)
     monri.png        75 %

   Zato Visa, Visa Secure i Raiffeisen idu na 22 px slike: s 2 px razmaka i
   2 px ruba to je bijela ploca od 26 px. Mastercard i Maestro idu na 30 px
   slike, sto daje crnu plocu od 25,6 px. Pet ploca je time jednako visoko;
   prije je bijela bila 33 px prema crnih 24,8 px, pa je red izgledao
   razbacano. Na uskom zaslonu je odnos isti, samo manji: 18 px slike na
   plocici prema 26 px kod ostalih, ploca 22 px. Ondje su znakovi koji podlogu
   nose u sebi ostali tocno gdje su i bili, a spustila se bijela ploca na njih,
   pa blok nije narastao.

   Dva prozirna znaka namjerno su nizi od ploce, jer prozirni znak uz plocu
   inace vizualno iskace: Monri na 30 px platna daje 22,4 px znaka, dakle 86 %
   ploce. Identity Check daje 15,2 px i vise se ne moze podici a da red ne
   naraste: njegov je znak sirok 5,9 puta koliko je visok, pa bi na visini
   ostalih bio 136 px sirok i postao najteza stvar u podnozju.

   PROPISANI MINIMUMI, prepisani iz isporucenih pravila (monri-logos/pravila),
   ne procijenjeni:

   Mastercard Identity Check trazi najmanje 90 px sirine znaka. Datoteka nosi
   propisanu prazninu u sebi -- na platnu od 2102 px sam znak je sirok 1803 px,
   dakle 85,8 % platna -- pa 90 px znaka znaci 105 px platna, a to je visina od
   30 px. To je jedini znak koji je udario u svoj minimum, pa jedini ostaje
   jednak na oba zaslona.

   Acceptance Mark (Mastercard i Maestro) ima minimum 24 px, vodoravni brand
   mark 34 px. Crna ploca je siroka 33 px na sirokom i 29 px na uskom zaslonu,
   dakle iznad minimuma u oba slucaja. Visa i Visa Secure objavljenog minimuma
   nemaju i ionako su najuzi u redu.

   Cisti prostor je 1/2 visine znaka: 13 px na sirokom i 11 px na uskom
   zaslonu. Dio ga nosi sama datoteka, a ostatak razmak u redu -- izmjereno
   24-26 px na sirokom i 17-19 px na uskom, dakle iznad trazenog na oba.

   Nijedna bitmapa nije dirana: sve gore je CSS nad isporucenim datotekama. */
/* OBA RAZMAKA OKO BLOKA PISE OVO PRAVILO. Do sada je gornji dolazio odavde, a
   donji od susjeda (.podnozje__dno je imao margin-top), pa je blok visio uz
   gornju crtu: na sirini od 705 px izmjereno je 12,7 px iznad i 33,7 px ispod,
   a na 1440 px je razlika jos veca, jer gornji razmak ondje staje na 16 px a
   donji naraste na 48. Sada je to jedna vrijednost, --pd-placanje-razmak, i
   ona je otprilike polovica zbroja koji je blok imao prije, pa je visina
   podnozja ostala ista a blok je usred nje.

   Razmak se mjeri od tiska, a ne od okvira, pa gornji padding nije jednak
   donjem. Natpis nosi vlastiti line-height i njegov okvir pocinje 2,4 px
   iznad slova; zadnji red znakova zavrsava 4,0 px iznad svojeg okvira, jer je
   najnizi piksel u redu crna ploca Mastercarda, a ne rub slike. Donji padding
   je zato za 2 px manji od gornjega, i tek tada je ono sto se vidi jednako.

   Mjereno je iz samih datoteka, granicom tiska (canvas getImageData) i
   metrikom pisma (actualBoundingBoxAscent), a ne po okvirima elemenata. */
.podnozje .podnozje__placanje {
  --pd-placanje-razmak: clamp(22px, 2.65vw, 32px);
  margin-top: var(--pd-odmak-od-stupaca);
  padding-top: var(--pd-placanje-razmak);
  padding-bottom: calc(var(--pd-placanje-razmak) - 2px);
  border-top: 1px solid var(--pd-crta-blaga);
}

.podnozje .placanje-logotipi {
  margin-top: 0;
}

/* Natpis je najtisi u podnozju: ovo je zavrsni red, a ne stupac. */
.podnozje .placanje-logotipi__oznaka {
  margin-bottom: 6px;
  color: var(--pd-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  opacity: 1;
}

/* Jedna os za svih sedam. "center" stoji i u placanje-logotipi.css, ali je
   ovdje zapisan jos jednom jer visine ispod nisu jednake: kad se mijenjaju,
   ovo je pravilo koje red drzi poravnatim. */
.podnozje .placanje-logotipi__znakovi,
.podnozje .placanje-logotipi__red {
  gap: 16px;
  align-items: center;
}

/* Vodoravni razmak nosi samo bijela plocica, jer je ondje bijelo dio znaka.
   Ostale cetiri datoteke nose svoju prazninu u sebi, pa bi im padding dosao
   na prazninu i razmaci u redu bi ispali nejednaki. */
.podnozje .placanje-logotipi__red li {
  padding: 1px 0;
}

.podnozje .placanje-logotipi__red .placanje-logotipi__plocica {
  padding: 1px 6px;
}

/* Razmaci se mjere od onoga sto se vidi, a ne od ruba datoteke. Mastercard i
   Maestro nose po 7 px vlastite praznine sa svake strane, pa je razmak medu
   njima ispadao 32 px prema 24 px drugdje u redu; Monri stoji iza Identity
   Checka, koji svoju prazninu nosi na desnoj strani. Ova dva pomaka vracaju
   sve razmake na 24-26 px. Praznina se time ne rese: ostaje 24 px slobodnog
   prostora, a propisano je pola visine znaka, dakle 13 px. */
.podnozje .placanje-logotipi__red--kartice li:last-child {
  margin-left: -6px;
}

.podnozje .placanje-logotipi__red--obrada {
  margin-left: -4px;
}

/* Znak na bijeloj plocici: 22 px slike + 2 px razmaka + 2 px ruba daje plocu
   od 26 px, tocno onoliko koliko je visoka crna ploca Mastercarda i Maestra
   iz pravila ispod. */
.podnozje .placanje-logotipi__plocica img {
  height: 22px;
}

.podnozje .placanje-logotipi__kartica,
.podnozje .placanje-logotipi__zastita,
.podnozje .placanje-logotipi__monri {
  width: auto;
  height: 30px;
}

/* Jedini znak sa svojim minimumom u pikselima: 90 px znaka = 105 px platna. */
.podnozje .placanje-logotipi__zastita.je-idcheck {
  height: 30px;
}

/* Znak Visa Secure lezi u svojoj datoteci 6,6 % ispod sredine platna (bijeli
   pojas je samo iznad njega), Monri u negativ inacici 3,6 %. Na ovim je
   velicinama to po jedan piksel i vidi se u redu, pa ga vraca pomak -- pomak,
   dakle, a ne rezanje, skaliranje ni prebojavanje. */
.podnozje .placanje-logotipi__plocica .placanje-logotipi__zastita,
.podnozje .placanje-logotipi__monri.je-noc {
  transform: translateY(-1px);
}

/* --- pravni red --- */
.podnozje .podnozje__dno {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  /* Razmak iznad ove crte pripada bloku sa znakovima placanja i pise ga
     .podnozje__placanje; ovdje bi bio drugi razmak iznad iste crte. */
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--pd-crta-blaga);
  color: var(--pd-prigusen);
  font-size: 13px;
}

/* GH #707. Clansko podnozje nema blok sa znakovima placanja, pa razmak iznad
   crte pravnog reda nema tko nositi i crta dodiruje dno stupaca. Susjedni
   selektor pogadja tocno taj slucaj i nijedan drugi: pravni red stoji odmah
   iza stupaca samo kad znakova nema. Zato ovdje, a ne razred na clanskoj
   stranici -- razlika je u tome sto je u podnozju, ne u tome tko ga gleda. */
.podnozje .podnozje__vrh + .podnozje__dno {
  margin-top: var(--pd-odmak-od-stupaca);
}

.podnozje .podnozje__pravni,
.podnozje .podnozje__autorstvo {
  margin: 0;
}

/* --- uski zaslon --- */
@media (max-width: 620px) {
  /*
     Kontakt nosi adresu e-poste, koja je sira od pola uskog zaslona: ondje se
     lomi usred rijeci ("novizivotfitness@gmai / l.com"), pa dobiva cijelu
     sirinu. "dense" je uz to zato sto bi inace do njega ostala rupa -- tako
     sljedeci kratki stupac sjeda u prazno mjesto iznad.
  */
  .podnozje .podnozje__stupci {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }

  .podnozje .podnozje__stupci .je-kontakt {
    grid-column: 1 / -1;
  }

  /*
     Znakovi placanja na mobitelu. Tri stvari odjednom: manji razmjer, jednak
     razmak medu redovima i medu plocicama (okomiti je prije bio vidljivo veci
     od vodoravnog), i tri pa cetiri umjesto 3-2-2. Ispod oko 350 px treci red
     ne stane uz druga dva i pada u vlastiti redak, vidi placanje-logotipi.css.

     Red kartica dobiva cijelu sirinu, pa druga dva reda -- dva programa
     provjere, Monri i banka -- padaju zajedno u drugi. Bez toga se svaki od tri
     popisa lomi u svoj red, Monri i banka zavrse sami u trecem i time dobiju
     vaznost kakvu nemaju.
  */
  .podnozje .placanje-logotipi__znakovi,
  .podnozje .placanje-logotipi__red {
    gap: 10px;
  }

  .podnozje .placanje-logotipi__red .placanje-logotipi__plocica {
    padding: 1px 5px;
  }

  /* Isti odnos kao na sirokom zaslonu, samo manji: ploca 22 px (18 + 2 + 2),
     crna ploca Mastercarda i Maestra 22,2 px (26 px slike). Znakovi koji svoju
     podlogu nose u sebi ostaju na 26 px, tocno kako su i bili -- izjednacavanje
     je ovdje spustilo bijelu plocu na njih, a ne obrnuto, pa blok ostaje visok
     kao prije. Identity Check se ne navodi jer je na svojem minimumu od 30 px
     i nize ne ide. */
  .podnozje .placanje-logotipi__plocica img {
    height: 18px;
  }

  .podnozje .placanje-logotipi__kartica,
  .podnozje .placanje-logotipi__monri {
    height: 26px;
  }

  .podnozje .placanje-logotipi__red--kartice {
    flex-basis: 100%;
  }

  /* Donji razmak je ovdje jos manji, jer se red lomi u dva pa zadnji red vise
     nema crnu plocu Mastercarda: najnizi piksel je Monri, a on zavrsava 6,8 px
     iznad svojeg okvira. Bez ovoga bi razmak ispod bloka izgledao 3 px veci
     od onoga iznad, iako je u CSS-u jednak. */
  .podnozje .podnozje__placanje {
    padding-bottom: calc(var(--pd-placanje-razmak) - 5px);
  }
}

/* Jedan stupac tek ispod sirine najuzeg telefona koji se jos susrece (320 px).
   Prije je granica bila 380 px, a to je vise od 360 i 375 px, sirina na kojima
   je vecina telefona -- podnozje bi se ondje slozilo u isti okomiti niz od
   kojeg se krenulo. */
@media (max-width: 340px) {
  .podnozje .podnozje__stupci {
    grid-template-columns: 1fr;
  }
}