/*
 * Stiluri folosite doar de articolul de blog.
 *
 * 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 {


  /* ---------- articol de blog ---------- */
  /*
   * Transcriere măsurată a `single-custom.php` din tema veche, la
   * 1440 / 1100 / 900 / 640 px: imaginea pe toată lățimea containerului,
   * cuprinsul pe o treime, textul pe două treimi.
   */
  .post-single {
    margin-block-end: 120px;
  }


  .post-single__media {
    margin: 0 0 50px;
  }


  .post-single__img {
    width: 100%;
    height: 640px;
    object-fit: cover;
  }


  .post-single__layout {
    display: grid;
    margin-block-end: 25px;
  }
  @media (width >= 48rem) {

    .post-single__layout--with-toc {
      grid-template-columns: 1fr 2fr;
    }


    .post-single__layout--with-toc > * {
      padding-inline: 15px;
    }
  }


  .post-single__title {
    margin-block-end: 30px;
    font-size: 32px;
    line-height: 42px;
  }


  /* ---------- cuprins ---------- */
  .post-toc {
    position: sticky;
    /* 100px în tema veche = bara fixă de 88px plus 12px de aer. */
    inset-block-start: calc(var(--header-h) + 12px);
    align-self: start;
    border: 1px solid rgb(0 0 0 / 5%);
    border-radius: 10px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 18px rgb(0 0 0 / 6%);
  }


  /* Capul e buton, nu titlu cu buton lângă: toată bara e zona de apăsare. */
  .post-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: 20px;
    border: 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 18px rgb(0 0 0 / 6%);
    text-align: start;
    cursor: pointer;
  }


  .post-toc__heading {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    color: #111;
  }


  /* Chevron desenat din două laturi de bordură, ca să nu fie nevoie de o
     bibliotecă de iconițe pentru un singur semn. */
  .post-toc__chevron {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    rotate: -135deg;
    transition: rotate var(--duration-base, 0.3s) var(--ease-out, ease);
  }


  .post-toc__panel {
    max-height: 60vh;
    overflow-y: auto;
    margin-block: 20px 40px;
    padding: 20px 30px;
  }


  .post-toc__panel::-webkit-scrollbar {
    width: 6px;
  }


  .post-toc__panel::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #ccc;
  }


  .post-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }


  .post-toc__item {
    display: flex;
    align-items: center;
    gap: 5px;
  }


  .post-toc__item + .post-toc__item {
    margin-block-start: 8px;
  }


  .post-toc__number {
    font-size: 16px;
    line-height: 27px;
    color: var(--neutral-800);
  }


  .post-toc__link {
    display: block;
    font-size: 15px;
    line-height: 27px;
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
  }


  .post-toc__link:hover,
  .post-toc__link:focus-visible {
    color: #988768;
  }


  .post-toc__item.is-active .post-toc__link,
  .post-toc__item.is-active .post-toc__number {
    font-weight: 600;
    color: #988768;
  }


  /* ---------- conținutul articolului ---------- */
  .article-content > * + * {
    margin-block-start: var(--space-4);
  }


  .article-content p,
  .article-content li {
    font-size: 18px;
    line-height: 28px;
    color: var(--neutral-800);
  }


  .post-single {
    margin-top: 80px;
  }


  .article-content h6 {
    font-size: 20px;
    line-height: 28px;
    color: var(--neutral-800);
  }


  .article-content h3 {
    margin-block-start: 40px;
    font-size: 28px;
    line-height: 42px;
    color: var(--brown-500);
    /* Ancora din cuprins nu trebuie să ascundă titlul sub bara fixă. */
    scroll-margin-top: calc(var(--header-h) + 16px);
  }


  /*
   * Marcatorii sunt puși explicit doar aici, în conținutul articolului: resetul
   * scoate `list-style` de pe orice listă cu clasă (`ul[class]`), iar listele
   * din editor vin cu `class="wp-block-list"`. Nivelurile imbricate repetă
   * secvența implicită a browserului, ca o listă în listă să nu arate identic
   * cu părintele ei.
   */
  .article-content ul,
  .article-content ol {
    padding-inline-start: 25px;
  }


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


  .article-content ol {
    list-style: decimal;
  }


  .article-content li + li {
    margin-block-start: 10px;
  }


  .article-content img {
    max-width: 100%;
    height: auto;
  }


  /* ---------- banner `[banner]` din conținut ---------- */
  .cta-banner {
    margin-block: 40px 50px;
    padding: 50px 15px 60px;
    background-image: var(--cta-banner-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }


  .cta-banner:last-child {
    margin-block-end: 0;
  }


  /* `margin-block-start: 0` explicit: în conținutul editorial titlurile
     primesc o margine de sus din foaia de stil a editorului. */
  .cta-banner__title {
    margin-block: 0 10px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
  }


  /* Selectorul e dublu ca să treacă peste `.article-content p`, care altfel ar
     impune culoarea textului de articol. */
  .cta-banner .cta-banner__subtitle {
    margin-block: 0 30px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #efc631;
  }


  .cta-banner__btn {
    display: block;
    width: 300px;
    margin-inline: auto;
    padding: 14px 25px;
    border: 2px solid #fff;
    border-radius: 25px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
  }


  .cta-banner__btn:hover,
  .cta-banner__btn:focus-visible {
    background-color: #fff;
    color: var(--neutral-800);
  }
  @media (width <= 1250px) {

    .post-single {
      margin-block-end: 80px;
    }


    .post-single__img {
      height: 530px;
    }


    .post-single__title {
      font-size: 28px;
      line-height: 38px;
    }
  }
  @media (width <= 1023px) {

    .post-single__img {
      height: 450px;
    }


    .cta-banner__title {
      font-size: 34px;
      line-height: 40.8px;
    }
  }
  @media (width < 48rem) {

    .post-toc {
      position: static;
      margin-block-end: 30px;
    }


    .post-toc__heading {
      font-size: 17px;
      line-height: 25.5px;
    }


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

    .post-single__media {
      margin-block-end: 40px;
    }


    .post-single__img {
      height: 220px;
    }


    .post-single__title {
      font-size: 25px;
      line-height: 35px;
    }


    .article-content h3 {
      font-size: 24px;
      line-height: 36px;
    }


    .article-content ul,
    .article-content ol {
      padding-inline-start: 20px;
    }


    /* Imaginea de fundal are subiectul în dreapta jos: pe telefon o lăsăm
       întreagă sub text, pe fundal negru, ca în tema veche. */
    .cta-banner {
      padding: 30px 15px 130px;
      background-color: #000;
      background-position: 85% 100%;
      background-size: contain;
    }


    .cta-banner__title {
      font-size: 25px;
      line-height: 30px;
    }


    .cta-banner__btn {
      width: min(300px, 100%);
      padding: 10px 25px;
      font-size: 13px;
    }
  }
}