/* Atmosphere layer — the "blow them away" polish.
   Load AFTER main.css, home.css, chrome.css, footer.css. */

/* ── Base plate ────────────────────────────────────────────── */

body {
    background: #0c0806;
}

.plate-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.plate-bg svg { width: 100%; height: 100%; }

.home-section,
.stat-bar,
.site-footer,
.country-strip {
    position: relative;
}

/* ── Hero as a framed plate ────────────────────────────────── */

.home-hero-centred {
    position: relative;
    border: 1px solid #402a18;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(198,146,75,0.10), transparent 60%),
        linear-gradient(180deg, #1a110c 0%, #130d09 100%);
    box-shadow: inset 0 0 0 1px rgba(198,146,75,0.08),
                inset 0 2px 30px rgba(0,0,0,0.6);
    padding: 54px 24px 46px;
    margin-bottom: 46px;
    overflow: hidden;
}

.hero-instrument {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(90px, 11vw, 150px);
    opacity: 0.9;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}

.hero-instrument-left  { left: 3%; }
.hero-instrument-right { right: 3%; }

.hero-instrument svg { width: 100%; height: auto; }

@media (max-width: 900px) {
    .hero-instrument { display: none; }
}

.home-hero-centred .search-box {
    border: 1px solid #6d4a27;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4),
                0 2px 14px rgba(0,0,0,0.5);
    background: #150f0b;
}

.home-hero-centred .search-box button {
    background: linear-gradient(180deg, #d6a961, #b5843f);
}

/* ── Stat bar polish ───────────────────────────────────────── */

.stat-bar {
    background: linear-gradient(180deg, #1a110c, #120c08);
    box-shadow: inset 0 1px 0 rgba(198,146,75,0.12);
    /* full-bleed: break out of the centered .page container to span
       the whole viewport width */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* even spacing across the full width */
.stat-bar .stat {
    padding: 18px 20px;
}

.stat-bar strong {
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* ── Gold-framed cards ─────────────────────────────────────── */

.event-card,
.mini-card,
.country-chip,
.country-photo-card {
    box-shadow: 0 1px 0 rgba(198,146,75,0.06),
                0 6px 16px rgba(0,0,0,0.35);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.event-card:hover,
.mini-card:hover,
.country-chip:hover,
.country-photo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(198,146,75,0.5),
                0 10px 22px rgba(0,0,0,0.5);
}

.country-chip img,
.country-photo-card img {
    box-shadow: inset 0 0 0 1px rgba(198,146,75,0.25);
}

/* ── Tag pills ─────────────────────────────────────────────── */

.tag-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tag-pill {
    display: inline-block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 8px;
    color: #dcbf8f;
    border: 1px solid #6d4a27;
    background: rgba(198,146,75,0.06);
}

/* ── Section headings with a brass rule tail ───────────────── */

.home-section > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-section > h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(198,146,75,0.5), transparent);
}

.home-section > h2.centred::before {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198,146,75,0.5));
}

@media (prefers-reduced-motion: reduce) {
    .event-card, .mini-card, .country-chip, .country-photo-card {
        transition: none;
    }
    .event-card:hover, .mini-card:hover, .country-chip:hover, .country-photo-card:hover {
        transform: none;
    }
}

/* ── Stat bar icons — horizontal: icon | number | words ────── */

.stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
}

.stat-icon-wrap {
    display: inline-flex;
    color: #c6924b;            /* brass — icons use currentColor */
    flex-shrink: 0;
}

.stat-icon {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* number and words sit inline on ONE row, not stacked */
.stat-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.stat-text strong {
    font-size: 1.7rem;
    color: #c6924b;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    line-height: 1;
}

.stat-text span {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    color: #dfc9a8;
}

@media (max-width: 720px) {
    .stat { gap: 8px; }
    .stat-icon { width: 26px; height: 26px; }
    .stat-text { gap: 5px; }
    .stat-text strong { font-size: 1.25rem; }
    .stat-text span { font-size: 0.62rem; }
}