@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — PAGINA PRINCIPALĂ (Views/Home/Index.cshtml)
   --------------------------------------------------------------------------
   Figma „Main Page” (spec-home.md) în tema globală: hero verde cu căutarea
   și plăcile categoriilor din sticlă, banda de cont gratuit, anunțurile
   promovate, modulele portalului (bento) și cardul de partener.
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */

.ps-home-hero {
  position: relative;
  isolation: isolate;
  inline-size: auto;
  margin: 12px var(--ps-gutter-panou) 0;
  padding-block: clamp(40px, 6vw, 96px) clamp(48px, 6vw, 104px);
  border-radius: var(--ps-radius-panel);
  background: var(--ps-panou-verde);
  color: var(--ps-text-inverse);
  /* taie doar pe orizontală: listele de sugestii ale căutării ies în jos, peste banda următoare */
  overflow-x: clip;
  z-index: 1;
}

.ps-home-hero__grila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.ps-home-hero__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-inline-size: 0; }

.ps-home-hero__eticheta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin: 0;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--ps-radius-full);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: var(--ps-fw-semibold) 13px/1.2 var(--ps-font-sans);
  letter-spacing: .02em;
}
.ps-home-hero__punct {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--ps-green-on-dark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ps-green-on-dark) 30%, transparent);
}

.ps-home-hero__titlu {
  max-inline-size: 21ch;
  margin: 0;
  font: var(--ps-type-hero);
  letter-spacing: var(--ps-ls-title);
  color: var(--ps-c-white);
}

/* --- rotator: trei fraze care urcă pe rând (CSS pur) ------------------- */
.ps-home-hero__rotator {
  margin: 0;
  font: var(--ps-fw-bold) clamp(22px, 1vw + 16px, 34px)/1.2 var(--ps-font-sans);
  letter-spacing: -.02em;
  color: var(--ps-green-on-dark);
}
.ps-home-hero__rotator-fereastra {
  display: block;
  block-size: 1.2em;
  overflow: hidden;
}
.ps-home-hero__rotator-lista { display: grid; }
.ps-home-hero__rotator-lista > span { block-size: 1.2em; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .ps-home-hero__rotator-lista { animation: ps-home-rotator 9s var(--ps-ease-out) infinite; }
}
@keyframes ps-home-rotator {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(-1.2em); }
  66%, 94%  { transform: translateY(-2.4em); }
  100%      { transform: translateY(-3.6em); }
}

/* --- căutarea: panoul devine sticlă luminoasă ---------------------------- */
.ps-home-hero__cautare { min-inline-size: 0; margin-block-start: 10px; }
.ps-home-hero__cautare .ps-zona-cautare--home { align-items: stretch; padding: 0; }
.ps-home-hero__cautare .ps-zona-cautare__panou {
  inline-size: 100%;
  max-inline-size: var(--ps-content-820);
  padding: 18px 20px 20px;
  color: var(--ps-text);
}

/* taburile de categorie au același aspect peste tot: components/zona-cautare.css */

/* --- plăcile categoriilor ---------------------------------------------- */
.ps-home-hero__categorii {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-home-placa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  block-size: 100%;
  padding: 16px 18px;
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: 0 10px 30px -14px rgb(var(--ps-rgb-umbra) / .45);
  color: var(--ps-text-ui);
  text-decoration: none;
  transition: transform var(--ps-duration-slow) var(--ps-ease-spring),
              box-shadow var(--ps-duration-slow) var(--ps-ease);
}
.ps-home-placa:hover {
  box-shadow: 0 20px 40px -18px rgb(var(--ps-rgb-umbra) / .55);
  transform: translateY(-4px);
}
.ps-home-placa:focus-visible { outline-color: var(--ps-c-white); }

