/* placanje-logotipi.css -- logotipi kartica, 3-D Secure programa i Monrija (GH #431).

   ZASTO VLASTITA DATOTEKA. Ovaj blok stoji na cetiri stranice koje ne dijele
   isti sloj stilova: landing.html i splash.html nose v5-base.css, /placanje uz
   njega jos i checkout-modern.css, a vise-informacija.html samo main.css. Zato
   ovdje nema nijedne v5 varijable -- sve su vrijednosti zapisane, pa blok
   izgleda isto bez obzira koja ga stranica ucita. Dizajnerove datoteke ostaju
   netaknute; raspored poslije smiju preurediti, ovo su samo mjere koje traze
   pravila marki.

   ODABRANE DATOTEKE, po jedna za svaku marku, i zasto bas ta:

   visa.jpg (400x250) -- od tri isporucene Visine datoteke (37x23 gif, 80x50
   gif, 400x250 jpg) jedina ima dovoljno piksela za prikaz na 70 px na ekranu
   dvostruke gustoce, gdje treba 140 px. Rub joj je cisto bijel pa se stapa s
   plocicom ispod.

   mastercard.png i maestro.png (140x89 i 140x90) -- to su Acceptance Mark, a
   ne Brand Mark. Mastercardova pravila razdvajaju ta dva: Brand Mark sluzi
   promidzbi njihovih proizvoda, a Acceptance Mark se stavlja ondje gdje se
   kartica prihvaca, izrijekom i na stranice trgovaca. Poslana je inacica 2x,
   jer je 1x od 70x45 tocno upola manja od onoga sto trazi ekran dvostruke
   gustoce. Ta je 2x datoteka usto i manja na disku: maestro 1x nosi 15 kB
   XMP zapisa uz 1,4 kB slike, dok 2x nema nista osim slike -- 2,6 kB za
   dvostruko vise piksela. Nije dakle ni krivo imenovana ni ostecena, nego
   ociscena, i zato je uzeta ona.

   visa-secure.jpg -- plava, ne crna. Visin list uz oznaku nudi obje za ekran,
   a crnu posebno oznacava za prodajno mjesto i tiskane materijale. Mastercard
   uz to trazi da se marke prikazuju u istoj razini boje kao ostale, a red
   kartica je u punoj boji, pa je i ovdje puna boja.

   mastercard-identity-check.png -- vodoravna inacica. Datoteka na platnu od
   2102x600 nosi znak od 1803x304 i 150 px praznine sa svake strane, a to je
   tocno onaj razmak koji njihova pravila traze (polovica visine simbola, a
   simbol je visok 300 px). Praznina se zato ne resa: ona je dio propisanog
   znaka.

   monri.png (212x98) -- Monri salje istu sliku i u 1577x745, ali za prikaz na
   106 px dovoljno je 212 px i to je tocno dvostruka gustoca; veca datoteka
   bila bi 44 kB za isti piksel na ekranu.

   VELICINE. Kartice se prikazuju na 70 px sirine -- to je najveca mjera iz
   Mastercardove tablice za Acceptance Mark (46, 54, 62, 70) i ujedno prava
   velicina poslanih datoteka, pa se nijedna ne rasteze preko svoje. Najmanja
   dopustena je 34 px, dakle dvostruko manja od ove. Visa na istoj sirini
   ispada 70x44, a Mastercard i Maestro 70x45, pa su sve tri jednake, kako
   trazi pravilo o jednakoj velicini svih prihvacenih marki.

   Mjere ispod vrijede ondje gdje je ovaj red sadrzaj stranice, dakle na
   /placanje. U podnozju (GH #458) je to zavrsni red uz pravne podatke i ondje
   je manji, a i racuna se drukcije: podnozje.css izjednacuje ono sto se vidi,
   a ne visinu datoteke, jer je udio vidljivog u platnu razlicit od znaka do
   znaka. Znak na bijeloj plocici ide na 22 px, a znak koji svoju podlogu nosi
   u sebi na 30 px (20 i 28 px na uskom zaslonu), pa svih pet ploca ispadne
   jednako visoko; Identity Check na 30 px stoji na svojem propisanom minimumu
   od 90 px sirine znaka. Datoteke su iste, mijenja se samo prikazana velicina,
   i sve je iznad minimuma navedenih nize.

   Programi provjere identiteta dobivaju jednako visok okvir, 56 px, jer i
   Mastercard i Visa traze da nijedna marka ne bude prikazana manje od druge.
   Identity Check je vodoravan a Visa Secure kvadratna, pa se jednakost moze
   izraziti samo visinom okvira; Identity Check unutar tog okvira izgleda
   manje jer nosi propisanu prazninu u samoj datoteci, a nju ne diramo.
   Sirina znaka Identity Check tako ispada oko 150 px, a najmanja dopustena
   je 90 px.

   RAZMACI. Mastercard mjeri prazninu oko Acceptance Marka sirinom slova "m"
   iz rijeci "maestro"; ono je u datoteci od 140 px siroko 13 px, dakle 6,5 px
   na prikazu od 70 px. Razmak izmedu znakova je 16 px, dakle dvoipol puta
   veci, i jos mu se dodaje unutarnji rub plocice. Razmak izmedu redova je
   najmanje 24 px, jer pravila za Identity Check traze znatnu prazninu prema
   znakovima prihvacenih kartica; kad redovi stoje jedan uz drugi, taj razmak
   je 36 px.

   DVIJE INACICE UMJESTO JEDNE BIJELE PLOHE (GH #458). Ovo je jedina stvarna
   odluka oko tamne teme i nije kozmeticka.

   Poslane datoteke nose pozadinu u sebi: Visa, Visa Secure i Monri imaju cisto
   bijelu, Mastercard i Maestro crnu koja je dio Acceptance Marka, a Identity
   Check je proziran s crnim slovima. Do #458 je zato cijeli blok stajao na
   jednoj bijeloj plocici -- jedina podloga na kojoj svih sest radi odjednom --
   i ta je plocica na tamnoj stranici ispadala najsvjetlija ploha podnozja.

   Monri i Mastercard isporucuju i sluzbene negativ inacice (monri-negativ.png
   iz monri_footer_negativ.png, mastercard-identity-check-negativ.png iz
   mc_idcheck_hrz_rgb_rev.png). Obje su iste velicine kao dnevne i obje imaju
   pravi alfa kanal, pa na tamnoj temi idu izravno na podlogu stranice. Nijedna
   bitmapa nije uredivana: birana je druga datoteka koju su marke isporucile.

   Visa i Visa Secure negativ inacicu nemaju -- Visa salje samo bijeli JPEG i
   dva sicusna GIF-a, a Visa Secure "blk" i "blu", gdje je to boja znaka a ne
   pozadine. Prebojati ih ne smijemo: Mastercard izrijekom nabraja prebojavanje
   pozadine Acceptance Marka medu pogreskama, a isto vrijedi i za ostale marke.
   Zato njih dvoje i dalje stoje na bijelom, ali svaki na svojoj maloj plocici.
   Bijelo se time s jedne plohe preko svih sedam znakova smanjilo na tri male
   (Visa, Visa Secure i, od GH #524, Raiffeisen), a Mastercard i Maestro na
   svojim crnim karticama na tamnom podnozju citaju kao znacke, a ne kao
   strana ploha.

   Plocica mora biti tocno #ffffff, jer je to boja koju te dvije datoteke
   (Visa i Visa Secure) nose u sebi; svaka druga nijansa ostavila bi vidljiv
   bijeli okvir oko znaka.

   TRI STANJA TEME, pa se inacica bira CSS-om a ne skriptom: svijetla paleta
   stoji na golom pravilu, tamna pod medijskim upitom uz :root:not([data-tema=
   "svijetlo"]) i jos jednom pod :root[data-tema="tamno"]. Pravilo napisano
   samo u jednom od ta dva bloka ne bi vrijedilo u trecem stanju. */

