@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — CARDURI
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.10–§10.13, §10.22
              spec-lista-anunturi.md §2.4–§2.5, §3.3
              spec-articol.md §3.3–§3.8
              spec-design-sheet.md §3.9
              spec-marketplace.md §2.4

   Conținut:
     1. Card generic
     2. Card de anunț (standard + PROMOVAT, cu delta exactă)
     3. Card de articol
     4. Card de eveniment
     5. Card de produs (Marketplace)

   MARCAJE
     [FIGMA]   valoare desenată în machete
     [PROPUS]  stare / valoare inexistentă în design
   ========================================================================== */


/* ==========================================================================
   1. CARD GENERIC
   ========================================================================== */

.ps-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--ps-pad-card);
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card);
  color: var(--ps-text);
}
.ps-card--outlined { box-shadow: none; }
.ps-card--soft   { box-shadow: var(--ps-shadow-card-soft); }
.ps-card--foto   { box-shadow: var(--ps-shadow-photo); }
.ps-card--inset  { box-shadow: var(--ps-shadow-inset); }
.ps-card--flush  { padding: 0; }
.ps-card--panou  { padding: var(--ps-pad-panel); }

.ps-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-20);
  margin-bottom: var(--ps-space-20);
}
.ps-card__title { font: var(--ps-type-h3); color: var(--ps-text); margin: 0; }
.ps-card__body  { display: flex; flex-direction: column; gap: var(--ps-space-15); min-width: 0; }
.ps-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ps-space-20);
  margin-top: var(--ps-space-20);
}

/* card de statistică — §10.22  [FIGMA] */
.ps-card-statistica {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-10);
  padding: 44px var(--ps-space-30);
  border: var(--ps-border-width) solid var(--ps-c-green-150);   /* var(--ps-c-green-150) */
  border-radius: var(--ps-radius-card);
  background: var(--ps-green-surface);                          /* #EFFFEF */
  text-align: center;
}
.ps-card-statistica__cifra   { font: var(--ps-type-stat); color: var(--ps-green-ps); }
.ps-card-statistica__eticheta{ font: var(--ps-type-lead); color: var(--ps-text); }


/* ==========================================================================
   2. CARD DE ANUNȚ — .ps-card-anunt — DESIGN-SYSTEM §10.10
   --------------------------------------------------------------------------
   Se implementează varianta din „Lista anunțuri" (cea mai recentă):
   870 × 170, padding `0 15px`, chenar fin și umbră neutră; la hover cardul se
   ridică și capătă tenta platformei. `min-height` în loc de `height`.

   Pattern de click: card clicabil integral (stretched link) + 2 acțiuni proprii
   (favorite, Aplică). Nu se înfășoară butoane într-un <a>.

     <article class="ps-card-anunt ps-stretch">
       …
       <h3 class="ps-card-anunt__titlu">
         <a class="ps-stretch__link" href="…">Titlu</a>
       </h3>
       <button class="ps-icon-btn ps-icon-btn--24 ps-icon-btn--favorit ps-stretch__action">…</button>
       <a class="ps-btn ps-btn--primar ps-btn--sm ps-stretch__action" href="…">Aplică</a>
     </article>
   ========================================================================== */

.ps-card-anunt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ps-space-20);
  min-height: 170px;                                   /* [FIGMA] */
  padding: 0 var(--ps-space-15);                       /* [FIGMA] */
  background: var(--ps-surface);
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  box-shadow: var(--ps-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--ps-duration-slow) var(--ps-ease),
              transform var(--ps-duration-slow) var(--ps-ease-spring),
              border-color var(--ps-duration) var(--ps-ease);
}

/* --- stări  [PROPUS] --------------------------------------------------- */
.ps-card-anunt:hover {
  border-color: rgb(var(--ps-rgb-green-500) / .28);
  box-shadow: var(--ps-shadow-card-green);
  transform: translateY(-2px);
}
.ps-card-anunt:focus-within {
  outline: var(--ps-focus-width) solid var(--ps-primary);
  outline-offset: var(--ps-focus-offset);
}
.ps-card-anunt.is-vizitat  { background: var(--ps-surface-alt); }
.ps-card-anunt.is-inactive { opacity: .55; filter: grayscale(.4); }

