/*
    layout.css
    Structural layout: containers, header/nav shell, section rhythm,
    and the grid/flow for hero, featured-content, about, and
    recent-updates. Written mobile-first; breakpoint overrides that
    change these layouts on larger screens live in responsive.css,
    not here, so all breakpoint logic stays in one place.
*/

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding-inline);
}

/* ---------------------------------------------------------------------
   Header + Navigation
   ------------------------------------------------------------------ */

.site-header {
    background: linear-gradient(160deg, var(--color-bg-header) 0%, var(--color-blue-600) 130%);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.brand__mark {
    width: 36px;
    height: 36px;
}

.site-nav {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
}

.nav-toggle__icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    gap: var(--space-1);
    padding: var(--space-3) var(--container-padding-inline) var(--space-4);
}

/* ---------------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------------ */

main > section {
    padding-block: var(--space-8);
}

.hero {
    background: linear-gradient(160deg, var(--color-bg-header) 0%, var(--color-blue-600) 130%);
    color: var(--color-text-on-dark);
}

.hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.featured-content {
    background-color: var(--color-bg-page);
}

.card-grid {
    display: grid;
    /* min() caps the minimum below 100% of available space, so this
       cannot overflow even at the narrowest required test width
       (320px), while still producing 2-3 columns as room allows. */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.about {
    background-color: var(--color-bg-surface);
}

.about__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: center;
}

.about__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.recent-updates {
    background-color: var(--color-bg-page);
}

.update-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.site-footer {
    background-color: var(--color-bg-header);
    color: var(--color-text-on-dark);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding-block: var(--space-7);
}

.site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.site-footer__social {
    display: flex;
    gap: var(--space-3);
}