/* ==================================================
   HEROES CSS
   Purpose:
   - Hero sections
   - Page banners
   - Hero images
   - Taglines
   ================================================== */

/* ================= HERO ================= */
.hero {
  background: linear-gradient(rgba(40,44,133,.85), rgba(40,44,133,.85)),
              url("../images/hero.jpg") center/cover;
  color: var(--white);
  text-align: center;
  padding: 100px 20px;
}

.hero h1 {
  font-size: 40px;
}

.hero p,
.tagline {
  font-size: 20px;
  color: var(--white);
}

.hero .btn {
  display: inline-block;
  background: var(--accent);
  color: var(--secondary);
  padding: 12px 25px;
  margin-top: 20px;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: bold;
  transition: all var(--transition-normal);
}

.hero .btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* ================= PAGE HERO ================= */
.page-hero {
  width: 100%;
  max-width: 1200px;
  margin: 30px auto;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .page-hero {
    height: 300px;
  }
}

@media (max-width: 600px) {
  .page-hero {
    height: 200px;
    border-radius: 12px;
  }
}

/* ================= HERO IMAGE FIXES ================= */
.hero-image,
.image-box.large {
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 14px;
}

.hero-image img,
.image-box.large img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio, cover entire area */
  display: block;
  transition: transform 0.3s ease;
}

.hero-image img:hover,
.image-box.large img:hover {
  transform: scale(1.05);
}

/* Responsive adjustments for hero images */
@media (max-width: 900px) {
  .hero-image,
  .image-box.large {
    height: 260px;
  }
}

@media (max-width: 600px) {
  .hero-image,
  .image-box.large {
    height: 200px;
  }
}