@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — LAYOUT
   --------------------------------------------------------------------------
   Grila paginii, containere, ritm vertical, secțiuni, zone de conținut.

   ORDINEA DE ÎNCĂRCARE (în Views/Shared/_Layout.cshtml):
     1. css/design-tokens.css      ← tokeni + reset + utilitare (NU se modifică)
     2. css/layout.css             ← ACEST FIȘIER
     3. css/components/*.css       ← buttons, forms, cards, badges, tabs, …
     4. css/pages/*.css

   DELIMITARE: navbarul, footerul, dialogurile, alertele, paginarea și bannerul
   de cookie-uri au fișiere proprii (navbar.css, footer.css, dialog.css,
   alert.css, pager.css, cookie.css). Aici se află doar scheletul paginii.

   Utilitarele deja existente în design-tokens.css (.ps-container, .ps-stack,
   .ps-cluster, .ps-tri-grid, .ps-full-bleed, .ps-surface-card) NU se
   redefinesc — fișierul de față doar le extinde (comportament responsive).

   MARCAJE
     [FIGMA]   valoare preluată din machete / DESIGN-SYSTEM.md
     [PROPUS]  valoare derivată de inginerie — machetele există doar la 1920px
   ========================================================================== */


/* ==========================================================================
   1. SCHELETUL PAGINII
   --------------------------------------------------------------------------
   Footer lipit de bază chiar și pe pagini scurte, fără `position: fixed`.

     <body class="ps-page">
       <a class="ps-skip-link" href="#continut">…</a>
       <header class="ps-navbar">…</header>
       <main id="continut" class="ps-page__main">…</main>
       <footer class="ps-footer">…</footer>
     </body>
   ========================================================================== */

.ps-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ps-bg);
  color: var(--ps-text);
}

/* unitatea „small viewport" evită saltul barelor de UI pe mobil  [PROPUS] */
@supports (min-height: 100svh) {
  .ps-page { min-height: 100svh; }
}

/* zona de conținut preia tot spațiul rămas */
.ps-page__main {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

.ps-page__header,
.ps-page__footer { flex: 0 0 auto; }

/* --- variante de fundal de pagină ------------------------------------- */
.ps-page--articol { background: var(--ps-surface-muted); }
.ps-page--auth    { background: var(--ps-surface-auth); }
.ps-page--alb     { background: var(--ps-surface); }
.ps-page--cald    { background: var(--ps-bg-warm); }

/* pagină centrată pe ambele axe (login, erori, stări goale) */
.ps-page__centru {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-50);
  padding-block: var(--ps-space-50);
  padding-inline: var(--ps-gutter);
}


/* ==========================================================================
   2. CONTAINERE — comportament responsive
   --------------------------------------------------------------------------
   Definițiile de bază (.ps-container, --wide, --md, --sm, --lista, --articol)
   sunt în design-tokens.css §4. Aici se reglează doar gutter-ul pe ecrane mici.
   ========================================================================== */

/* container fără gutter — pentru benzi full-bleed care își gestionează singure
   padding-ul intern */
.ps-container--flush { padding-inline: 0; }

/* container fluid: fără limită de lățime, doar gutter */
.ps-container--fluid { max-width: none; }

/* coloana dreaptă din detaliul de anunț (340px)  [FIGMA] */
.ps-container--aside { max-width: var(--ps-content-340); }

/* cadrul central din detaliul de anunț: 1200px cu padding lateral 70px  [FIGMA] */
.ps-cadru {
  width: 100%;
  max-width: var(--ps-container-md);
  margin-inline: auto;
  padding-inline: var(--ps-space-70);
}

/* [PROPUS] sub xl padding-ul de 70px devine disproporționat */
@media (max-width: 1199.98px) {
  .ps-cadru { padding-inline: var(--ps-space-30); }
}
@media (max-width: 767.98px) {
  .ps-cadru { padding-inline: var(--ps-space-15); }
}

