/*
 * Site composition layer
 *
 * Purpose:
 * - Own Themeshak-specific section composition and branded layout decisions.
 * - Override core design-system primitives from main.css only when the site
 *   intentionally composes them into a product-specific pattern.
 *
 * Should live here:
 * - homepage hero composition
 * - footer composition
 * - archive/home section composition
 * - branded section-specific responsive behavior
 *
 * Should NOT live here:
 * - tokens, reset, primitive buttons, grid utilities, generic cards
 * - one-off emergency fixes (keep those in page-fixes.css temporarily)
 * - post/video template-only rules (keep those in post-templates.css)
 */

.site-footer .footer-links-container {
    align-content: start;
    row-gap: var(--space-xl);
}

.site-footer .footer-links-container > .footer-column {
    padding-inline: 0;
}

.feature-book__content-shell,
.newsletter-box__copy-shell {
    display: grid;
    align-content: center;
    min-width: 0;
}

.feature-book__content {
    max-width: 34rem;
}

.hero,
.about-break {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--section-bg-position, center center);
}

.hero {
    --section-bg-position: center center;
    --section-bg-position-mobile: center 52%;
    min-height: min(100svh, 56rem);
    height: auto;
    align-items: end;
}

@media (width <= 840px) {
    .site-nav .nav-right [data-subscribe-trigger] {
        border-color: var(--accent);
        background: var(--accent);
        color: var(--surface-container-low);
    }

    .site-nav .nav-right [data-subscribe-trigger]:hover,
    .site-nav .nav-right [data-subscribe-trigger]:focus,
    .site-nav .nav-right [data-subscribe-trigger]:focus-visible {
        border-color: var(--accent-strong);
        background: var(--accent-strong);
        color: var(--surface-container-low);
    }

    .hero,
    .about-break {
        background-position: var(--section-bg-position-mobile, var(--section-bg-position, center center));
    }

    .hero {
        min-height: clamp(30rem, 84svh, 44rem);
        padding: clamp(1rem, 4vw, 1.5rem);
    }
}

@media (width <= 600px) {
    .hero {
        --section-bg-position-mobile: center 48%;
        min-height: clamp(28rem, 78svh, 40rem);
    }
}

@media (width >= 600px) {
    .site-footer .footer-links-container > .footer-column {
        padding-inline: var(--space-s);
    }
}

@media (width >= 1200px) {
    .site-footer .footer-links-container {
        column-gap: var(--space-l);
    }

    .site-footer .footer-links-container > .footer-column:first-child {
        padding-inline-start: 0;
    }

    .site-footer .footer-links-container > .footer-column:last-child {
        padding-inline-end: 0;
    }
}