.ps-home-placa__icon {
  display: grid;
  margin-block-end: 8px;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--ps-radius-control);
  background: var(--ps-primary-soft);
  color: var(--ps-green-action);
  font-size: 22px;
}
.ps-home-placa__sageata {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 16px;
  color: var(--ps-green-dark);
  font-size: 20px;
  opacity: .7;
  transition: transform var(--ps-duration) var(--ps-ease), opacity var(--ps-duration) var(--ps-ease);
}
.ps-home-placa:hover .ps-home-placa__sageata { opacity: 1; transform: translate(2px, -2px); }
/* iconița sus, numele și numărul jos: placa întinsă cât coloana nu mai rămâne goală dedesubt */
.ps-home-placa__nume {
  margin-block-start: auto;
  padding-inline-end: 22px;            /* loc pentru săgeată */
  color: var(--ps-text-strong);
  font: var(--ps-fw-semibold) 16px/1.25 var(--ps-font-sans);
  letter-spacing: -.01em;
}
.ps-home-placa__titlu { font: var(--ps-fw-medium) 13px/1.3 var(--ps-font-sans); }
/* numărul de anunțuri, discret, ca etichetă sub nume */
.ps-home-placa__numar {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-block-start: 4px;
  padding: 3px 10px;
  border-radius: var(--ps-radius-full);
  background: var(--ps-primary-soft);
  color: var(--ps-green-dark);
  font: var(--ps-fw-medium) 12.5px/1.3 var(--ps-font-sans);
}
.ps-home-placa__cifra {
  font-weight: var(--ps-fw-bold);
  font-variant-numeric: tabular-nums;
}

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


/* ==========================================================================
   2. BANDA „CONT GRATUIT”
   ========================================================================== */

.ps-home-cont {
  /* banda sta separat sub hero, cu spatiu intre ele (nu il mai incaleca) */
  padding-block: clamp(24px, 3vw, 40px) 0;
  background: var(--ps-bg);
}
.ps-home-cont__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  inline-size: auto;
  max-inline-size: none;
  margin-inline: var(--ps-gutter-panou);
  padding: clamp(20px, 2.5vw, 30px) clamp(20px, 3vw, 40px);
  border-radius: var(--ps-radius-panel);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(255, 255, 255, .16) 0%, transparent 60%),
    var(--ps-green-strip);
  box-shadow: var(--ps-shadow-float);
  color: var(--ps-c-white);
  overflow: hidden;
}
.ps-home-cont__text { display: grid; gap: 6px; max-inline-size: 62ch; }
.ps-home-cont__titlu {
  margin: 0;
  font: var(--ps-fw-medium) clamp(21px, .8vw + 16px, 29px)/1.2 var(--ps-font-sans);
  letter-spacing: var(--ps-ls-title);
}
.ps-home-cont__descriere { margin: 0; color: rgba(255, 255, 255, .75); font: var(--ps-type-body); }
.ps-home-cont__actiuni { display: flex; flex-wrap: wrap; gap: 10px; }
/* butonul principal e alb cu text verde: pe banda verde un buton verde s-ar pierde */
.ps-home-cont__principal {
  --ps-btn-bg: var(--ps-c-white);
  --ps-btn-fg: var(--ps-green-dark);
  --ps-btn-bd: transparent;
}
.ps-home-cont__principal:hover {
  --ps-btn-bg: var(--ps-green-selection);
  --ps-btn-shadow: 0 10px 28px -10px rgb(var(--ps-rgb-umbra) / .35);
}
.ps-home-cont :focus-visible { outline-color: var(--ps-c-white); }


/* ==========================================================================
   3. SECȚIUNI
   ========================================================================== */

.ps-home-sectiune { padding-block: clamp(48px, 6vw, 88px) clamp(24px, 3vw, 40px); }

.ps-home-sectiune__antet {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-block-end: 24px;
}
.ps-home-sectiune__titlu {
  margin: 8px 0 0;
  font: var(--ps-type-section);
  letter-spacing: var(--ps-ls-title);
  color: var(--ps-text-strong);
}

.ps-home-anunturi { max-inline-size: 1100px; }
.ps-home-anunturi__lista { display: grid; gap: 16px; }