/* --- coloana stângă: avatar + rol + tip anunț (120px)  [FIGMA] --------- */
.ps-card-anunt__media {
  flex: 0 0 120px;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-10);
  padding: var(--ps-space-20) 0 var(--ps-space-15);
}
.ps-card-anunt__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--ps-radius-full);
  object-fit: cover;
}
/* eticheta de rol: Segoe UI Light din Figma → fontul interfeței, 300  (§3.1 din DESIGN-SYSTEM) */
.ps-card-anunt__rol {
  font-family: var(--ps-font-sans);
  font-size: var(--ps-fs-12);
  font-weight: var(--ps-fw-light);
  line-height: var(--ps-lh-normal);
  color: var(--ps-text);
  text-align: center;
}
/* sub categorie, ca în lista veche: coroana (promovare plătită), „Partener iStoma” sau data */
.ps-card-anunt__stare {
  font-family: var(--ps-font-sans);
  font-size: var(--ps-fs-12);
  line-height: var(--ps-lh-normal);
  color: var(--ps-text-secondary);
  text-align: center;
}
.ps-card-anunt__coroana {
  inline-size: 20px;
  block-size: 20px;
}

/* --- coloana centrală  [FIGMA] ----------------------------------------- */
.ps-card-anunt__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ps-space-3);
}
.ps-card-anunt__text {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-10);
  padding: var(--ps-space-20) 0 var(--ps-space-15);
  width: 100%;
  min-width: 0;
}
.ps-card-anunt__titlu {
  margin: 0;
  font: var(--ps-type-card-title);                     /* 18px/500  [FIGMA] */
  color: var(--ps-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-card-anunt__titlu > a { color: inherit; text-decoration: none; }
/* ca în lista veche: titlul partenerilor și al promovărilor plătite e îngroșat */
.ps-card-anunt__titlu--ingrosat { font-weight: var(--ps-fw-bold); }
.ps-card-anunt__descriere {
  margin: 0;
  font: var(--ps-type-body);                           /* 14px/400  [FIGMA] */
  color: var(--ps-text-muted);                         /* rgba(81,81,81,.8) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;                               /* [FIGMA] */
  line-clamp: 3;
  overflow: hidden;
}
.ps-card-anunt__locatie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-space-5);
  padding: var(--ps-space-15) 0;
  border-radius: var(--ps-radius-control);
  font-family: var(--ps-font-alt);                     /* Inter 300 în machete  [FIGMA] */
  font-size: var(--ps-fs-12);
  font-weight: var(--ps-fw-light);
  line-height: var(--ps-lh-normal);
  color: var(--ps-text);
  white-space: nowrap;
}
.ps-card-anunt__locatie > .ps-icon-glyph,
.ps-card-anunt__locatie > .material-symbols-outlined { font-size: var(--ps-icon-16); }

/* --- coloana dreaptă (135px)  [FIGMA] ---------------------------------- */
.ps-card-anunt__aside {
  flex: 0 0 135px;
  width: 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-25);
  padding: var(--ps-space-15) 0;
}
.ps-card-anunt__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-space-10);
  width: 100%;
  min-width: 0;
}
.ps-card-anunt__firma-pret {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-space-3);
  width: 100%;
  min-width: 0;
  font: var(--ps-type-body-medium);                    /* 14px/500  [FIGMA] */
  color: var(--ps-text);
  text-align: center;
}
.ps-card-anunt__firma {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ca în lista veche: numele partenerilor, al promovărilor plătite și al celor sticky e îngroșat */
.ps-card-anunt__firma--ingrosat { font-weight: var(--ps-fw-bold); }
.ps-card-anunt__pret { white-space: nowrap; }

/* --------------------------------------------------------------------------
   2.1  Varianta PROMOVATĂ — delta față de standard (DESIGN-SYSTEM §10.10)

     chenar            fin, neutru           →  gradient portocaliu, umbră caldă
     padding orizontal 15px                 →  20px
     culoare titlu     #333333               →  var(--ps-c-green-ink)
     buton „Aplică"    var(--ps-c-green-500)               →  var(--ps-c-green-550)
     padding __aside   15px 0                →  20px 0

   Cardul se distinge DOAR prin umbră → eticheta pentru cititoarele de ecran
   este obligatorie: <span class="ps-sr-only">Anunț promovat</span>
   -------------------------------------------------------------------------- */

.ps-card-anunt--promovat {
  padding: 0 var(--ps-space-20);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ps-surface), var(--ps-surface)) padding-box,
    linear-gradient(120deg, #FFB547, var(--ps-orange) 45%, #FFD08A) border-box;
  box-shadow: 0 12px 32px -16px rgba(238, 150, 18, .55);
}
.ps-card-anunt--promovat:hover { box-shadow: 0 18px 40px -16px rgba(238, 150, 18, .6); }
.ps-card-anunt--promovat .ps-card-anunt__titlu { color: var(--ps-c-green-ink); }   /* var(--ps-c-green-ink)  [FIGMA] */
.ps-card-anunt--promovat .ps-card-anunt__aside { padding: var(--ps-space-20) 0; }
.ps-card-anunt--promovat .ps-btn--primar {
  --ps-btn-bg: var(--ps-green-promo);                  /* var(--ps-c-green-550)  [FIGMA] */
}
.ps-card-anunt--promovat .ps-btn--primar:hover {
  --ps-btn-bg: var(--ps-green-link);                   /* var(--ps-c-green-600)  [FIGMA] */
}

