/* ================================================================
   project-mexico-axolotl.css — Colour theme for Mexico: Save the Axolotl
   All layout styles live in project-page.css.
   ================================================================ */

:root {
    --primary:    #4a7c59;
    --accent:     #f4a460;
    --accent-dark:#e88a40;
    --cream:      #faf8f3;
    --earth:      #8b7355;
    --dark-text:  #2c2c2c;
    --light-text: #666;
    --border:     #e8e4df;
}

/* ── Hero background ── */
.project-hero {
    background: linear-gradient(135deg, #e8f0ea 0%, rgba(244, 164, 96, 0.08) 100%);
}

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

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

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

/* Show full book spreads without 16:9 crop */
#spreads .gallery-img.natural img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Desktop: two-column photo gallery */
#spreads .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
}

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

/* First spread spans full width */
#spreads .gallery-item.wide:first-child {
    grid-column: 1 / -1;
}

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

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

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

/* ── Overview lead with floating axolotl ── */
.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);
    }
}