@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — TEMA GLOBALĂ
   --------------------------------------------------------------------------
   Completează reset-ul din design-tokens.css cu baza și utilitarele comune
   tuturor paginilor; valorile vin din tokenii de acolo.
   Ordinea: design-tokens.css → tema-globala.css → layout → componente →
   stilurile paginii.

   Ce aduce:
     - titluri și paragrafe echilibrate (text-wrap), bară de scroll discretă;
     - tranziții între pagini (View Transitions) și apariție la scroll — oprite
       la prefers-reduced-motion;
     - utilitare: sticlă, chip, eyebrow, bento, schelet de încărcare, apariție,
       lumina care urmărește cursorul.
   ========================================================================== */


/* ==========================================================================
   1. BAZĂ
   ========================================================================== */

html {
  scrollbar-gutter: stable;
  -webkit-tap-highlight-color: transparent;
}

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* cuvintele foarte lungi (adrese, linkuri din anunțuri) se rup în loc să lățească pagina */
body {
  accent-color: var(--ps-green-action);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  letter-spacing: var(--ps-ls-tight);
  text-wrap: balance;
}

p, li, dd, figcaption { text-wrap: pretty; }

/* bara de scroll discretă (Chromium/Firefox) */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--ps-rgb-umbra) / .22) transparent; }

/* Tranziții între pagini, fără JS: navbar-ul rămâne pe loc, restul paginii (rădăcina) se
   estompează. Browserele fără suport ignoră blocul.
   Conținutul nu primește nume propriu: un element cu view-transition-name devine context de
   suprapunere, iar în Chrome zonele cu scroll propriu din el nu mai primeau rotița (o lua
   pagina) și sertarul de filtre rămânea sub navbar. */
@view-transition { navigation: auto; }

.ps-navbar { view-transition-name: ps-navbar; }

::view-transition-old(root) {
  animation: ps-vt-iesire .18s var(--ps-ease) both;
}
::view-transition-new(root) {
  animation: ps-vt-intrare .32s var(--ps-ease-out) both;
}