/* --------------------------------------------------------------------------
   2.2  Responsive  [PROPUS] — DESIGN-SYSTEM §10.10
        md → 2 zone (media + body), aside pe rând propriu full-width
        sm → o singură coloană, avatar centrat sus
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .ps-card-anunt {
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 0;
    padding: var(--ps-space-15);
    gap: var(--ps-space-15);
  }
  .ps-card-anunt--promovat { padding: var(--ps-space-20); }

  .ps-card-anunt__media {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    gap: var(--ps-space-10);
    padding: 0;
  }
  .ps-card-anunt__avatar { width: 56px; height: 56px; }
  .ps-card-anunt__body   { flex: 1 1 200px; }
  .ps-card-anunt__text   { padding: 0; }
  .ps-card-anunt__titlu  { white-space: normal; overflow: visible; }
  .ps-card-anunt__locatie{ padding: 0; }

  .ps-card-anunt__aside {
    flex: 1 0 100%;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--ps-space-15);
    padding: var(--ps-space-10) 0 0;
    border-top: var(--ps-border-width) solid var(--ps-border-soft);
  }
  .ps-card-anunt--promovat .ps-card-anunt__aside { padding: var(--ps-space-10) 0 0; }
  .ps-card-anunt__meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ps-space-15);
    width: auto;
  }
  .ps-card-anunt__firma-pret {
    flex-direction: row;
    align-items: baseline;
    gap: var(--ps-space-10);
    width: auto;
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .ps-card-anunt {
    flex-direction: column;
    align-items: stretch;
  }
  .ps-card-anunt__media {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .ps-card-anunt__body { flex: 1 1 auto; }
  .ps-card-anunt__aside {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ps-space-15);
  }
  .ps-card-anunt__meta,
  .ps-card-anunt__firma-pret {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .ps-card-anunt__aside > .ps-btn { width: 100%; }
}


/* ==========================================================================
   3. CARD DE ARTICOL — .ps-card-articol — DESIGN-SYSTEM §10.11
   --------------------------------------------------------------------------
   900px, padding `50px 50px 10px` (padding-bottom asimetric — valoarea reală
   din Figma; spațiul vizual vine din bara de acțiuni), gap 30px, radius 10px.
   Nu este interactiv → nu are stări.
   ========================================================================== */

.ps-card-articol {
  width: 100%;
  max-width: var(--ps-container-sm);                   /* 900px  [FIGMA] */
  margin: var(--ps-space-60) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-space-30);
  padding: var(--ps-space-50) var(--ps-space-50) var(--ps-space-10);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card);
  overflow: hidden;
}

/* --- antet: titlu + imagine  [FIGMA] ----------------------------------- */
.ps-card-articol__antet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ps-space-20);
  width: 100%;
  min-width: 0;
}
.ps-card-articol__titlu {
  margin: 0;
  font: var(--ps-type-h1);                             /* 30px/600  [FIGMA] */
  color: var(--ps-text);
  overflow-wrap: break-word;
}
.ps-card-articol__media {
  position: relative;
  width: 100%;
  border-radius: var(--ps-radius-control);
  overflow: hidden;
}
.ps-card-articol__media > img {
  width: 100%;
  height: 300px;                                       /* [FIGMA] 800 × 300 */
  object-fit: cover;
}
.ps-card-articol__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ps-radius-control);
  background: var(--ps-gradient-hero-img);
  pointer-events: none;
}