/* [PROPUS] gutter-ul scade progresiv sub md */
@media (max-width: 767.98px) {
  .ps-container,
  .ps-container--wide,
  .ps-container--md,
  .ps-container--sm,
  .ps-container--lista,
  .ps-container--articol,
  .ps-container--aside {
    padding-inline: var(--ps-space-15);
  }
}
@media (max-width: 575.98px) {
  .ps-container,
  .ps-container--wide,
  .ps-container--md,
  .ps-container--sm,
  .ps-container--lista,
  .ps-container--articol,
  .ps-container--aside {
    padding-inline: var(--ps-space-10);
  }
}


/* ==========================================================================
   3. RITM VERTICAL / SECȚIUNI
   --------------------------------------------------------------------------
   Spațierea verticală se face prin secțiuni, nu prin margini pe elemente.
   Scara respectă pasul de 5px din design (30 / 50 / 70).
   ========================================================================== */

.ps-section {
  padding-block: var(--ps-space-50);
}
.ps-section--tight  { padding-block: var(--ps-space-30); }
.ps-section--loose  { padding-block: var(--ps-space-70); }
.ps-section--flush  { padding-block: 0; }
.ps-section--top    { padding-block: var(--ps-space-50) 0; }
.ps-section--bottom { padding-block: 0 var(--ps-space-50); }

/* distanța bară verde de pagină → primul card = 60px  [FIGMA] */
.ps-section--dupa-bara { padding-block: var(--ps-space-60) var(--ps-space-50); }

/* fundaluri alternative de secțiune */
.ps-section--alb   { background: var(--ps-surface); }
.ps-section--gri   { background: var(--ps-surface-muted); }
.ps-section--soft  { background: var(--ps-surface-alt); }
.ps-section--verde { background: var(--ps-panou-verde); color: var(--ps-text-inverse); }

/* antetul unei secțiuni: titlu la stânga, acțiune la dreapta */
.ps-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ps-space-20);
  margin-bottom: var(--ps-space-30);
}
.ps-section__title {
  font: var(--ps-type-section);
  color: var(--ps-green-dark);
  margin: 0;
}
.ps-section__title--centrat { width: 100%; text-align: center; }
.ps-section__actiuni {
  display: flex;
  align-items: center;
  gap: var(--ps-space-20);
}

/* corpul secțiunii, ca stivă cu gap implicit de 20px */
.ps-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap-stack);
}

/* [PROPUS] secțiunile se strâng sub md */
@media (max-width: 767.98px) {
  .ps-section        { padding-block: var(--ps-space-30); }
  .ps-section--loose { padding-block: var(--ps-space-50); }
  .ps-section--dupa-bara { padding-block: var(--ps-space-30); }
  .ps-section__head  { margin-bottom: var(--ps-space-20); }
}


/* ==========================================================================
   4. ZONE DE CONȚINUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1  Coloana de listare — 870px centrată
   Panou de căutare + bară de filtre + listă de carduri.  [FIGMA]
   -------------------------------------------------------------------------- */
.ps-layout-lista {
  width: 100%;
  max-width: var(--ps-content-870);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-20);
}
.ps-layout-lista--larg { max-width: var(--ps-content-820); }  /* card căutare Home */

/* --------------------------------------------------------------------------
   4.2  Panou lateral + conținut — Marketplace
   sidebar 300px, distanță până la grilă 90px.  [FIGMA]
   -------------------------------------------------------------------------- */
.ps-layout-sidebar {
  display: grid;
  grid-template-columns: var(--ps-sidebar) minmax(0, 1fr);
  gap: var(--ps-space-90);
  align-items: start;
}
.ps-layout-sidebar__aside {
  position: sticky;
  top: calc(var(--ps-navbar-h) + var(--ps-space-20));
  min-width: 0;
}
.ps-layout-sidebar__main { min-width: 0; }

/* [PROPUS] sub xl distanța de 90px se reduce; sub lg panoul trece deasupra */
@media (max-width: 1199.98px) {
  .ps-layout-sidebar { gap: var(--ps-space-40); }
}
@media (max-width: 991.98px) {
  .ps-layout-sidebar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ps-space-20);
  }
  .ps-layout-sidebar__aside {
    position: static;
    top: auto;
  }
}

/* --------------------------------------------------------------------------
   4.3  Conținut + coloană dreaptă — detaliu anunț
   corp fluid + coloană de 340px.  [FIGMA]
   -------------------------------------------------------------------------- */
