/*
 * Grila Bootstrap 4 și partea din reboot-ul lui de care depind paginile rămase
 * în designul vechi, scrise de mână și încărcate doar pe template-urile lor.
 *
 * Tema veche aducea Bootstrap 4.6 întreg de pe CDN (~160 KB) pe fiecare
 * pagină, iar reboot-ul lui bătea regulile din style.css: de aceea pe site-ul
 * vechi titlurile au `font-weight: 500`, nu 700, iar corpul e de 16px, nu 18.
 * Reproducem efectul real, nu intenția din style.css.
 *
 * Reset-ul temei noi (`* { margin: 0 }`, `img { display: block }`) ar schimba
 * pagina în două feluri vizibile: ar scoate spațiile dintre titluri și
 * paragrafe, și ar scoate imaginile din centrare, pentru că `text-align`
 * nu mai are efect pe un element bloc. Blocul de mai jos le readuce la
 * comportamentul pe care îl aveau.
 *
 * Nu readucem și fontul: pe site-ul vechi Montserrat nu se aplica niciodată
 * (reboot-ul Bootstrap îl suprascria cu stiva de sistem), dar tema nouă
 * folosește Montserrat peste tot, iar pagina asta n-are motiv să fie excepția.
 *
 * Și încă o excepție deliberată: Bootstrap dă `.btn { background-color:
 * transparent; border-color: transparent }`, iar pe site-ul vechi asta face ca
 * TOATE butoanele paginii să se vadă ca text simplu, fără fundal și fără
 * contur — inclusiv cele cinsprezece „Vreau o programare!”. Aici `.btn` nu
 * resetează culorile, deci `.btn-brown` și `.btn-white` din style.css se văd
 * așa cum au fost gândite. Geometria (padding 6px 12px, rază 4px) rămâne cea
 * de pe site-ul vechi.
 */