.placanje-logotipi {
  margin-top: 20px;
}

.placanje-logotipi__oznaka {
  display: block;
  margin-bottom: 10px;
  font-size: .82rem;
  letter-spacing: .02em;
  opacity: .85;
}

/* --- tri reda: jedan uz drugi kad ima mjesta, jedan ispod drugog kad nema --- */
.placanje-logotipi__znakovi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
}

.placanje-logotipi__red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Svaki znak dobiva jednak okvir, pa red ostaje ujednacen i kad je bijela
   plocica samo ispod tri od sedam znakova. */
.placanje-logotipi__red li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
}

/* Bijela ostaje samo ondje gdje je zapecena u datoteku. */
.placanje-logotipi__red .placanje-logotipi__plocica {
  border-color: rgba(30, 30, 30, .12);
  background: #ffffff;
}

.placanje-logotipi__red a {
  display: block;
  border: 0;
  text-decoration: none;
}

/* Sirina ili visina, nikad oboje: druga mjera ostaje auto pa se nijedan znak
   ne rasteze ni ne reze, sto sve tri marke izrijekom zabranjuju. */
.placanje-logotipi__kartica {
  display: block;
  width: 70px;
  height: auto;
}

.placanje-logotipi__zastita {
  display: block;
  width: auto;
  height: 56px;
}

.placanje-logotipi__monri {
  display: block;
  width: 106px;
  height: auto;
}

/* Banka prihvatitelj (GH #524). Samo visina, a sirina auto: u podnozju visinu
   znaka na plocici postavlja podnozje.css i ne dira sirinu, pa bi zadana
   sirina ondje rastegnula sliku. 48 px daje plocicu gotovo iste visine kao
   Monri u istom redu, pa znak banke ne ispada najtezi u bloku. Datoteka je
   2000x741 s prozirnim rubom; plocica je ona koju Visa vec ima. */
.placanje-logotipi__banka {
  display: block;
  width: auto;
  height: 48px;
}

/* Razmak izmedu Monrija i banke (GH #524). Obradivac i banka prihvatitelj nisu
   ista uloga u transakciji, pa ne smiju stajati stisnuti kao da su jedan znak:
   u trecem redu razmak je 48 px umjesto 16 px, pa vidljiva praznina izmedu njih
   u podnozju raste s 21 na 53 px (na /placanje je 63 px). Samo razmak stupaca,
   a ne margina na znaku, da banka pri lomu reda ne stoji uvucena u novom retku.
   Tri klase u selektoru jer podnozje.css razmak redova zapisuje vlastitim
   pravilom s dvije klase i na uskom zaslonu ga smanjuje na 10 px; ta pravila
   ostaju kakva jesu, a ovo ih nadjacava samo za treci red. Posljedica: na
   zaslonu uskom oko 350 px treci red podnozja ne stane uz druga dva i pada u
   vlastiti redak, pa je podnozje ondje za jedan redak (40 px) vise. */
.placanje-logotipi .placanje-logotipi__znakovi .placanje-logotipi__red--obrada {
  column-gap: 48px;
}

/* --- dnevna i nocna inacica znaka --- */
.placanje-logotipi .je-noc {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svijetlo"]) .placanje-logotipi .je-dan {
    display: none;
  }
  :root:not([data-tema="svijetlo"]) .placanje-logotipi .je-noc {
    display: block;
  }
}

:root[data-tema="tamno"] .placanje-logotipi .je-dan {
  display: none;
}
:root[data-tema="tamno"] .placanje-logotipi .je-noc {
  display: block;
}