/* =========================================
   HOME PAGE — MODERN ADS-ALIGNED LAYOUT
   ========================================= */

/* ------------------------------
   HERO / INTRO SECTION
   ------------------------------ */

.home-intro {
    position: relative;
    width: 100%;
    min-height: 45vh;
    padding: var(--admiralty-spacing-7) 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
}

/* Background image wrapper */
.home-intro__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.home-intro__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay for contrast */
.home-intro__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

/* Content container */
.home-intro__content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--admiralty-spacing-5);
}

.home-intro__title {
    color: var(--admiralty-color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: var(--admiralty-spacing-5);
    text-align: left;
}

.home-intro__search {
    margin-top: var(--admiralty-spacing-4);
    text-align: left;
}

/* ------------------------------
   DASHBOARD SECTION
   ------------------------------ */

.home-dashboard {
    padding: var(--admiralty-spacing-9) 0;
    text-align: left;
}

.home-dashboard__heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--admiralty-spacing-6);
}

.home-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--admiralty-spacing-6);
}

.home-dashboard__card {
    background: var(--admiralty-color-white);
    border-radius: 8px;
    padding: var(--admiralty-spacing-6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.home-dashboard__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ------------------------------
   KNOWLEDGE SECTION
   ------------------------------ */

.home-knowledge {
    padding: var(--admiralty-spacing-9) 0;
    text-align: left;
}

.home-knowledge__heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--admiralty-spacing-6);
}

.home-knowledge__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--admiralty-spacing-6);
}

.home-knowledge__item {
    background: var(--admiralty-color-white);
    border-radius: 8px;
    padding: var(--admiralty-spacing-6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.home-knowledge__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ------------------------------
   ANIMATIONS (safe + accessible)
   ------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .fade-slide-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .fade-slide-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .stagger > * {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .5s ease, transform .5s ease;
    }

    .stagger.is-visible > * {
        opacity: 1;
        transform: translateY(0);
    }

    .stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
    .stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
    .stagger.is-visible > *:nth-child(3) { transition-delay: .15s; }
    .stagger.is-visible > *:nth-child(4) { transition-delay: .20s; }
}

/* ------------------------------
   RESPONSIVE TWEAKS
   ------------------------------ */

@media (max-width: 768px) {
    .home-intro {
        min-height: 40vh;
        padding: var(--admiralty-spacing-6) 0;
    }

    .home-dashboard,
    .home-knowledge {
        padding: var(--admiralty-spacing-7) 0;
    }
}
