/*
 * Stilurile secțiunilor de pagină.
 *
 * Reintră în layerul `components` — layerele pot fi redeschise, deci ordinea de
 * cascadă declarată în main.css rămâne valabilă.
 */
@layer components {
  /* ---------- antet de secțiune ---------- */
  .section__head {
    margin-inline: auto;
    margin-block-end: var(--space-12);
    text-align: center;
  }

  .section__eyebrow {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .section__title {
    margin-block-start: var(--space-3);
  }

  .section__action {
    margin-block-start: var(--space-10, var(--space-8));
    text-align: center;
  }

  /* ---------- carusel (comun) ---------- */
  [data-carousel-track] {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Spațiu ca umbrele cardurilor să nu fie tăiate de overflow. */
    padding-block: var(--space-2);
  }

  [data-carousel-track]::-webkit-scrollbar {
    display: none;
  }

  [data-carousel-slide] {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .carousel__nav {
    display: flex;
    gap: var(--space-2);
  }

  .carousel__nav--inline {
    justify-content: center;
    margin-block-start: var(--space-6);
  }

  .carousel__btn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    transition: opacity var(--duration-fast) var(--ease-out);

    & svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentcolor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &:disabled {
      opacity: 0.35;
      cursor: default;
    }

    &:not(:disabled):hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }
  }

  /* ---------- hero ---------- */
  .hero {
    position: relative;
  }

  /* Pe ecrane înguste coloana de puncte ar cădea peste titlu, așa că trece
     orizontal, sub conținut — ca în tema veche. */
  @media (width < 48rem) {
  }

  /* ---------- banner reutilizabil ---------- */
  /*
   * Fără `min-height` și fără padding propriu: înălțimea o dau cei 100px de
   * padding ai conținutului plus textul, exact ca `.dinti__ficsi_content` din
   * tema veche (381px pe pagina Servicii). Înainte se adunau 96px de secțiune
   * peste cei 100px ai conținutului, iar bannerul ieșea la 606px.
   */
  .banner {
    position: relative;
    display: grid;
    align-items: center;
  }

  .banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Conținutul e centrat, ca în tema veche (`.dinti_content_section` avea
     `text-align: center` pe toată lățimea, cu 100px de padding vertical). */
  .banner__content {
    position: relative;
    max-width: none;
    padding-block: 100px;
    color: var(--color-text-inverse);
    text-align: center;
  }

  .banner__eyebrow {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .banner__title {
    margin-block: var(--space-2) var(--space-3);
  }

  /* ---------- bandă derulantă ---------- */
  /*
   * Banda derulantă din spatele bannerelor. Transcriere măsurată: 120px bold,
   * opacitate 5%, 144px înălțime (120 × 1,2), iar cei -48px de jos lasă
   * bannerul să acopere partea de jos a textului — de aici efectul de text
   * uriaș tăiat pe orizontală.
   *
   * `z-index: -1` e obligatoriu: fără el, fundalul bannerului (element care
   * urmează în DOM) s-ar desena SUB textul benzii, nu peste el.
   */
  .marquee {
    position: relative;
    z-index: -1;
    display: flex;
    gap: 450px;
    overflow: hidden;
    margin-block-end: -48px;
    color: var(--neutral-800);
    opacity: 0.05;
    user-select: none;
  }

  .marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 450px;
    animation: marquee 15s linear infinite;
  }

  .marquee__item {
    font-size: 120px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
  }

  @keyframes marquee {
    to {
      translate: calc(-100% - 450px);
    }
  }

  /* Text în mișcare continuă e un declanșator clasic pentru tulburări
     vestibulare; WCAG 2.2 cere o cale de oprire (criteriul 2.2.2). */
  @media (prefers-reduced-motion: reduce) {
    .marquee {
      display: none;
    }
  }

  @media (width <= 1023px) {
    .marquee {
      margin-block-end: -38px;
    }
  }

  @media (width <= 640px) {
    .marquee {
      margin-block-end: -25px;
    }

    .marquee__item {
      font-size: 85px;
    }
  }

  /* ---------- blocurile primei pagini ---------- */
  /*
   * Distanțele vin din `divider-*`-urile temei vechi, măsurate pe prima pagină
   * la 1440px: 80px de la slider la servicii, 120px până la beneficii, și așa
   * mai departe. Secțiunile n-au padding propriu acolo, de aceea nu folosesc
   * clasa `.section`.
   */
  .services {
    margin-block: 80px 120px;
  }

  /* Titlul secțiunii de servicii e la stânga, nu centrat. */
  .services .section__head {
    max-width: none;
    margin-block-end: 30px;
    text-align: start;
  }

  .services .section__title {
    margin-block-start: 0;
    font-size: 40px;
    line-height: 48px;
  }

  /* Trei coloane, două rânduri: 3×2 pentru cele șase beneficii. */
  .benefits__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }

  .benefit {
    margin: 0 7px 20px;
    padding: 30px 15px;
    border: 1px solid var(--brown-500);
    border-radius: 20px;
    text-align: center;
  }

  .benefit__title {
    margin-block: 20px;
    font-size: 18px;
    line-height: 24px;
    color: #000;
  }

  .benefit__text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }

  @media (width <= 1023px) {
    .benefits__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .counters__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  @media (width <= 1023px) {
    .counters__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (width <= 640px) {
  }

  @media (width <= 1023px) {
  }

  @media (width <= 640px) {
  }

  /*
   * Secțiunile de mai jos n-au padding propriu în tema veche: ritmul îl dau
   * `divider-*`-urile dintre ele. Valorile sunt cele măsurate pe prima pagină.
   */
  .why-us {
    margin-block-end: 120px;
  }

  .cases {
    margin-block-end: 80px;
  }

  .contacts {
    margin-block-start: 0;
  }

  /* ---------- formularul de pe prima pagină ---------- */
  /*
   * `.section-24` din tema veche: imagine de fundal acoperitoare, văl
   * `#333333` la 50%, padding 70px 0, titlu alb centrat, formular pe 700px.
   */
  .contact-form {
    position: relative;
    padding-block: 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .contact-form::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #333;
    opacity: 0.5;
  }

  .contact-form__inner {
    position: relative;
  }

  .contact-form__title {
    margin-block-end: 20px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    text-align: center;
    color: #fff;
  }

  .contact-form__body {
    max-width: 700px;
    margin-inline: auto;
  }

  .contact-form__body input,
  .contact-form__body textarea {
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 0;
    background-color: #e8e8e8;
    font-size: 14px;
  }

  .contact-form__body textarea {
    margin-block-end: 0;
  }

  /*
   * CF7 pune butonul într-un `.col-lg-6`, iar shimul de grilă îl ține pe o
   * jumătate de rând. Aici îl trecem peste ambele coloane ca să ocupe toată
   * lățimea formularului. Coloana goală care urmează cade pe rândul următor;
   * n-are conținut, deci nu se vede.
   */
  .contact-form__body .button_send {
    grid-column: 1 / -1;
  }

  .contact-form__body input[type="submit"] {
    width: 100%;
    background-color: var(--brown-500);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
  }

  @media (width <= 640px) {
    .contact-form__body {
      max-width: 100%;
      padding: 0;
    }

    .contact-form__title {
      font-size: 25px;
      line-height: 35px;
    }
  }

  .cases__carousel .case-related__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    margin: 0;
    padding-inline: 200px;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  @media (width <= 1023px) {
  }

  @media (width <= 640px) {
  }

  /* ---------- card de serviciu / caz ---------- */
  /*
   * Transcriere măsurată a `.service_item` din tema veche (prima pagină și
   * pagina Servicii folosesc același card): 4 coloane cu 40px între ele, card
   * de minimum 310px, rază 10, umbră lată. Caseta cu titlul stă coborâtă 75px
   * și urcă 65px la hover, moment în care apare și „Citește mai mult”.
   */
  .card {
    position: relative;
    display: block;
    min-height: 310px;
    overflow: hidden;
    margin-block-end: 25px;
    border-radius: 10px;
    background-color: #ccc;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
    color: var(--color-text-inverse);
    text-decoration: none;
  }

  .card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.1) 60%);
  }

  .card__body {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -75px;
    z-index: 1;
    padding: 25% 20px 60px;
    text-align: center;
    transition: translate 0.4s ease;
  }

  .card:hover .card__body,
  .card:focus-visible .card__body {
    translate: 0 -65px;
  }

  .card__title {
    font-size: 25px;
    line-height: 37.5px;
  }

  /* Apare doar la hover, ca în tema veche. */
  .card__more {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .card:hover .card__more,
  .card:focus-visible .card__more {
    opacity: 1;
  }

  .services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
  }

  @media (width <= 1250px) {
    .services__grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .card {
      min-height: 280px;
    }
  }

  @media (width <= 1023px) {
    .services__grid {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 25px;
    }
  }

  @media (width <= 640px) {
    .services__grid {
      grid-template-columns: 1fr;
    }

    .card {
      min-height: 250px;
    }

    .card__title {
      font-size: 22px;
      line-height: 32px;
    }
  }

  .card--case {
    inline-size: min(22rem, 80vw);
    min-height: 310px;
  }

  /* ---------- beneficii / de ce noi ---------- */
  .benefits__list,
  .why-us__list,
  .counters__list,
  .certificates__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .benefit,
  .why-us__item {
    text-align: center;
  }

  /* 100px, ca în tema veche. */
  .why-us__icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-inline: auto;
    margin-block-end: 15px;
  }

  /*
   * Linie despărțitoare între carduri, nu după ultimul de pe rând: `nth-child`
   * n-ar ști câte coloane are grila la lățimea curentă, așa că folosim numărul
   * de coloane din media query.
   */
  .why-us__item {
    padding-inline: 20px;
    border-inline-end: 1px solid var(--color-border);
  }

  .why-us__item:last-child {
    border-inline-end: 0;
  }

  @media (width >= 64rem) {
    .why-us__list {
      grid-template-columns: repeat(4, 1fr);
      /* 40px pe orizontală, 10px pe verticală — măsurat în tema veche. */
      column-gap: 40px;
      row-gap: 40px;
    }

    .why-us__item:nth-child(4n) {
      border-inline-end: 0;
    }
  }

  @media (40rem <= width < 64rem) {
    .why-us__list {
      grid-template-columns: repeat(2, 1fr);
    }

    .why-us__item:nth-child(2n) {
      border-inline-end: 0;
    }
  }

  @media (width < 40rem) {
    .why-us__item {
      border-inline-end: 0;
    }
  }

  .benefit__title,
  .why-us__title {
    font-size: var(--step-1);
    margin-block-end: var(--space-2);
  }

  .benefit__text,
  .why-us__item p {
    color: var(--color-text-muted);
  }

  @media (width >= 56rem) {
  }

  @media (width <= 640px) {
  }

  /* ---------- recenzii Google / Facebook ---------- */
  /*
   * Transcriere măsurată a blocului `.google-fb-testimoniale` din tema veche,
   * la 1440 / 1100 / 900 / 640 px. Proporțiile 25/75 vin din grila Bootstrap
   * (col-md-3 + col-md-9) și se schimbă în 30/70, apoi 40/60, exact ca acolo;
   * numărul de carduri vizibile urmează punctele de rupere din configurația
   * Slick (1250 → 2, 1023 → 1), ca ritmul să fie același.
   */
  .reviews-block {
    padding-block-end: 100px;
  }

  .reviews-block__head {
    margin-block-end: 40px;
    text-align: center;
  }

  .reviews-block__eyebrow {
    margin-block-end: 5px;
    font-size: 12px;
    line-height: 16.8px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown-500);
  }

  .reviews-block__title {
    margin-block-end: 30px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--neutral-800);
  }

  .reviews-block__intro {
    font-size: 22px;
    line-height: 30.8px;
    font-weight: 400;
    color: var(--neutral-800);
  }

  /* `wrap` între rânduri: la ≤640px panoul trece pe 100% și rândul se rupe. */
  .reviews-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .reviews-row + .reviews-row {
    margin-block-start: 60px;
  }

  .reviews-summary {
    display: flex;
    flex: 0 0 25%;
    max-width: 25%;
    padding-inline: 15px;
  }

  .reviews-summary__avatar {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }

  .reviews-summary__body {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
    padding-inline: 15px;
  }

  .reviews-summary__name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--neutral-800);
  }

  .reviews-summary__score {
    font-size: 21px;
    line-height: 30px;
    font-weight: 900;
    color: #fb8e28;
  }

  /* `inline`: resetul face imaginile `block`, iar stelele trebuie să stea pe
     aceeași linie cu nota, ca în tema veche. */
  .reviews-summary__stars {
    display: inline;
    width: 110px;
    height: auto;
    margin-block-start: -6px;
    margin-inline-start: 5px;
  }

  .reviews-summary__count {
    margin-block-end: 15px;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    color: var(--neutral-800);
  }

  /*
   * `inline`, nu `inline-flex`: în tema veche pilula e un link în flux, iar
   * înălțimea ei (36px) vine din linia de text, nu din padding-ul propriu.
   */
  .reviews-summary__cta {
    display: inline;
    padding: 8px 20px 10px;
    border-radius: 27px;
    background-color: #0a6cff;
    box-shadow: 0 0 2px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 24%);
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #888;
    text-decoration: none;
    user-select: none;
    transition: filter 0.2s ease-in-out;
  }

  .reviews-summary__cta:hover,
  .reviews-summary__cta:focus-visible {
    filter: brightness(1.08);
  }

  .reviews-summary__cta img {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
  }

  .reviews-carousel {
    position: relative;
    flex: 0 0 75%;
    max-width: 75%;
    padding-inline: 15px;
  }

  .reviews-carousel__track {
    display: flex;
    /* Distanța dintre carduri vine din padding-ul slide-ului, nu din `gap`:
       altfel trei carduri plus două spații n-ar încăpea în lățimea pistei. */
    gap: 0;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .reviews-carousel__track::-webkit-scrollbar {
    display: none;
  }

  /*
   * Marginea de 10px stă pe slide (ca padding), nu pe card: altfel trei carduri
   * plus marginile lor n-ar mai încăpea în lățimea pistei.
   */
  .reviews-carousel__slide {
    flex: 0 0 calc(100% / 3);
    padding: 10px;
    scroll-snap-align: start;
  }

  .review-card {
    position: relative;
    height: 100%;
    padding: 25px;
    border-radius: 4px;
    background-color: #fafafa;
    box-shadow: 0 0 2px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 24%);
  }

  .review-card__source {
    position: absolute;
    inset-block-start: 15px;
    inset-inline-end: 15px;
    width: 20px;
    height: 20px;
  }

  .review-card__head {
    display: flex;
    align-items: center;
    margin-block-end: 15px;
  }

  .review-card__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .review-card__name {
    margin-block-start: -5px;
    padding-inline-start: 10px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: var(--neutral-800);
  }

  .review-card__stars {
    width: 75px;
    height: auto;
    margin-block-start: 3px;
    margin-inline-start: 10px;
  }

  /*
   * Înălțime fixă: cardurile rămân aliniate, iar recenziile lungi se derulează.
   *
   * Bara de derulare e desenată explicit ca să fie vizibilă permanent. Pe macOS
   * barele sunt „overlay”: apar doar cât timp derulezi, așa că nimic nu arăta că
   * textul continuă.
   *
   * `scrollbar-gutter: stable` rezervă banda și în cardurile cu recenzii scurte,
   * ca textul să înceapă pe aceeași coloană în toate cardurile.
   */
  /*
   * Aceeași bară permanentă și pe lista de comentarii de pe „Testimoniale
   * ortodonție” (`.all-reviews`, 500px înălțime din orto.css).
   */
  .all-reviews {
    padding-inline-end: 10px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 #ececec;
  }

  .review-card__body {
    height: 170px;
    overflow-y: auto;
    padding-inline-end: 8px;
    scrollbar-gutter: stable;
    /* Firefox: singura cale de a obține o bară permanentă și colorată. */
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 #ececec;
  }

  /*
   * Chrome și Safari ignoră `::-webkit-scrollbar` pe elementele care au
   * `scrollbar-width` sau `scrollbar-color` setate — și bara ar rămâne overlay,
   * deci ascunsă. Le readucem la `auto` și desenăm bara prin pseudo-elemente,
   * care nu sunt overlay. Firefox nu cunoaște `selector(::-webkit-scrollbar)`,
   * deci păstrează regulile de mai sus.
   */
  @supports selector(::-webkit-scrollbar) {
    .review-card__body,
    .all-reviews {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }

    .review-card__body::-webkit-scrollbar,
    .all-reviews::-webkit-scrollbar {
      width: 6px;
    }

    .review-card__body::-webkit-scrollbar-track,
    .all-reviews::-webkit-scrollbar-track {
      border-radius: 3px;
      background-color: #ececec;
    }

    .review-card__body::-webkit-scrollbar-thumb,
    .all-reviews::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: #c4c4c4;
    }

    .review-card__body::-webkit-scrollbar-thumb:hover,
    .all-reviews::-webkit-scrollbar-thumb:hover {
      background-color: #adadad;
    }
  }

  .review-card__text {
    font-size: 15px;
    line-height: 24px;
    color: #222;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    padding-right: 5px;
  }

  .reviews-carousel__arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    translate: 0 -50%;
    cursor: pointer;
  }

  .reviews-carousel__arrow--prev {
    inset-inline-start: 5px;
  }

  .reviews-carousel__arrow--next {
    inset-inline-end: 5px;
  }

  .reviews-carousel__arrow img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .reviews-carousel__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* 1250px: două carduri și 30/70, ca în Slick + grila veche. */
  @media (width <= 1250px) {
    .reviews-block__wrap {
      padding-inline: 0;
    }

    .reviews-summary {
      flex: 0 0 30%;
      max-width: 30%;
    }

    .reviews-summary__body {
      margin-block-start: -5px;
      padding-inline: 0 0;
      padding-inline-start: 25px;
    }

    .reviews-carousel {
      flex: 0 0 70%;
      max-width: 70%;
      padding-inline: 20px;
    }

    .reviews-carousel__slide {
      flex-basis: 50%;
    }
  }

  /* 1023px: un card și 40/60. */
  @media (width <= 1023px) {
    .reviews-block {
      padding-block: 70px 100px;
      padding-inline: 15px;
    }

    .reviews-block__title {
      font-size: 34px;
      line-height: 40.8px;
    }

    .reviews-summary {
      flex: 0 0 40%;
      max-width: 40%;
    }

    .reviews-carousel {
      flex: 0 0 60%;
      max-width: 60%;
    }

    .reviews-carousel__slide {
      flex-basis: 100%;
    }
  }

  /* 640px: panoul de sumar trece deasupra caruselului. */
  @media (width <= 640px) {
    .reviews-block {
      padding-block: 15px 100px;
    }

    .reviews-block__title {
      margin-block-end: 20px;
      font-size: 25px;
      line-height: 30px;
    }

    .reviews-block__intro {
      font-size: 18px;
      line-height: 25.2px;
    }

    .reviews-summary {
      flex: 0 0 100%;
      max-width: 100%;
      padding-inline: 0;
    }

    .reviews-summary__body {
      flex: 0 1 auto;
      max-width: none;
      margin-block-start: 0;
      padding-inline-start: 15px;
    }

    .reviews-summary__score {
      font-size: 18px;
    }

    .reviews-summary__count {
      font-size: 12px;
      line-height: 20px;
    }

    .reviews-carousel {
      flex: 0 0 100%;
      max-width: 100%;
      margin-block-start: 30px;
      padding-inline: 0;
    }

    .reviews-carousel__arrow {
      width: 33px;
      height: 33px;
    }

    .reviews-carousel__arrow--prev {
      inset-inline-start: -10px;
    }

    .reviews-carousel__arrow--next {
      inset-inline-end: -10px;
    }
  }

  @media (width <= 1023px) {
  }

  /* ---------- acordeon (întrebări frecvente) ---------- */
  /*
   * Valorile sunt cele din tema veche. Acolo acordeonul era stilizat din
   * style.css, încărcat pe tot site-ul; la portare regulile au ajuns doar în
   * fișierul paginii de turism, așa că pe „Aparate dentare” rămăsese un
   * acordeon fără stil: titluri mici, fără semnele +/− și fără spațiere.
   *
   * Deschiderea se citește din `aria-expanded` de pe buton.
   */
  .accordion {
    margin-block: 20px 50px;
  }

  .accordion button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 400;
    text-align: left;
  }

  .accordion button:hover,
  .accordion button:focus-visible,
  .accordion button[aria-expanded="true"] {
    color: var(--color-accent);
    cursor: pointer;
  }

  .accordion .accordion-title {
    display: block;
    position: relative;
    margin-block-end: 0;
    padding: 1em 1.5em 1em 0;
    font-size: 24px;
    font-weight: 600;
  }

  /* Cercul cu + / − din dreapta: două bare suprapuse, cea verticală dispare
     când itemul e deschis. */
  .accordion .icon {
    position: absolute;
    inset-block-start: 22px;
    inset-inline-end: 0;
    width: 28px;
    height: 28px;
    border: 1px solid;
    border-radius: 22px;
  }

  .accordion .icon::before,
  .accordion .icon::after {
    content: "";
    display: block;
    position: absolute;
    background: currentcolor;
  }

  .accordion .icon::before {
    inset-block-start: 12px;
    inset-inline-start: 8px;
    width: 10px;
    height: 2px;
  }

  .accordion .icon::after {
    inset-block-start: 8px;
    inset-inline-start: 12px;
    width: 2px;
    height: 10px;
  }

  .accordion button[aria-expanded="true"] .icon::after {
    display: none;
  }

  /*
   * `grid-template-rows: 0fr → 1fr` în loc de `max-height: 9em` cât era în
   * original: se animează la fel, dar nu taie răspunsurile mai lungi.
   */
  .accordion .accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 200ms linear,
      opacity 200ms linear;
  }

  .accordion .accordion-content > * {
    overflow: hidden;
    margin-block: 0;
  }

  .accordion button[aria-expanded="true"] + .accordion-content {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  @media (width <= 64rem) {
    .accordion .accordion-title {
      font-size: 22px;
      line-height: 32px;
    }
  }

  @media (width <= 40rem) {
    .accordion .accordion-title {
      font-size: 18px;
      line-height: 28px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion .accordion-content {
      transition: none;
    }
  }

  /* ---------- pagini simple (page.php) ---------- */
  /*
   * Banda cu titlul: fundal #1e1e1e și 60px până la text, ca în tema veche;
   * titlul alb, bold, centrat. Linia albă de sus o desparte de header, care
   * are aceeași culoare — tot din tema veche (`.page_title_intro`).
   */
  .page-intro {
    padding-block: 45px;
    border-block-start: 1px solid #fff;
    background-color: #1e1e1e;
    color: #fff;
    text-align: center;
  }

  .page-intro__title {
    margin: 0;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: inherit;
  }

  .page-body {
    padding-block: 60px 100px;
  }

  /* Textul pe toată lățimea containerului, aliniat la stânga — nu coloana
     îngustă și centrată pe care `.prose` o dă implicit. */
  .page-body .prose {
    max-width: var(--wrap-max, 1440px);
  }

  @media (width <= 640px) {
    .page-intro {
      padding-block: 30px;
    }

    .page-intro__title {
      font-size: 28px;
      line-height: 36px;
    }

    .page-body {
      padding-block: 40px 70px;
    }
  }

  /* ---------- contacte (prima pagină) ---------- */
  /*
   * Harta pe toată lățimea ferestrei, cu fișa de contact absolută peste ea, la
   * stânga — `.map_contact` din tema veche. Sub 1024px fișa iese din suprapunere
   * și devine un card obișnuit, cu umbră, deasupra hărții.
   */
  /*
   * Decalajul de 8px stă pe întreg blocul, nu pe fișă: în tema veche îl aveau
   * și `.contacte-footer`, și `.mapa-footer`, deci fișa rămânea lipită de
   * marginea de sus a hărții. Pus doar pe fișă, o cobora cu 8px față de hartă.
   */
  .contacts__layout {
    position: relative;
    translate: 0 8px;
  }

  .contacts__card {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 10px;
    z-index: 1;
    width: 30%;
    height: 459px;
    padding: 40px 30px;
    background-color: #fff;
  }

  .contacts__item {
    position: relative;
    padding-inline-start: 35px;
    /* Strutul liniilor, ca în tema veche: fără el adresa pe două rânduri
       crește fișa cu ~10px și programul iese din cele 459px. */
    line-height: 24px;
  }

  .contacts__item + .contacts__item {
    margin-block-start: 30px;
  }

  /*
   * Iconițele sunt aceleași fișiere ca în tema veche, puse tot pe `::before`.
   * `height: 100%` cu `background-size: contain` le ține la 20px lățime
   * indiferent cât de înalt e itemul (adresa se rupe pe două rânduri).
   */
  .contacts__item::before {
    content: "";
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 0;
    width: 20px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .contacts__item--address::before {
    background-image: url("/wp-content/uploads/2023/07/adresa.svg");
  }

  .contacts__item--phone::before {
    inset-block-start: 6px;
    background-image: url("/wp-content/uploads/2023/07/phone-color.svg");
  }

  .contacts__item--email::before {
    background-image: url("/wp-content/uploads/2023/07/email-color.svg");
  }

  .contacts__item--schedule::before {
    background-image: url("/wp-content/uploads/2023/07/program.svg");
  }

  .contacts__label {
    margin-block-end: 3px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
  }

  .contacts__value {
    font-size: 16px;
    line-height: 20px;
    color: var(--neutral-800);
    text-decoration: none;
  }

  .contacts__item--schedule .contacts__value {
    line-height: 26px;
  }

  a.contacts__value:hover {
    color: var(--brown-500);
  }

  .contacts__map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    filter: grayscale(85%);
  }

  @media (width <= 1023px) {
    .contacts__card {
      position: static;
      width: calc(100% - 60px);
      height: auto;
      margin: 80px auto 30px;
      border-radius: 20px;
      box-shadow: 0 0 10px #cdcdcd;
    }

    .contacts__layout {
      translate: none;
    }
  }

  @media (width <= 640px) {
    .contacts__card {
      width: calc(100% - 30px);
      margin: 70px auto 30px;
      padding: 30px;
    }

    .contacts__map iframe {
      height: 320px;
    }
  }

  @media (width <= 1023px) {
  }

  @media (width <= 640px) {
  }

  /* ---------- antetul paginilor interioare ---------- */
  .page-hero {
    position: relative;
    display: grid;
    align-items: center;
    /* 600px ca în design, dar niciodată mai înalt decât ecranul: pe un laptop
       scurt, un antet de 600px ar împinge tot conținutul sub prima vizualizare. */
    min-height: min(600px, 85svh);
    /* Fără padding, ca în original: conținutul e centrat vertical în cele
       600px, iar bara fixă de 88px nu ajunge să-l atingă. */
    text-align: center;
    color: var(--color-text-inverse);
  }

  .page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .page-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
  }

  .page-hero__content {
    position: relative;
  }

  /* Valori măsurate pe tema veche la 1440px. Supratitlul e auriu deschis pe
     paginile interioare — albastrul apare doar pe slider-ul primei pagini. */
  .page-hero__eyebrow {
    margin-block-end: 10px;
    font-size: 14.4px;
    line-height: 21.6px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ebd7b2;
  }

  .page-hero__title {
    margin-block-end: 10px;
    font-size: 51px;
    line-height: 61.2px;
    font-weight: 700;
    text-transform: uppercase;
  }

  @media (width < 64rem) {
    .page-hero__title {
      font-size: 40px;
      line-height: 50px;
    }
  }

  @media (width < 48rem) {
    .page-hero__title {
      font-size: 25px;
      line-height: 35px;
    }
  }

  /*
   * Pe mobil butonul ia toată lățimea, iar textul se rupe pe cuvinte. `.btn`
   * are `white-space: nowrap`, și „Solicită plan de tratament personalizat!”
   * ieșea de 431px pe un ecran de 375, cu scroll orizontal pe toată pagina.
   */
  @media (width <= 40rem) {
  }

  @media (width <= 64rem) {
  }

  @media (width <= 48rem) {
  }

  /* Imaginea scade înainte de a se pierde raportul, la 1366px. */
  @media (width <= 1365px) {
  }

  @media (width <= 1250px) {
  }

  /* Sub 1024px cardurile trec pe toată lățimea, deci imaginea poate fi mai
     înaltă decât la două coloane. */
  @media (width <= 1023px) {
  }

  @media (width <= 640px) {
  }

  /* ---------- modal ---------- */
  .modal {
    width: min(50rem, calc(100vw - 2rem));

    /*
     * `margin: auto` centrează un `<dialog>` deschis cu showModal(): browserul
     * îl folosește împreună cu `inset: 0`. Resetul temei are `* { margin: 0 }`,
     * care îl anula — de aici caseta lipită în stânga-sus.
     */
    margin: auto;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);

    &::backdrop {
      background-color: rgb(0 0 0 / 0.5);
      backdrop-filter: blur(2px);
    }
  }

  .modal__box {
    padding: var(--space-8);
  }

  .modal__title {
    margin-block-end: var(--space-6);
    font-size: var(--step-2);
    text-align: center;
  }

  .modal__close {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: #333;
    font-size: 1.75rem;
    line-height: 1;
    /* Alb pe fundalul închis al butonului. Era `--color-text`, adică tot #333:
       X-ul se pierdea complet în cerc. */
    color: #fff;
    cursor: pointer;
  }

  /*
   * Conturul e desenat din linii (`M6 6l12 12…`), deci are nevoie de `stroke`.
   * Fără el browserul îl umple, iar o linie fără suprafață nu se vede deloc.
   */
  .modal__close svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .modal__close:hover,
  .modal__close:focus-visible {
    background-color: #000;
  }

  /* Nume și telefon pe același rând, restul pe toată lățimea. */
  .modal .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .modal .wpcf7-form > * {
    grid-column: 1 / -1;
    margin-block-end: 0;
  }

  .modal .wpcf7-form > p:has(input[type="text"]),
  .modal .wpcf7-form > p:has(input[type="tel"]) {
    grid-column: span 1;
  }

  /* Bifa de acord și butonul de trimitere pe toată lățimea, în toate popup-urile. */
  .modal .wpcf7-form .form_consent,
  .modal .wpcf7-form .button_send {
    grid-column: 1 / -1;
  }

  .modal .wpcf7-form .wpcf7-submit {
    width: 100%;
  }

  @media (width <= 40rem) {
    .modal .wpcf7-form {
      grid-template-columns: 1fr;
    }

    .modal .wpcf7-form > p:has(input[type="text"]),
    .modal .wpcf7-form > p:has(input[type="tel"]) {
      grid-column: 1 / -1;
    }

    .modal__box {
      padding: var(--space-6);
    }
  }

  /*
   * 7 și 4 din 12 coloane, cu una goală între ele — exact proporția măsurată
   * pe tema veche la 1440px: 823px / 470px, cu 59px între.
   */
  @media (width >= 60rem) {
  }

  /* ---------- butoane de contact rapid ---------- */
  .contact-buttons {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-12);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }

  .contact-buttons__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: filter var(--duration-fast) var(--ease-out);

    & svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      fill: currentcolor;
    }

    &:hover {
      filter: brightness(0.92);
    }
  }

  .contact-buttons__item--whatsapp {
    background-color: #4caf72;
  }

  .contact-buttons__item--phone {
    background-color: #c0453f;
  }

  .contact-buttons__item--messenger {
    background-color: #2d6cdf;
  }

  @media (width < 48rem) {
  }

  /* Blocarea de consimțământ stă în locul hărții, deci primește aceeași
     lățime; altfel placeholderul ar fi lipit de marginile ferestrei. */
  .contact__map .mcc-embed {
    padding-inline: var(--wrap-gutter);
  }

  /* ---------- Contact Form 7 ---------- */
  /* Formularele vin din plugin, deci stilizăm elementele, nu clase proprii. */
  .wpcf7-form p {
    margin-block-end: var(--space-4);
  }

  /*
   * Definițiile formularelor păstrează markup-ul cu clase de tip Bootstrap din
   * tema veche (`d-flex`, `col-lg-6`), iar Bootstrap nu mai există. Le traducem
   * local într-un grid, ca numele și telefonul să stea din nou pe un rând.
   *
   * E un shim temporar, limitat la `.wpcf7-form` — nu Bootstrap reintrodus
   * global. Dispare odată cu rescrierea celor trei formulare.
   */
  .wpcf7-form .d-flex {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  .wpcf7-form [class*="col-lg-12"],
  .wpcf7-form [class*="col-md-12"] {
    grid-column: 1 / -1;
  }

  .wpcf7-form .d-flex p {
    margin-block-end: 0;
  }

  /*
   * Câmpul de dată e completat automat, nu de vizitator. Tema veche îl ascundea
   * cu aceeași regulă; fără ea apare un selector de dată sub buton.
   */
  .wpcf7-form .form_date {
    display: none;
  }

  .wpcf7-form label {
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
    margin-block-end: var(--space-2);
  }

  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="date"],
  .wpcf7-form select,
  .wpcf7-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font: inherit;
  }

  .wpcf7-form textarea {
    min-height: 8rem;
    resize: vertical;
  }

  .modal  .wpcf7-form textarea {
    min-height: auto;
    height: 140px;
  }
    .modal .wpcf7-submit  {
      width: 100%;
    }
  .wpcf7-form input[type="submit"] {
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-8);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    font-weight: 600;
    cursor: pointer;
  }

  .wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-accent-hover);
  }

  .wpcf7-not-valid-tip {
    color: var(--danger-500);
    font-size: var(--step--1);
  }

  .wpcf7 form .wpcf7-response-output {
    margin-inline: 0;
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
  }

  .prose--centered {
    margin-inline: auto;
    text-align: center;
  }

  /* ---------- testimoniale video (listă de redare) ---------- */
  /*
   * Transcriere măsurată a `#vid-gallery` din tema veche, la 1440 / 900 / 640 px:
   * player de 67% și listă de 33%, ambele de 500px înălțime, într-o zonă de cel
   * mult 1100px.
   */
  /*
   * 80px de la antet la primul bloc, 120px între blocuri, 100px până la
   * recenzii — distanțele măsurate pe tema veche (acolo: `divider-80`,
   * `divider-80` plus marginile secțiunii, și `divider-100`).
   *
   * Cei 100px de jos stau pe fiecare bloc, nu doar pe ultimul: între două
   * blocuri marginile se comprimă la 120px, iar după ultimul rămân 100px. Un
   * `:last-of-type` ar fi fost preluat de secțiunea de recenzii.
   */
  .videos {
    margin-block: 80px 100px;
  }

  .videos + .videos {
    margin-block-start: 120px;
  }

  .videos__head {
    margin-block-end: 30px;
    text-align: center;
  }

  /*
   * Cu descriere: 10px sub titlu și 40px de la descriere la player, ca în tema
   * veche. Cei 40px stau pe antet, nu pe descriere — marginea ultimului copil
   * s-ar comprima cu cea a antetului și ar rămâne tot 30px.
   */
  .videos__head:has(.videos__intro) {
    margin-block-end: 40px;
  }

  .videos__head:has(.videos__intro) .videos__title {
    margin-block-end: 10px;
  }

  .videos__intro {
    max-width: none;
  }

  .videos__eyebrow {
    margin-block-end: 0;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown-500);
  }

  .videos__title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--neutral-800);
  }

  .playlist {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
    margin-inline: auto;
  }

  .playlist__main {
    width: 67%;
  }

  /* Facade-ul are în mod normal raport 16/9; aici înălțimea o dă lista. */
  .playlist__player {
    height: 600px;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .playlist__list {
    width: 33%;
    height: 600px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #232323;
    max-height: 510px
  }

  .playlist__item {
    border-block-end: 1px solid #393939;
  }

  .playlist__item.is-active {
    background-color: #525252;
  }

  .playlist__button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .playlist__thumb {
    flex: none;
    width: 72px;
    height: 45px;
    object-fit: cover;
    /* Chenarul roșu marchează clipul care rulează, ca în tema veche. */
    border: 1px solid transparent;
  }

  .playlist__item.is-active .playlist__thumb {
    border-color: #f00;
  }

  .playlist__label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding-inline-start: 15px;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
  }

  /* Bara de derulare a listei e vizibilă permanent: altfel nimic nu arată că
     lista continuă. Vezi nota de la recenzii pentru `@supports`. */
  .playlist__list {
    scrollbar-width: thin;
    scrollbar-color: #666 #232323;
  }

  @supports selector(::-webkit-scrollbar) {
    .playlist__list {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }

    .playlist__list::-webkit-scrollbar {
      width: 8px;
    }

    .playlist__list::-webkit-scrollbar-track {
      background-color: #232323;
    }

    .playlist__list::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: #666;
    }
  }

  @media (width <= 1023px) {
    .playlist__player,
    .playlist__list {
      height: 350px;
    }

    .videos__title {
      font-size: 34px;
      line-height: 40.8px;
    }
  }

  /* Sub 640px playerul trece pe toată lățimea și lista sub el. */
  @media (width <= 640px) {
    .playlist__main,
    .playlist__list {
      width: 100%;
    }

    .playlist__player {
      height: 250px;
    }

    .playlist__list {
      height: 200px;
    }

    .playlist__button {
      padding: 8px;
    }

    .videos__title {
      font-size: 30px;
      line-height: 36px;
    }
  }

  @media (width <= 1023px) {
  }

  @media (width <= 640px) {
  }

  .gallery__img {
    width: 100%;
    border-radius: var(--radius-md);
  }

  /* ---------- galerie „înainte și după” ---------- */
  /*
   * Transcriere măsurată a `.before-after-gallery` din tema veche, la
   * 1440 / 1100 / 900 / 640 px: trei coloane cu 15px de fiecare parte, deci
   * imagini de 450px la 1440. Grila e pe toată lățimea ferestrei, ca acolo —
   * doar titlul stă în container.
   */
  .before-after {
    margin: 60px 0 70px;
  }

  .before-after__eyebrow {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: var(--brown-500);
  }

  .before-after__title {
    margin-block-end: 30px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    text-align: center;
    color: var(--neutral-800);
  }

  .before-after__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .before-after__item {
    padding-inline: 15px;
  }

  .before-after__link {
    display: block;
    cursor: zoom-in;
  }

  .before-after__img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .before-after__action {
    margin-block-start: 30px;
    text-align: center;
  }

  @media (width <= 1250px) {
    .before-after {
      margin-block-start: 100px;
    }
  }

  /* Sub 1024px două coloane, ca `col-md-*` de acolo. */
  @media (width <= 1023px) {
    .before-after {
      margin-block: 80px;
    }

    .before-after__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .before-after__title {
      font-size: 34px;
      line-height: 40.8px;
    }
  }

  @media (width <= 640px) {
    .before-after {
      margin-block: 70px;
    }

    .before-after__grid {
      grid-template-columns: 1fr;
      row-gap: 15px;
    }

    .before-after__title {
      margin-block-end: 20px;
      font-size: 30px;
      line-height: 36px;
    }
  }

  /* ---------- lightbox ---------- */
  /*
   * `<dialog>` nativ: fundalul, capcana de focus, Escape și restituirea
   * focusului sunt ale browserului. Marginea implicită a dialogului e anulată
   * de reset, deci centrarea se face explicit.
   */
  /*
   * `display` stă pe `[open]`, nu pe clasă: foaia de stil a browserului ascunde
   * un `<dialog>` închis prin `dialog:not([open]) { display: none }`, iar o
   * regulă de autor cu `display: grid` o învinge — dialogul rămânea vizibil
   * după Escape, doar fără fundal.
   */
  .lightbox[open] {
    display: grid;
  }

  .lightbox {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: var(--space-6);
    border: 0;
    /* Întunecarea vine doar din `::backdrop`. Pusă și pe dialog, cele două
       straturi se adunau și fundalul ieșea aproape opac. */
    background: transparent;
  }

  .lightbox::backdrop {
    background-color: rgb(0 0 0 / 75%);
  }

  .lightbox__figure {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
  }

  .lightbox__img {
    max-width: 100%;
    /* Restul înălțimii, după contor și padding: imaginea nu iese din ecran. */
    max-height: calc(100dvh - 8rem);
    border-radius: 10px;
    object-fit: contain;
  }

  .lightbox__counter {
    font-size: 14px;
    color: rgb(255 255 255 / 70%);
  }

  .lightbox__nav,
  .lightbox__close {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background-color: rgb(255 255 255 / 90%);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .lightbox__nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .lightbox__nav:hover,
  .lightbox__close:hover {
    background-color: #fff;
  }

  .lightbox__nav img {
    width: 24px;
    height: 24px;
  }

  .lightbox__close {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: var(--neutral-900);
  }

  /* O singură imagine: săgețile n-au unde să ducă. */
  .lightbox--single .lightbox__nav,
  .lightbox--single .lightbox__counter {
    display: none;
  }

  @media (width <= 640px) {
    .lightbox {
      padding: var(--space-3);
      gap: var(--space-2);
    }

    .lightbox__nav {
      width: 40px;
      height: 40px;
    }

    .lightbox__nav img {
      width: 18px;
      height: 18px;
    }
  }

  .intro__content ul {
    padding-inline-start: 30px;
    list-style: disc;
  }

  /*
   * Textul pe jumătate, imaginea pe cealaltă. Imaginea ocupă 70% din coloana
   * ei și e centrată, ca în tema veche (`.doctor_img { text-align: center }`).
   */
  .doctor {
    display: flex;
    flex-wrap: wrap;
  }

  .doctor + .doctor {
    margin-block-start: 80px;
  }

  @media (width <= 1023px) {
  }

  @media (width <= 640px) {
  }

  /* ---------- variante de antet ---------- */
  .page-hero--compact {
    min-height: clamp(12rem, 26vh, 18rem);
    background-color: var(--neutral-800);
  }

  .page-hero--tall {
    min-height: clamp(50rem, 90vh, 90rem);
  }

  /* ---------- grila de cazuri clinice ---------- */
  /*
   * Transcriere măsurată a `archive-cazuri-clinice.php` din tema veche, la
   * 1440 / 1100 / 900 / 640 px: două coloane, card de 500px, titlul peste un
   * degrade care urcă la hover.
   */
  /*
   * 120px sus și 90px jos pe fiecare grilă. Între două grile marginile se
   * comprimă la 120px — exact distanța măsurată de la prima grilă la titlul
   * secțiunii de ortodonție — iar după ultima rămân cei 90px de dinaintea
   * recenziilor (în tema veche, `divider-90`).
   *
   * Nu `:last-of-type`: recenziile sunt și ele un `<section>`, deci ar fi
   * devenit ele ultimul de tipul lui, iar grila ar fi rămas fără margine jos.
   */
  .cases {
    margin-block: 120px 90px;
  }

  @media (width <= 1250px) {
    .cases {
      margin-block-start: 100px;
    }
  }

  @media (width <= 1023px) {
    .cases {
      margin-block-start: 80px;
    }
  }

  /* Sub 768px o singură coloană, ca `col-sm-12` de acolo. */
  @media (width < 48rem) {
  }

  @media (width <= 640px) {

    /* Containerul renunță la gutter, ca marginea cardului să rămână de 15px și
       nu de 30 — la fel ca lista de articole. */
    .cases > .wrap {
      padding-inline: 0;
    }
  }

  /* ---------- caz clinic ---------- */
  /*
   * Transcriere măsurată a `single-cazuri-clinice.php` din tema veche, la
   * 1440 / 1100 / 900 / 640 px.
   *
   * `.case__wrap` are 15px în plus pe laturi: în tema veche conținutul stătea
   * într-un `.col-12` din grila Bootstrap, deci imaginea era de 1380, nu 1410.
   */
  .case__wrap {
    padding-inline: 30px;
  }

  .case__media {
    margin: 120px 0 0;
  }

  .case__img {
    width: 100%;
    height: 640px;
    object-fit: cover;
    border-radius: 15px;
  }

  /* Cardurile au 25% minus marginile proprii, ca `calc(25% - 30px)` de acolo. */
  .case__facts {
    display: flex;
    flex-wrap: wrap;
    margin: 30px -15px;
  }

  .case-fact {
    display: flex;
    flex: 0 0 calc(25% - 30px);
    max-width: calc(25% - 30px);
    flex-wrap: wrap;
    align-items: center;
    margin-inline: 15px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 25px rgb(0 0 0 / 10%);
    transition: background-color 0.5s;
  }

  .case-fact:hover {
    background-color: var(--brown-500);
  }

  .case-fact__label {
    width: 100%;
    margin-block-end: 10px;
    font-size: 24px;
    line-height: 28.8px;
    font-weight: 800;
    color: #000;
  }

  .case-fact__value {
    width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #000;
  }

  /* Descrierea: card alb cu umbră, peste fundalul paginii. */
  .case__story {
    position: relative;
    z-index: 1;
    margin-block: 70px;
    padding: 40px 40px 20px;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);
  }

  .case__story > * + * {
    margin-block-start: var(--space-4);
  }

  /* Supratitlul și titlul sunt scrise în editor ca `h6` și `h2`. */
  .case__story h6 {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brown-500);
  }

  .case__story h2 {
    margin-block: 10px 30px;
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
  }

  .case__story p,
  .case__story li {
    font-size: 16px;
    line-height: 26px;
    color: var(--neutral-800);
  }

  .case__story ul,
  .case__story ol {
    padding-inline-start: 25px;
  }

  .case__story ul {
    list-style: disc;
  }

  .case__story ol {
    list-style: decimal;
  }

  .case__story a {
    font-weight: 700;
  }

  /* ---------- caruselele unui caz clinic ---------- */
  /*
   * Un cadru pe rând, cu vecinii iviți 200px de fiecare parte: exact ce făcea
   * Owl Carousel cu `stagePadding: 200`. Lățimea cadrului e calculată din
   * pistă, nu fixată, ca ivirea să rămână de 200px la orice lățime.
   */
  .case-gallery__inner,
  .case-related__carousel {
    position: relative;
  }

  /*
   * Cei 200px de padding pe pistă sunt ce înlocuiește bucla din Owl: fără ei,
   * primul și ultimul cadru n-ar putea ajunge în centru, deci ar sta lipite de
   * margine în loc să fie cadrul activ.
   */
  .case-gallery__track,
  .case-related__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    margin: 0;
    padding-inline: 200px;
    padding-block: 0;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .case-gallery__track::-webkit-scrollbar,
  .case-related__track::-webkit-scrollbar {
    display: none;
  }

  /* `100%` se raportează la cutia de conținut a pistei, adică deja fără cei
     200px de padding de fiecare parte — exact lățimea cadrului din Owl. */
  .case-gallery__slide,
  .case-related__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    /* Vecinii stau micșorați și estompați; `carousel.js` marchează centrul. */
    opacity: 0.4;
    scale: 0.9;
    transition: opacity 0.4s ease, scale 0.4s ease;
  }

  .case-gallery__slide.is-active,
  .case-related__slide.is-active {
    opacity: 1;
    scale: 1;
  }

  .case-gallery__slide {
    height: 500px;
    padding: 16px 36px;
  }

  .case-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  .case-carousel__arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background-color: #d6d6d6;
    translate: 0 -50%;
    cursor: pointer;
  }

  /* 50px = cei 20px de padding ai containerului plus 30px față de pistă, ca în
     tema veche, unde săgețile erau copii direct ai caruselului. */
  .case-carousel__arrow--prev {
    inset-inline-start: 50px;
  }

  .case-carousel__arrow--next {
    inset-inline-end: 50px;
  }

  .case-carousel__arrow img {
    display: block;
    width: 20px;
    height: 20px;
  }

  .case-carousel__arrow:disabled {
    opacity: 0.4;
    cursor: default;
  }

  /* ---------- celelalte cazuri ---------- */
  .case-gallery__inner,
  .case-related__inner {
    max-width: 90%;
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* 100px sus, ca în tema veche (acolo: `divider-50` plus marginile secțiunii). */
  .case-related {
    padding-block: 100px;
  }

  .case-related__eyebrow {
    margin-block-end: 5px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown-500);
  }

  .case-related__title {
    margin-block-end: 15px;
    font-size: 38px;
    line-height: 45.6px;
    font-weight: 700;
  }

  .case-related__slide {
    padding-inline: 20px;
  }

  .case-card {
    position: relative;
    display: block;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #ccc;
  }

  .case-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*
   * Caseta stă coborâtă cu 75px: în repaus se vede doar titlul, iar la hover
   * urcă 65px și apare „citește mai mult”.
   */
  .case-card__info {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -75px;
    padding: 25% 30px 60px;
    background-image: linear-gradient(to bottom, transparent, #000);
    color: var(--color-text-inverse);
    text-align: center;
    transition: translate 0.5s ease;
  }

  .case-card:hover .case-card__info,
  .case-card:focus-visible .case-card__info {
    translate: 0 -65px;
  }

  .case-card__title {
    font-size: 24px;
    line-height: 36px;
  }

  .case-card__more {
    display: inline-block;
    margin-block-start: 8px;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .case-card:hover .case-card__more,
  .case-card:focus-visible .case-card__more {
    opacity: 1;
  }

  .case-related__cta {
    margin-block-start: 40px;
    text-align: center;
  }

  @media (width <= 1250px) {
    .case__media {
      margin-block-start: 100px;
    }

    .case__img {
      height: 550px;
    }

    .case__facts {
      margin: 30px -10px;
    }

    .case-fact {
      flex-basis: calc(25% - 20px);
      max-width: calc(25% - 20px);
      margin-inline: 10px;
    }

    .case__story {
      margin-block: 70px 60px;
    }

    .case__story h2 {
      font-size: 25px;
      line-height: 35px;
    }
  }

  @media (width <= 1023px) {
    .case__img {
      height: 500px;
    }

    .case-gallery__inner,
    .case-related__inner {
      max-width: 100%;
      padding-inline: 0;
    }

    /* Sub 1024px Owl renunța la ivirea vecinilor: un cadru pe toată pista. */
    .case-gallery__slide,
    .case-related__slide {
      flex-basis: 100%;
      opacity: 1;
      scale: 1;
    }

    .case-gallery__slide {
      padding-inline: 0;
    }

    /*
     * Și varianta de pe prima pagină: `.cases__carousel .case-related__track`
     * are specificitate mai mare decât regula de mai sus, deci păstra cei
     * 200px de fiecare parte. Pe un ecran de 375px asta lăsa cadrele de 40px
     * lățime și lățea pagina la 400px.
     */
    .case-gallery__track,
    .case-related__track,
    .cases__carousel .case-related__track {
      padding-inline: 0;
    }

    .case-related__title {
      font-size: 30px;
      line-height: 38px;
    }
  }

  @media (width <= 640px) {
    .case__wrap {
      padding-inline: 15px;
    }

    .case__media {
      margin-block-start: 80px;
    }

    .case__img {
      height: 300px;
    }

    .case__facts {
      margin: 30px -10px;
    }

    .case-fact {
      flex-basis: calc(50% - 20px);
      max-width: calc(50% - 20px);
      margin-block-end: 20px;
      padding: 12px;
    }

    .case-fact__label {
      font-size: 18px;
      line-height: 26px;
    }

    .case__story {
      margin-block: 40px 60px;
      padding: 30px 15px 20px;
    }

    .case__story h2 {
      font-size: 20px;
      line-height: 30px;
    }

    .case-gallery__slide {
      height: 320px;
    }

    .case-card {
      height: 370px;
    }

    .case-card__title {
      font-size: 20px;
      line-height: 28px;
    }

    .case-related__title {
      font-size: 24px;
      line-height: 34px;
    }
  }

  /*
   * Imaginea reprezentativă ocupă toată lățimea containerului, indiferent de
   * cuprins. Textul, însă, e limitat la 1000px când nu are cuprins alături —
   * exact ce făcea `.single_post_text` în tema veche.
   */
  .post-single__layout--narrow .post-single__main {
    max-width: 1000px;
    margin-inline: auto;
  }

  /*
   * 1fr + 2fr pe o pistă de 1410px dau exact 470 / 940, iar cei 15px de padding
   * din fiecare coloană lasă 440 / 910 — aceleași valori ca grila Bootstrap de
   * acolo. De aceea distanța dintre coloane vine din padding, nu din `gap`.
   */
  @media (width >= 48rem) {
  }

  .post-toc[data-open="false"] .post-toc__chevron {
    rotate: 45deg;
  }

  .post-toc[data-open="false"] .post-toc__panel {
    display: none;
  }

  .article-content h4 {
    margin-block-start: 30px;
    font-size: 22px;
    line-height: 32px;
  }

  .article-content ul ul {
    list-style: circle;
  }

  .article-content ul ul ul {
    list-style: square;
  }

  .article-content ol ol {
    list-style: lower-alpha;
  }

  .article-content ol ol ol {
    list-style: lower-roman;
  }

  @media (width <= 1250px) {
  }

  @media (width <= 1023px) {
  }

  /* Sub 768px cuprinsul trece deasupra articolului și nu mai e lipit de bară. */
  @media (width < 48rem) {
  }

  @media (width <= 640px) {

    .article-content h4 {
      font-size: 20px;
      margin-block-start: 20px;
    }
  }

  .feature {
    text-align: center;
  }

  .feature__icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-inline: auto;
    margin-block-end: var(--space-4);
  }

  .banner__content--plain {
    color: var(--color-text);
  }

  @media (width >= 56rem) {

    .media-text--reverse .media-text__media {
      order: -1;
    }
  }

  .media-text__img {
    width: 100%;
    border-radius: var(--radius-md);
  }

  .info-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* ---------- planuri de preț ---------- */
  .plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .step {
    position: relative;
    counter-increment: step;
    padding: var(--space-12) var(--space-6) var(--space-6);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-subtle);
  }

  /* Numărul e generat din contor: ordinea vine din `<ol>`, nu din conținut. */
  .step::before {
    content: counter(step);
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-6);
    font-size: var(--step-2);
    font-weight: 800;
    color: var(--color-accent);
  }

  .step__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-block-end: var(--space-3);
  }

  /* ---------- perechi înainte / după ---------- */
  .pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .pair__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  /* ---------- video propriu ---------- */
  .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background-color: var(--neutral-900);
  }

  /* ---------- ajustări pentru telefon ---------- */
  /*
   * Ultimul bloc din layer, deci bate restul regulilor din `components` la
   * specificitate egală — exact cât îi trebuie. Înainte stătea în afara
   * layerelor, de unde bătea absolut tot, inclusiv stilurile paginilor orto și
   * turism; de acolo veneau două erori reparate anterior.
   */
  @media (width <= 640px) {
    .page-hero {
        min-height: min(480px, 85svh);
    }
    .reviews-summary {
      justify-content: center;
    }
    .reviews-summary__cta {
      margin-left: -22%;
    }
    .site-footer__desc {
      max-width: 100%;
      font-size: 14px;
      margin-bottom: 15px
    }
    .site-footer__logo {
      margin-bottom: 15px;
    }
    .site-footer__list li {
       margin-block-end: 10px;
    }
    .site-footer__cols {gap: 0}
    .site-footer__heading {margin-block-end: 10px}
    .site-footer__inner {
      padding-block: 40px;
    }

    /*
     * Niciun buton nu iese din ecran. `.btn` are `white-space: nowrap`, iar pe
     * home „Programează-te online la orice…” avea 394px pe un ecran de 375:
     * pagina se lățea, browserul o micșora ca să încapă și bara de jos cădea
     * sub marginea ecranului. Butoanele care încap rămân pe un rând.
     */
    .btn {
      max-width: 100%;
      white-space: normal;
      text-align: center;
    }

    /*
     * Butoanele flotante devin o bară jos: Telefon și WhatsApp, unul lângă
     * altul, cu text. Messenger-ul iese pe mobil.
     */
    .fab {
      inset-inline: 15px;
      bottom: 15px;
      flex-direction: row;
      gap: 10px;
    }

    .fab__item {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: auto;
      height: 50px;
      padding: 0 16px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
    }

    .fab__item svg {
      flex: none;
      width: 20px;
      height: 20px;
    }

    .fab__label {
      display: inline;
    }

    .fab__item--messenger {
      display: none;
    }

    /* Loc sub footer, ca bara să nu acopere ultimele rânduri ale paginii. */
    .site-footer__bottom-inner {
      padding-block-end: 80px;
    }
    .case__facts {
      display: block;
      padding: 0 10px;
    }
    .case-fact {width: 100%; max-width: 100%; margin: 0; margin-bottom: 10px}
    .case-related__slide {
      padding: 0;
    }
    .case-related {
      padding-block: 70px
    }
    .btn, .btn--outline {
      font-size: 16px;
      padding: 12px 30px;
    }
    .videos + .videos {
      margin-block-start: 80px;
    } 
    .videos {
      margin-block: 80px 80px;
    }
    .patients .wrap,
    .doctors .wrap,
    .for-whom .wrap {
      padding: 0;
    }
    .services {
      margin-block: 80px 60px;
    }
    .banner__content {
      padding: 15px;
    }
    .why-us {
      margin-block: 80px;
    }
    .why-us__icon {
      width: 80px;
      height: 80px;
    }
    .why-us__item {
      padding: 0;
    }
    .before-after__item {
      padding: 0;
    }
  }

  /* ---------- certificate ----------
   * Componenta stătea în page-home.css, pentru că doar prima pagină o folosea.
   * O folosește și „Dantură Fixă pe implanturi”, care nu încarcă acel fișier,
   * iar fără regulile astea săgețile rămâneau absolute și se suprapuneau peste
   * hero. Un `md_part` folosit de două pagini își ține stilurile aici.
   */
  
  .certificates {
    margin-block-end: 100px;
  }


  .certificates__img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
  }
  @media (width <= 1023px) {

    .certificates__img {
      height: 240px;
    }
  }
  @media (width <= 640px) {

    .certificates__img {
      height: 250px;
    }
  }

  
  .certificates__carousel {
    position: relative;
  }


  .certificates__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }


  .certificates__track::-webkit-scrollbar {
    display: none;
  }


  .certificates__item {
    flex: 0 0 calc(100% / 3);
    padding-inline: 15px;
    scroll-snap-align: center;
  }


  .certificates__link {
    display: block;
    cursor: zoom-in;
  }


  /* Săgețile stau sub carusel, la dreapta, ca în tema veche. */
  .certificates__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-block-start: 30px;
  }


  .certificates__nav .case-carousel__arrow {
    position: static;
    translate: none;
  }
  @media (width <= 1023px) {

    .certificates__item {
      flex-basis: 50%;
    }
  }
  @media (width <= 640px) {

    .certificates__item {
      flex-basis: 100%;
    }
  }

  /* ---------- video în fereastră modală ----------
   * Perechea de stiluri pentru `modules/video-modal.js`. Aceeași așezare ca la
   * lightbox, și din același motiv: `margin: auto`, cu care browserul centrează
   * un `<dialog>` modal, e anulat de `* { margin: 0 }` din reset. Deci dialogul
   * acoperă ecranul și centrează scena el însuși, cu săgețile de o parte și de
   * alta.
   */
  .video-modal[open] {
    display: grid;
  }

  .video-modal {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    /* Fără `justify-items: center`: ar strânge coloana din mijloc pe conținut,
       iar scena, care își ia lățimea din ea, s-ar prăbuși la câțiva pixeli. */
    gap: var(--space-4);
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: var(--space-6);
    border: 0;
    /* Întunecarea vine doar din `::backdrop`, ca la lightbox: pusă și aici,
       cele două straturi s-ar aduna. */
    background: transparent;
    overscroll-behavior: contain;
  }

  .video-modal::backdrop {
    background-color: rgb(0 0 0 / 80%);
  }

  /*
   * Coloanele se dau pe nume, nu prin ordinea din document: când grupul are un
   * singur clip, săgețile trec pe `display: none` și nu mai sunt elemente de
   * grilă — auto-plasarea muta figura în prima coloană și clipul rămânea lipit
   * de marginea stângă.
   */
  .video-modal__nav--prev {
    grid-column: 1;
  }

  .video-modal__figure {
    grid-column: 2;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .video-modal__nav--next {
    grid-column: 3;
  }

  /*
   * Scena ține 16:9 și încape în ecran: lățimea e cea mai mică dintre lățimea
   * disponibilă, 1100px și cât permite înălțimea. Un clip cu alte proporții
   * rămâne întreg, cu benzi negre — ca în fancybox-ul de pe site-ul vechi.
   */
  .video-modal__stage {
    position: relative;
    width: min(100%, 1100px, (100dvh - 10rem) * 16 / 9);
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: #000;
  }

  /* Facade-ul și iframe-ul pe care îl pune youtube.js în locul lui. */
  .video-modal__player,
  .video-modal__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Fotografiile din galeriile amestecate: întregi, cu benzi negre pe laturi. */
  .video-modal__player--image {
    object-fit: contain;
  }

  .video-modal__counter {
    margin: 0;
    font-size: 14px;
    color: rgb(255 255 255 / 70%);
  }

  .video-modal__nav {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 90%);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .video-modal__nav:hover,
  .video-modal__nav:focus-visible {
    background-color: #fff;
  }

  .video-modal__nav img {
    width: 24px;
    height: 24px;
  }

  /* Un singur clip în grup: nu e nimic de parcurs. */
  .video-modal--single .video-modal__nav,
  .video-modal--single .video-modal__counter {
    display: none;
  }

  /* În colțul ecranului, ca la fancybox — nu lipit de clip. */
  .video-modal__close {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 15%);
    font-size: 26px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
  }

  .video-modal__close:hover,
  .video-modal__close:focus-visible {
    background-color: rgb(255 255 255 / 28%);
  }

  @media (width <= 640px) {
    .video-modal {
      gap: var(--space-2);
      padding: var(--space-3);
    }

    .video-modal__nav {
      width: 36px;
      height: 36px;
    }

    .video-modal__nav img {
      width: 18px;
      height: 18px;
    }

    .video-modal__close {
      inset-block-start: 8px;
      inset-inline-end: 8px;
      background-color: rgb(0 0 0 / 55%);
    }
  }
}

 

