/*
|--------------------------------------------------------------------------
| File: assets/css/layout.css
|--------------------------------------------------------------------------
| Purpose:
| Shared layout primitives, page shells, grid systems, sections, containers,
| and responsive structure for the luxury yacht media concierge platform.
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   1. Page shell
   ========================================================================== */

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 1 auto;
    padding-top: var(--space-12);
}

.page-shell {
    padding-bottom: var(--space-24);
}

.page-shell > .page-section:first-child {
    padding-top: var(--space-12);
}

/* ==========================================================================
   2. Containers
   ========================================================================== */

.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    width: min(100% - 2rem, var(--container-lg));
    margin-inline: auto;
}

.container-xs {
    max-width: var(--container-xs);
}

.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-xl {
    max-width: var(--container-xl);
}

.container-narrow {
    width: min(100% - 2rem, 48rem);
    margin-inline: auto;
}

.container-reading {
    width: min(100% - 2rem, 54rem);
    margin-inline: auto;
}

/* ==========================================================================
   3. Section spacing
   ========================================================================== */

.page-section {
    padding-block: var(--space-16);
}

.page-section-sm {
    padding-block: var(--space-10);
}

.page-section-lg {
    padding-block: var(--space-24);
}

.section-divider {
    border-top: 1px solid var(--color-border);
}

.section-surface {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border-block: 1px solid rgba(255, 255, 255, 0.03);
}

.section-header {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    max-width: 50rem;
}

.section-header.centered {
    margin-inline: auto;
}

/* ==========================================================================
   4. Generic stacks and spacing helpers
   ========================================================================== */

.stack-2,
.stack-3,
.stack-4,
.stack-5,
.stack-6,
.stack-8,
.stack-10 {
    display: grid;
}

.stack-2 {
    gap: var(--space-2);
}

.stack-3 {
    gap: var(--space-3);
}

.stack-4 {
    gap: var(--space-4);
}

.stack-5 {
    gap: var(--space-5);
}

.stack-6 {
    gap: var(--space-6);
}

.stack-8 {
    gap: var(--space-8);
}

.stack-10 {
    gap: var(--space-10);
}

/* ==========================================================================
   5. Grid systems
   ========================================================================== */

.grid-2,
.grid-3,
.grid-4,
.grid-sidebar,
.grid-feature {
    display: grid;
    gap: var(--space-6);
}

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

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

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-sidebar {
    grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.9fr);
    align-items: start;
}

.grid-feature {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: var(--space-10);
}

/* ==========================================================================
   6. Hero and spotlight layouts
   ========================================================================== */

.hero-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(217, 179, 106, 0.08), rgba(217, 179, 106, 0.02)),
        rgba(9, 18, 29, 0.82);
    box-shadow: var(--shadow-deep);
}

.hero-shell::after {
    content: "";
    position: absolute;
    inset: auto -10% -35% auto;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 179, 106, 0.12), transparent 65%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.8fr);
    gap: var(--space-10);
    align-items: end;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.hero-panel {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
}

/* ==========================================================================
   7. Media, split, and editorial layouts
   ========================================================================== */

.split-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: center;
}

.editorial-band {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: var(--shadow-soft);
}

.inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.inline-meta > * {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   8. CTA and utility blocks
   ========================================================================== */

.cta-band {
    display: grid;
    gap: var(--space-6);
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgba(217, 179, 106, 0.22);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(217, 179, 106, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(12, 21, 33, 0.9);
    box-shadow: var(--shadow-soft);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.panel {
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.025);
}

.panel-soft {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   9. Responsive behaviour
   ========================================================================== */

@media (max-width: 1100px) {
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3,
    .grid-feature,
    .grid-sidebar,
    .hero-grid,
    .split-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .site-main {
        padding-top: var(--space-8);
    }

    .page-section {
        padding-block: var(--space-12);
    }

    .page-section-lg {
        padding-block: var(--space-16);
    }

    .hero-shell {
        padding: var(--space-8);
        border-radius: var(--radius-lg);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .container-xs,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-narrow,
    .container-reading {
        width: min(100% - 1.25rem, var(--container-lg));
    }
}