/**
 * assets/css/modules/layout-primitives.css
 * Shared responsive layout tokens and page-family primitives.
 */
:root {
    --capy-page-gutter: clamp(16px, 4vw, 40px);
    --capy-container-wide: 1160px;
    --capy-container-content: 900px;
    --capy-header-clearance: clamp(112px, 10vw, 168px);
    --capy-header-clearance-compact: 76px;
    --capy-flow-gap: clamp(24px, 4vw, 48px);
    --capy-glass-bg: rgba(20, 25, 39, 0.74);
    --capy-glass-bg-hover: rgba(24, 30, 44, 0.8);
    --capy-glass-border: rgba(255, 255, 255, 0.1);
    --capy-glass-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
    --capy-glass-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.34), 0 0 28px rgba(251, 191, 36, 0.08);
    --capy-glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%);
}

.site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(12px, 2vw, 28px);
}

.site-branding,
.site-navigation,
.header-right {
    min-width: 0;
}

.site-logo-link,
.custom-logo-link {
    max-width: min(100%, 340px);
}

.capy-fp-section-inner,
.capy-hub-hero-inner,
.review-page__container {
    width: min(100%, var(--capy-container-wide));
    margin-inline: auto;
}

.capy-fp-section,
.capy-hub-listing-section,
.capy-review-content {
    padding-inline: var(--capy-page-gutter);
}

.capy-fp-section-inner,
.review-page__section-inner {
    min-width: 0;
}

.capy-hero-glass,
.filter-bar,
.hub-filter-bar {
    background: var(--capy-glass-bg); border-color: var(--capy-glass-border); box-shadow: var(--capy-glass-shadow);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}

.capy-glass-shine { background: var(--capy-glass-shine); }
.filter-bar,
.hub-filter-bar { position: relative; overflow: hidden; }
.filter-bar::before,
.hub-filter-bar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--capy-glass-shine); opacity: 0.56; }
.filter-bar > *,
.hub-filter-bar > * { position: relative; z-index: 1; }

.capy-breadcrumbs {
    position: relative;
    z-index: 10000;
    width: min(100%, var(--capy-container-wide));
    margin: 0 auto 18px;
    color: var(--capy-text-dim);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.capy-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.capy-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.capy-breadcrumbs__item + .capy-breadcrumbs__item::before {
    content: "/";
    color: rgba(251, 191, 36, 0.56);
}

.capy-breadcrumbs__link {
    color: rgba(241, 245, 249, 0.68);
    text-decoration: none;
}

.capy-breadcrumbs__link:hover {
    color: var(--capy-gold);
}

.capy-breadcrumbs__current {
    max-width: min(64vw, 520px);
    overflow: hidden;
    color: var(--capy-gold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capy-hub-page,
.review-page,
.capy-fp {
    overflow-x: clip;
}

.capy-hub-page,
.review-page { position: relative; isolation: isolate; }

.capy-hub-page::before,
.review-page::before {
    content: "";
    position: absolute; inset: 0 0 auto;
    height: min(760px, 80vh); pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(251, 191, 36, 0.09) 0%, transparent 36%),
        radial-gradient(circle at 86% 42%, rgba(34, 197, 94, 0.045) 0%, transparent 42%);
    filter: blur(72px); opacity: 0.85;
}

.capy-hub-page > *,
.review-page > * { position: relative; z-index: 1; }

body.single-casino .site-header-inner {
    align-items: start;
}

body.single-casino .site-branding {
    max-width: clamp(180px, 22vw, 250px);
}

body.single-casino img.custom-logo {
    width: clamp(170px, 16vw, 230px);
}

@media (max-width: 768px) {
    :root {
        --capy-page-gutter: 16px;
        --capy-flow-gap: 28px;
    }

    .site-header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .capy-breadcrumbs__list { row-gap: 6px; }
    .capy-breadcrumbs__item { max-width: 100%; }
    .capy-breadcrumbs__current {
        max-width: min(100%, 28ch);
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    body.single-casino .site-branding {
        max-width: min(55vw, 220px);
    }
}

@media (max-width: 420px) {
    :root {
        --capy-page-gutter: 15px;
    }

    body.single-casino .site-branding {
        max-width: min(52vw, 190px);
    }
}