/* ==========================================================================
   layout.css — Privacy Shade
   Container, grid, flexbox utilities, page layout helpers
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--size-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
}

.container--narrow {
    max-width: var(--size-max-width-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
}

.container--wide {
    max-width: var(--size-max-width-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
}

@media (min-width: 640px) {
    .container,
    .container--narrow,
    .container--wide {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container,
    .container--narrow,
    .container--wide {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

.section--sm {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.section--lg {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.section--alt {
    background-color: var(--color-bg-alt);
}

.section--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.section--dark p,
.section--dark .section-header__subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-text-inverse);
}

.section--accent {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.section--accent p {
    color: rgba(255, 255, 255, 0.9);
}

.section--accent h1,
.section--accent h2,
.section--accent h3 {
    color: var(--color-text-inverse);
}

@media (max-width: 768px) {
    .section {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .section--lg {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .section-header {
        margin-bottom: var(--space-2xl);
    }
}

@media (max-width: 480px) {
    .section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .section--lg {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .section-header {
        margin-bottom: var(--space-xl);
    }
}

/* --------------------------------------------------------------------------
   Grid Utilities
   -------------------------------------------------------------------------- */

/* Base grid */
.grid {
    display: grid;
    gap: var(--space-xl);
}

.grid-2 {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(4, 1fr);
}

.grid-auto {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-sm {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Gap variants */
.grid--gap-sm  { gap: var(--space-md); }
.grid--gap-lg  { gap: var(--space-2xl); }

/* Responsive grid breakpoints */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .grid-3--keep-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid-3--keep-2 {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Flexbox Utilities
   -------------------------------------------------------------------------- */
.flex { display: flex; }

.flex-inline { display: inline-flex; }

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap { flex-wrap: wrap; }

.flex-gap     { gap: var(--space-md); }
.flex-gap-sm  { gap: var(--space-sm); }
.flex-gap-lg  { gap: var(--space-xl); }

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* --------------------------------------------------------------------------
   Two-column content + sidebar layout
   -------------------------------------------------------------------------- */
.two-col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-3xl);
    align-items: start;
}

.two-col--reverse {
    grid-template-columns: 320px 1fr;
}

.two-col__main {}

.two-col__sidebar {
    position: sticky;
    top: calc(80px + var(--space-xl)); /* below sticky header */
}

@media (max-width: 1024px) {
    .two-col,
    .two-col--reverse {
        grid-template-columns: 1fr;
    }

    .two-col__sidebar {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   Page layout wrappers
   -------------------------------------------------------------------------- */
.page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.main-content {
    flex: 1;
}

/* Page hero intro for interior pages */
.page-hero {
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3xl) 0 var(--space-2xl);
}

.page-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

.page-hero__title {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.page-hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 640px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Spacing utilities
   -------------------------------------------------------------------------- */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.pt-xs  { padding-top: var(--space-xs); }
.pt-sm  { padding-top: var(--space-sm); }
.pt-md  { padding-top: var(--space-md); }
.pt-lg  { padding-top: var(--space-lg); }
.pt-xl  { padding-top: var(--space-xl); }

.pb-xs  { padding-bottom: var(--space-xs); }
.pb-sm  { padding-bottom: var(--space-sm); }
.pb-md  { padding-bottom: var(--space-md); }
.pb-lg  { padding-bottom: var(--space-lg); }
.pb-xl  { padding-bottom: var(--space-xl); }

/* --------------------------------------------------------------------------
   Display utilities
   -------------------------------------------------------------------------- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }

/* --------------------------------------------------------------------------
   Text alignment
   -------------------------------------------------------------------------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

/* Visually hidden (for screen readers only) */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: var(--z-toast);
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Section header / eyebrow pattern
   -------------------------------------------------------------------------- */
.section-header {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-3xl);
}

.section-header--left {
    text-align: left;
    margin-left: 0;
}

.section-header__eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.section-header__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.section-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
}

.section--dark .section-header__eyebrow {
    color: var(--color-accent-light);
}

/* --------------------------------------------------------------------------
   Dividers
   -------------------------------------------------------------------------- */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-2xl) 0;
}

.divider--lg {
    margin: var(--space-4xl) 0;
}