/* --- meta: autor / dată / statistici  [FIGMA] -------------------------- */
.ps-card-articol__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-20);
  width: 100%;
  min-height: 120px;
  padding: var(--ps-space-20) 0;
  font: var(--ps-type-meta);                           /* 16px/400  [FIGMA] */
  color: var(--ps-text-ui);
}
.ps-card-articol__autor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--ps-space-10);
  flex: 1 1 0;
  min-width: 0;
}
.ps-card-articol__eticheta { font-weight: var(--ps-fw-bold); }        /* „Scris de:"  [FIGMA] */
.ps-card-articol__publicat {
  display: flex;
  align-items: center;
  gap: var(--ps-space-5);
  font-weight: var(--ps-fw-medium);
  white-space: nowrap;
}

.ps-card-articol__statistici {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-20);
  flex: none;
}
.ps-card-articol__statistica {
  display: flex;
  align-items: center;
  gap: var(--ps-space-5);
  border-radius: var(--ps-radius-control);
  font: var(--ps-type-meta);
  font-weight: var(--ps-fw-medium);
  color: var(--ps-text-faint-aa);                      /* variantă AA  §11.3 */
  white-space: nowrap;
}
.ps-card-articol__statistica > .ps-icon-glyph,
.ps-card-articol__statistica > .material-symbols-outlined { font-size: var(--ps-icon-24); }
.ps-card-articol__separator {
  flex: none;
  width: 1px;
  height: var(--ps-icon-24);
  background: var(--ps-border);                        /* culoarea SVG-ului nu e expusă — §12 pct. 13 */
}

/* --- corpul articolului  [FIGMA] --------------------------------------
   Conținutul vine ca HTML din DB → SANITIZARE OBLIGATORIE înainte de Html.Raw.
   Stilizarea se face prin selectori descendenți, nu prin clase pe elementele
   generate (DESIGN-SYSTEM §10.11).
   ---------------------------------------------------------------------- */
.ps-card-articol__corp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ps-space-15);
  width: 100%;
  max-width: var(--ps-content-800);
  min-width: 0;
  padding: var(--ps-space-10) var(--ps-space-10) 0;
  font: var(--ps-type-body);                           /* 14px/400  [FIGMA] */
  color: var(--ps-text);
  text-align: justify;                                 /* [FIGMA] */
  hyphens: auto;                                       /* cere lang="ro" pe element */
}
.ps-card-articol__corp > * { width: 100%; }
.ps-card-articol__corp p { margin: 0; line-height: var(--ps-lh-body); }
.ps-card-articol__corp h2 { font: var(--ps-type-h2); color: var(--ps-text); text-align: left; }
.ps-card-articol__corp h3 { font: var(--ps-type-h3); color: var(--ps-text); text-align: left; }
.ps-card-articol__corp ul,
.ps-card-articol__corp ol {
  margin: 0;
  padding-left: var(--ps-space-25);
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  text-align: left;
}
.ps-card-articol__corp a {
  color: var(--ps-c-blue-link);                        /* #0094FF  [FIGMA] */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ps-card-articol__corp a:hover { color: var(--ps-secondary-strong); }
.ps-card-articol__corp img {
  border-radius: var(--ps-radius-control);
  height: auto;
}
.ps-card-articol__corp blockquote {
  margin: 0;
  padding: var(--ps-space-15) var(--ps-space-20);
  border-left: 4px solid var(--ps-green-stroke);
  background: var(--ps-primary-soft);
  border-radius: var(--ps-radius-control);
  text-align: left;
}
.ps-card-articol__corp table {
  width: 100%;
  font: var(--ps-type-small);
  text-align: left;
}
.ps-card-articol__corp th,
.ps-card-articol__corp td {
  padding: var(--ps-space-10);
  border-bottom: var(--ps-border-width) solid var(--ps-border);
}
.ps-card-articol__corp figure { margin: 0; }
.ps-card-articol__corp figcaption { font: var(--ps-type-caption); color: var(--ps-text-faint-aa); }

/* --- bara de acțiuni  [FIGMA] ------------------------------------------ */
.ps-card-articol__actiuni {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ps-space-30);
  width: 100%;
  min-height: 105px;
  padding: var(--ps-space-15) 0 var(--ps-space-10);
  /* [FIGMA] rgba(80,89,108,.5) — aproximat din tokenul de text de footer */
  border-top: var(--ps-border-width) solid color-mix(in srgb, var(--ps-text-footer) 50%, transparent);
}
.ps-card-articol__actiuni .ps-icon-btn { --ps-icon-btn-glyph: var(--ps-icon-30); }