@keyframes ps-vt-iesire { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes ps-vt-intrare { from { opacity: 0; transform: translateY(10px); } }


/* ==========================================================================
   2. UTILITARE
   ========================================================================== */

/* --- sticlă --------------------------------------------------------------- */
.ps-glass {
  background: var(--ps-glass-bg);
  -webkit-backdrop-filter: var(--ps-glass-blur);
  backdrop-filter: var(--ps-glass-blur);
  border: 1px solid var(--ps-glass-border);
}
.ps-glass--dark {
  background: var(--ps-glass-bg-dark);
  border-color: rgba(255, 255, 255, .18);
  color: var(--ps-text-inverse);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ps-glass { background: rgba(255, 255, 255, .96); }
  .ps-glass--dark { background: rgb(var(--ps-rgb-umbra) / .85); }
}

/* --- chip / etichetă rotunjită ------------------------------------------- */
.ps-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-full);
  background: var(--ps-surface);
  color: var(--ps-text-ui);
  font: var(--ps-fw-medium) 12.5px/1.2 var(--ps-font-sans);
  white-space: nowrap;
}
.ps-chip .ps-icon-glyph { font-size: 16px; }
.ps-chip--verde   { background: var(--ps-green-selection); border-color: rgb(var(--ps-rgb-green-500) / .22); color: var(--ps-green-dark); }
.ps-chip--albastru{ background: #E8F7FD; border-color: rgba(0, 181, 238, .25); color: #00739A; }
.ps-chip--portocaliu { background: #FFF4E3; border-color: rgba(238, 150, 18, .30); color: #9A5A00; }
.ps-chip--rosu    { background: #FDECEC; border-color: rgba(214, 9, 9, .22); color: #A30A0A; }
.ps-chip--gri     { background: var(--ps-surface-muted); border-color: transparent; }
a.ps-chip, button.ps-chip {
  cursor: pointer;
  transition: var(--ps-transition-color), transform var(--ps-duration-fast) var(--ps-ease);
}
a.ps-chip:hover, button.ps-chip:hover { border-color: rgb(var(--ps-rgb-green-500) / .45); color: var(--ps-text); }
a.ps-chip[aria-current], button.ps-chip[aria-pressed="true"] {
  background: var(--ps-text);
  border-color: var(--ps-text);
  color: var(--ps-text-inverse);
}

/* --- „eyebrow”: etichetă mică deasupra titlurilor --------------------------- */
.ps-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ps-green-dark);
  font: var(--ps-fw-semibold) 12px/1.2 var(--ps-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ps-eyebrow::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* --- grilă bento ------------------------------------------------------------ */
.ps-bento {
  display: grid;
  grid-template-columns: repeat(var(--ps-bento-col, 4), minmax(0, 1fr));
  gap: var(--ps-bento-gap, 16px);
}
.ps-bento__2x { grid-column: span 2; }
.ps-bento__tall { grid-row: span 2; }
@media (max-width: 991.98px) { .ps-bento { --ps-bento-col: 2; } }
@media (max-width: 575.98px) {
  .ps-bento { --ps-bento-col: 1; }
  .ps-bento__2x { grid-column: auto; }
}

/* --- schelet de încărcare -------------------------------------------------- */
.ps-schelet {
  border-radius: 8px;
  background: linear-gradient(90deg, #EEF2EE 0%, #F7FAF7 40%, #EEF2EE 80%) 0 0 / 300% 100%;
  animation: ps-schelet 1.4s ease-in-out infinite;
  color: transparent;
}
@keyframes ps-schelet { to { background-position: -150% 0; } }

/* --- apariție la scroll -------------------------------------------------
   js/components/apare.js marchează cu .is-ascuns doar elementele aflate sub
   fold la încărcare și le dezvăluie când intră în ecran; fără JS (sau pentru
   ce e deja vizibil) nu se ascunde nimic. Nu se folosește animation-timeline:
   view(): blochează capturile de ecran în Chrome. */
/* Animație (nu tranziție) pe proprietățile individuale translate/scale: nu înlocuiește
   `transition` al componentei și nu ocupă `transform`, deci ridicarea cardului la hover
   funcționează și pe elementele care au apărut la scroll. */
.ps-apare.is-ascuns { opacity: 0; }
.ps-apare.is-aparut {
  animation: ps-apare .7s var(--ps-ease-out) var(--ps-apare-intarziere, 0ms) backwards;
}
@keyframes ps-apare {
  from { opacity: 0; translate: 0 24px; scale: .985; }
}

/* --- lumina care urmărește cursorul (js/components/lumina.js) -------------- */
[data-ps-lumina] {
  --ps-lumina-x: 50%;
  --ps-lumina-y: 0%;
  --ps-lumina-culoare: rgb(var(--ps-rgb-green-500) / .10);
  isolation: isolate;
}
[data-ps-lumina]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--ps-lumina-x) var(--ps-lumina-y), var(--ps-lumina-culoare), transparent 65%);
  opacity: 0;
  transition: opacity var(--ps-duration-slow) var(--ps-ease);
  pointer-events: none;
}
[data-ps-lumina]:hover::after { opacity: 1; }

/* --- separator punctat discret -------------------------------------------- */
.ps-punct::before { content: "·"; margin-inline: 6px; color: var(--ps-text-faint-aa); }

/* --- marca platformei în locul pozei care lipsește (IPlatformIdentity.DefaultImageUrl) ---
   Fișierul are 190px: nu se mărește peste dimensiunea lui și rămâne centrat, cu loc liber în jur,
   oricât de mare e chenarul; în avatarele mici se micșorează ca orice imagine. Mărul are forma lui
   și fundal transparent: nu se decupează în cercul pozei de profil, care i-ar tăia frunza. */
img:is([src$="/img/logo-ps.png"], [src$="/img/logo-pm.png"]):not(.ps-navbar__logo) {
  object-fit: scale-down !important;
  object-position: center !important;
  border-radius: 0 !important;
}


/* ==========================================================================
   3. MIȘCARE REDUSĂ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .ps-schelet { animation: none; }
  .ps-apare.is-ascuns { opacity: 1; }
  .ps-apare.is-aparut { animation: none; }
}