/*
 * Документи ( page-documents.php ) — розкриття інформації про будівництво
 *
 * Шапка — .phero--flat ( main.css ), заголовки секцій — .section-head
 * ( ui.css ). Власне тут: таблиця відомостей, картки PDF, картки-посилання,
 * рядок «Інформацію оновлено».
 *
 * Фони секцій чергуються: шапка ( canvas ) → таблиця ( subtle ) →
 * договори ( canvas ) → посилання ( subtle ) → дата ( canvas ).
 */

/* ── Ритм секцій ────────────────────────────────────────────────────────── */
/* Та сама драбина, що в page.css: 110 → 80 → 64 → 48. */
.dc-data,
.dc-contracts,
.dc-links { padding: var(--section-gap) 0; }

.dc-data      { background: var(--bg-subtle); }
.dc-contracts { background: var(--bg-canvas); }
.dc-links     { background: var(--bg-subtle); }

.dc-data__head,
.dc-contracts__head,
.dc-links__head { margin-bottom: 48px; }

@media (max-width: 1024px) {
    .dc-data, .dc-contracts, .dc-links { padding: 80px 0; }
}
@media (max-width: 768px) {
    .dc-data, .dc-contracts, .dc-links { padding: 64px 0; }
    .dc-data__head, .dc-contracts__head, .dc-links__head { margin-bottom: 32px; }
}
@media (max-width: 480px) {
    .dc-data, .dc-contracts, .dc-links { padding: 48px 0; }
}

/* ── Таблиця відомостей ─────────────────────────────────────────────────── */
/* Рамку тримає коробка, а не <table>: border-radius разом з
   border-collapse не працює, а overflow:hidden обрізає кути заголовка. */
.dc-data__box {
    overflow:      hidden;
    background:    var(--bg-canvas);
    border:        1px solid var(--gold-line-soft);
    border-radius: 4px;
}

/* table-layout: fixed — ширини колонок задає перший рядок, а не вміст:
   довгий ідентифікатор не розпихає одну колонку за рахунок двох інших. */
.dc-table {
    width:           100%;
    border-collapse: collapse;
    table-layout:    fixed;
    text-align:      left;
    font-size:       15px;
    line-height:     24px;
}

.dc-table__th {
    padding:        18px 24px;
    color:          var(--gold-text);
    font-size:      12px;
    font-weight:    600;
    line-height:    18px;
    letter-spacing: 1.2px;
    text-align:     left;
    text-transform: uppercase;
    background:     var(--bg-elevated);
}
.dc-table__th--info { width: 36%; }

/* Межа — зверху рядка, а не знизу: останній рядок тоді не дублює рамку
   коробки, а перший відділяється від шапки. */
.dc-table__row { border-top: 1px solid var(--border-subtle); }

.dc-table__name,
.dc-table__cell {
    padding:        20px 24px;
    vertical-align: top;
    /* Ідентифікатори об'єктів — один довгий токен без пробілів; без цього
       вони виштовхують колонку за межі коробки. Спрацьовує лише коли
       токен справді не вміщається, на ширших екранах нічого не ламає. */
    overflow-wrap:  anywhere;
}

.dc-table__name {
    color:       var(--text-primary);
    font-weight: 600;
    text-align:  left;
}

.dc-table__cell {
    color:                var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Рядок-підзаголовок групи ( «3) відомості про замовника… » ) */
.dc-table__group {
    padding:     16px 24px;
    color:       var(--gold-text);
    font-weight: 600;
    text-align:  left;
    background:  var(--bg-elevated);
}

.dc-table__link {
    color:                   var(--gold-text);
    text-decoration:         underline;
    text-decoration-color:   var(--gold-line);
    text-underline-offset:   3px;
    transition:              text-decoration-color var(--transition);
}
.dc-table__link:hover { text-decoration-color: currentColor; }

.dc-table__empty { color: var(--text-muted); }

/* Нижче 1200px три колонки вже не вміщають ідентифікатор об'єкта
   ( 01.3033104.5038972.20231027.15.0000.04 — один токен без пробілів, 320px
   у цьому шрифті ): підпис рядка йде зверху на всю ширину, а будинки стають
   двома колонками під ним.

   Поріг не «круглий», а виміряний бісекцією за самим ідентифікатором:
   у три колонки він вміщається в один рядок від 1194px ( тут 1200 із
   запасом ), у дві — від 763px ( тому стовпчик від 768, а не від 640:
   на 641–762 він ламався б посеред цифр ). */
