/* ==========================================================
   Green Jofiyat — Hero
   ========================================================== */
.gj-hero {
    position: relative;
    min-height: min(86vh, 760px);
    display: flex; align-items: center;
    color: #fff; overflow: hidden;
    background-color: var(--gj-primary-darker);
    background-image:
        radial-gradient(circle at 82% 16%, rgba(139,191,90,0.32), transparent 46%),
        radial-gradient(circle at 10% 92%, rgba(201,162,75,0.22), transparent 42%),
        linear-gradient(135deg, #133a26 0%, #2E7D4F 56%, #4f6b2c 100%);
    background-size: cover; background-position: center;
}
/* Decorative organic pattern overlay */
.gj-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
    background-size: 26px 26px; opacity: .5;
}
/* When a hero image is set in the Customizer */
.gj-hero--image { background-image: var(--hero-bg); }
.gj-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,61,40,0.15) 0%, rgba(20,61,40,0.35) 100%); }
.gj-hero--image .gj-hero__overlay { background: var(--gradient-hero); }
.gj-hero__content { position: relative; z-index: 2; max-width: 720px; padding-block: var(--space-3xl); }
.gj-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
    color: #fff; padding: 0.4rem 1rem; border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-lg);
}
.gj-hero__badge .gj-icon { color: var(--gj-accent-light); }
.gj-hero__title { color: #fff; line-height: 1.2; margin-bottom: var(--space-md); text-shadow: 0 2px 24px rgba(0,0,0,.2); }
.gj-hero__subtitle { font-size: var(--text-lg); color: rgba(255,255,255,0.9); margin-bottom: var(--space-xl); max-width: 600px; }
.gj-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

@media (max-width: 575px) {
    .gj-hero { min-height: 70vh; text-align: center; }
    .gj-hero__content { margin-inline: auto; }
    .gj-hero__actions { justify-content: center; }
}