/**
 * ELBIN Redesign 2 — Інформаційна сторінка
 *
 * Фінальний дизайн: elbin-final-v1/page-info.jsx
 * Шаблон: page-templates/info.php. Усі змінні з tokens.css.
 */

.elbin-r2-info {
    background: var(--elbin-r2-surface);
    font-family: var(--elbin-r2-font-ui);
}

/* === ХЛІБНІ КРИХТИ === */

.elbin-r2-info__breadcrumbs-band {
    background: var(--elbin-r2-surface);
    border-bottom: 1px solid var(--elbin-r2-line);
    padding: 14px 0;
}

.elbin-r2-info__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--elbin-r2-s-8);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--elbin-r2-text-3);
}

.elbin-r2-info__breadcrumbs a {
    color: var(--elbin-r2-text-3);
    text-decoration: none;
}

.elbin-r2-info__breadcrumbs a:hover {
    color: var(--elbin-r2-text);
}

.elbin-r2-info__breadcrumbs-current {
    color: var(--elbin-r2-text);
    font-weight: var(--elbin-r2-fw-medium);
}

/* === ЛЕЙАУТ === */

.elbin-r2-info__body {
    padding-top: var(--elbin-r2-s-48);
    padding-bottom: 80px;
}

.elbin-r2-info__layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--elbin-r2-s-48);
    align-items: start;
}

@media (max-width: 768px) {
    .elbin-r2-info__layout {
        /* minmax(0,1fr), а не голий 1fr (=minmax(auto,1fr)): інакше довгий
           нерозривний рядок (IBAN, посилання) розпирає трек ширше за екран
           і весь контент «вилазить» праворуч без відступу. */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--elbin-r2-s-24);
    }
}

/* === САЙДБАР === */

.elbin-r2-info__aside-eyebrow {
    margin-bottom: 14px;
}

/* Картка-меню — той самий вигляд, що навігація кабінету (account.css) */
.elbin-r2-info__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--elbin-r2-surface);
    border: 1px solid var(--elbin-r2-line);
    border-radius: 14px;
}

.elbin-r2-info__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font: var(--elbin-r2-fw-medium) 14.5px/1.3 var(--elbin-r2-font-ui);
    color: var(--elbin-r2-text-2);
    text-decoration: none;
    transition: color var(--elbin-r2-transition-fast),
                background var(--elbin-r2-transition-fast);
}

.elbin-r2-info__nav-item:hover {
    background: var(--elbin-r2-surface-2);
    color: var(--elbin-r2-text);
    text-decoration: none;
}

.elbin-r2-info__nav-item.is-active {
    background: var(--elbin-r2-accent-50);
    color: var(--elbin-r2-accent-700);
}

/* Іконки пунктів — stroke-SVG маскою, як у меню кабінету */
.elbin-r2-info__nav-item::before {
    content: "";
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--info-ico) center / contain no-repeat;
    mask: var(--info-ico) center / contain no-repeat;
}
.elbin-r2-info__nav-item--delivery {
    --info-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18h-5'/><path d='M20 18h2v-7l-3.5-5H14'/><circle cx='7' cy='18' r='2'/><circle cx='18' cy='18' r='2'/></svg>");
}
.elbin-r2-info__nav-item--returns {
    --info-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/></svg>");
}
.elbin-r2-info__nav-item--terms {
    --info-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
}
.elbin-r2-info__nav-item--privacy {
    --info-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>");
}
.elbin-r2-info__nav-item--about {
    --info-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}
.elbin-r2-info__nav-item--contacts {
    --info-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}

/* === КОНТЕНТ === */

.elbin-r2-info__article {
    max-width: 760px;
    /* Грід-дитина мусить мати право стиснутись нижче min-content, інакше
       довгі слова з the_content() (IBAN, URL) ламають сітку. */
    min-width: 0;
}

.elbin-r2-info__updated {
    font-family: var(--elbin-r2-font-mono);
    font-size: 11px;
    font-weight: var(--elbin-r2-fw-medium);
    letter-spacing: 0.12em;
    color: var(--elbin-r2-text-3);
    margin-bottom: 14px;
}

.elbin-r2-info__title {
    margin: 0;
    /* Плавний clamp замість сходинок 40/30 */
    font-size: var(--elbin-r2-fs-page-title);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--elbin-r2-text);
}

