/* ===================================
   DOCUMENTS PAGE — ДЕКОР
   Тема: официальная, сдержанная — скрепка / печать-штамп / сургучная нить.
   Отличается от остальных страниц: НЕ игровой декор, а "канцелярский",
   уместный для официальных документов.
   =================================== */

:root {
    --doodle-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40' viewBox='0 0 24 40'%3E%3Cpath d='M8 10V28C8 32 12 34 16 32C19 30.5 19 27 16 25.5C14 24.5 12 26 12 28V12C12 6 20 4 20 12V26' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%2352CC9A' stroke-width='1.6' stroke-dasharray='3 3'/%3E%3Cpath d='M13 20L18 25L28 14' stroke='%2352CC9A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    --doodle-underline-documents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14'%3E%3Cpath d='M2 9C12 2 18 12 28 6C38 0 44 12 54 6C64 0 72 12 82 6' fill='none' stroke='%23EE7A5D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===================================
   1. HERO — скрепка (сдержанная, без анимации — соответствует серьёзности темы)
   =================================== */
.page-hero__title {
    position: relative;
    display: inline-block;
}

.page-hero__title::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 6px;
    background: var(--doodle-underline-documents) no-repeat left center / contain;
    opacity: .7;
}

.page-hero {
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 18%;
    right: 9%;
    width: 22px;
    height: 36px;
    background: var(--doodle-paperclip) no-repeat center / contain;
    opacity: .4;
    transform: rotate(12deg);
}

@media (max-width: 768px) {
    .page-hero::after { display: none; }
}

/* ===================================
   2. ГРУППИРОВКА ДОКУМЕНТОВ ПО ВАЖНОСТИ
   Первые 2 карточки (Устав, ЕГРЮЛ) — "ключевые",
   выделяем терракотовой полосой слева.
   Остальные — нейтральные, но с мятной печатью на скачивании.
   =================================== */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.document-item {
    position: relative;
    border-left: 3px solid transparent;
    transition: border-color 0.3s ease;
}

/* Первые два документа — визуально приоритетные */
.document-item:nth-child(1),
.document-item:nth-child(2) {
    border-left-color: var(--color-primary, #EE7A5D);
}

.document-item:nth-child(1) .document-item__icon,
.document-item:nth-child(2) .document-item__icon {
    background: linear-gradient(135deg, rgba(238, 122, 93, .14), rgba(238, 122, 93, .05));
    color: var(--color-primary-dark, #D9633F);
}

/* Остальные документы — нейтральный бирюзовый акцент иконки */
/*.document-item:nth-child(n+3) .document-item__icon {*/
/*    background: linear-gradient(135deg, rgba(37, 169, 184, .12), rgba(37, 169, 184, .04));*/
/*    color: var(--color-secondary, #25A9B8);*/
/*}*/

.document-item:nth-child(n+3) {
    border-left-color: var(--color-secondary, #25A9B8);
}

.document-item:nth-child(n+3) .document-item__icon {
    background: linear-gradient(135deg, rgba(37, 169, 184, .12), rgba(37, 169, 184, .04));
    color: var(--color-secondary, #25A9B8);
}

/* ===================================
   3. ПЕЧАТЬ-ШТАМП НА КНОПКЕ "СКАЧАТЬ" ПРИ HOVER
   =================================== */
.document-item__download {
    position: relative;
    overflow: visible;
}

.document-item__download::after {
    content: '';
    position: absolute;
    top: -14px;
    right: -8px;
    width: 26px;
    height: 26px;
    background: var(--doodle-stamp) no-repeat center / contain;
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 3;
}

.document-item__download:hover::after,
.document-item__download:focus-visible::after {
    opacity: .9;
    transform: scale(1) rotate(0deg);
}

/* ===================================
   4. ФОН СЕКЦИИ — едва заметная "бумажная" текстура
   =================================== */
.privacy-content {
    position: relative;
    overflow: hidden;
}

.privacy-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
            to bottom,
            transparent 0 39px,
            rgba(238, 122, 93, .04) 39px 40px
    );
    -webkit-mask-image: radial-gradient(ellipse 50% 40% at 50% 0%, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 50% 40% at 50% 0%, black 0%, transparent 70%);
}

.privacy-content > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   5. ФУТЕР С РЕКВИЗИТАМИ — сургучная печать рядом с датой
   =================================== */
.privacy-footer__content {
    position: relative;
}

.privacy-footer__date {
    position: relative;
    padding-left: 4px;
}

/* ===================================
   PRINT
   =================================== */
@media print {
    .page-hero::after,
    .page-hero__title::after,
    .privacy-content::before,
    .document-item__download::after {
        display: none !important;
    }
}

/* ===================================
   6. СВОДКА "N ДОКУМЕНТОВ"
   =================================== */
.documents-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    background: linear-gradient(135deg, rgba(82, 204, 154, .08), rgba(82, 204, 154, .03));
    border: 1px solid rgba(82, 204, 154, .25);
    border-radius: var(--radius-full, 100px);
    width: fit-content;
    margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
}

.documents-summary__count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-tertiary, #52CC9A);
    color: #fff;
    font-weight: 800;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.documents-summary__text {
    font-size: var(--fz-sm, 0.875rem);
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
}

@media (max-width: 480px) {
    .documents-summary {
        flex-wrap: wrap;
    }
}