/* Редакційна версія розділу фракцій. */
.factions-page {
    --factions-paper: #f3eee5;
    --factions-muted: #a9a29a;
    --factions-red: #e2293d;
    --factions-gold: #d6a957;
    --factions-line: rgba(255, 255, 255, .13);
    background:
        radial-gradient(circle at 75% 18%, rgba(116, 9, 18, .12), transparent 28rem),
        #050505;
}

.factions-page .archive-page-hero {
    min-height: clamp(520px, 72vh, 760px);
    padding: 116px max(6vw, 28px) 82px;
    background-position: 50% 24%;
    overflow: hidden;
}

.factions-page .archive-page-hero::before {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .76) 36%, rgba(0, 0, 0, .24) 72%, rgba(0, 0, 0, .72) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(3, 3, 3, .2) 48%, #050505 100%);
}

.factions-page .archive-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 5px 5px;
}

.factions-page .archive-page-hero__content {
    width: min(760px, 100%);
    max-width: none;
}

.factions-page .archive-page-hero h1 {
    margin: 12px 0 22px;
    color: var(--factions-paper);
    font-size: clamp(4rem, 10vw, 9.6rem);
    letter-spacing: .025em;
    text-shadow: 0 8px 42px rgba(0, 0, 0, .88);
}

.factions-page .archive-page-hero p {
    max-width: 650px;
    margin: 0;
    color: #c8c0b5;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.factions-page .archive-section {
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px)));
    margin: clamp(76px, 9vw, 130px) auto;
}

.factions-page .archive-section::before {
    top: -42px;
    left: -4px;
    color: rgba(182, 19, 35, .34);
    font-size: clamp(4.8rem, 8vw, 7.5rem);
}

.factions-page .archive-heading {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin-bottom: 30px;
    color: var(--factions-paper);
    font-size: clamp(3rem, 6.2vw, 6.7rem);
    letter-spacing: -.025em;
}

.factions-page .faction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 38px;
    padding: 0;
    border: 0;
    background: transparent;
}

.factions-page .faction-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(390px, 38vw, 520px);
    padding: clamp(26px, 3.5vw, 48px);
    border: 1px solid var(--factions-line);
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    isolation: isolate;
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease, background-size .6s ease;
}

.factions-page .faction-card::before {
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .04) 14%, rgba(0, 0, 0, .34) 46%, rgba(2, 2, 2, .97) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 72%);
}

.factions-page .faction-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(226, 41, 61, .12), transparent 35%);
    opacity: 0;
    transition: opacity .32s ease;
}

.factions-page .faction-card:nth-child(2),
.factions-page .faction-card:nth-child(3) {
    min-height: clamp(440px, 42vw, 570px);
}

.factions-page .faction-card:hover,
.factions-page .faction-card:focus-within {
    transform: translateY(-7px);
    border-color: rgba(226, 41, 61, .64);
    box-shadow: 0 30px 84px rgba(0, 0, 0, .64), 0 0 0 1px rgba(226, 41, 61, .12);
}

.factions-page .faction-card:hover::after,
.factions-page .faction-card:focus-within::after { opacity: 1; }

.factions-page .faction-card h3 {
    max-width: 680px;
    margin: 10px 0 12px;
    color: var(--factions-paper);
    font-size: clamp(1.8rem, 3.3vw, 3.3rem);
    line-height: 1.02;
}

.factions-page .faction-card p {
    max-width: 640px;
    margin: 0;
    color: #c2bbb2;
    font-size: clamp(.98rem, 1.25vw, 1.08rem);
    line-height: 1.65;
}

.factions-page .archive-chip-row {
    gap: 10px;
    margin: 22px 0 0;
}

.factions-page .archive-chip {
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, .23);
    border-radius: 999px;
    color: #f0e9df;
    background: rgba(8, 8, 8, .58);
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.factions-page .archive-chip:hover,
.factions-page .archive-chip:focus-visible {
    color: #fff;
    border-color: var(--factions-red);
    background: rgba(174, 16, 31, .36);
    transform: translateY(-2px);
}

.factions-page .relation-key {
    position: relative;
    z-index: 1;
    gap: 10px;
    margin: 0 0 30px;
}

.factions-page .relation-key span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--factions-line);
    border-radius: 999px;
    color: #bcb4aa;
    background: rgba(255, 255, 255, .035);
}

.factions-page .relation-key i { width: 8px; height: 8px; }

.factions-page .cosmology-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 0;
}

.factions-page .cosmology-layer,
.factions-page .cosmology-layer:nth-child(n) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 250px;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--factions-line);
    border-top: 3px solid var(--relation-color, var(--factions-gold));
    border-left-width: 1px;
    border-radius: 16px;
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--relation-color, #d6a957) 13%, transparent), transparent 46%),
        linear-gradient(145deg, rgba(24, 21, 21, .96), rgba(6, 6, 6, .98));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .38);
}

.factions-page .cosmology-layer.relation-alliance { --relation-color: #9fbd78; }
.factions-page .cosmology-layer.relation-conflict { --relation-color: #e2293d; }
.factions-page .cosmology-layer.relation-unknown { --relation-color: #d6a957; }

.factions-page .cosmology-layer:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -18px;
    z-index: 2;
    width: 18px;
    color: rgba(243, 238, 229, .48);
    text-align: center;
    transform: translateY(-50%);
}

.factions-page .cosmology-layer b {
    color: var(--factions-paper);
    font-size: clamp(1.2rem, 1.65vw, 1.55rem);
}

.factions-page .cosmology-layer b::before {
    content: "0" counter(faction-balance);
    display: block;
    margin-bottom: 22px;
    color: var(--relation-color, var(--factions-gold));
    font: 700 .72rem 'Cinzel', Georgia, serif;
    letter-spacing: .17em;
}

.factions-page .cosmology-stack { counter-reset: faction-balance; }
.factions-page .cosmology-layer { counter-increment: faction-balance; }

.factions-page .cosmology-layer span {
    color: var(--factions-muted);
    font-size: .98rem;
    line-height: 1.65;
}

.factions-page .atlas-context-menu { display: none !important; }

@media (max-width: 1050px) {
    .factions-page .cosmology-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .factions-page .cosmology-layer:not(:last-child)::after { display: none; }
}

@media (max-width: 760px) {
    .factions-page .archive-page-hero {
        min-height: 560px;
        padding: 110px 22px 58px;
        background-position: 62% center;
    }

    .factions-page .archive-page-hero h1 { font-size: clamp(3.5rem, 19vw, 6rem); }
    .factions-page .archive-section { width: min(100% - 28px, 1480px); }
    .factions-page .faction-grid,
    .factions-page .cosmology-stack { grid-template-columns: 1fr; }
    .factions-page .faction-card,
    .factions-page .faction-card:nth-child(n) { min-height: 440px; }
    .factions-page .cosmology-layer,
    .factions-page .cosmology-layer:nth-child(n) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .factions-page .faction-card,
    .factions-page .archive-chip { transition: none; }
}