/* Цитати — архів голосів та думок. */
.quotes-page {
    --quotes-paper: #f2ede5;
    --quotes-muted: #aaa299;
    --quotes-red: #df263a;
    --quotes-gold: #dfb45e;
    --quotes-line: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 68% 9%, rgba(126, 9, 23, .19), transparent 32rem),
        linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.96)),
        url("images/characters-bg.png") center/cover fixed no-repeat !important;
}

.quotes-page .quotes-main-wrapper {
    width: 100% !important;
    margin: 0 !important;
}

.quotes-page .quotes-hero {
    position: relative;
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px)));
    margin: 0 auto;
    padding: clamp(86px, 10vw, 142px) 0 54px;
    overflow: visible;
    border: 0;
    background: transparent;
    text-align: left;
}

.quotes-page .quotes-hero::before {
    content: "01";
    top: clamp(42px, 5vw, 76px);
    left: -10px;
    z-index: 0;
    color: rgba(176,17,34,.34);
    font: 700 clamp(6rem, 11vw, 10rem)/1 'Cinzel', Georgia, serif;
    transform: none;
}

.quotes-page .quotes-hero::after {
    content: "ГОЛОСИ МІДЛЕНДА";
    position: absolute;
    top: clamp(82px, 9.8vw, 139px);
    left: 0;
    color: var(--quotes-red);
    font: 700 .74rem 'Cinzel', Georgia, serif;
    letter-spacing: .2em;
}

.quotes-page .quotes-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 0 22px;
    color: var(--quotes-paper);
    font-size: clamp(4rem, 8.8vw, 8.8rem);
    line-height: .88;
    letter-spacing: -.02em;
    text-transform: none;
    text-shadow: 0 16px 52px rgba(0,0,0,.82);
}

.quotes-page .quotes-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--quotes-muted);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.72;
}

.quotes-page .quote-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px)));
    max-width: none;
    margin: 0 auto 12px;
    padding: 14px;
    border: 1px solid var(--quotes-line);
    border-radius: 16px;
    background: rgba(8,8,9,.9);
    box-shadow: 0 22px 56px rgba(0,0,0,.42);
    backdrop-filter: blur(15px);
}

.quotes-page .quote-search,
.quotes-page .quote-author-filter {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px !important;
    color: var(--quotes-paper);
    background: rgba(255,255,255,.025);
    font: 400 1rem 'Spectral', Georgia, serif;
    outline: none;
}

.quotes-page .quote-search { border-left: 3px solid var(--quotes-red); }
.quotes-page .quote-author-filter { grid-column: 2; grid-row: 1; }

.quotes-page .quote-search:focus,
.quotes-page .quote-author-filter:focus {
    border-color: rgba(223,38,58,.76);
    box-shadow: 0 0 0 3px rgba(223,38,58,.1);
    transform: none;
}

.quotes-page .abyss-btn {
    grid-column: 1 / -1;
    min-height: 50px;
    padding: 12px 20px;
    border: 1px solid rgba(223,38,58,.62);
    border-radius: 11px !important;
    color: #f5eee6;
    background: linear-gradient(100deg, rgba(139,9,23,.52), rgba(49,5,11,.72), rgba(139,9,23,.3));
    box-shadow: none;
    font: 700 .75rem 'Cinzel', Georgia, serif;
    letter-spacing: .14em;
}

.quotes-page .abyss-btn::before { content: "◉"; filter: none; color: var(--quotes-gold); }

.quotes-page .abyss-btn:hover {
    border-color: var(--quotes-red);
    background: linear-gradient(100deg, rgba(166,11,28,.68), rgba(62,5,13,.82), rgba(166,11,28,.4));
    box-shadow: 0 14px 38px rgba(125,7,20,.24);
    transform: translateY(-2px);
}

.quotes-page .quote-filters {
    justify-content: flex-start;
    gap: 8px;
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px)));
    max-width: none;
    margin: 0 auto 42px;
    padding: 0;
}

.quotes-page .quote-filters .filter-btn {
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px !important;
    color: #b8b0a7;
    background: rgba(255,255,255,.025);
    font: 700 .72rem 'Cinzel', Georgia, serif;
}

.quotes-page .quote-filters .filter-btn:hover,
.quotes-page .quote-filters .filter-btn.active {
    color: #fff;
    border-color: rgba(223,38,58,.78);
    background: rgba(155,11,26,.28);
    box-shadow: none;
    transform: translateY(-2px);
}

