/* ==========================================================================
   Component: datpro_page_hero
   The standard banner every Phase 02 page opens with. Deliberately NOT a
   full-screen photo banner: a light blue → white wash, generous whitespace,
   eyebrow + h1 + subtitle, and an optional light visual on the right.

   Copy-only (default)
     <section class="dp-page-hero">
       <div class="dp-container dp-page-hero__inner">
         <div class="dp-page-hero__copy">
           <span class="dp-eyebrow">…</span>
           <h1 class="dp-page-hero__title">…</h1>
           <p class="dp-page-hero__desc">…</p>
           <div class="dp-page-hero__actions"> …dp-btn… </div>
         </div>
       </div>
     </section>

   With a visual   → add --with-visual and a .dp-page-hero__visual sibling
   Centred copy    → add --center (copy-only pages such as Tin tức, Tuyển dụng)
   ========================================================================== */

.dp-page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #e7f0fa 0%, #f2f7fc 45%, #fbfdff 100%);
  border-bottom: 1px solid var(--dp-border);
}

.dp-page-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -55%;
  width: 52%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0) 68%
  );
  pointer-events: none;
}

.dp-page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 3.2vw, 3rem);
  padding-block: clamp(2.5rem, 4.6vw, 4.25rem);
}

/* ---------- Copy ---------------------------------------------------------- */

.dp-page-hero__copy {
  min-width: 0;
  max-width: 46rem;
}

.dp-page-hero__title {
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.dp-page-hero__desc {
  max-width: 40rem;
  font-size: var(--fs-lead);
  color: var(--dp-text-body);
  text-wrap: pretty;
}

.dp-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
}

/* The breadcrumb sits above the eyebrow and never adds vertical weight. */
.dp-page-hero .dp-breadcrumb {
  margin-bottom: var(--sp-4);
}

/* ---------- Visual -------------------------------------------------------- */

.dp-page-hero__visual {
  display: block;
  justify-self: end;
  width: 100%;
  max-width: 34rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.dp-page-hero__visual img {
  width: 100%;
  height: auto;
}

/* ---------- Variants ------------------------------------------------------ */

.dp-page-hero--center .dp-page-hero__copy {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.dp-page-hero--center .dp-page-hero__desc {
  margin-inline: auto;
}

.dp-page-hero--center .dp-page-hero__actions,
.dp-page-hero--center .dp-breadcrumb .dp-breadcrumb__list {
  justify-content: center;
}

@media (min-width: 1024px) {
  .dp-page-hero--with-visual .dp-page-hero__inner {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    padding-block: clamp(3rem, 5vw, 5rem);
  }
}

@media (max-width: 1023px) {
  .dp-page-hero__visual {
    justify-self: center;
    max-width: 30rem;
  }
}

@media (max-width: 600px) {
  .dp-page-hero__actions .dp-btn {
    flex: 1 1 100%;
  }

  .dp-page-hero__visual {
    max-width: 24rem;
  }
}