/* Panourile din Default.aspx (doar Piața Stomatologică): cardurile în stânga anunțurilor, blogul
   în dreapta, pe lățimea paginii; pe ecranele mai înguste trec sub listă. */
.ps-home-anunturi:has(> .ps-panou-anunturi) {
  max-inline-size: var(--ps-container);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "centru" "stanga" "dreapta";
  gap: var(--ps-space-30);
}
.ps-home-anunturi__centru { grid-area: centru; min-width: 0; }
.ps-home-anunturi > .ps-panou-anunturi--stanga { grid-area: stanga; }
.ps-home-anunturi > .ps-panou-anunturi--dreapta { grid-area: dreapta; }

@media (min-width: 1200px) {
  .ps-home-anunturi:has(> .ps-panou-anunturi) {
    grid-template-columns: minmax(240px, var(--ps-sidebar)) minmax(0, 1fr) minmax(240px, var(--ps-sidebar));
    grid-template-areas: "stanga centru dreapta";
    align-items: start;
  }

  /* lângă listă, cardurile stau unul sub altul, ca în vechi */
  .ps-home-anunturi > .ps-panou-anunturi .ps-panou-anunturi__carduri { grid-template-columns: minmax(0, 1fr); }
  .ps-home-anunturi > .ps-panou-anunturi .ps-panou-anunturi__blog { grid-template-columns: minmax(0, 1fr); }
  .ps-home-anunturi > .ps-panou-anunturi .ps-panou-anunturi__blog > .ps-panou-anunturi__card { grid-row: auto; }

  /* Ca sticky-reclama din vechi: coloanele rămân la vedere la scroll. components/panouri-fixe.js
     calculează --ps-panou-top: sub bara de sus pentru o coloană scurtă, cu baza jos pentru una înaltă. */
  .ps-home-anunturi > .ps-panou-anunturi {
    position: sticky;
    top: var(--ps-panou-top, calc(var(--ps-navbar-h) + var(--ps-space-20)));
  }
}


/* ==========================================================================
   4. PORTAL — modulele platformei (bento)
   ========================================================================== */

.ps-home-portal { padding-block: clamp(40px, 5vw, 72px); }

.ps-home-portal__antet {
  display: grid;
  gap: 10px;
  max-inline-size: 760px;
  margin-block-end: 28px;
}
.ps-home-portal__titlu { margin: 0; font: var(--ps-type-section); letter-spacing: var(--ps-ls-title); color: var(--ps-text-strong); }
.ps-home-portal__descriere { margin: 0; color: var(--ps-text-ui); font: var(--ps-type-lead); }

.ps-home-module {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(170px, auto);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-home-module__item--lat { grid-column: span 2; grid-row: span 2; }
/* fără placa tehnicienilor dentari (Piața Medicală), ultima placă ocupă locul rămas */
.ps-home-module__item--dublu { grid-column: span 2; }

.ps-home-modul {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  block-size: 100%;
  padding: 22px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card);
  color: var(--ps-text);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--ps-duration-slow) var(--ps-ease-spring),
              box-shadow var(--ps-duration-slow) var(--ps-ease),
              border-color var(--ps-duration) var(--ps-ease);
}
a.ps-home-modul:hover {
  border-color: rgb(var(--ps-rgb-green-500) / .32);
  box-shadow: var(--ps-shadow-hover), 0 0 0 4px rgb(var(--ps-rgb-green-500) / .06);
  transform: translateY(-3px);
}
/* cardul mare: aceeași suprafață ca panourile verzi */
.ps-home-module__item--lat .ps-home-modul {
  --ps-lumina-culoare: rgba(255, 255, 255, .25);
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(255, 255, 255, .22) 0%, transparent 60%),
    var(--ps-green-hero);
  border-color: transparent;
  color: var(--ps-c-white);
}
.ps-home-module__item--lat .ps-home-modul__titlu { color: var(--ps-c-white); font-size: clamp(30px, 1.4vw + 20px, 44px); }
.ps-home-module__item--lat .ps-home-modul__text { color: rgba(255, 255, 255, .85); font-size: 16px; max-inline-size: 36ch; }
/* pe cardul mare pictograma rămâne sus, iar textul jos */
.ps-home-module__item--lat .ps-home-modul { align-content: end; }
.ps-home-module__item--lat .ps-home-modul__icon {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  margin: 0;
  background: rgba(255, 255, 255, .9);
}
.ps-home-module__item--lat .ps-home-modul:focus-visible { outline-color: var(--ps-c-white); }

