/* =====================================================
   voluntariada.ro — custom theme overrides
   ===================================================== */

/* Font — Inter era deja încărcat (Google Fonts, toate layout-urile), dar niciodată aplicat
   efectiv: --font-sans (folosit de --default-font-family din bundle-ul Tailwind) rămânea pe
   stack-ul de sistem, deci site-ul randa cu fontul implicit al fiecărui OS, nu cu Inter.
   Suprascris o singură dată aici — custom.css e CSS fără @layer, deci câștigă automat peste
   @layer theme din styles.css, indiferent de ordinea de încărcare. */
:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Raza de bază, redusă la jumătate (8px -> 4px) — experiment, la cererea user-ului, ca să
       vadă cum arată platforma cu colțuri mai puțin rotunjite. Toate razele derivate
       (rounded-sm/md/lg/xl, .kt-card, .kt-btn, .kt-input) pornesc de la acest singur token. */
    --radius: 0.25rem;
}

/* Butoane/inputuri fixate explicit la 4px — cu --radius la 4px de mai sus, formula lor
   normală (rounded-md = --radius - 2px) ar fi scăzut la 2px; cerut explicit ca astea să
   rămână la 4px, restul (carduri etc., rounded-xl) urmând mai departe --radius de mai sus. */
.kt-btn, .kt-btn-lg, .kt-btn-sm,
.kt-input, .kt-input-lg, .kt-input-sm, .kt-input-addon,
.kt-select, .kt-select-lg, .kt-select-sm,
.kt-textarea, .kt-textarea-lg, .kt-textarea-sm {
    border-radius: 4px;
}

/* Light mode */
html.light {
    --background: #FAF8F5;
    --muted: #F0EDE8;
}

/* Dark mode — Metronic default, nu modificam */

/* Input-uri native de dată/oră — fără asta, selectorul rămâne mereu alb
   pe dark mode (unele fișiere aveau style="color-scheme: light" inline,
   care ar fi câștigat oricum în fața acestei reguli — verifică și elimină-l) */
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark input[type="number"] {
    color-scheme: dark;
}

/* object-cover / object-contain — lipsesc din CSS-ul precompilat (nefolosite în demo-ul
   original Metronic), deci cădeau silențios peste tot unde erau folosite (~30 fișiere):
   imaginile (avataruri, logo-uri ONG) se întindeau/deformau în loc să fie decupate corect.
   Găsit 2026-08-01 la logo-ul ONG din cardul de Pașaport. */
.object-cover {
    object-fit: cover;
}
.object-contain {
    object-fit: contain;
}

/* font-bold — lipsește din CSS-ul precompilat (niciun demo Metronic original nu folosește
   greutatea 700, doar până la font-semibold/600), deci cădea silențios peste tot unde era
   folosit (~60 locuri) — textul rămânea la greutatea implicită (400), nu la aldin real.
   Găsit 2026-08-03, la un audit sistematic (font-semibold funcționează, font-bold nu — diferența
   600 vs 400 e greu de sesizat cu ochiul liber, mai ales în capturi comprimate). */
.font-bold {
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
}

/* icon-svg (componenta <x-icon>) — reset-ul de bază Tailwind forțează svg { display:block }
   peste tot. Într-un container flex (kt-btn, kt-badge, chip-link etc.) e inofensiv — un flex
   item își ignoră propriul display. Dar într-un <div>/<span> simplu, block rupe rândul: o
   iconiță urmată de text pe același rând (ex. "🗓 22 Aug · Cluj-Napoca") sare pe rândul ei
   proprie, cu textul căzut dedesubt — bug sistemic, semnalat de user pe caseta „Acțiuni active",
   confirmat existent și în alte liste. inline-block rezolvă peste tot dintr-o mișcare: se
   comportă identic cu block în interiorul unui flex (fără efect vizual acolo), dar curge
   normal, inline, lângă text oriunde altundeva. Verificat: nicio iconiță din proiect nu
   folosește mx-auto (singurul caz în care block ar fi fost necesar pentru centrare) — toate
   iconițele mari, centrate, stau în containere text-center, care centrează identic inline-block.
   Găsit 2026-08-19. */
