/*
 * ============================================================
 * YAHYA AGRICOLA — Reusable Page Hero
 * Developer: Mohammed Imran, Softomatic BD Limited
 * ============================================================
 */

/* ── HERO WRAPPER ─────────────────────────────────────────── */
.page-hero {
  position: relative;
  height: 300px;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.page-hero--tall {
  height: 500px;
  min-height: 500px;
}

/* ── SLIDER ───────────────────────────────────────────────── */
.page-hero-slides {
  position: absolute;
  inset: 0;
}

.page-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.page-hero-slide.active { opacity: 1; }

.page-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* ── OVERLAY ──────────────────────────────────────────────── */
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(6, 15, 7, 0.88) 0%,
    rgba(13, 31, 15, 0.70) 60%,
    rgba(13, 31, 15, 0.40) 100%
  );
}

/* ── CONTENT ──────────────────────────────────────────────── */
.page-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  width: 100%;
}

.page-hero-content h1 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.page-hero-content h1 span { color: var(--gold); }

.page-hero-content p {
  color: rgba(240, 237, 230, 0.75);
  font-size: var(--text-base);
  margin: 0;
}

/* About: larger heading */
.page-hero--tall .page-hero-content h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

/* ── BREADCRUMB ───────────────────────────────────────────── */
.page-hero-content .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(240,237,230,0.65);
  margin-bottom: var(--space-3);
}

.page-hero-content .breadcrumb a {
  color: rgba(240,237,230,0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-hero-content .breadcrumb a:hover {
  color: var(--gold);
}

.page-hero-content .breadcrumb i {
  font-size: 0.5rem;
  opacity: 0.5;
}

/* ── SLIDE DOTS ───────────────────────────────────────────── */
.page-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.page-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 0;
}

.page-hero-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero         { height: 260px; min-height: 260px; }
  .page-hero--tall   { height: 380px; min-height: 380px; }
  .page-hero-content { padding-top: 70px; }
  .page-hero-content h1 { font-size: 1.5rem; }
}