.ps-layout-detaliu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ps-content-340);
  gap: var(--ps-space-30);
  align-items: start;
}
.ps-layout-detaliu__main  { min-width: 0; }
.ps-layout-detaliu__aside {
  position: sticky;
  top: calc(var(--ps-navbar-h) + var(--ps-space-20));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-20);
}

/* [PROPUS] sub lg coloana dreaptă trece sub conținut */
@media (max-width: 991.98px) {
  .ps-layout-detaliu {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ps-space-20);
  }
  .ps-layout-detaliu__aside {
    position: static;
    top: auto;
    max-width: var(--ps-content-340);
    width: 100%;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   4.4  Coloană de articol — 800px de conținut într-un card de 900px  [FIGMA]
   -------------------------------------------------------------------------- */
.ps-layout-articol {
  width: 100%;
  max-width: var(--ps-content-800);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4.5  Două coloane egale  [PROPUS]
   -------------------------------------------------------------------------- */
.ps-layout-doua {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ps-space-30);
  align-items: start;
}
@media (max-width: 767.98px) {
  .ps-layout-doua {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ps-space-20);
  }
}


/* ==========================================================================
   5. GRILE
   --------------------------------------------------------------------------
   `auto-fill` + `minmax` ține cardurile la lățimea din design cât timp încape
   și le lasă să curgă natural sub aceasta — fără media query per grilă.
   ========================================================================== */

.ps-grid {
  display: grid;
  gap: var(--ps-space-20);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ps-grid-min, 260px), 100%), 1fr));
}

/* carduri de produs — 300px în machete  [FIGMA] */
.ps-grid--produse  { --ps-grid-min: 260px; }   /* [PROPUS] pragul de curgere */
/* carduri de partener — 320px în machete  [FIGMA] */
.ps-grid--parteneri{ --ps-grid-min: 300px; gap: var(--ps-space-30); }
/* carduri de statistică  [FIGMA] */
.ps-grid--statistici { --ps-grid-min: 240px; gap: var(--ps-space-30); }

/* grile cu număr fix de coloane, care se pliază pe rând sub md  [PROPUS] */
.ps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
  .ps-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ps-grid--2,
  .ps-grid--3,
  .ps-grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   6. BARA VERDE DE PAGINĂ — .ps-bara-pagina
   --------------------------------------------------------------------------
   Panou verde cu colțuri mari, care plutește pe fundal; titlul centrat,
   „Înapoi" ancorat la 50px stânga.  [FIGMA]
   Titlul: 24px (Marketplace + articol). Detaliul de anunț desenează 22px —
   DESIGN-SYSTEM §12 pct. 16 recomandă 24px uniform.
   ========================================================================== */

.ps-bara-pagina {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-20);
  inline-size: auto;
  min-height: 84px;
  margin: 12px var(--ps-gutter-panou) 0;
  padding-inline: var(--ps-space-50);
  border-radius: var(--ps-radius-panel);
  background: var(--ps-panou-verde);
  color: var(--ps-text-inverse);
}

.ps-bara-pagina__titlu {
  margin: 0;
  padding: var(--ps-space-10);
  border-radius: var(--ps-radius-control);
  font: var(--ps-type-pagebar);
  color: var(--ps-text-inverse);
  text-align: center;
}

.ps-bara-pagina__inapoi {
  position: absolute;
  left: var(--ps-space-50);
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-15);
}

.ps-bara-pagina__actiuni {
  position: absolute;
  right: var(--ps-space-50);
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-30);
}

/* inelul de focus comută pe alb pe fundal verde (vezi .ps-on-brand din tokeni) */
.ps-bara-pagina :focus-visible { outline-color: var(--ps-c-white); }