.ps-home-modul__icon {
  justify-self: start;
  margin-block-end: 6px;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--ps-radius-control);
  background: var(--ps-surface-tint);
  box-shadow: inset 0 0 0 1px rgb(var(--ps-rgb-green-500) / .12);
  color: var(--ps-green-dark);
  font-size: 24px;
}
.ps-home-modul__sageata {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-end: 20px;
  color: var(--ps-text-faint-aa);
  transition: transform var(--ps-duration) var(--ps-ease), color var(--ps-duration) var(--ps-ease);
}
.ps-home-module__item--lat .ps-home-modul__sageata { color: rgba(255, 255, 255, .85); }
a.ps-home-modul:hover .ps-home-modul__sageata { transform: translate(3px, -3px); color: var(--ps-green-action); }
.ps-home-module__item--lat a.ps-home-modul:hover .ps-home-modul__sageata { color: var(--ps-c-white); }

.ps-home-modul__titlu {
  font: var(--ps-fw-medium) 22px/1.15 var(--ps-font-sans);
  letter-spacing: var(--ps-ls-title);
  color: var(--ps-text-strong);
}
.ps-home-modul__text { color: var(--ps-text-ui); font: var(--ps-type-body); }

.ps-home-modul--cifra {
  align-content: center;
  background: var(--ps-surface-tint);
  border-color: rgb(var(--ps-rgb-green-500) / .16);
  box-shadow: none;
}
.ps-home-modul__cifra {
  font: var(--ps-fw-bold) clamp(30px, 1vw + 22px, 40px)/1 var(--ps-font-sans);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--ps-c-green-800), var(--ps-c-green-500) 50%, var(--ps-c-green-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 991.98px) {
  .ps-home-module { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-home-module__item--lat { grid-row: auto; }
}
@media (max-width: 575.98px) {
  .ps-home-module { grid-template-columns: minmax(0, 1fr); }
  .ps-home-module__item--lat,
  .ps-home-module__item--dublu { grid-column: auto; }
}


/* ==========================================================================
   5. PARTENER
   ========================================================================== */

.ps-home-partener { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 104px); }

.ps-home-partener__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 48px;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-panel);
  background:
    radial-gradient(60% 120% at 100% 0%, rgb(var(--ps-rgb-green-500) / .08) 0%, transparent 60%),
    var(--ps-surface);
  box-shadow: var(--ps-shadow-card-soft);
  overflow: hidden;
}
.ps-home-partener__text { display: grid; gap: 12px; }
.ps-home-partener__titlu { margin: 0; font: var(--ps-type-section); letter-spacing: var(--ps-ls-title); color: var(--ps-text-strong); }
.ps-home-partener__descriere { max-inline-size: 60ch; margin: 0; color: var(--ps-text-ui); font: var(--ps-type-lead); }
.ps-home-partener__avantaje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.ps-home-partener__avantaje li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-full);
  background: var(--ps-bg);
  font: var(--ps-fw-medium) 13.5px/1.2 var(--ps-font-sans);
}
.ps-home-partener__avantaje .ps-icon-glyph { color: var(--ps-green-action); font-size: 19px; }
.ps-home-partener__actiuni { display: grid; justify-items: center; gap: 8px; }

@media (max-width: 767.98px) {
  .ps-home-partener__card { grid-template-columns: minmax(0, 1fr); }
  .ps-home-partener__actiuni { justify-items: start; }
}