/**
 * ============================================================
 * MaskeZaTelefon.rs — Brendovi (sekcija „Pronađi masku“)
 * ============================================================
 *
 * Fajl: css/_brendovi.css
 * Renderuje ga shortcode [mzm_brendovi] (inc/mzm-brendovi.php)
 *
 * Zavisi od: _design-tokens.css
 * ============================================================
 */

.mzm-brendovi {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* ==========================================================
 * 1. ISTAKNUTI BRENDOVI — grid velikih kartica
 * ==========================================================
 * `auto-fit` + `minmax` znači da broj kolona sledi broj brendova
 * i širinu ekrana. Radi isto sa 4, 5 ili 6 istaknutih — ne treba
 * dirati CSS kad klijent doda ili skloni brend.
 * Minimalna širina se prosleđuje iz shortcode-a (--mzm-br-min).
 * ========================================================== */

/* `--mzm-br-min` upisuje shortcode INLINE na element (mzm-brendovi.php,
   linija 312). Inline stil pobeđuje svako pravilo iz stylesheet-a, pa su
   `--mzm-br-min` override-i u @media blokovima ispod bili mrtvo slovo —
   izmereno 05.08.: na 360px je grid ostajao u jednoj koloni od 330px,
   iako mobilno pravilo traži 140px.

   Zato grid čita `--mzm-br-min-eff`, koju shortcode ne poznaje. Ovde se
   jednom postavi iz inline vrednosti, a breakpointi je dalje menjaju
   normalno. Ne diramo PHP i ne koristimo !important. */
.mzm-brendovi__grid {
  --mzm-br-min-eff: var(--mzm-br-min, 210px);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mzm-br-min-eff), 1fr));
  gap: clamp(0.625rem, 1.2vw, 0.875rem);
}

/* ⚠️ `auto-fit` prati ŠIRINU EKRANA, ne broj kartica.
   Šest istaknutih brendova na 1190px sadržaja davalo je **5 + 1** — poslednja
   kartica sama u drugom redu. Nije greška u gridu nego u pretpostavci:
   `auto-fit` napravi onoliko kolona koliko ih stane, a šesta nije stala.

   Klasa `--tacno` i `--mzm-br-broj` dolaze iz PHP-a, i to SAMO kad je
   istaknutih do šest. Preko toga se klasa ne ispisuje, pravilo se ne okine i
   ostaje `auto-fit` — sedam u redu bilo bi 155px po kartici, uže od mobilnog.

   ⚠️ Klasa, a ne samo promenljiva sa fallback-om: `repeat(var(--x, auto-fit), …)`
   deluje elegantno, ali `repeat(auto-fit, minmax(0, 1fr))` je degenerisan —
   `auto-fit` bez intrinzičnog minimuma nema po čemu da broji kolone.

   ⚠️ `minmax(0, 1fr)`, ne `1fr` — `1fr` ne dozvoljava kolonu užu od sadržaja,
   pa dugačak naziv brenda razvuče grid preko kutije.

   ⚠️ PRAG 1200, NE 900. Na 901px bi šest kolona dalo ~133px po kartici, uže
   nego na telefonu. Ispod 1200 ostaje zatečeno ponašanje — ono koje je
   odobreno u laptop prolazu (`F-036`). **Pojas 900–1199 sa šest brendova nije
   izmeren** — vidi PRAVILO BR. 1, taj pojas je već jednom bio slepa mrlja. */
@media screen and (min-width: 1200px) {
  .mzm-brendovi__grid--tacno {
    grid-template-columns: repeat(var(--mzm-br-broj), minmax(0, 1fr));
  }
}

