/*
 * Subsetul de grilă Bootstrap 4 folosit de pagina „Aparate dentare”.
 *
 * Tema veche încărca Bootstrap 4.6 întreg de pe CDN (~160 KB) pe toate
 * paginile. Aici sunt doar clasele pe care pagina le folosește efectiv, scrise
 * de mână și încărcate numai pe acest template.
 *
 * Nu sunt implementate clasele din Bootstrap 5 care apar în markup-ul vechi
 * (`ratio`, `ratio-16x9`, `pe-lg-7`, `ps-md-0`, `top-0`, `end-0`, `fw-bold`):
 * pe Bootstrap 4 n-aveau niciun efect, deci pagina live arată ca și cum n-ar
 * exista. Le-am lăsat în markup, dar a le implementa acum ar schimba designul —
 * `ratio` mai ales, care ar impune un raport de aspect pe casetele de video.
 *
 * Toate regulile sunt prefixate cu `:where(.orto-page, .orto-testimonials)`, ca să nu atingă restul
 * temei: grila e folosită și de pagina „Testimoniale ortodonție”.
 */
@layer orto {
  :where(.orto-page, .orto-testimonials) .container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 15px;
  }

  :where(.orto-page, .orto-testimonials) .row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
  }

  :where(.orto-page, .orto-testimonials) .row > * {
    position: relative;
    width: 100%;
    padding-inline: 15px;
  }

  :where(.orto-page, .orto-testimonials) .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  :where(.orto-page, .orto-testimonials) .col-6 {
    flex: 0 0 50.0%;
    max-width: 50.0%;
  }

  :where(.orto-page, .orto-testimonials) .col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  :where(.orto-page, .orto-testimonials) .col-12 {
    flex: 0 0 100.0%;
    max-width: 100.0%;
  }
  :where(.orto-page, .orto-testimonials) .row-cols-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  @media (min-width: 576px) {
    :where(.orto-page, .orto-testimonials) .col-sm-6 {
      flex: 0 0 50.0%;
      max-width: 50.0%;
    }

    :where(.orto-page, .orto-testimonials) .col-sm-12 {
      flex: 0 0 100.0%;
      max-width: 100.0%;
    }
  }
  @media (min-width: 768px) {
    :where(.orto-page, .orto-testimonials) .col-md-3 {
      flex: 0 0 25.0%;
      max-width: 25.0%;
    }

    :where(.orto-page, .orto-testimonials) .col-md-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }

    :where(.orto-page, .orto-testimonials) .col-md-6 {
      flex: 0 0 50.0%;
      max-width: 50.0%;
    }

    :where(.orto-page, .orto-testimonials) .col-md-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
  }
  @media (min-width: 992px) {
    :where(.orto-page, .orto-testimonials) .col-lg-3 {
      flex: 0 0 25.0%;
      max-width: 25.0%;
    }

    :where(.orto-page, .orto-testimonials) .col-lg-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }

    :where(.orto-page, .orto-testimonials) .col-lg-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }

    :where(.orto-page, .orto-testimonials) .col-lg-6 {
      flex: 0 0 50.0%;
      max-width: 50.0%;
    }

    :where(.orto-page, .orto-testimonials) .col-lg-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }

    :where(.orto-page, .orto-testimonials) .col-lg-9 {
      flex: 0 0 75.0%;
      max-width: 75.0%;
    }

    :where(.orto-page, .orto-testimonials) .col-lg-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    :where(.orto-page, .orto-testimonials) .row-cols-lg-5 > * {
      flex: 0 0 20%;
      max-width: 20%;
    }

    :where(.orto-page, .orto-testimonials) .mt-lg-0 {
      margin-block-start: 0;
    }
  }
  @media (min-width: 1200px) {
    :where(.orto-page, .orto-testimonials) .col-xl-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }

    :where(.orto-page, .orto-testimonials) .col-xl-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }

    :where(.orto-page, .orto-testimonials) .col-xl-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }

    :where(.orto-page, .orto-testimonials) .col-xl-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
  }
  /* utilitare de aliniere și spațiere */
  :where(.orto-page, .orto-testimonials) .d-flex {
    display: flex;
  }

  :where(.orto-page, .orto-testimonials) .d-block {
    display: block;
  }

  :where(.orto-page, .orto-testimonials) .justify-content-between {
    justify-content: space-between;
  }

  :where(.orto-page, .orto-testimonials) .justify-content-center {
    justify-content: center;
  }

  :where(.orto-page, .orto-testimonials) .align-items-center {
    align-items: center;
  }

  :where(.orto-page, .orto-testimonials) .text-center {
    text-align: center;
  }

  :where(.orto-page, .orto-testimonials) .text-uppercase {
    text-transform: uppercase;
  }

  :where(.orto-page, .orto-testimonials) .text-white {
    color: #fff;
  }

  :where(.orto-page, .orto-testimonials) .position-relative {
    position: relative;
  }

  :where(.orto-page, .orto-testimonials) .position-absolute {
    position: absolute;
  }

  :where(.orto-page, .orto-testimonials) .w-100 {
    width: 100%;
  }

  :where(.orto-page, .orto-testimonials) .h-100 {
    height: 100%;
  }

  :where(.orto-page, .orto-testimonials) .mb-0 {
    margin-block-end: 0;
  }

  :where(.orto-page, .orto-testimonials) .mt-3 {
    margin-block-start: 1rem;
  }

  :where(.orto-page, .orto-testimonials) .mt-4 {
    margin-block-start: 1.5rem;
  }

  :where(.orto-page, .orto-testimonials) .img-fluid {
    max-width: 100%;
    height: auto;
  }

  :where(.orto-page, .orto-testimonials) .rounded-circle {
    border-radius: 50%;
  }

  /*
   * `orto.css` își definește singur clasele tipografice (`.h1`, `.h2`, `.h4`).
   * Aici sunt doar culorile de buton, care veneau din Bootstrap.
   */
  :where(.orto-page, .orto-testimonials) .btn-dark {
    color: #fff;
  }

  :where(.orto-page, .orto-testimonials) .btn-light {
    background-color: #f8f9fa;
    color: #212529;
  }

  /*
   * Antetul are două variante în markup, una pentru desktop și una pentru
   * telefon — regulile veneau din style.css al temei vechi.
   */
  :where(.orto-page, .orto-testimonials) .mobile_screen {
    display: none;
  }

  @media (width <= 640px) {
    :where(.orto-page, .orto-testimonials) .desktop_screen {
      display: none;
    }

    :where(.orto-page, .orto-testimonials) .mobile_screen {
      display: block;
    }
  }

  /*
   * Miniatura din lista de redare: resetul temei pune `max-width: 100%` pe
   * imagini, iar ca element flexibil se micșora sub cei 72px din tema veche.
   */
  :where(.orto-page, .orto-testimonials) .vid-thumb {
    flex: none;
  }

  :where(.orto-page, .orto-testimonials) .vid-thumb img {
    width: 72px;
    height: 54px;
    object-fit: cover;
  }
}