/*
 * Stiluri folosite doar de pagina unui serviciu.
 *
 * Desprinse din sections.css, unde erau încărcate pe fiecare pagină din
 * site. Intră în același layer `components` și se încarcă după el, deci
 * ordinea de cascadă rămâne cea dinainte. Regulile pe care le suprascria
 * mai jos o regulă comună au rămas în sections.css, ca să nu se inverseze.
 */
@layer components {


  .single-servicii p {
    font-size: 16px;
  }


  .single-servicii .intro__wrap {
    margin-bottom: 70px;
  }


  .page-hero__action {
    margin-block-start: var(--space-8);
  }


  /* ---------- articol de serviciu ---------- */
  .page-hero__action {
    margin-block-start: var(--space-8);
  }


  /* ---------- articol de serviciu ---------- */
  /*
   * Transcriere măsurată a `services-template/*.php` din tema veche, la 1440px.
   * Conținutul stă în containerul de 1440px cu încă 15px interiori — acolo
   * fiecare bloc era un `.col-*` din grila Bootstrap, deci textul începea la
   * 30px de marginea ferestrei, nu la 15.
   */
  .intro__wrap,
  .advantages__wrap {
    padding-inline: 30px;
  }


  .intro {
    margin-block: 90px 0;
  }


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


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


  /* Text la stânga, pe toată lățimea: înainte era centrat și îngustat. */
  .intro__content {
    max-width: none;
    font-size: 18px;
    line-height: 27px;
    text-align: start;
  }


  /* ---------- medicii ---------- */
  .doctors {
    margin-block: 120px;
  }


  .doctor__body,
  .doctor__media {
    flex: 0 0 50%;
    max-width: 50%;
    padding-inline: 15px;
  }


  .doctor__media {
    margin: 0;
    text-align: center;
  }


  /* `margin-inline: auto`, nu `text-align: center` pe părinte: resetul face
     imaginile `block`, iar alinierea textului nu le mai centrează. */
  .doctor__img {
    width: 70%;
    margin-inline: auto;
    border-radius: 20px;
  }


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


  .doctor__name {
    margin-block-end: 8px;
    font-size: 30px;
    line-height: 45px;
    font-weight: 700;
  }


  .doctor__content {
    max-width: none;
    margin-block-start: 30px;
    font-size: 16px;
    line-height: 24px;
  }


  /* Liniuță în loc de bulină, ca în tema veche. */
  .doctor__content ul {
    padding-inline-start: 20px;
    list-style: none;
  }


  .doctor__content li {
    position: relative;
    margin-block: 10px;
  }


  .doctor__content li::before {
    content: "–";
    position: absolute;
    inset-inline-start: -20px;
    color: var(--brown-500);
  }


  /* ---------- „pentru cine” ---------- */
  .for-whom {
    margin-block: 120px;
  }


  .for-whom__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }


  .for-whom__head {
    flex: 0 0 100%;
    padding-inline: 15px;
  }


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


  .for-whom__title {
    margin-block-end: 25px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--neutral-800);
  }


  /* 7 și 5 din 12 coloane. */
  .for-whom__media {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
    margin: 0;
    padding-inline: 15px;
  }


  .for-whom__img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 20px;
  }


  .for-whom__body {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
    padding-inline: 15px;
  }


  /* Caseta urcă 100px peste imagine; `z-index` o ține deasupra. */
  .for-whom__box {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-inline-start: -100px;
    padding: 40px 40px 20px;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);
  }


  .for-whom__box h2 {
    margin-block-end: 20px;
    font-size: 22px;
    line-height: 32px;
  }


  .for-whom__box ul,
  .advantages__list {
    margin: 0;
    padding-inline-start: 30px;
    list-style: none;
  }


  .for-whom__box li {
    position: relative;
    margin-block: 20px;
  }


  .for-whom__box li::before,
  .advantages__item::before {
    content: "✔";
    position: absolute;
    inset-inline-start: -30px;
    color: var(--neutral-800);
  }


  /* ---------- avantaje ---------- */
  .advantages {
    margin: 90px 0;
  }


  .advantages__card {
    padding: 30px 45px 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 5%);
  }


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


  .advantages__item {
    position: relative;
    margin-block: 30px;
    font-size: 16px;
    line-height: 26px;
  }


  /* Titlul pe primul rând, explicația dedesubt. */
  .advantages__name {
    display: block;
    font-weight: 700;
  }


  /* ---------- videoclipuri de pe articolele de serviciu ---------- */
  .video-block {
    margin-block: 120px;
  }


  /* Un clip singur: 1100px, ca în tema veche. */
  .video-block__wrap {
    max-width: 1100px;
  }


  .video-block .yt,
  .video-block .video {
    aspect-ratio: auto;
    height: 600px;
  }


  /* Două clipuri: alături, în containerul normal, cu 80px sus și jos. */
  .video-block--pair {
    margin-block: 80px;
  }


  .video-block--pair .video-block__wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: var(--wrap-max);
  }


  .video-block--pair .yt,
  .video-block--pair .video {
    height: 440px;
  }
  @media (width <= 1023px) {

    .doctor__body,
    .doctor__media {
      flex: 0 0 100%;
      max-width: 100%;
    }


    .doctor__media {
      margin-block-end: 30px;
      order: -1;
    }


    .doctor__img {
      width: 55%;
    }


    .for-whom__media,
    .for-whom__body {
      flex: 0 0 100%;
      max-width: 100%;
    }


    .for-whom__img {
      height: 400px;
    }


    .for-whom__box {
      margin-inline-start: 0;
      margin-block-start: -50px;
      border-radius: 20px;
      padding: 40px 30px 20px;
    }


    .video-block__wrap {
      max-width: var(--wrap-max);
    }


    .video-block .yt,
    .video-block .video {
      height: 430px;
    }


    .video-block--pair .video-block__wrap {
      grid-template-columns: 1fr;
    }


    .video-block--pair .yt,
    .video-block--pair .video {
      height: 330px;
    }
  }
  @media (width <= 640px) {

    .intro,
    .doctors,
    .for-whom,
    .advantages,
    .video-block {
      margin-block: 70px;
    }


    .intro__wrap,
    .advantages__wrap {
      padding-inline: 15px;
    }


    .intro__title,
    .for-whom__title {
      font-size: 25px;
      line-height: 35px;
    }


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


    .for-whom__img {
      height: 300px;
      border-radius: 10px;
    }


    .for-whom__box {
      padding: 25px 15px 15px;
      border-radius: 10px;
    }


    .for-whom__box h2 {
      font-size: 18px;
      line-height: 26px;
    }


    .advantages__card {
      padding: 25px 20px 15px;
    }


    .video-block .yt,
    .video-block .video {
      height: 250px;
    }


    .video-block--pair .yt,
    .video-block--pair .video {
      height: 220px;
    }

    .doctor__img {
      margin-left: 0;
    }
  }
}