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


  /* ---------- lista de articole (blog) ---------- */
  /*
   * Transcriere măsurată a blocului `.blog_news` din tema veche, la
   * 1440 / 1300 / 1100 / 900 / 640 px.
   */
  .blog-news {
    margin-block: 120px 80px;
  }


  /* Coloane de 50% cu 15px de fiecare parte = 30px între carduri, ca grila
     Bootstrap de acolo. Fără `row-gap`: distanța dintre rânduri o dă marginea
     de jos a casetei albe. */
  .blog-news__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }


  .blog-card {
    flex: 0 0 50%;
    max-width: 50%;
    padding-inline: 15px;
  }


  .blog-card__link {
    display: block;
    color: var(--neutral-800);
    text-decoration: none;
    transition: color 0.3s;
  }


  .blog-card__link:hover,
  .blog-card__link:focus-visible {
    color: var(--brown-500);
  }


  .blog-card__img {
    width: 100%;
    height: 380px;
    object-fit: cover;
  }


  /*
   * Caseta urcă 40px peste imagine (`margin-block-start` negativ) și stă
   * deasupra ei prin `position: relative`.
   *
   * `max-width: 750px` împreună cu marginile laterale supraconstrânge caseta:
   * browserul ignoră marginea dreaptă, deci pe ecranele largi caseta e ușor
   * decalată spre stânga. Așa arată și tema veche, așa că păstrez comportamentul.
   */
  .blog-card__body {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: -40px 60px 60px;
    padding: 40px 40px 20px;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);
  }


  .blog-card__title {
    margin-block-end: 20px;
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    text-align: center;
  }


  /* Rezumatul e tăiat la cinci rânduri, cu trei puncte. `-webkit-box` e
     singura cale către `line-clamp` suportată de toate browserele curente. */
  .blog-card__excerpt {
    /* Cei 16px de dedesubt sunt marginea implicită de paragraf din tema veche;
       fără ei caseta albă ar fi cu 16px mai scundă. */
    margin-block-end: 16px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    text-overflow: ellipsis;
  }
  @media (width <= 1365px) {

    .blog-card__img {
      height: 290px;
    }
  }
  @media (width <= 1250px) {

    .blog-news {
      margin-block: 100px 60px;
    }


    .blog-card__body {
      max-width: 100%;
      margin: -40px 20px 60px;
      padding: 40px 20px 20px;
    }


    .blog-card__title {
      font-size: 25px;
      line-height: 35px;
    }
  }
  @media (width <= 1023px) {

    .blog-card {
      flex: 0 0 100%;
      max-width: 100%;
    }


    .blog-card__img {
      height: 430px;
    }


    .blog-card__body {
      max-width: 750px;
      margin: -40px 30px 60px;
      padding: 30px 20px 20px;
    }
  }
  @media (width <= 640px) {

    .blog-news {
      margin-block: 80px 30px;
    }


    .blog-news__wrap {
      padding-inline: 0;
    }


    .blog-card__img {
      height: 220px;
    }


    .blog-card__body {
      margin: -20px 10px 60px;
      padding: 30px 15px 20px;
    }


    .blog-card__title {
      font-size: 20px;
      line-height: 30px;
    }
  }
}