/*
 * Shared editor/frontend styles
 *
 * This file is loaded inside the WordPress block editor via add_editor_style()
 * and on the frontend via wp_enqueue_style().
 */

@media (max-width: 765px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(18, 45, 78, 0.5) 0%,
      rgba(18, 45, 78, 0.38) 38%,
      rgba(18, 45, 78, 0.12) 65%,
      rgba(18, 45, 78, 0) 82%
    );
  }
}

.project-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Vân mây chính */
.project-section::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;

  left: -12%;
  top: 22%;

  width: 62%;
  height: 72%;

  background:
    radial-gradient(
      ellipse at 18% 45%,
      rgba(255, 255, 255, 0.74) 0%,
      rgba(255, 255, 255, 0.58) 18%,
      rgba(255, 255, 255, 0.34) 36%,
      rgba(255, 255, 255, 0.13) 53%,
      rgba(255, 255, 255, 0) 72%
    ),
    radial-gradient(
      ellipse at 42% 18%,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.18) 27%,
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      ellipse at 50% 52%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 32%,
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      ellipse at 30% 82%,
      rgba(255, 255, 255, 0.36) 0%,
      rgba(255, 255, 255, 0.16) 30%,
      rgba(255, 255, 255, 0) 62%
    );

  filter: blur(24px);
  opacity: 0.92;

  transform: rotate(-4deg);
}

/* Lớp sáng chuyển mềm từ trái sang phải */
.project-section::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 43%;

  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.2) 28%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Nội dung */
.project-section > * {
  position: relative;
  z-index: 2;
}

/* Tablet */
@media (max-width: 1024px) {
  .project-section::before {
    left: -20%;
    top: 20%;

    width: 80%;
    height: 70%;

    filter: blur(24px);
  }

  .project-section::after {
    width: 52%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .project-section::before {
    left: -35%;
    top: 20%;

    width: 115%;
    height: 67%;

    background:
      radial-gradient(
        ellipse at 24% 42%,
        rgba(255, 255, 255, 0.68) 0%,
        rgba(255, 255, 255, 0.48) 20%,
        rgba(255, 255, 255, 0.24) 38%,
        rgba(255, 255, 255, 0.08) 53%,
        rgba(255, 255, 255, 0) 68%
      ),
      radial-gradient(
        ellipse at 48% 28%,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.1) 33%,
        rgba(255, 255, 255, 0) 60%
      ),
      radial-gradient(
        ellipse at 38% 72%,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.12) 30%,
        rgba(255, 255, 255, 0) 60%
      );

    filter: blur(22px);
    opacity: 0.9;

    transform: rotate(-3deg);
  }

  .project-section::after {
    width: 62%;

    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.12) 42%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

.impact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   CORE VALUE SWIPER
   ========================================================= */
.slide-we-are,
.slide-white,
.slide-we-create {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(2px);
}

@media (min-width: 765px) {
  .impact-card__number::after {
    content: "";
    display: block;

    width: 42px;
    height: 2px;

    margin: 20px auto 0;

    background: rgba(30, 41, 59, 0.18);
    border-radius: 999px;
  }
}

.wt-img-project figure{
	max-height: 400px;
    justify-content: flex-end;
}