@layer legacy {
  /* ---------- reboot ---------- */
  .legacy-page {
    font-size: 16px;
    line-height: 1.5;
    color: #212529;
  }

  /*
   * Excepția componentelor temei, repetată de fiecare regulă de reboot de mai
   * jos: recenziile, formularul, harta, fațada de video și playlistul sunt
   * scrise pentru reset-ul temei noi, nu pentru cel al Bootstrap-ului, și își
   * păstrează regulile proprii. Fără ea, marginea de 1rem a paragrafelor
   * umfla cardul de contacte până când ultimul rând din program se tăia, iar
   * `padding-inline-start: 2rem` al listelor împingea pista de recenzii cu
   * 32px, deci cardurile ieșeau mai înguste decât pe prima pagină.
   *
   * `:where()` nu adaugă specificitate, deci regulile rămân la fel de slabe
   * ca înainte.
   */
  .legacy-page :is(h1, h2, h3, h4, h5, h6):where(:not(:is(.yt, .playlist, .reviews-block, .contact-form, .contacts) *)) {
    margin-block: 0 0.5rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .legacy-page h1 { font-size: 2.5rem; }
  .legacy-page h2 { font-size: 2rem; }
  .legacy-page h3 { font-size: 1.75rem; }
  .legacy-page h4 { font-size: 1.5rem; }
  .legacy-page h5 { font-size: 1.25rem; }
  .legacy-page h6 { font-size: 1rem; }

  .legacy-page p:where(:not(:is(.yt, .playlist, .reviews-block, .contact-form, .contacts) *)) {
    margin-block: 0 1rem;
  }

  .legacy-page a:where(:not(:is(.yt, .playlist, .reviews-block, .contact-form, .contacts) *)) {
    color: #007bff;
    text-decoration: none;
  }

  .legacy-page :is(ul, ol):where(:not(:is(.yt, .playlist, .reviews-block, .contact-form, .contacts) *)) {
    margin-block: 0 1rem;
    padding-inline-start: 2rem;
    list-style: disc;
  }

  .legacy-page ol:where(:not(:is(.yt, .playlist, .reviews-block, .contact-form, .contacts) *)) {
    list-style: decimal;
  }

  /*
   * Inline, ca în Bootstrap: altfel `text-align: center` nu le mai centrează.
   *
   * Și fără `max-width`, tot ca în Bootstrap (limita o pune acolo doar
   * `.img-fluid`). Nu e o scăpare: reset-ul temei noi pune `max-width: 100%`
   * pe toate imaginile, iar asta duce lățimea minimă a unui element flex la
   * zero. Concret, `.icon_main` din blocul cu taburi se strânge și iconița de
   * 100×100 iese de 63×100.
   */
  .legacy-page img,
  .legacy-page video,
  .legacy-page iframe {
    display: inline-block;
    max-width: none;
    vertical-align: middle;
  }

  /*
   * Excepția: componentele temei noi randate în pagină (recenziile,
   * formularul, harta, fațada de video) sunt scrise pentru reset-ul temei, nu
   * pentru cel al Bootstrap-ului. Lor le lăsăm regulile lor.
   *
   * Doar `max-width`: componentele își dau singure înălțimile și afișarea.
   * `height: auto` anula harta (ajungea la 150px, înălțimea implicită a unui
   * iframe) și alungea logo-ul din recenzii, iar `display: block` rupea
   * butonul „lasă o recenzie” pe două rânduri, pentru că iconița lui primea
   * rând propriu.
   */
  .legacy-page :is(.yt, .playlist, .reviews-block, .contact-form, .contacts) :is(img, iframe) {
    max-width: 100%;
  }

  /* ---------- container, rând, coloane ---------- */
  .legacy-page .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 15px;
  }

  @media (min-width: 576px) { .legacy-page .container { max-width: 540px; } }
  @media (min-width: 768px) { .legacy-page .container { max-width: 720px; } }
  @media (min-width: 992px) { .legacy-page .container { max-width: 960px; } }
  /* 1440px, ca `.wrap` pe restul site-ului. Bootstrap oprea containerul la
     1140px, iar pagina asta era singura mai îngustă decât tot site-ul. */
  @media (min-width: 1200px) { .legacy-page .container { max-width: 1440px; } }

  .legacy-page .row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
  }

  .legacy-page [class*="col-"] {
    position: relative;
    width: 100%;
    padding-inline: 15px;
  }

  .legacy-page .col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .legacy-page .col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .legacy-page .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .legacy-page .col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .legacy-page .col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .legacy-page .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .legacy-page .col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .legacy-page .col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .legacy-page .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .legacy-page .col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .legacy-page .col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .legacy-page .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  @media (min-width: 576px) {
    .legacy-page .col-sm-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }

    .legacy-page .col-sm-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }

    .legacy-page .col-sm-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }

    .legacy-page .col-sm-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }

    .legacy-page .col-sm-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }

    .legacy-page .col-sm-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .legacy-page .col-sm-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }

    .legacy-page .col-sm-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }

    .legacy-page .col-sm-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .legacy-page .col-sm-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }

    .legacy-page .col-sm-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }

    .legacy-page .col-sm-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

  @media (min-width: 768px) {
    .legacy-page .col-md-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }

    .legacy-page .col-md-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }

    .legacy-page .col-md-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }

    .legacy-page .col-md-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }

    .legacy-page .col-md-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }

    .legacy-page .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .legacy-page .col-md-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }

    .legacy-page .col-md-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }

    .legacy-page .col-md-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .legacy-page .col-md-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }

    .legacy-page .col-md-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }

    .legacy-page .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

  @media (min-width: 992px) {
    .legacy-page .col-lg-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }

    .legacy-page .col-lg-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }

    .legacy-page .col-lg-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }

    .legacy-page .col-lg-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }

    .legacy-page .col-lg-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }

    .legacy-page .col-lg-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .legacy-page .col-lg-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }

    .legacy-page .col-lg-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }

    .legacy-page .col-lg-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .legacy-page .col-lg-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }

    .legacy-page .col-lg-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }

    .legacy-page .col-lg-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  /* ---------- utilitare de afișare ---------- */
  .legacy-page .d-flex {
    display: flex;
    /* style.css adaugă wrap peste Bootstrap; fără el rândurile n-ar coborî. */
    flex-wrap: wrap;
  }

  @media (min-width: 576px) {
    .legacy-page .d-sm-block { display: block; }
    .legacy-page .d-sm-flex { display: flex; }
  }

  @media (min-width: 768px) {
    .legacy-page .d-md-flex { display: flex; }
  }

  @media (min-width: 992px) {
    .legacy-page .d-lg-flex { display: flex; }
  }

  .legacy-page .align-items-center {
    align-items: center;
  }

  .legacy-page .text-center {
    text-align: center;
  }

  .legacy-page .p-2 {
    padding: 0.5rem;
  }

  /* ---------- butoane ---------- */
  .legacy-page .btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    /* Doar grosimea și stilul: culoarea o dau `.btn-brown` / `.btn-white`
       (vezi nota despre butoane de la începutul fișierului). */
    border-width: 1px;
    border-style: solid;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
  }
}