/* ==========================================================================
   home.css — ACLC College of Baliuag | Homepage Styles
   ========================================================================== */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
  --aclc-blue:   #2e3191;
  --aclc-red:    #d7263d;
  --aclc-white:  #ffffff;
  --aclc-light:  #f8f9fa;
  --transition:  0.35s ease;
}

/* ── Shared helpers ─────────────────────────────────────────────────────────── */
.aclc-heading      { color: var(--aclc-blue); }
.aclc-lead-text    { max-width: 800px; margin: 0 auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.aclc-hero {
  position: relative;
  overflow: hidden;
}

.aclc-hero__bg {
  height: 90vh;
  background-size: cover;
  background-position: center;
  /* FIX: explicit height so image never collapses */
  min-height: 480px;
}

.aclc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,51,160,.85) 0%,
    rgba(215,38,61,.65) 100%);
  z-index: 1;
}

.aclc-hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.aclc-hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* FIX: explicitly stacked above overlay */
  z-index: 3;
  pointer-events: none;
}

/* Hero button hover transitions (were missing) */
.aclc-btn-hero {
  transition: transform var(--transition), box-shadow var(--transition);
}
.aclc-btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}

/* ==========================================================================
   MISSION / VISION CARDS
   ========================================================================== */
.aclc-mv-card {
  border-top: 4px solid var(--aclc-blue) !important;
  transition: transform var(--transition), box-shadow var(--transition);
}
.aclc-mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.10) !important;
}

/* ==========================================================================
   ACHIEVEMENTS / CAMPUS LIFE
   ========================================================================== */
.aclc-achievements {
  position: relative;
  min-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--aclc-white);
}

.campus-life-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* FIX: give swiper & slides explicit 100% height so images fill the section */
.campus-life-bg .swiper,
.campus-life-bg .swiper-slide {
  width: 100%;
  height: 100%;          /* works because parent now has explicit min-height */
}

.campus-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 3s ease-in-out;
}
.swiper-slide-active .campus-img {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 2;
}

.achievements-content {
  z-index: 3;
}

/* ==========================================================================
   WHY-CHOOSE CARDS
   ========================================================================== */
.hover-card {
  transition: transform var(--transition), box-shadow var(--transition);
  border-radius: 14px;
}
.hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.12) !important;
}

/* ==========================================================================
   PROGRAM CARDS
   ========================================================================== */
.program-card {
  border-radius: 20px;
  backdrop-filter: blur(15px);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.3) !important;
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
  position: relative;
}
.program-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 45px rgba(0,0,0,.15) !important;
}
.program-card img {
  transition: transform .6s ease;
}
.program-card:hover img {
  transform: scale(1.08);
}

.glass-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--aclc-blue), var(--aclc-red));
  border-radius: 20px 20px 0 0;
}

/* Radial glow overlay — pointer-events off so clicks still land on buttons */
.program-card::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at top left,
    rgba(46,49,145,.2), transparent 40%);
  top: -50%;
  left: -50%;
  transition: .5s ease;
  pointer-events: none;   /* FIX: was blocking clicks */
  z-index: 0;
}
.program-card:hover::before { top: -40%; left: -40%; }

.program-card .card-body,
.program-card img { position: relative; z-index: 1; }

/* ==========================================================================
   TESTIMONIALS (NEW)
   ========================================================================== */
.aclc-testimonials-bg {
  background: linear-gradient(135deg, #eef0f8 0%, #fdf0f2 100%);
}

.aclc-testimonial-card {
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition);
  max-width: 420px;
  margin: 0 auto;
}
.aclc-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,.10) !important;
}

.aclc-quote-icon {
  font-size: 4rem;
  line-height: 1;
  color: var(--aclc-blue);
  opacity: .15;
  font-family: Georgia, serif;
}

.testimonialsSwiper .swiper-pagination-bullet-active {
  background: var(--aclc-blue);
}

/* ==========================================================================
   EVENTS CAROUSEL
   ========================================================================== */
.aclc-event-card  { border-radius: 14px; }
.aclc-event-strip { height: 6px; border-radius: 14px 14px 0 0; }

/* FIX: center cards & constrain width */
.eventsSwiper .swiper-slide {
  display: flex;
  justify-content: center;
}
.eventsSwiper .card {
  width: 100%;
  max-width: 420px;
}

/* ==========================================================================
   CONTACT FORM (NEW)
   ========================================================================== */
.aclc-submit-btn {
  background: linear-gradient(90deg, var(--aclc-blue), var(--aclc-red));
  border: none;
  border-radius: 30px;
  transition: opacity var(--transition), transform var(--transition);
  color: var(--aclc-white);
}
.aclc-submit-btn:hover {
  opacity: .9;
  transform: translateY(-2px);
}

/* ==========================================================================
   SCROLL-TO-TOP BUTTON (NEW)
   ========================================================================== */
.aclc-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--aclc-blue);
  color: var(--aclc-white);
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.aclc-scroll-top.visible {
  opacity: 1;
  visibility: visible;
}
.aclc-scroll-top:hover {
  transform: translateY(-4px);
  background: var(--aclc-red);
}

/* ==========================================================================
   RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 768px) {
  .aclc-hero__bg  { height: 70vh; }
  .aclc-hero__content h1 { font-size: 2rem; }
  .aclc-achievements   { min-height: 420px; }
}