/* --- responsive  [PROPUS] ---------------------------------------------- */
@media (max-width: 991.98px) {
  .ps-card-articol {
    margin-block: var(--ps-space-30);
    padding: var(--ps-space-30) var(--ps-space-30) var(--ps-space-10);
    gap: var(--ps-space-20);
  }
  .ps-card-articol__media > img { height: 220px; }
}
@media (max-width: 767.98px) {
  .ps-card-articol {
    padding: var(--ps-space-20) var(--ps-space-15) var(--ps-space-10);
    border-radius: var(--ps-radius-8);
  }
  .ps-card-articol__titlu { font-size: var(--ps-fs-24); }
  .ps-card-articol__meta {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    gap: var(--ps-space-15);
  }
  .ps-card-articol__corp {
    padding-inline: 0;
    text-align: left;                                  /* justify pe coloane înguste creează „râuri" */
    hyphens: manual;
  }
  .ps-card-articol__actiuni { min-height: 0; gap: var(--ps-space-20); }
  .ps-card-articol__media > img { height: 180px; }
}


/* ==========================================================================
   4. CARD DE EVENIMENT — .ps-card-eveniment — DESIGN-SYSTEM §10.12
   --------------------------------------------------------------------------
   720 × 309, border 1px #D9D9D9, radius 10px, padding-bottom 20px.
   Câmpuri: Organizator · Dată · Locația · Limba · Categorie.
   ========================================================================== */

.ps-card-eveniment {
  width: 100%;
  max-width: 720px;                                    /* [FIGMA] */
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--ps-space-20);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  overflow: hidden;
  transition: box-shadow var(--ps-duration-slow) var(--ps-ease),
              transform var(--ps-duration-slow) var(--ps-ease-spring);
}
.ps-card-eveniment:hover { box-shadow: var(--ps-shadow-hover); transform: translateY(-3px); }

.ps-card-eveniment__header {
  padding: var(--ps-space-20) var(--ps-space-30);      /* [FIGMA] */
  border-radius: var(--ps-radius-card) var(--ps-radius-card) 0 0;
}
.ps-card-eveniment__titlu {
  margin: 0;
  max-width: 600px;                                    /* [FIGMA] */
  font: var(--ps-type-lead);                           /* 18px/400  [FIGMA] */
  color: var(--ps-text-strong);                        /* #111A11 */
}

.ps-card-eveniment__body {
  display: flex;
  align-items: flex-start;
  gap: var(--ps-space-37);                             /* [FIGMA] 37px */
  padding: 0 var(--ps-space-30);
  min-width: 0;
}

.ps-card-eveniment__poza {
  flex: 0 0 321px;
  width: 321px;
  height: 205px;                                       /* [FIGMA] */
  border-radius: var(--ps-radius-card) 0 0 var(--ps-radius-card);   /* [FIGMA] doar stânga */
  object-fit: contain;
  background: var(--ps-surface-alt);
}

.ps-card-eveniment__detalii {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ps-card-eveniment__rand {
  display: flex;
  align-items: center;
  gap: var(--ps-space-20);
  min-height: 30px;                                    /* [FIGMA] */
  min-width: 0;
}
.ps-card-eveniment__rand--multi { align-items: flex-start; }
.ps-card-eveniment__eticheta {
  flex: 0 0 85px;                                      /* [FIGMA] */
  font: var(--ps-type-body-medium);                    /* 14px/500  [FIGMA] */
  color: var(--ps-text-strong);
  text-transform: capitalize;                          /* [FIGMA] textul rămâne natural în .resx */
}
.ps-card-eveniment__valoare {
  flex: 1 1 0;
  min-width: 0;
  font: var(--ps-type-body);                           /* 14px/400  [FIGMA] */
  color: var(--ps-text-muted);                         /* rgba(81,81,81,.8) */
}

/* --- responsive  [PROPUS] — DESIGN-SYSTEM §10.12 ----------------------- */
@media (max-width: 767.98px) {
  .ps-card-eveniment__header { padding: var(--ps-space-15) var(--ps-space-15); }
  .ps-card-eveniment__body {
    flex-direction: column;
    gap: var(--ps-space-20);
    padding-inline: var(--ps-space-15);
  }
  .ps-card-eveniment__poza {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    border-radius: var(--ps-radius-card);
  }
}
@media (max-width: 575.98px) {
  .ps-card-eveniment__rand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ps-space-2);
  }
  .ps-card-eveniment__eticheta { flex-basis: auto; width: auto; }
}


