/* ============================= */
/* VOLUNTEER / PARTNER PAGE STYLES */
/* ============================= */

/* ============================= */
/* HERO */
/* ============================= */

/* ============================= */
/* HERO */
/* ============================= */

.page-hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* full background image */

.hero-bg{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      rgba(10,20,30,0.65),
      rgba(10,20,30,0.75)
    ),
    url("../assets/images/Volunteer-hero.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  z-index:0;
}

/* hero content */

.hero-content{
  position:relative;
  z-index:2;
  color:white;
}

.hero-text{
  max-width:640px;
  margin-top:16px;
}

.hero-actions{
  display:flex;
  gap:16px;
  margin-top:28px;
};


/* ============================= */
/* INTRO / INVOLVEMENT CARDS */
/* ============================= */

.info-card {
  min-height: 100%;
}

.info-card h3 {
  margin-bottom: 12px;
}

/* ============================= */
/* SPLIT SECTIONS */
/* ============================= */

.split-content p + p {
  margin-top: 16px;
}

/* ============================= */
/* CONTACT SECTION */
/* ============================= */

.contact-section .section-heading {
  max-width: 760px;
}

.contact-card {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}

.contact-card .section-heading {
  margin: 0 auto;
}

.contact-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* ============================= */
/* CTA */
/* ============================= */

.cta-section {
  padding-top: 40px;
}

.cta-box {
  background:
    linear-gradient(180deg, rgba(20, 41, 63, 0.96), rgba(15, 31, 47, 0.96)),
    radial-gradient(circle at top right, rgba(201, 179, 124, 0.12), transparent 35%);
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 960px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-image-card,
  .hero-image {
    min-height: 320px;
  }
}

@media (max-width: 700px) {
  .page-hero {
    padding-top: 95px;
    padding-bottom: 70px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn,
  .contact-actions .btn {
    width: 100%;
    text-align: center;
  }

  .contact-card {
    padding: 24px 20px;
  }

  .hero-image-card,
  .hero-image {
    min-height: 260px;
  }
}