.quotes-page .quotes-container {
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px)));
    max-width: none;
    margin: 0 auto 110px !important;
    padding: 0;
    columns: 3 340px;
    column-gap: clamp(18px, 2vw, 28px);
}

.quotes-page .quote-block {
    position: relative;
    min-height: 270px;
    margin: 0 0 clamp(18px, 2vw, 28px);
    padding: clamp(28px, 3vw, 40px);
    overflow: hidden;
    break-inside: avoid;
    border: 1px solid var(--quotes-line) !important;
    border-left: 1px solid var(--quotes-line) !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(22,19,20,.98), rgba(6,6,7,.99)) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.43) !important;
    transform: none !important;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

.quotes-page .quote-block::before {
    content: "“";
    top: -38px;
    right: 18px;
    left: auto;
    color: rgba(192,22,40,.16);
    font-size: 10rem;
    transform: none;
}

.quotes-page .quote-block::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(223,38,58,.08), transparent 34%);
    opacity: 0;
    transition: opacity .3s ease;
}

.quotes-page .quote-block:hover,
.quotes-page .quote-block:focus-within {
    border-color: rgba(223,38,58,.56) !important;
    box-shadow: 0 32px 78px rgba(0,0,0,.58), 0 0 0 1px rgba(223,38,58,.08) !important;
    transform: translateY(-6px) !important;
}

.quotes-page .quote-block:hover::after,
.quotes-page .quote-block:focus-within::after { opacity: 1; }

.quotes-page .quote-text {
    position: relative;
    z-index: 2;
    margin: 0 0 32px;
    color: #ded7ce;
    font-size: clamp(1.08rem, 1.35vw, 1.24rem);
    line-height: 1.72;
    text-shadow: none;
    transform: none;
}

.quotes-page .quote-bottom {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: end;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.09);
    transform: none;
}

.quotes-page .quote-author {
    color: var(--quotes-red);
    font-size: .92rem;
    letter-spacing: .13em;
    text-shadow: none;
}

.quotes-page .quote-context { color: #817a73; font-size: .86rem; }

.quotes-page .copy-btn,
.quotes-page .poster-btn {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px !important;
    color: #bdb5ac;
    background: rgba(255,255,255,.025);
    font: 700 .68rem 'Cinzel', Georgia, serif;
}

.quotes-page .copy-btn:hover,
.quotes-page .poster-btn:hover {
    color: #fff;
    border-color: rgba(223,38,58,.7);
    background: rgba(144,9,23,.25);
    box-shadow: none;
}

.quotes-page .empty-message {
    border-radius: 16px;
    color: var(--quotes-muted);
    border-color: rgba(255,255,255,.14);
}

.quotes-page .abyss-overlay {
    background:
        radial-gradient(circle at 50% 50%, rgba(91,4,15,.94), #050000 48%, #000 84%);
    backdrop-filter: blur(12px);
}

.quotes-page .abyss-content { width: min(920px, 100%); }
.quotes-page .abyss-text { color: var(--quotes-paper); text-shadow: 0 0 42px rgba(223,38,58,.5); }
.quotes-page .abyss-author { color: var(--quotes-red); }
.quotes-page .atlas-context-menu { display: none !important; }

@media (max-width: 820px) {
    .quotes-page .quotes-hero,
    .quotes-page .quote-tools,
    .quotes-page .quote-filters,
    .quotes-page .quotes-container { width: min(100% - 26px, 680px); }

    .quotes-page .quotes-hero { padding-top: 78px; }
    .quotes-page .quotes-hero h1 { font-size: clamp(3.4rem, 17vw, 6rem); }
    .quotes-page .quote-tools { grid-template-columns: 1fr; }
    .quotes-page .quote-author-filter { grid-column: 1; grid-row: auto; }
    .quotes-page .quote-filters { flex-wrap: nowrap; overflow-x: auto; }
    .quotes-page .quote-filters .filter-btn { flex: 0 0 auto; }
    .quotes-page .quotes-container { columns: 1; }
}

@media (max-width: 520px) {
    .quotes-page .quote-bottom { grid-template-columns: 1fr 1fr; }
    .quotes-page .quote-bottom > div { grid-column: 1 / -1; margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .quotes-page .quote-block,
    .quotes-page .abyss-content { transition: none !important; }
}