/* [PROPUS] sub md titlul nu mai poate rămâne centrat absolut peste acțiuni */
@media (max-width: 767.98px) {
  .ps-bara-pagina {
    justify-content: space-between;
    padding-inline: var(--ps-space-15);
    gap: var(--ps-space-10);
  }
  .ps-bara-pagina__inapoi,
  .ps-bara-pagina__actiuni {
    position: static;
    left: auto;
    right: auto;
  }
  .ps-bara-pagina__titlu {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ps-fs-18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ps-bara-pagina__actiuni { gap: var(--ps-space-15); }
}


/* ==========================================================================
   7. BENZI FULL-BLEED
   --------------------------------------------------------------------------
   Banda ocupă toată lățimea ferestrei, conținutul rămâne în container.
   ========================================================================== */

.ps-banda {
  width: 100%;
  padding-block: var(--ps-space-50);
}
.ps-banda--verde {
  inline-size: auto;
  margin: 12px var(--ps-gutter-panou) 0;
  border-radius: var(--ps-radius-panel);
  background: var(--ps-panou-verde);
  color: var(--ps-text-inverse);
}
.ps-banda--newsletter{ background: var(--ps-green-strip); color: var(--ps-text-inverse);
                       box-shadow: var(--ps-shadow-newsletter); }
.ps-banda--soft      { background: var(--ps-surface-alt); }
.ps-banda--selectie  { background: var(--ps-primary-soft); }

.ps-banda--verde :focus-visible,
.ps-banda--newsletter :focus-visible { outline-color: var(--ps-c-white); }

/* separator orizontal care iese din container (footer, secțiuni)  [FIGMA] */
.ps-separator {
  height: 1px;
  border: 0;
  background: var(--ps-border);
}
.ps-separator--brand { background: var(--ps-green-dark); }


/* ==========================================================================
   8. AJUTOARE DE SPAȚIERE ȘI ALINIERE
   --------------------------------------------------------------------------
   Set minim, strict pe scara din design. Nu se extinde ad-hoc: dacă lipsește
   ceva, se adaugă întâi tokenul în design-tokens.css.
   ========================================================================== */

.ps-mt-10 { margin-top: var(--ps-space-10); }
.ps-mt-20 { margin-top: var(--ps-space-20); }
.ps-mt-30 { margin-top: var(--ps-space-30); }
.ps-mt-50 { margin-top: var(--ps-space-50); }
.ps-mt-60 { margin-top: var(--ps-space-60); }

.ps-mb-10 { margin-bottom: var(--ps-space-10); }
.ps-mb-20 { margin-bottom: var(--ps-space-20); }
.ps-mb-30 { margin-bottom: var(--ps-space-30); }
.ps-mb-50 { margin-bottom: var(--ps-space-50); }

.ps-gap-5  { gap: var(--ps-space-5); }
.ps-gap-10 { gap: var(--ps-space-10); }
.ps-gap-15 { gap: var(--ps-space-15); }
.ps-gap-20 { gap: var(--ps-space-20); }
.ps-gap-30 { gap: var(--ps-space-30); }

.ps-fill  { flex: 1 1 auto; min-width: 0; }
.ps-push  { margin-inline-start: auto; }

/* stivă cu separatoare între copii  [PROPUS] */
.ps-stack-divided > * + * {
  border-top: var(--ps-border-width) solid var(--ps-border);
  padding-top: var(--ps-space-20);
  margin-top: var(--ps-space-20);
}


/* ==========================================================================
   9. STĂRI DE PAGINĂ — gol / încărcare  [PROPUS]
   --------------------------------------------------------------------------
   Machetele nu conțin stare de listă goală (DESIGN-SYSTEM §12 pct. 10).
   ========================================================================== */

.ps-stare-goala {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-20);
  padding: var(--ps-space-70) var(--ps-space-30);
  text-align: center;
  background: var(--ps-surface);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-card);
  color: var(--ps-text-faint-aa);
}
.ps-stare-goala__icon {
  font-size: var(--ps-fs-48);
  line-height: 1;
  color: var(--ps-icon-ui-aa);
}
.ps-stare-goala__titlu {
  font: var(--ps-type-h3);
  color: var(--ps-text);
  margin: 0;
}
.ps-stare-goala__text {
  font: var(--ps-type-body);
  color: var(--ps-text-faint-aa);
  max-width: 46ch;
  margin: 0;
}


/* ==========================================================================
   10. TIPĂRIRE  [PROPUS]
   ========================================================================== */

@media print {
  .ps-page { background: var(--ps-c-white); min-height: 0; }
  .ps-banda { box-shadow: none; }
  .ps-section { padding-block: var(--ps-space-20); }
}