/*
 * homepage.css — Homepage-specific layout (70/30 grid, responsive adjustments)
 * Split from modern-ojs.css for maintainability
 */

/* =========================================
   6. 70/30 Layout
========================================= */
.ac-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.ac-main {
    flex: 1;
    min-width: 0;
}
.ac-sidebar {
    flex: 0 0 300px;
}


/* =========================================
   11. Responsive Design
========================================= */

@media (min-width: 1441px) {
    :root { --container-max: 1280px; }
}

@media (max-width: 1024px) {
    .ac-sidebar { flex: 0 0 260px; }
}

@media (max-width: 768px) {
    .ac-hero-inner {
        padding: var(--space-md) var(--space-sm);
    }
    .ac-hero-tagline { font-size: var(--text-md); }
    .ac-hero-badges { gap: 6px; }
    .ac-badge { font-size: var(--text-xs); padding: 4px 10px; }

    .ac-role-cards {
        grid-template-columns: 1fr;
        padding: var(--space-xl) 0;
    }
    .ac-role-card {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .ac-layout {
        flex-direction: column;
        gap: var(--space-md);
    }
    .ac-sidebar {
        flex: 1 1 auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .ac-trust-cards {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .ac-footer-inner { grid-template-columns: 1fr 1fr; }

    .ac-header-main .ac-container { gap: 10px; }
    .ac-brand { font-size: var(--title-lg); }
}

@media (max-width: 600px) {
    .ac-container { padding: 0 var(--space-sm); }

    .ac-header-main .ac-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
    }
    .ac-brand { text-align: center; }
    .ac-nav-primary {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    .ac-nav-divider { display: none; }

    .ac-hero-tagline { font-size: var(--text-md); }

    .ac-sidebar { grid-template-columns: 1fr; }

    .ac-empty-state { padding: var(--space-lg) var(--space-sm); }
    .ac-empty-actions { flex-direction: column; align-items: stretch; }

    .ac-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 375px) {
    .ac-hero-inner { padding: var(--space-sm); }
    .ac-role-card { padding: var(--space-md) var(--space-sm); }
}