.icon-svg {
    display: inline-block;
}

/* Input-uri de tip file — cel nativ, nestilizat, arăta doar ca text simplu
   ("Alege fișierul  Nu ai ales niciun fișier"), fără nicio clasă file:* în
   bundle. Buton real pentru partea "Alege fișier", temă-aware. */
.kt-file-input {
    font-size: 0.8125rem;
    color: var(--secondary-foreground);
}
.kt-file-input::file-selector-button {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    margin-right: 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kt-file-input::file-selector-button:hover {
    background: var(--accent);
}

/* =====================================================
   ACCENT PRIMAR — Albastru #4A7EC7
   ===================================================== */

html.light,
html.dark {
    --primary: #4A7EC7;
    --primary-foreground: #ffffff;
}

/* =====================================================
   NAVBAR SECUNDAR — fundal corelat cu tema
   ===================================================== */

html.light .bg-muted {
    background-color: #EDE8E0 !important;
}

/* =====================================================
   CLASE UTILITARE — FUNDALURI CARDURI (tonuri subtile)
   ===================================================== */

.card-actiuni,
.card-profil-ong,
.card-info-actiune {
    background-color: rgba(74, 126, 199, 0.12) !important;
    border-color: rgba(74, 126, 199, 0.25) !important;
}

.card-voluntari,
.card-profil-voluntar {
    background-color: rgba(74, 158, 122, 0.12) !important;
    border-color: rgba(74, 158, 122, 0.25) !important;
}

.card-documente {
    background-color: rgba(123, 104, 181, 0.12) !important;
    border-color: rgba(123, 104, 181, 0.25) !important;
}

.card-statistici {
    background-color: rgba(232, 146, 58, 0.12) !important;
    border-color: rgba(232, 146, 58, 0.25) !important;
}

.card-alerte {
    background-color: rgba(212, 160, 23, 0.12) !important;
    border-color: rgba(212, 160, 23, 0.25) !important;
}

.card-meritas {
    background-color: rgba(232, 146, 58, 0.12) !important;
    border-color: rgba(232, 146, 58, 0.25) !important;
}

/* =====================================================
   SUB-ELEMENTE — nuanțe și mai light
   ===================================================== */

.card-actiuni .border.border-border.rounded-xl,
.card-profil-ong .border.border-border.rounded-xl,
.card-info-actiune .border.border-border.rounded-xl {
    background-color: rgba(74, 126, 199, 0.05) !important;
    border-color: rgba(74, 126, 199, 0.15) !important;
}

.card-statistici .border.border-border.rounded-xl {
    background-color: rgba(232, 146, 58, 0.05) !important;
    border-color: rgba(232, 146, 58, 0.15) !important;
}

.card-documente .border.border-border.rounded-xl {
    background-color: rgba(123, 104, 181, 0.05) !important;
    border-color: rgba(123, 104, 181, 0.15) !important;
}

.card-voluntari .border.border-border.rounded-xl,
.card-profil-voluntar .border.border-border.rounded-xl {
    background-color: rgba(74, 158, 122, 0.05) !important;
    border-color: rgba(74, 158, 122, 0.15) !important;
}

.card-voluntari .border-b.border-border {
    border-color: rgba(74, 158, 122, 0.15) !important;
}

.card-alerte .border-b.border-border {
    border-color: rgba(212, 160, 23, 0.15) !important;
}

.card-documente .border-b.border-border {
    border-color: rgba(123, 104, 181, 0.15) !important;
}

/* =====================================================
   BUTOANE CORELATE CU CASETELE
   ===================================================== */

/* Butoane în card-actiuni / card-profil-ong */
.card-actiuni .kt-btn-outline,
.card-profil-ong .kt-btn-outline,
.card-info-actiune .kt-btn-outline {
    border-color: rgba(74, 126, 199, 0.5) !important;
    color: #4A7EC7 !important;
}
.card-actiuni .kt-btn-outline:hover,
.card-profil-ong .kt-btn-outline:hover,
.card-info-actiune .kt-btn-outline:hover {
    background-color: rgba(74, 126, 199, 0.1) !important;
}

/* Butoane în card-voluntari */
.card-voluntari .kt-btn-outline,
.card-profil-voluntar .kt-btn-outline {
    border-color: rgba(74, 158, 122, 0.5) !important;
    color: #4A9E7A !important;
}
.card-voluntari .kt-btn-outline:hover,
.card-profil-voluntar .kt-btn-outline:hover {
    background-color: rgba(74, 158, 122, 0.1) !important;
}

/* Butoane în card-documente */
.card-documente .kt-btn-outline {
    border-color: rgba(123, 104, 181, 0.5) !important;
    color: #7B68B5 !important;
}
.card-documente .kt-btn-outline:hover {
    background-color: rgba(123, 104, 181, 0.1) !important;
}

/* Butoane în card-statistici */
.card-statistici .kt-btn-outline {
    border-color: rgba(232, 146, 58, 0.5) !important;
    color: #E8923A !important;
}
.card-statistici .kt-btn-outline:hover {
    background-color: rgba(232, 146, 58, 0.1) !important;
}

/* Butoane în card-alerte */
.card-alerte .kt-btn-outline {
    border-color: rgba(212, 160, 23, 0.5) !important;
    color: #D4A017 !important;
}
.card-alerte .kt-btn-outline:hover {
    background-color: rgba(212, 160, 23, 0.1) !important;
}

/* =====================================================
   DARK MODE
   ===================================================== */

html.dark .card-actiuni,
html.dark .card-profil-ong,
html.dark .card-info-actiune {
    background-color: rgba(74, 126, 199, 0.1) !important;
    border-color: rgba(74, 126, 199, 0.2) !important;
}

html.dark .card-voluntari,
html.dark .card-profil-voluntar {
    background-color: rgba(74, 158, 122, 0.1) !important;
    border-color: rgba(74, 158, 122, 0.2) !important;
}

html.dark .card-documente {
    background-color: rgba(123, 104, 181, 0.1) !important;
    border-color: rgba(123, 104, 181, 0.2) !important;
}

html.dark .card-statistici,
html.dark .card-meritas {
    background-color: rgba(232, 146, 58, 0.1) !important;
    border-color: rgba(232, 146, 58, 0.2) !important;
}

html.dark .card-alerte {
    background-color: rgba(212, 160, 23, 0.1) !important;
    border-color: rgba(212, 160, 23, 0.2) !important;
}

html.dark .card-actiuni .border.border-border.rounded-xl,
html.dark .card-profil-ong .border.border-border.rounded-xl {
    background-color: rgba(74, 126, 199, 0.04) !important;
    border-color: rgba(74, 126, 199, 0.12) !important;
}

html.dark .card-statistici .border.border-border.rounded-xl {
    background-color: rgba(232, 146, 58, 0.04) !important;
    border-color: rgba(232, 146, 58, 0.12) !important;
}

html.dark .card-documente .border.border-border.rounded-xl {
    background-color: rgba(123, 104, 181, 0.04) !important;
    border-color: rgba(123, 104, 181, 0.12) !important;
}

html.dark .card-voluntari .border.border-border.rounded-xl,
html.dark .card-profil-voluntar .border.border-border.rounded-xl {
    background-color: rgba(74, 158, 122, 0.04) !important;
    border-color: rgba(74, 158, 122, 0.12) !important;
}

html.dark .card-actiuni .kt-btn-outline,
html.dark .card-profil-ong .kt-btn-outline {
    border-color: rgba(74, 126, 199, 0.4) !important;
    color: #7BA8D9 !important;
}

html.dark .card-voluntari .kt-btn-outline,
html.dark .card-profil-voluntar .kt-btn-outline {
    border-color: rgba(74, 158, 122, 0.4) !important;
    color: #6BBD9A !important;
}

/* Hover vizibil pe rândurile din tabele */
.kt-table tbody tr:hover td {
    background-color: rgba(74, 126, 199, 0.06);
}

/* =====================================================
   HOVER CONSISTENT — bundle-ul Metronic e precompilat, nu genereaza
   clase Tailwind la cerere. Clase gen hover:bg-muted/30, hover:opacity-80,
   transition-opacity erau deja scrise in blade-uri dar nu existau in CSS,
   deci nu faceau nimic — de-aia hover-ul lipsea sau era inconsistent de la
   o pagina la alta. Regulile de mai jos le fac sa functioneze si
   standardizeaza 3 tipare: rand neutru (tabele/liste), chip colorat
   folosit ca link intreg, link text simplu.
   ===================================================== */

/* Rand neutru (tabele, liste) — ton discret la hover */
.hover\:bg-muted\/30:hover {
    background-color: var(--muted);
}

/* Link text simplu — subliniere la hover */
.kt-link:hover {
    text-decoration: underline;
}
.hover-underline:hover {
    text-decoration: underline;
}

/* Chip colorat folosit ca link intreg (fundal + bordura rgba) — la hover,
   nuanta proprie se intensifica usor, fara sa schimbe culoarea in sine */
.chip-link {
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.chip-link:hover {
    filter: brightness(0.92) saturate(1.35);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
html.dark .chip-link:hover {
    filter: brightness(1.3) saturate(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Casetă de logo ONG ("ONG-ul lunii", homepage) — bordură proprie, nu .chip-link (bordura
   var(--border) e aproape invizibilă pe var(--background), aproape aceeași nuanță; hover-ul
   de .chip-link, gândit pentru chip-uri colorate mari, era prea gros pe o casetă mică 120px). */
.logo-tile {
    border: 1px solid rgba(0,0,0,0.15);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.logo-tile:hover {
    border-color: rgba(0,0,0,0.35);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
html.dark .logo-tile {
    border-color: rgba(255,255,255,0.15);
}
html.dark .logo-tile:hover {
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Bandă "Hero" (160px) de sub header, pe paginile publice simple (Acțiuni, Clasament,
   Cum funcționează, Planuri, Termeni, Confidențialitate, Știri, ONG-ul lunii etc.) — aceeași
   fotografie reală ca Hero-ul mare de pe Homepage (hero-bg-2.jpg), cu același voal de citire,
   doar mai joasă. Paginile de profil (ONG/voluntar/alianță) au deja propriul Hero, neatinse. */
.page-hero-bg {
    background-image: linear-gradient(rgba(250,248,245,0.82), rgba(250,248,245,0.82)),
                       url('/assets/media/images/2600x1200/hero-bg-2.jpg');
}
.dark .page-hero-bg {
    background-image: linear-gradient(rgba(9,9,11,0.8), rgba(9,9,11,0.8)),
                       url('/assets/media/images/2600x1200/hero-bg-2.jpg');
}

/* Rand de listă fără link pe tot rândul (are doar un buton de acțiune în interior) —
   același indiciu de hover ca la chip-link, ca omul să simtă că rândul reacționează */
.list-row {
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.list-row:hover {
    filter: brightness(0.92) saturate(1.35);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
html.dark .list-row:hover {
    filter: brightness(1.3) saturate(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Casete mari tip "acțiune rapidă" (Acasă — Găsește o acțiune / Acceptă o propunere) —
   hover mai vizibil decat chip-link (fundal mai intens + bordura + usoara ridicare) */
.quick-action-card {
    --accent: 0,0,0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.quick-action-card:hover {
    background: rgba(var(--accent), 0.12);
    border-color: rgba(var(--accent), 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
html.dark .quick-action-card:hover {
    background: rgba(var(--accent), 0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}
.transition-opacity {
    transition-property: opacity;
    transition-duration: 0.15s;
}

/* =====================================================
   VARIANTE BUTON LIPSA — kt-btn-success/warning/danger nu exista
   ca variante reale in componenta de buton Metronic (doar destructive,
   primary, secondary, outline, ghost, mono, dim). Fara ele, .kt-btn
   cade pe fundal albastru implicit (background:var(--primary) e
   valoarea de baza) — de-aia butoane cu sensuri diferite (confirma,
   accepta conditionat, respinge) ieseau toate identic albastre.
   Definite aici cu paleta stabilita.
   ===================================================== */
.kt-btn-success {
    background-color: #4A9E7A;
    color: #ffffff;
}
.kt-btn-success:hover {
    background-color: #3d8a68;
}
.kt-btn-warning {
    background-color: #D4A017;
    color: #ffffff;
}
.kt-btn-warning:hover {
    background-color: #b98a13;
}
.kt-btn-danger {
    background-color: #ef4444;
    color: #ffffff;
}
.kt-btn-danger:hover {
    background-color: #dc2626;
}

/* Buton "Înapoi" tematic pe domeniu — chip tintat, nu fundal plin (nu e o acțiune de
   severitate, doar un link de navigare colorat după contextul paginii). Hover-ul vine
   deja din .chip-link (folosit mereu împreună cu clasele astea), nu se mai redefinește aici. */
.kt-btn-back-purple {
    background: rgba(123,104,181,0.08);
    border: 1px solid rgba(123,104,181,0.25);
    color: #7B68B5;
}
.kt-btn-back-blue {
    background: rgba(74,126,199,0.08);
    border: 1px solid rgba(74,126,199,0.25);
    color: #4A7EC7;
}

/* =====================================================
   TEXTAREA CU .kt-input — clasa are height fix de 34px si zero padding
   vertical (gandita pentru un <input> pe-un rand). Aplicata si la
   <textarea>, ignora complet atributul "rows" si stramtoreaza textul
   direct pe margine — greu de scris chiar si o fraza scurta. Element
   selector (nu clasa noua), ca sa repare automat orice <textarea
   class="kt-input"> deja existent sau viitor din proiect, fara sa
   umble prin fiecare fisier in parte.
   ===================================================== */
textarea.kt-input {
    height: auto;
    min-height: 4.5rem;
    padding-block: 0.625rem;
}

/* Stele evaluare — clase Tailwind lipsa din bundle */
.text-gray-300 {
    color: #d1d5db;
}
.hover\:text-yellow-400:hover {
    color: #facc15;
}

/* =====================================================
   DRAWERE MOBILE (meniu) — starea inchisa nu se ascunde singura, pe niciunul
   din cele 3 (public, dashboard Voluntar/ONG, Admin — toate folosesc aceeasi
   clasa kt-drawer-start). .kt-drawer-start seteaza --tw-translate-x:-100% in
   @layer components, dar reset-ul universal Tailwind (*, ::before, ::after
   { --tw-translate-x:0 }) traieste in @layer utilities — care are prioritate
   mai mare decat components in ordinea declarata a proiectului (@layer theme,
   base, components, utilities), INDIFERENT de specificitatea selectorului —
   verificat direct (getComputedStyle): translate ramane "0%", niciodata
   "-100%", desi variabila CSS proprie raporta corect -100%. Nici macar
   proprietatea separata "transform" (care ar trebui sa se compuna cu
   "translate", nu sa se bata cu ea) nu a corectat randarea in testare
   reala — ocolit complet ambele, folosind display, nu transformari, ca
   sa nu mai depinda deloc de acest mecanism. Selector explicit pe id, nu pe
   clasa .kt-drawer-start global — verificat, sunt exact aceste 3 drawere in
   tot proiectul care folosesc clasa asta (grep pe resources/views). */
#public_navbar_mobile.kt-drawer-start,
#navbar_mobile.kt-drawer-start,
#navbar_admin_mobile.kt-drawer-start {
    display: none !important;
}
#public_navbar_mobile.kt-drawer-start.open,
#navbar_mobile.kt-drawer-start.open,
#navbar_admin_mobile.kt-drawer-start.open {
    display: flex !important;
}
/* Fereastra rămasă deschisă și apoi lărgită peste 1024px (fără să fi fost
   închisă) tot trebuie ascunsă — .open singur nu mai e suficient acolo,
   desktopul are deja <nav> propriu inline în header. */
@media (min-width: 64rem) {
    #public_navbar_mobile.kt-drawer-start.open,
    #navbar_mobile.kt-drawer-start.open,
    #navbar_admin_mobile.kt-drawer-start.open {
        display: none !important;
    }
}

/* Bara de căutare mobilă de pe Homepage (welcome.blade.php) — "sm:hidden" nu
   există deloc in bundle (nicio alta pagina nu folosise pana acum exact acest
   nume de clasa, Tailwind JIT nu l-a generat), deci ramanea vizibila pe orice
   latime, inclusiv desktop. Clasa proprie, cu breakpoint identic sm (640px). */
.search-mobile-bar {
    display: block;
}
@media (min-width: 40rem) {
    .search-mobile-bar {
        display: none;
    }
}

/* [x-cloak] — Alpine.js ascunde elementul până se inițializează (pentru formulare
   dezvăluite la click, ex. motivul de respingere de pe Dosar ONG). Fără regula asta,
   elementul e vizibil o clipă la încărcarea paginii, înainte ca Alpine să apuce să
   evalueze x-show — proiectul nu are deloc regula, deși Alpine e deja folosit peste
   tot; simplu de ratat pentru că "nu dă eroare", doar un mic flash vizual. */
[x-cloak] {
    display: none !important;
}

/* Rotire chevron la accordioane (deschis/închis) — folosită de <x-icon name="chevron-down">
   comutat prin toggle de clasă (Alpine :class sau onclick clasic), nu prin schimbarea
   iconiței (SVG-ul inline, spre deosebire de fontul de iconițe, nu se "schimbă" ușor la
   toggle — rotim aceeași săgeată în loc să comutăm între chevron-down/chevron-up). */
.icon-rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

/* Badge de notificare pe meniul principal (grupuri + iteme din dropdown) — rotund,
   ancorat în colțul dreapta-sus al etichetei text, nu inline pe rând ca .kt-badge
   implicit (care are colțuri doar puțin rotunjite, moștenește --radius). */
.nav-badge-wrap {
    position: relative;
    display: inline-block;
}
.nav-badge-dot {
    position: absolute;
    top: -8px;
    inset-inline-end: -11px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 9999px;
    background: var(--destructive);
    color: var(--destructive-foreground);
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

/* Header-ele de casetă (.kt-card-header, componentă de bază — 72 de fișiere din proiect) sunt
   gândite pentru un singur rând: titlu în stânga, buton/etichetă/explicație în dreapta,
   justify-content:space-between + align-items:center + o înălțime minimă fixă (3.5rem). Pe
   mobil, cu un titlu mai lung (ex. numele unui ONG urmărit), conținutul din dreapta se
   înghesuie lângă titlu în loc să stea pe rândul lui — sub 640px, stivuim vertical (titlu →
   restul), cu propriul padding vertical (min-height-ul fix nu mai are sens pentru conținut pe
   2+ rânduri). */
@media (max-width: 39.9375rem) {
    .kt-card-header {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding-block: calc(var(--spacing) * 4);
    }
}

/* Aceeași problemă, pe rândurile de listă (.chip-link/.list-row — convenția deja stabilită
   pentru "rând întreg e link"/"rând cu buton în interior", ~60 de locuri în proiect): nume/titlu
   în stânga (deseori cu `truncate`), badge/buton/acțiune în dreapta, pe un singur rând
   `justify-between`. Selector compus (.chip-link.justify-between), nu .chip-link singur — clasa
   aia e reutilizată și pentru linkuri simple (butoane "Înapoi", carduri cu conținut vertical)
   care n-au nevoie de nicio schimbare. */
@media (max-width: 39.9375rem) {
    .chip-link.justify-between,
    .list-row.justify-between {
        flex-direction: column;
        align-items: flex-start;
    }
}