@media (max-width: 1199px) {
    .dc-table,
    .dc-table__tbody { display: block; }

    /* Заголовки колонок переїжджають до значень через data-label. */
    .dc-table__thead { display: none; }

    .dc-table__row {
        display:               grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap:            32px;
        padding:               24px;
    }

    .dc-table__row--group { display: block; padding: 0; }
    .dc-table__group      { display: block; padding: 16px 24px; }

    .dc-table__name {
        display:     block;
        grid-column: 1 / -1;
        padding:     0 0 14px;
    }

    .dc-table__cell { display: block; padding: 0; }

    .dc-table__cell::before {
        content:        attr(data-label);
        display:        block;
        margin-bottom:  6px;
        color:          var(--text-muted);
        font-size:      11px;
        font-weight:    600;
        line-height:    16px;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    /* Значення однакові для обох будинків — показуємо один раз, підписом
       «Будинок 2 · Будинок 3». Повторювати його двічі нічого не додає. */
    .dc-table__row--same .dc-table__cell--a { grid-column: 1 / -1; }
    .dc-table__row--same .dc-table__cell--b { display: none; }
    .dc-table__row--same .dc-table__cell--a[data-label-same]::before { content: attr(data-label-same); }
}

/* Будинки — один під одним. Нижче ~394px ідентифікатор не вміщається навіть
   в усю ширину екрана; переноситься він по крапках між групами цифр
   ( <wbr> у Theme\Documents\cell_html ), а не посеред числа. */
@media (max-width: 768px) {
    .dc-table__row   { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 20px 16px; }
    .dc-table__group { padding: 14px 16px; }
}

/* ── Проєкти договорів ──────────────────────────────────────────────────── */
.dc-contracts__groups {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   32px;
}

.dc-contracts__house {
    margin:         0 0 20px;
    color:          var(--gold-text);
    font-size:      20px;
    font-weight:    600;
    line-height:    28px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.dc-contracts__list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

@media (max-width: 768px) {
    .dc-contracts__groups { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .dc-contracts__house  { font-size: 18px; line-height: 26px; }
}

/* Картка файлу. Вся картка — посилання: ціль набагато більша за 44px. */
.dc-file {
    display:         flex;
    align-items:     center;
    gap:             16px;
    min-height:      72px;
    padding:         14px 20px;
    color:           var(--text-primary);
    text-decoration: none;
    background:      var(--bg-elevated);
    border:          1px solid var(--gold-line-soft);
    border-radius:   4px;
    transition:      border-color var(--transition), background-color var(--transition);
}
.dc-file:hover { border-color: var(--gold-line); }
/* Глобальне правило глушить outline на посиланнях ( див. main.css ), тож
   кільце фокусу — box-shadow, інакше клавіатурний користувач його не бачить. */
.dc-file:focus-visible { border-color: var(--gold-solid); box-shadow: 0 0 0 2px var(--gold-solid); }

/* Шеврон справа — той самий, що в .link-arrow */
.dc-file::after {
    content:      "";
    flex:         none;
    width:        8px;
    height:       8px;
    margin-left:  auto;
    border-top:   1.5px solid var(--gold-text);
    border-right: 1.5px solid var(--gold-text);
    transform:    rotate(45deg);
    transition:   transform var(--transition);
}
.dc-file:hover::after { transform: translateX(4px) rotate(45deg); }

.dc-file__badge {
    display:         flex;
    flex:            none;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          52px;
    color:           var(--gold-text);
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  .6px;
    border:          1px solid var(--gold-line);
    border-radius:   4px;
}

.dc-file__body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.dc-file__title { font-size: 16px; font-weight: 600; line-height: 24px; }
.dc-file__meta  { color: var(--text-muted); font-size: 13px; line-height: 20px; }

/* ── Хід будівництва та умови купівлі ───────────────────────────────────── */
.dc-links__list {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.dc-link {
    display:         flex;
    flex-direction:  column;
    gap:             12px;
    height:          100%;
    padding:         28px 30px;
    color:           var(--text-primary);
    text-decoration: none;
    background:      var(--bg-elevated);
    border:          1px solid var(--gold-line-soft);
    border-radius:   4px;
    transition:      border-color var(--transition);
}
.dc-link:hover { border-color: var(--gold-line); }
.dc-link:focus-visible { border-color: var(--gold-solid); box-shadow: 0 0 0 2px var(--gold-solid); }

.dc-link__title { font-size: 20px; font-weight: 600; line-height: 28px; }
.dc-link__text  { color: var(--text-secondary); }

/* «Перейти» притиснуте донизу: картки в ряду різної висоти, а стрілка
   в усіх має стояти на одній лінії. */
.dc-link__more { margin-top: auto; color: var(--gold-text); }
.dc-link:hover .dc-link__more { gap: 18px; }

@media (max-width: 768px) {
    .dc-links__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .dc-link        { padding: 22px 20px; }
    .dc-link__title { font-size: 18px; line-height: 26px; }
}

/* ── Дата оновлення ─────────────────────────────────────────────────────── */
.dc-updated {
    padding:    28px 0;
    background: var(--bg-canvas);
    border-top: 1px solid var(--gold-line-soft);
}
.dc-updated__text {
    margin:      0;
    color:       var(--text-muted);
    font-size:   14px;
    line-height: 22px;
}
.dc-updated__date {
    color:                var(--text-secondary);
    font-weight:          600;
    font-variant-numeric: tabular-nums;
    white-space:          nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .dc-file, .dc-file::after, .dc-link, .dc-table__link { transition: none; }
}