/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Archaeological Cultures chapter for the Ancient Composition Atlas.
 */

.aca-root [data-aca-plate="era"] {
    min-height: auto;
    background-image: var(--aca-hero);
    background-position: center 34%;
}
.aca-root [data-aca-plate="era"] .aca-plate-copy {
    width: min(100%, 66rem);
    padding-block: 0 .62rem;
}
.aca-root [data-aca-plate="era"] .aca-plate-period:not(:has(.aca-demo-label)) { display: none; }

.aca-root .aca-culture-note {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: min(100%, 61rem);
    margin: .54rem auto 0;
    padding: .48rem 1.1rem;
    border: 1px solid var(--aca-border);
    border-radius: .72rem;
    background: rgba(11, 27, 35, .92);
    color: var(--aca-ink);
    font-size: .87rem;
    line-height: 1.4;
    text-align: start;
}
.aca-culture-note .dna-icon { color: var(--sra-gold-strong); font-size: 1.22rem; }
.aca-cultures {
    --culture-dark: #101d24;
    --culture-gold: #f1bd75;
    --culture-line: rgba(231, 182, 107, .34);
    display: grid;
    gap: .72rem;
}

.aca-culture-leading {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(11rem, 1fr) minmax(19rem, 1.8fr);
    align-items: center;
    gap: clamp(.8rem, 1.7vw, 1.5rem);
    min-height: 6.75rem;
    overflow: hidden;
    padding: .55rem clamp(.95rem, 2.5vw, 2.3rem);
    border: 1.5px solid var(--culture-gold);
    border-radius: .92rem;
    background: #101d24;
}
.aca-culture-leading::before {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(29%, 26rem);
    content: "";
    background: var(--aca-landscape) right 58% / cover no-repeat;
    mask-image: linear-gradient(to right, transparent, #000 54%);
}
[dir="rtl"] .aca-culture-leading::before { mask-image: linear-gradient(to left, transparent, #000 54%); }
.aca-culture-leading > img {
    width: clamp(3.8rem, 6.25vw, 5.7rem);
    height: auto;
    aspect-ratio: 1;
    border: 2px solid #a27b46;
    border-radius: 50%;
    background: #0b151a;
}
.aca-culture-leading-copy { min-width: 0; }
.aca-root .aca-culture-leading h2 {
    margin-block-start: .25rem;
    font-size: clamp(1.85rem, 3.25vw, 3.1rem);
    font-style: italic;
    overflow-wrap: anywhere;
}
.aca-culture-pill {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .23rem .72rem;
    border-radius: 2rem;
    background: #f2c788;
    color: #24190d;
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.aca-culture-leading-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .58rem;
    align-items: start;
    min-width: 0;
    max-width: 25.6rem;
    margin: 0;
    padding: .18rem 0;
    padding-inline-start: clamp(.65rem, 2vw, 1.55rem);
    border-inline-start: 1px solid var(--culture-line);
    text-align: center;
}
.aca-culture-leading-stats > div { display: flex; flex-direction: column-reverse; gap: .16rem; }
.aca-culture-leading-stats dd { margin: 0; color: var(--culture-gold); font: 700 clamp(1.5rem, 2.35vw, 2.1rem)/1.06 var(--aca-heading); }
.aca-culture-leading-stats dt { color: var(--aca-ink); font-size: .71rem; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }

.aca-culture-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem clamp(.55rem, 1.6vw, 1.5rem);
}
.aca-culture-controls button, .aca-culture-filter select, .aca-culture-more {
    min-height: 2.12rem;
    max-width: 100%;
    padding: .28rem 1.15rem;
    border: 1px solid var(--culture-line);
    border-radius: 2rem;
    background: #222d33;
    color: var(--aca-ink);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.aca-culture-controls button { min-width: 6.25rem; }
.aca-culture-controls button[aria-pressed="true"] { border-color: var(--culture-gold); background: #30332c; color: #fff0d8; }
.aca-culture-controls button[aria-pressed="true"]::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-inline-end: .48rem; border-radius: 50%; background: var(--culture-gold); }
.aca-culture-filter { position: relative; min-width: 0; max-width: min(13rem, 100%); margin: 0; }
.aca-culture-filter select { width: 100%; padding-inline: 1.1rem 2rem; appearance: none; color-scheme: dark; text-overflow: ellipsis; }
.aca-culture-filter .dna-icon { position: absolute; inset-inline-end: .85rem; inset-block-start: .65rem; color: var(--culture-gold); pointer-events: none; }

.aca-culture-distribution {
    padding: .48rem 1rem .66rem;
    border: 1px solid var(--culture-line);
    border-radius: .7rem;
    background: var(--culture-dark);
}
.aca-culture-distribution > header { display: flex; gap: .45rem 1rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding-block-end: .4rem; border-block-end: 1px solid var(--culture-line); }
.aca-root .aca-culture-distribution h2, .aca-root .aca-culture-gallery-title { display: flex; align-items: center; gap: .65rem; font-size: 1.38rem; }
.aca-culture-distribution h2 .dna-icon, .aca-culture-gallery-title .dna-icon { color: var(--culture-gold); font-size: 1.03rem; }
.aca-culture-distribution > header > span { color: var(--aca-ink); font-size: .68rem; letter-spacing: .075em; text-transform: uppercase; }
.aca-culture-bar { display: flex; min-height: 1.93rem; overflow: hidden; margin-block: .62rem .52rem; border: 1px solid rgba(245, 220, 182, .45); border-radius: .55rem; }
.aca-culture-segment { display: grid; place-content: center; flex-basis: 0; min-width: 0; overflow: hidden; border-inline-end: 1px solid rgba(255, 235, 213, .32); color: #fff9ef; font-size: .81rem; font-weight: 750; }
.aca-culture-segment:last-child { border: 0; }
.aca-culture-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0; padding: 0; list-style: none; }
.aca-culture-legend > li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--aca-ink); font-size: .73rem; line-height: 1.3; }
.aca-culture-legend bdi { color: #ddc9aa; }
.aca-culture-swatch { width: .67rem; height: .67rem; margin-inline-end: .1rem; border: 1px solid #bcb19a; border-radius: 50%; }
.aca-culture-distribution [data-tone="0"] { background: #87632e; }
.aca-culture-distribution [data-tone="1"] { background: #775b48; }
.aca-culture-distribution [data-tone="2"] { background: #656747; }
.aca-culture-distribution [data-tone="3"] { background: #4f6d6e; }
.aca-culture-distribution [data-tone="4"] { background: #626979; }
.aca-culture-distribution [data-tone="5"] { background: #6d5b74; }
.aca-culture-distribution [data-tone="6"] { background: #555760; }

.aca-culture-gallery-head { display: flex; flex-wrap: wrap; gap: .38rem 1rem; justify-content: space-between; align-items: center; margin-block-end: .48rem; }
.aca-culture-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .48rem; }
.aca-root .aca-culture-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .46rem .62rem .54rem;
    border: 1px solid var(--culture-line);
    border-radius: .8rem;
    background: var(--culture-dark);
    color: var(--aca-ink);
    text-decoration: none;
}
.aca-root .aca-culture-card[aria-current="true"] { border-color: var(--culture-gold); background: #232522; box-shadow: inset 0 0 0 1px var(--culture-gold); }
.aca-root .aca-culture-card:hover { border-color: var(--culture-gold); }
.aca-culture-card-visual { position: relative; display: grid; place-items: center; height: 4.8rem; }
.aca-culture-card-visual img { width: 4.65rem; height: 4.65rem; border: 1px solid #6d604b; border-radius: 50%; background: #0b151a; }
.aca-culture-card-badge { position: absolute; inset-block-start: 0; justify-content: center; max-width: 100%; padding-inline: .48rem; font-size: .61rem; }
.aca-culture-card-name { display: block; min-height: 2.18em; color: var(--sra-ivory); font: 550 clamp(1.03rem, 1.3vw, 1.23rem)/1.08 var(--aca-heading); overflow-wrap: anywhere; }
.aca-culture-card-meta { display: grid; gap: .18rem; min-height: 2.35em; color: var(--aca-ink); font-size: .75rem; }
.aca-culture-card-meta > span { display: flex; align-items: baseline; gap: .38rem; }
.aca-culture-card-meta .dna-icon { width: .9rem; color: var(--culture-gold); }
.aca-culture-card-stats { display: flex; flex-wrap: wrap; gap: .2rem .48rem; justify-content: space-between; margin-block-start: auto; padding-block: .3rem; border-block: 1px solid var(--culture-line); color: #e8dccb; font-size: .65rem; line-height: 1.18; }
.aca-culture-card-stats strong { color: var(--culture-gold); font: 700 1.03rem/1 var(--aca-heading); }
.aca-culture-tag { align-self: flex-start; border-radius: 1rem; background: #313332; color: var(--aca-ink); padding: .16rem .55rem; font-size: .67rem; }
.aca-culture-more { min-height: 1.74rem; margin: 0; padding: .2rem .75rem; font-size: .72rem; }
.aca-root .aca-cultures :is(a, button, select, summary):focus-visible { outline: 2px solid var(--culture-gold); outline-offset: 2px; }

.aca-culture-detail {
    margin-block-end: .55rem;
    overflow: hidden;
    border: 1px solid var(--culture-line);
    border-inline-start: 3px solid var(--culture-gold);
    border-radius: .75rem;
    background: var(--culture-dark);
    scroll-margin-block-start: calc(var(--nav-height, 72px) + .65rem);
}
.aca-culture-detail > summary { display: flex; align-items: center; gap: .65rem; padding: .48rem 1rem; background: #2b3030; color: var(--sra-ivory); cursor: pointer; list-style: none; font: 650 1.21rem/1.15 var(--aca-heading); }
.aca-culture-detail > summary::-webkit-details-marker { display: none; }
.aca-culture-detail > summary .dna-icon { color: var(--culture-gold); font-size: .93rem; }
.aca-culture-detail > summary .dna-icon:last-child { margin-inline-start: auto; }
.aca-culture-detail[open] > summary { border-block-end: 1px solid var(--culture-line); }
.aca-culture-detail[open] > summary .dna-icon:last-child { transform: rotate(180deg); }
.aca-culture-detail-body { display: grid; grid-template-columns: 8.4rem minmax(10rem, 1fr) minmax(7rem, .32fr) minmax(8rem, .42fr); gap: 1rem; align-items: start; padding: .78rem 1rem .9rem; }
.aca-culture-detail-art { width: 100%; height: auto; border: 1px solid var(--culture-line); border-radius: .65rem; background: #0b151a; }
.aca-root .aca-culture-narrative h3 { margin: 0 0 .25rem; font-style: italic; }
.aca-root .aca-culture-narrative p { font-size: .83rem; line-height: 1.48; overflow-wrap: anywhere; }
.aca-culture-facts, .aca-culture-places { margin: 0; padding-inline-start: .8rem; border-inline-start: 1px solid var(--culture-line); }
.aca-culture-facts { display: grid; gap: .42rem; }
.aca-culture-facts > div { display: grid; gap: .12rem; }
.aca-culture-facts dt, .aca-root .aca-culture-places h4, .aca-culture-top > strong { color: #ead6b6; font: 680 .69rem/1.24 system-ui, sans-serif; letter-spacing: .045em; text-transform: uppercase; }
.aca-culture-facts dd { margin: 0; color: var(--culture-gold); font: 700 1.19rem/1.08 var(--aca-heading); }
.aca-root .aca-culture-places h4 { margin: 0 0 .35rem; }
.aca-culture-places ul { display: grid; gap: .22rem; margin: 0; padding: 0; list-style: none; }
.aca-culture-places li { display: flex; gap: .4rem; align-items: baseline; color: var(--aca-ink); font-size: .78rem; }
.aca-culture-places li .dna-icon { color: var(--culture-gold); }
.aca-root .aca-culture-top { display: grid; gap: .25rem; margin-block-start: .52rem; font-size: .8rem; }
.aca-culture-top .aca-text-button { text-align: start; }

@media (min-width: 1211px) {
    .aca-root [data-aca-plate="era"] .aca-masthead { padding-block: .43rem .18rem; }
    .aca-root [data-aca-plate="era"] .sra-title { font-size: clamp(2.6rem, 3.15vw, 3rem); }
    .aca-root [data-aca-plate="era"] .sra-eyebrow { margin-block-end: .2rem; }
    .aca-culture-card-stats { font-size: .6rem; }
}
@media (max-width: 1210px) {
    .aca-culture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .aca-culture-leading { grid-template-columns: auto minmax(0, 1fr); }
    .aca-culture-leading-stats { grid-column: 1 / -1; max-width: none; padding: .58rem 0 .12rem; border-inline: 0; border-block-start: 1px solid var(--culture-line); }
    .aca-culture-leading::before { width: 48%; opacity: .64; }
    .aca-culture-detail-body { grid-template-columns: minmax(3.5rem, 6rem) minmax(0, 1fr); }
    .aca-culture-facts, .aca-culture-places { border-inline: 0; padding-inline-start: 0; }
    .aca-culture-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem 1rem; padding-block-start: .62rem; border-block-start: 1px solid var(--culture-line); }
    .aca-culture-places { grid-column: 1 / -1; }
}
@media (max-width: 550px) {
    .aca-culture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aca-culture-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aca-culture-filter { max-width: none; }
    .aca-root .aca-culture-note { padding: .48rem .68rem; gap: .58rem; }
    .aca-culture-detail-body { gap: .65rem; padding: .6rem .7rem; }
}