/* ====== SECTIUNE DESPRE NOI (gutenberg) ====== */

.sectiune-despre-noi-homepage {
  display: grid;

  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

  gap: clamp(2rem, 3vw, 3.2rem);

  align-items: center;

  max-width: 1400px;

  margin: 0 auto;

  padding: clamp(2.5rem, 4vw, 3.5rem) 1.5rem 4rem;
}

/* IMAGINEA din stânga */

.sectiune-despre-noi-homepage .wp-block-media-text__media {
  border-radius: 40px;

  overflow: hidden;

  position: relative;

  transform-origin: left center;

  animation: despreFade 600ms ease-out;
}

.sectiune-despre-noi-homepage .wp-block-media-text__media img {
  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;
}

/* CONȚINUT dreapta */

.sectiune-despre-noi-homepage .wp-block-media-text__content {
  display: grid;

  gap: 1.5rem;
}

/* “Despre Noi” mic */

.sectiune-despre-noi-homepage .wp-block-media-text__content > h2 {
  font-weight: 700;

  color: var(--color-primary);

  margin: 0;

  font-size: 6rem;
}

/* TITLU */

.sectiune-despre-noi-homepage .wp-block-media-text__content .titlu {
  font-size: clamp(2.3rem, 3.2vw, 2rem);

  line-height: 1.2;

  color: var(--color-text);

  margin: 0 0 1.5rem;
}

/* ===== LISTA – acum pe 2 coloane ===== */

.sectiune-despre-noi-homepage .wp-block-media-text__content .wp-block-list {
  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.1rem 2.5rem; /* spațiu vertical și orizontal */
}

/* li cu icon înainte */

.sectiune-despre-noi-homepage .wp-block-media-text__content li {
  position: relative;

  padding-left: 3rem;

  min-height: 2.6rem;

  display: flex;

  align-items: center;

  color: var(--color-text);

  font-weight: 500;

  line-height: 1.4;
}

.sectiune-despre-noi-homepage .wp-block-media-text__content li::before {
  content: "task_alt";

  font-family: "Material Symbols Outlined";

  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 2.4rem;

  height: 2.4rem;

  border-radius: 50%;

  background: rgb(83 142 255 / 12%);

  border: 1px solid rgb(83 142 255 / 44%);

  display: grid;

  place-items: center;

  color: var(--color-secondary);

  font-size: 1.5rem;
}

/* buton “Despre Noi” */

.sectiune-despre-noi-homepage .wp-block-media-text__content > p:last-child {
  margin-top: 1rem;
}

.sectiune-despre-noi-homepage .wp-block-media-text__content > p:last-child a {
  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  background: var(--color-secondary);

  color: #fff;

  text-decoration: none;

  padding: 15px 28px;

  border-radius: 14px;

  font-weight: 600;

  animation: despreBtn 500ms ease-out 100ms both;

  transition: all 0.25s ease;
}

.sectiune-despre-noi-homepage
  .wp-block-media-text__content
  > p:last-child
  a::after {
  content: "chevron_right";

  font-family: "Material Symbols Outlined";

  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;

  font-size: 1.35rem;
}

.sectiune-despre-noi-homepage
  .wp-block-media-text__content
  > p:last-child
  a:hover {
  transform: translateY(-2px);

  background: var(--color-primary);
}

/* ANIMAȚII */

@keyframes despreFade {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes despreBtn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .sectiune-despre-noi-homepage {
    display: block;
  }

  .sectiune-despre-noi-homepage .wp-block-media-text__media {
    max-width: 420px;

    margin-bottom: 20px;
  }

  .sectiune-despre-noi-homepage .wp-block-media-text__content {
    display: grid;

    gap: 1.5rem;

    padding: 0;
  }
}

@media (max-width: 960px) {
  .sectiune-despre-noi-homepage .wp-block-media-text__content > h2 {
    font-size: 4rem;
  }

  .sectiune-despre-noi-homepage .wp-block-media-text__content .titlu {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .sectiune-despre-noi-homepage .wp-block-media-text__content .wp-block-list {
    grid-template-columns: 1fr; /* 1 coloană pe mobil */
  }
}

@media (max-width: 460px) {
  .sectiune-despre-noi-homepage .wp-block-media-text__content > h2 {
    font-size: 2.4rem;
  }
}