/**
 * Edufin - Bantuan Hero Section Styles
 */

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

.bantuan-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    padding: var(--space-30) var(--space-8) var(--space-16);
    background-color: var(--color-primary-green-dark);
    overflow: hidden;
}

/* =================================
   DOT-GRID BACKGROUND
   ================================= */

.bantuan-hero-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(225, 238, 87, 0.15) 1px,
        transparent 1px
    );
    background-size: 2rem 2rem;
    mask-image: radial-gradient(
        ellipse 70% 80% at 50% 60%,
        black 30%,
        transparent 100%
    );
    pointer-events: none;
}

/* =================================
   CONTENT
   ================================= */

.bantuan-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    max-width: 42rem;
    animation: bantuan-hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bantuan-hero-rise {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================
   BREADCRUMB
   ================================= */

.bantuan-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    animation: bantuan-hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.bantuan-breadcrumb-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.bantuan-breadcrumb-link:hover {
    color: var(--color-primary-lime);
}

.bantuan-breadcrumb-separator {
    flex-shrink: 0;
    opacity: 0.5;
}

.bantuan-breadcrumb-current {
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-medium);
}

/* =================================
   TITLE
   ================================= */

.bantuan-hero-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-base-white);
    letter-spacing: -0.02em;
    animation: bantuan-hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.bantuan-hero-title-accent {
    color: var(--color-primary-lime);
}

/* =================================
   SUBTITLE
   ================================= */

.bantuan-hero-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.7);
    max-width: 36rem;
    animation: bantuan-hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

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

@media (max-width: 64rem) {
    .bantuan-hero {
        min-height: 20rem;
        padding: var(--space-24) var(--space-6) var(--space-12);
    }

    .bantuan-hero-title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 48rem) {
    .bantuan-hero {
        min-height: 16rem;
        padding: var(--space-20) var(--space-4) var(--space-10);
    }

    .bantuan-hero-title {
        font-size: var(--text-2xl);
    }

    .bantuan-hero-subtitle {
        font-size: var(--text-base);
    }
}