.mzm-brend-karta {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--mzm-border, #e3e0f5);
  border-radius: var(--mzm-radius-md, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

a.mzm-brend-karta:hover,
a.mzm-brend-karta:focus-visible {
  border-color: var(--mzm-accent, #a313d1);
  box-shadow: 0 6px 20px rgba(163, 19, 209, 0.14);
  color: inherit;
}

a.mzm-brend-karta:focus-visible {
  outline: 2px solid var(--mzm-accent, #a313d1);
  outline-offset: 2px;
}

/* ── Gornji deo: slika ili tekstualni logo ── */

.mzm-brend-karta__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Odnos stranica umesto fiksne visine — kartice ostaju jednake
     bez obzira na širinu kolone. */
  aspect-ratio: 4 / 3;

  /* `min-height: 0` je uslov da `aspect-ratio` uopšte radi. Ovo je flex
     stavka unutar `.mzm-brend-karta`, a flex stavka ima `min-height: auto`
     — visina sadržaja postaje donja granica i tiho gazi odnos stranica.
     Izmereno 05.08.: na koloni od 330px odnos 3/2 traži 220px, a kutija
     je bila 328 — tačno logo 304 + 2×12 padinga. Odnos nije radio ništa,
     visinu je diktirala slika. */
  min-height: 0;

  padding: clamp(0.75rem, 2vw, 1.25rem);
  background-color: var(--mzm-surface, #f6f5ff);
}

.mzm-brend-karta__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Zamena kad brend nema sliku — naziv kao logo */
.mzm-brend-karta__tekst-logo {
  font-family: var(--mzm-font-family, inherit);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mzm-navy, #130a52);
  text-align: center;
  line-height: 1.15;
}

.mzm-brend-karta__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  padding: 4px 11px;
  border-radius: var(--mzm-radius-full, 999px);
  background-color: var(--mzm-accent, #a313d1);
  color: #ffffff;

  font-family: var(--mzm-font-family, inherit);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Donji deo: naziv, opis, strelica ── */

.mzm-brend-karta__telo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: clamp(0.75rem, 1.5vw, 1rem);
}

.mzm-brend-karta__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* dozvoljava skraćivanje dugog opisa */
}

.mzm-brend-karta__ime {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mzm-navy, #130a52);
  line-height: 1.3;
}

.mzm-brend-karta__opis {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.8125rem;
  color: #5d5a7a;
  line-height: 1.35;

  /* Dug opis se skraćuje sa … umesto da razvuče karticu */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mzm-brend-karta__strelica {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: #a9a3d6;
  transition: color 0.18s ease, transform 0.18s ease;
}

a.mzm-brend-karta:hover .mzm-brend-karta__strelica {
  color: var(--mzm-accent, #a313d1);
  transform: translateX(3px);
}

/* ==========================================================
 * 2. OSTALI BRENDOVI — male kartice sa logom
 * ========================================================== */

.mzm-brendovi__ostali {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.mzm-brend-mini {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  background-color: #ffffff;
  border: 1px solid var(--mzm-border, #e3e0f5);
  border-radius: var(--mzm-radius-md, 10px);

  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

a.mzm-brend-mini:hover,
a.mzm-brend-mini:focus-visible {
  border-color: var(--mzm-accent, #a313d1);
  background-color: rgba(163, 19, 209, 0.03);
  color: inherit;
}

a.mzm-brend-mini:focus-visible {
  outline: 2px solid var(--mzm-accent, #a313d1);
  outline-offset: 2px;
}

.mzm-brend-mini__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background-color: var(--mzm-surface, #f6f5ff);
  overflow: hidden;
}

.mzm-brend-mini__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Bez loga — prvo slovo naziva */
.mzm-brend-mini__inicijal {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mzm-accent, #a313d1);
  line-height: 1;
}

.mzm-brend-mini__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mzm-brend-mini__ime {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mzm-navy, #130a52);
  line-height: 1.3;
}

.mzm-brend-mini__opis {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.6875rem;
  color: #5d5a7a;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================
 * 3. TABLET (do 900px)
 * ========================================================== */

@media screen and (max-width: 900px) {

  /* Ispod ove širine 5 kolona bi bilo preusko — spuštamo prag
     da grid sam pređe na 2–3 kolone. */
  .mzm-brendovi__grid {
    --mzm-br-min-eff: 160px;
  }

  .mzm-brend-karta__media {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================
 * 4. MOBILNI (do 549px)
 * ========================================================== */

@media screen and (max-width: 549px) {

  .mzm-brendovi__grid {
    --mzm-br-min-eff: 140px;
    gap: 8px;
  }

  .mzm-brend-karta__telo {
    padding: 10px;
  }

  .mzm-brend-karta__ime  { font-size: 0.875rem; }
  .mzm-brend-karta__opis { font-size: 0.75rem; }

  /* Badge je nosio desktop vrednosti (11px, padding 4/11). Na koloni od
     161px „POPULARNO" time zauzima oko polovine širine kartice i takmiči
     se sa logom. Spušten u dva koraka, 05.08.: prvo na 10px, pa na 9px.

     9px je ispod preporučene granice za tekst na telefonu — ovde je
     prihvatljivo jer je labela kratka, velikim slovima i nije nosilac
     informacije: kartica se razume i bez nje. Ne primenjivati ovu
     veličinu na tekst koji se stvarno čita.

     `letter-spacing` je namerno podignut sa 0.03em na 0.05em — na malim
     veličinama razmak između slova čuva čitljivost bolje nego sama
     veličina fonta. */
  .mzm-brend-karta__badge {
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
  }

  /* Strelica na mobilnom samo troši prostor */
  .mzm-brend-karta__strelica {
    display: none;
  }

  .mzm-brendovi__ostali {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mzm-brend-mini {
    padding: 8px 10px;
    gap: 8px;
  }

  .mzm-brend-mini__logo {
    width: 28px;
    height: 28px;
  }

  /* Opis bi na dve kolone bio nečitljivo skraćen */
  .mzm-brend-mini__opis {
    display: none;
  }
}

/* ==========================================================
 * Link „Svi brendovi →" u zaglavlju sekcije — F-079, 06.09.2026.
 * ==========================================================
 *
 * ⚠️ LINK NIJE U TEMI. Živi u sadržaju početne strane, u `[ux_text]` bloku
 *    (`theme/homepage-shortcode.txt`, sekcija `mzm-find-phone`). Ovde su mu
 *    samo stilovi. **Menja se u editoru strane, ne uploadom.**
 *
 * ⛔ DO 06.09. JE NOSIO INLINE `style` — boju, debljinu, `text-decoration` i
 *    `font-size: 14px` upisane u sam `<a>`. **Inline tuče svaki CSS**, pa se
 *    veličina nije mogla promeniti odavde bez `!important`. Zato su inline
 *    stilovi SKINUTI iz sadržaja, a link je dobio klasu.
 *    ⚠️ Isti postupak je već primenjen na `__naslov` i `__podnaslov` — klase
 *       su dodate u markup umesto hvatanja po redosledu `[ux_text]` blokova.
 *
 * ⛔ REDOSLED IZMENE JE BITAN: **prvo ovaj fajl na server, pa tek onda
 *    sadržaj strane.** Obrnuto ostavlja link bez boje i debljine — običan
 *    crn tekst — dok se CSS ne popne.
 *
 * ⚠️ VELIČINA SE RAZLIKUJE PO ŠIRINI, I TO JE NAMERA:
 *
 *        ≥ 550px   **18px**   ← menjano
 *        < 550px   **14px**   ← zatečeno, NE dirati
 *
 *    Problem je bio SAMO na laptopu: 14px pored naslova od ~40px je delovalo
 *    sitno. Išlo je 14 → 16 → 18, uz merenje na svakom koraku.
 *    ⛔ **Na mobilnom je 14px oduvek bilo dobro.** Kad je 18px stiglo i tamo,
 *       Vera je odmah rekla da je preveliko — i bila je u pravu: pored
 *       naslova od 209px, link od 121px uzima trećinu reda.
 *
 * ⚠️ **„Popravi na jednom mestu" ne znači „primeni svuda".** Zahtev je bio
 *    vezan za laptop; da je ostao globalan, pokvario bi prikaz koji niko
 *    nije prijavio.
 *
 * ⛔ OVDE JE 06.09. PRVO PISALO da se zajedno sa ovim povećavaju i karusel
 *    linkovi („Prikaži sve", `.mzm-kar__more`), jer „imaju istu ulogu na
 *    istoj strani". **Izmereno: na početnoj ih ima NULA.** Nikad se ne
 *    pojavljuju zajedno sa ovim linkom, pa je obrazloženje palo i izmena
 *    `_istaknuti.css` je **vraćena na zatečeno**.
 *    ⚠️ Komentar u CSS-u je tvrdio da su dva linka namerno izjednačena —
 *       i to je bilo tačno kad je pisano. **Tvrdnja iz komentara se proverava
 *       na strani, ne prepisuje.**
 * ========================================================== */

.mzm-find-phone__sve {
  font-size: 1.125rem;
  font-weight: var(--mzm-font-semibold);
  color: var(--mzm-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--mzm-transition-fast);
}

.mzm-find-phone__sve:hover {
  color: var(--mzm-accent-hover);
}

.mzm-find-phone__sve-red {
  margin: 12px 0 0;
}

/* ── Mobilni: link ide LEVO, uz naslov ──────────────────────────────────
 *
 * Izmereno 06.09.2026. na 390px, zatečeno stanje:
 *
 *     naslov   15 – 375
 *     link    281 – 375     ← sam, skroz desno
 *
 * Desne ivice se poklapaju sa mrežom kartica, pa formalno „nije pobegao" —
 * ali stoji odvojen od svega ostalog i tako izgleda. Vera: „deluje da malo
 * beži", i to se **više primeti na mobilnoj verziji**.
 *
 * ⚠️ SHORTCODE VEĆ TRAŽI LEVO. Kolona ima `align__sm="left"`, a link je i
 *    dalje desno — ta instrukcija ne stiže. Ovo je popravlja iz CSS-a, ne
 *    diranjem `align` atributa: atribut je već jednom rečen i nije poslušan.
 *
 * ⚠️ Prag 549px, ne 768. Kolone su `span 8 / span 4` sa `span__sm="12"` —
 *    slažu se jedna ispod druge tek ispod 550px. Između 550 i 849 stoje
 *    jedna pored druge i link tamo TREBA da bude desno.
 *
 * Gornja margina pada 12px → 4px: kad je link ispod naslova a ne pored
 * njega, tih 12px ga dodatno odvaja od onoga čemu pripada.
 * ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 549px) {

  /* ⚠️ PRVO JE 06.09. LINK BIO SPUŠTEN LEVO, ISPOD NASLOVA. Radilo je, ali
   *    se Veri nije svidelo — traži ga **pored** naslova, kao na desktopu.
   *
   * Izmereno da staje, na 390px:
   *
   *     tekst naslova   166px
   *     link            108px  (na 16px fonta)
   *     ────────────────────────
   *     zbir            274px   od ~360 raspoloživih
   *
   * ⚠️ Link je u međuvremenu porastao na 18px, pa mu širina raste na ~121px.
   *    Zbir ~287px — i dalje staje, ali je rezerva pala sa 86 na ~73px.
   *    **Ako naslov ikad ponovo postane duži** *(bio je „Pronađi masku za
   *    svoj telefon" do 05.08.)*, ovo se lomi. Meri pre nego što ga vratiš.
   *
   * ⚠️ Flatsome kolone su `span__sm="12"`, dakle slažu se jedna ispod druge.
   *    Ovde se red vraća u `flex` da bi stajale jedna pored druge. Menja se
   *    CSS, ne shortcode — kolona već ima `align__sm="left"` koji ne stiže,
   *    pa atributima tog reda više ne verujem.
   *
   * ⚠️ `:has()` je vezan za `.row` i pogađa **samo red koji sadrži link**.
   *    Golo `:has()` bi pogodilo svakog pretka koji ga sadrži (`D-056`).
   */
  .mzm-find-phone .row:has(.mzm-find-phone__sve-red) {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
  }

  .mzm-find-phone .row:has(.mzm-find-phone__sve-red) > .col {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }

  .mzm-find-phone .row:has(.mzm-find-phone__sve-red) > .col:first-child {
    flex: 1 1 auto;
  }

  .mzm-find-phone__sve-red {
    text-align: right;
    margin-top: 0;
  }

  /* ⛔ NAZAD NA ZATEČENIH 14px. Vidi zaglavlje sekcije — povećanje je
   *    traženo za laptop, a na mobilnom je zatečena veličina bila dobra.
   *
   * Izmereno na 390px, posle povratka:
   *
   *     tekst naslova   209px  (15–224)
   *     link             ~94px  (na 14px fonta; bio je 121px na 18px)
   *     ─────────────────────────
   *     zbir            ~303px  od ~360 raspoloživih
   *
   * Rezerva raste sa ~30px na ~57px, pa „pored naslova" stoji sigurnije
   * nego na 18px.
   */
  .mzm-find-phone__sve {
    font-size: 0.875rem;
  }
}