/**
 * ============================================================
 * MaskeZaMob.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);
}

.mzm-brend-karta {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--mzm-border, #e0e7ef);
  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, #3c83f5);
  box-shadow: 0 6px 20px rgba(60, 131, 245, 0.14);
  color: inherit;
}

a.mzm-brend-karta:focus-visible {
  outline: 2px solid var(--mzm-accent, #3c83f5);
  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, #f5f6f8);
}

.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, #0e1629);
  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, #3c83f5);
  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, #0e1629);
  line-height: 1.3;
}

.mzm-brend-karta__opis {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.8125rem;
  color: #64748b;
  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: #94a3b8;
  transition: color 0.18s ease, transform 0.18s ease;
}

a.mzm-brend-karta:hover .mzm-brend-karta__strelica {
  color: var(--mzm-accent, #3c83f5);
  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, #e0e7ef);
  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, #3c83f5);
  background-color: rgba(60, 131, 245, 0.03);
  color: inherit;
}

a.mzm-brend-mini:focus-visible {
  outline: 2px solid var(--mzm-accent, #3c83f5);
  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, #f5f6f8);
  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, #3c83f5);
  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, #0e1629);
  line-height: 1.3;
}

.mzm-brend-mini__opis {
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.6875rem;
  color: #64748b;
  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;
  }
}