/* ===================================================================
   Frigo Menadžment — karta boja

   Uzorak je isti kao u vizuelizatoru i paleti (.swatch iz pages.css):
   blok boje, ispod mono natpis. Razlika je što se ovde ne bira — karta
   se čita — pa nema ni dugmeta, ni stanja pod mišem, ni pomeranja.
   Pomeraj pod mišem na nečemu što se ne klikne je lažna ponuda.

   Sve je pisano pod `.frigo-karta`, da plugin uz tuđu temu ne prepravi
   ništa izvan svog elementa.
   =================================================================== */

.frigo-karta, .frigo-karta *,
.frigo-karta *::before,
.frigo-karta *::after { box-sizing: border-box; }

.frigo-karta {
    display: grid;
    gap: clamp(26px, 2.8vw, 42px);
}

/* ---------- Grupa ---------- */
.frigo-karta .karta-grupa { display: grid; gap: 14px; }

.frigo-karta .karta-head { display: grid; gap: 6px; }

.frigo-karta .h-sm {
    margin: 0;
    font-family: var(--font-display, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 700;
    letter-spacing: -0.014em;
    line-height: 1.3;
}
.frigo-karta .small { margin: 0; font-size: 14px; line-height: 1.58; }

/* Tanka crta ispod naslova grupe: list iz kataloga ima isti red između
   odeljaka, a bez nje se dve susedne grupe slepe u jednu mrežu. */
.frigo-karta .karta-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-l, rgba(20, 24, 27, 0.11));
}

/* ---------- Uzorci ---------- */
.frigo-karta .karta-tonovi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--krt-min, 104px), 1fr));
    gap: 12px;
}

.frigo-karta .karta-ton {
    display: grid;
    gap: 6px;
    align-content: start;
    border: 1px solid var(--line-l, rgba(20, 24, 27, 0.11));
}

.frigo-karta .karta-ton i {
    display: block;
    height: var(--krt-h, 62px);
    background-position: center;
    background-size: cover;
}

.frigo-karta .karta-ton span {
    display: block;
    padding: 0 8px;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.frigo-karta .karta-ton em {
    display: block;
    padding: 0 8px;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.frigo-karta .karta-ton b {
    display: block;
    padding: 0 8px;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #6FA86C;
}

/* Poslednji red teksta nosi donji razmak, pa uzorak bez prevoda i bez
   oznake lagera nije niži od suseda u istom redu mreže. */
.frigo-karta .karta-ton > :last-child { padding-bottom: 8px; }

/* Catalogue circles keep the supplied grain visible and labels centred. */
.frigo-karta--round .karta-ton { border: 0; text-align: center; justify-items: center; }
.frigo-karta--round .karta-ton i {
    width: min(var(--krt-h, 78px), 100%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 1px 2px 3px rgba(255, 255, 255, .25), inset -2px -3px 4px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .14);
}
.frigo-karta--round .karta-tonovi { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--krt-min, 104px)), 1fr)); }

/* ---------- Napomena ---------- */
.frigo-karta .karta-note {
    max-width: 68ch;
    padding-top: 4px;
}

/* ---------- Podloga ---------- */
.frigo-karta--light .h-sm { color: var(--tx-dark, #14181B); }
.frigo-karta--light .small { color: var(--tx-mute-d, #586168); }
.frigo-karta--light .karta-ton span { color: var(--tx-dark, #14181B); }
.frigo-karta--light .karta-ton em { color: var(--tx-mute-d, #586168); }

.frigo-karta--dark .h-sm { color: var(--tx-light, #F2F5F6); }
.frigo-karta--dark .small { color: var(--tx-mute-l, #98A1A7); }
.frigo-karta--dark .karta-head { border-bottom-color: var(--line-d, rgba(242, 245, 246, 0.13)); }
.frigo-karta--dark .karta-ton { border-color: var(--line-d, rgba(242, 245, 246, 0.13)); }
.frigo-karta--dark .karta-ton span { color: var(--tx-light, #F2F5F6); }
.frigo-karta--dark .karta-ton em { color: var(--tx-mute-l, #98A1A7); }

/* ---------- Poruka uredniku ---------- */
.frigo-karta-notice {
    padding: 18px 20px;
    border: 1px dashed var(--red, #B01F26);
    color: var(--tx-dark, #14181B);
    font-size: 14px;
}
.frigo-karta-notice p { margin: 0 0 6px; }
.frigo-karta-notice p:last-child { margin-bottom: 0; }

/* ---------- Osnovni font ----------
   Sve u elementu što nije naslov (`--font-display`) ni sitan natpis
   (`--font-mono`) ide odavde. Bez ovoga ti delovi nemaju nijedan
   `font-family`, pa nasleđuju font teme i ne menjaju se kad urednik
   izabere font u panelu ili na elementu.

   `inherit` kao rezerva: dok font nije izabran, ponaša se tačno kao
   da pravila nema. */
.frigo-karta { font-family: var(--font-body, inherit); }