/* ================================================================
   project-world-map.css — Colour theme for World Map
   All layout styles live in project-page.css.
   ================================================================ */

:root {
    --primary:    #3a6b8a;
    --accent:     #e8a030;
    --accent-dark:#c8782a;
    --cream:      #faf8f3;
    --earth:      #7a6040;
    --dark-text:  #2c2c2c;
    --light-text: #666;
    --border:     #e8e4df;
}

/* ── Hero background ── */
.project-hero {
    background: linear-gradient(135deg, #ddeaf4 0%, rgba(232, 160, 48, 0.08) 100%);
}

.hero-image-wrap {
    background: linear-gradient(135deg, #b8d4e8 0%, #8ab8d4 100%);
}

.hero-image-placeholder {
    background: linear-gradient(135deg, #b8d4e8 0%, #88b8d0 100%);
}

/* ── Gallery image backgrounds ── */
.gallery-img {
    background: linear-gradient(135deg, #b8d4e8 0%, #88b8d0 100%);
}

/* Full map spans the row; two square details sit side by side */
#spreads .gallery-grid {
    grid-template-columns: 1fr 1fr;
}

#spreads .gallery-item.wide {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    #spreads .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Overview lead with floating illustrations ── */
.about-grid {
    grid-template-columns: 1fr;
    max-width: 820px;
}

.about-lead {
    margin-bottom: 1.2rem;
}

.about-lead::after {
    content: "";
    display: table;
    clear: both;
}

.about-lead p {
    margin-bottom: 0;
}

.about-lead-illust {
    float: right;
    width: min(240px, 44%);
    height: auto;
    margin: -0.35rem -0.4rem 0.75rem 1.25rem;
    shape-outside: margin-box;
    transform: rotate(6deg);
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}

.about-lead--alt .about-lead-illust {
    float: left;
    width: min(260px, 48%);
    margin: -0.2rem 1.35rem 0.75rem -0.35rem;
    transform: rotate(-3deg);
}

@media (max-width: 768px) {
    .about-lead-illust {
        float: none;
        display: block;
        width: min(200px, 55%);
        margin: 0.25rem auto 1.25rem;
        transform: rotate(4deg);
    }

    .about-lead--alt .about-lead-illust {
        float: none;
        width: min(240px, 70%);
        margin: 0.25rem auto 1.25rem;
        transform: rotate(-2deg);
    }
}

/* ── Highlights section background ── */
.highlights-section {
    background: linear-gradient(135deg, var(--primary) 0%, rgba(58, 107, 138, 0.85) 100%);
}

/* ── CTA section background ── */
.cta-section {
    background: #fff;
}