/* ==========================================================================
   5. CARD DE PRODUS — .ps-card-produs — DESIGN-SYSTEM §10.13
   --------------------------------------------------------------------------
   300 × 320 (implementat ca `min-height`), border 1px #D9D9D9, radius 10px.
   Imaginea este `object-fit: contain` — sunt coperți de carte, NU `cover`.
   ========================================================================== */

.ps-card-produs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 320px;                                   /* [FIGMA] */
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  overflow: hidden;
  transition: var(--ps-transition-shadow);
}

.ps-card-produs__media {
  position: relative;
  width: 100%;
  height: 160px;                                       /* [FIGMA] */
  flex: none;
  padding-bottom: var(--ps-space-15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-card-produs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;                                 /* [FIGMA] contain, nu cover */
  pointer-events: none;
}

.ps-card-produs__fav {
  position: absolute;
  top: 21px;                                           /* [FIGMA] */
  right: 21px;
  z-index: var(--ps-z-raised);
  --ps-icon-btn-size: var(--ps-icon-24);
  --ps-icon-btn-glyph: var(--ps-icon-24);
  --ps-icon-btn-fg: var(--ps-green-action);            /* [FIGMA] */
}
.ps-card-produs__fav:hover { --ps-icon-btn-fg: var(--ps-green-dark); }

.ps-card-produs__titlu {
  margin: 0;
  width: 100%;
  padding: var(--ps-space-10) var(--ps-space-20) var(--ps-space-5);   /* [FIGMA] */
  font: var(--ps-type-card-title);                     /* 18px/500  [FIGMA] */
  color: var(--ps-text);
  text-align: center;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                               /* [FIGMA] */
  line-clamp: 2;
  overflow: hidden;
}
.ps-card-produs__titlu > a { color: inherit; text-decoration: none; }

.ps-card-produs__autor {
  margin: 0;
  width: 100%;
  padding-inline: var(--ps-space-20);
  font: var(--ps-type-body);                           /* 14px/400  [FIGMA] */
  color: var(--ps-text-ui);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-card-produs__pret {
  margin: 0;
  width: 100%;
  padding: var(--ps-space-20) var(--ps-space-20) var(--ps-space-10);  /* [FIGMA] */
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--ps-type-card-title);                     /* 18px/500  [FIGMA] */
  color: var(--ps-green-dark);                         /* var(--ps-c-green-800) */
  opacity: .8;                                         /* [FIGMA] rămâne peste 4.5:1 */
  white-space: nowrap;
}

.ps-card-produs__actiuni {
  width: 100%;
  margin-top: auto;
  padding: 0 var(--ps-space-20) var(--ps-space-20);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- stări  [PROPUS] --------------------------------------------------- */
.ps-card-produs:hover {
  box-shadow: var(--ps-shadow-hover);
  transform: translateY(-2px);
}
.ps-card-produs:focus-within {
  outline: var(--ps-focus-width) solid var(--ps-primary);
  outline-offset: var(--ps-focus-offset);
}
.ps-card-produs--indisponibil { opacity: .6; }
.ps-card-produs--indisponibil .ps-btn {
  --ps-btn-bg: var(--ps-border);
  --ps-btn-fg: var(--ps-text-inverse);
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .ps-card-produs { min-height: 0; }
  .ps-card-produs__media { height: 140px; }
}


/* ==========================================================================
   „SIGUR TE-AR INTERESA ȘI” — grila de carduri de anunț de pe pagina anunțului
   și de sub CV (componenta AnunturiAsemanatoare)
   ========================================================================== */

.ps-anunturi-asemanatoare { margin-top: var(--ps-space-50); }

.ps-anunturi-asemanatoare__titlu {
  margin: 0 0 var(--ps-space-20);
  font: var(--ps-type-section-sm);
  color: var(--ps-text);
}

.ps-anunturi-asemanatoare__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--ps-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-anunturi-asemanatoare__item { display: flex; min-width: 0; }
.ps-anunturi-asemanatoare__item > * { width: 100%; }

@media (max-width: 767.98px) {
  .ps-anunturi-asemanatoare__lista { grid-template-columns: 1fr; }
}