/*
 * Pagina de mulțumire: butonul din editor („Pagina Principală”) în culoarea
 * brandului. În afara layerelor intenționat: gri-ul implicit (#32373c) vine
 * din stilurile globale WordPress (`.wp-element-button`), care nu sunt într-un
 * layer și deci bat orice regulă din layerele temei, indiferent de specificitate.
 */
.thank-you .wp-block-button__link {
  background-color: #978667;
  color: #fff;
  transition: filter 0.2s ease-out;
}

.thank-you .wp-block-button__link:hover,
.thank-you .wp-block-button__link:focus-visible {
  filter: brightness(1.08);

}

  @media (width <= 640px) {
    .benefits__list {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .btn {width: 100%;}

    .benefit {
      padding: 20px 15px;
      margin-left: 0;
      margin-right: 0;
    }
    .benefits {
      margin-block-end: 40px;
    }

    .benefit__title {
      margin-block-end: 10px;
    }
    .section__action {margin-block-start: 15px;}
    .counters {
      margin-block: 70px;
    }
    .section__head {
      margin-block-end: 20px;
    }
    .banner + .reviews-block {
      padding-block-start: 70px;
      padding-block-end: 0px;
    }
    .why-us .section__action {
        margin-block-start: 30px;
    }
    .infra__panel img {
      height: 42vh;
    }
    .section__action {
        margin-block-start: 30px;
    }
    .benefits .section__action {
        margin-block-start: 15px;
    }
    .infra {
      margin-block-end: 80px;
    }
    .cases {
      padding: 0 15px;
      margin-bottom: 60px;
    }
    .case-card {
        height: 320px;
    }
    .team__track .member {
      padding: 0;
    }
    .member__card {
      height: 400px;
    }
    .certificates__item {padding: 0;}
    .page-hero {
        min-height: min(340px, 85svh);
    }
    .why-us {
        margin-block: 60px;
    }
    .patients {
      margin-block: 80px;
    }
    .case-tile {
      padding-inline: 0;
    }
    .page-template-before-and-after .before-after__grid {
      padding: 0 15px;
    }
    .btn {
      line-height: 1.4;
    }
    .lp-showcase h1 {font-size: 38px; margin-bottom: 0;}
    .lp-section.lp-section--one {
      padding-top: 70px;
    }
    .lp-section.lp-section--specifications {
      padding-top: 60px;
    }
    .lp-section--reviews2 .yt {
      height: 200px;
      max-width: 100%;
    }
    .lp-section--reviews2 {margin-bottom: 0;}
    .lp-section--cta .h1,
    h1:not(.page-hero__title), .h1 {
      font-size: 34px;
      line-height: 40px;
    }
    .orto_reviews .videos {
      margin-top: 0px;
    }
    .lp-section--gallery.bg-dark h2 span {
      display: block;
    }
    .lp-section--about-payment .button_rate {
      margin-top: 30px;
    }
}