.elbin-r2-info__title-dot {
    color: var(--elbin-r2-accent);
}

/* Типографіка контенту з редактора */
.elbin-r2-info__content {
    margin-top: var(--elbin-r2-s-24);
    /* the_content() може містити довгі нерозривні рядки (IBAN, РНОКПП,
       посилання) — ламаємо їх, щоб не переповнювали контейнер. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.elbin-r2-info__content h2 {
    margin: 40px 0 var(--elbin-r2-s-16);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--elbin-r2-text);
}

.elbin-r2-info__content h3 {
    margin: var(--elbin-r2-s-24) 0 var(--elbin-r2-s-12);
    font-size: var(--elbin-r2-fs-h4);
    font-weight: 700;
    color: var(--elbin-r2-text);
}

.elbin-r2-info__content p {
    margin: var(--elbin-r2-s-16) 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--elbin-r2-text-2);
}

.elbin-r2-info__content ul,
.elbin-r2-info__content ol {
    margin: var(--elbin-r2-s-16) 0 0;
    padding-left: 18px;
    font-size: var(--elbin-r2-fs-small);
    line-height: 1.6;
    color: var(--elbin-r2-text-2);
}

/* Таблиці «ключ — значення» (фінальний дизайн: рядки в рамці) */
.elbin-r2-info__content table {
    width: 100%;
    margin: var(--elbin-r2-s-16) 0 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--elbin-r2-line);
    border-radius: var(--elbin-r2-r-card);
    overflow: hidden;
}

.elbin-r2-info__content table td,
.elbin-r2-info__content table th {
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid var(--elbin-r2-line);
    background: var(--elbin-r2-surface);
    font-size: var(--elbin-r2-fs-small);
    line-height: 1.4;
    text-align: left;
    vertical-align: top;
}

.elbin-r2-info__content table tr:last-child td,
.elbin-r2-info__content table tr:last-child th {
    border-bottom: none;
}

.elbin-r2-info__content table td:first-child {
    font-weight: 600;
    color: var(--elbin-r2-text);
}

.elbin-r2-info__content table td:last-child {
    font-family: var(--elbin-r2-font-mono);
    font-size: 13px;
    font-weight: var(--elbin-r2-fw-medium);
    color: var(--elbin-r2-text-2);
}

.elbin-r2-info__content a {
    color: var(--elbin-r2-accent-700);
}

/* === CTA-БЛОК === */

.elbin-r2-info__cta {
    margin-top: var(--elbin-r2-s-48);
    padding: var(--elbin-r2-s-20) var(--elbin-r2-s-24);
    background: var(--elbin-r2-surface-2);
    border: 1px solid var(--elbin-r2-line);
    border-radius: var(--elbin-r2-r-card);
    display: flex;
    align-items: center;
    gap: var(--elbin-r2-s-16);
    flex-wrap: wrap;
}

.elbin-r2-info__cta-text {
    flex: 1 1 280px;
}

.elbin-r2-info__cta-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--elbin-r2-text);
}

.elbin-r2-info__cta-sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--elbin-r2-text-2);
}

/* === МОБІЛЬНИЙ === */

@media (max-width: 600px) {
    .elbin-r2-info__body {
        padding-top: var(--elbin-r2-s-32);
        padding-bottom: var(--elbin-r2-s-48);
    }
}

/* Сайдбар-меню на моб — під контент окремими кнопками (як «Інші розділи»
   кабінету, рішення 04.07: чипи зверху промахувались); поточну сторінку
   не показуємо. 768 = брейкпоінт одноколонкового __layout */
@media (max-width: 768px) {
    .elbin-r2-info__aside {
        order: 2;
        margin-top: var(--elbin-r2-s-24);
    }

    .elbin-r2-info__nav {
        gap: 8px;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
    }

    .elbin-r2-info__nav-item {
        padding: 14px;
        background: var(--elbin-r2-surface);
        border: 1px solid var(--elbin-r2-line);
        border-radius: 14px;
        font: 600 14px/1.2 var(--elbin-r2-font-ui);
        color: var(--elbin-r2-text);
    }
    .elbin-r2-info__nav-item::before {
        background: var(--elbin-r2-accent-700);
    }
    .elbin-r2-info__nav-item.is-active {
        display: none;
    }
}