/**
 * ELBIN Redesign 2 — Categories Mosaic
 *
 * Стилі для shortcode [elbin_r2_categories].
 * Фінальний дизайн (elbin-final-v1/page-home.jsx):
 * сітка 4 колонки × 240px, велика картка 2×2 (темна, editorial),
 * звичайні картки — білі з іконкою зверху.
 * Усі змінні з tokens.css.
 */

/* === СЕКЦІЯ === */

.elbin-r2-categories {
    background: var(--elbin-r2-surface-2);
    padding: var(--elbin-r2-s-64) 0;
    font-family: var(--elbin-r2-font-ui);
}

/* === ЗАГОЛОВОК СЕКЦІЇ === */

.elbin-r2-categories__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--elbin-r2-s-16);
    flex-wrap: wrap;
    margin-bottom: var(--elbin-r2-s-32);
}

.elbin-r2-categories__eyebrow {
    margin-bottom: var(--elbin-r2-s-12);
}

.elbin-r2-categories__title {
    font-family: var(--elbin-r2-font-ui);
    font-size: var(--elbin-r2-fs-h2);
    font-weight: var(--elbin-r2-fw-heading);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--elbin-r2-text);
    margin: 0;
}

.elbin-r2-categories__all {
    font-size: var(--elbin-r2-fs-small);
    font-weight: var(--elbin-r2-fw-medium);
    color: var(--elbin-r2-text-2);
    text-decoration: none;
    transition: color var(--elbin-r2-transition-base);
}

.elbin-r2-categories__all:hover {
    color: var(--elbin-r2-accent-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === МОЗАЇКА === */

.elbin-r2-categories__mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: var(--elbin-r2-s-16);
}

/* Велика картка — 2 колонки × 2 рядки */
.elbin-r2-cat-card--featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* === ЗВИЧАЙНА КАРТКА === */

.elbin-r2-cat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--elbin-r2-s-24);
    padding: var(--elbin-r2-s-24);
    background: var(--elbin-r2-surface);
    border: 1px solid var(--elbin-r2-line);
    border-radius: var(--elbin-r2-r-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--elbin-r2-transition-fast),
                background var(--elbin-r2-transition-fast);
    position: relative;
    overflow: hidden;
}

.elbin-r2-cat-card:hover {
    border-color: var(--elbin-r2-accent);
    background: var(--elbin-r2-accent-50);
    text-decoration: none;
    color: inherit;
}

/* === ІКОНКА (звичайна картка) === */

.elbin-r2-cat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--elbin-r2-surface-3);
    border: 1px solid var(--elbin-r2-line);
    /* Темна іконка на світлому колі (fill:currentColor у SVG) */
    color: var(--elbin-r2-text);
    flex-shrink: 0;
    transition: background var(--elbin-r2-transition-fast),
                border-color var(--elbin-r2-transition-fast),
                color var(--elbin-r2-transition-fast);
}

.elbin-r2-cat-card__icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

/* Ховер картки — коло набуває акцентного відтінку */
.elbin-r2-cat-card:hover .elbin-r2-cat-card__icon {
    background: var(--elbin-r2-accent-50);
    border-color: var(--elbin-r2-accent);
}

/* === ТЕКСТ (звичайна картка) === */

.elbin-r2-cat-card__body {
    display: flex;
    flex-direction: column;
}

.elbin-r2-cat-card__name {
    display: block;
    font-size: 17px;
    font-weight: var(--elbin-r2-fw-heading);
    line-height: 1.2;
    color: var(--elbin-r2-text);
}

.elbin-r2-cat-card__count {
    display: block;
    margin-top: 6px;
    font-family: var(--elbin-r2-font-mono);
    font-size: var(--elbin-r2-fs-caption);
    font-weight: var(--elbin-r2-fw-medium);
    color: var(--elbin-r2-text-3);
}

/* === ВЕЛИКА КАРТКА (editorial, темна) === */

.elbin-r2-cat-card--featured {
    background:
        radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--elbin-r2-accent) 18%, transparent) 0%, transparent 55%),
        var(--elbin-r2-ink);
    border-color: var(--elbin-r2-ink);
    padding: var(--elbin-r2-s-32);
    color: #FFFFFF;
}

.elbin-r2-cat-card--featured:hover {
    /* лишаємо темний фон (без спалаху в accent-50 від базового правила),
       лише трохи підсилюємо кутовий бірюзовий глоу + м'який кант */
    background:
        radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--elbin-r2-accent) 24%, transparent) 0%, transparent 55%),
        var(--elbin-r2-ink);
    border-color: color-mix(in srgb, var(--elbin-r2-accent) 40%, var(--elbin-r2-ink));
    color: #FFFFFF;
}

/* Контент featured-картки над ghost-гліфом */
.elbin-r2-cat-card--featured .elbin-r2-cat-card__top,
.elbin-r2-cat-card--featured .elbin-r2-cat-card__bottom {
    position: relative;
    z-index: 1;
}

/* === GHOST-ГЛІФ (водяний знак у порожньому просторі featured-картки) === */

.elbin-r2-cat-card__ghost {
    position: absolute;
    right: -6%;
    bottom: -14%;
    width: 62%;
    max-width: 340px;
    color: var(--elbin-r2-accent);
    opacity: 0.1;
    pointer-events: none;
    transform: rotate(-8deg);
    transition: transform 0.5s var(--elbin-r2-ease, ease),
                opacity 0.5s var(--elbin-r2-ease, ease);
}

.elbin-r2-cat-card__ghost-svg {
    display: block;
    width: 100%;
    height: auto;
}

.elbin-r2-cat-card--featured:hover .elbin-r2-cat-card__ghost {
    opacity: 0.13;
    transform: rotate(-8deg) scale(1.03) translate(-1%, -2%);
}

.elbin-r2-cat-card__eyebrow {
    color: var(--elbin-r2-accent);
}

.elbin-r2-cat-card__headline {
    margin: var(--elbin-r2-s-12) 0 0;
    /* Плавний clamp замість сходинок 48/32 */
    font-size: var(--elbin-r2-fs-h2-fluid);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.elbin-r2-cat-card__desc {
    margin: var(--elbin-r2-s-16) 0 0;
    font-size: var(--elbin-r2-fs-small);
    font-weight: var(--elbin-r2-fw-body);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    max-width: 340px;
}

.elbin-r2-cat-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.elbin-r2-cat-card__count-accent {
    font-family: var(--elbin-r2-font-mono);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--elbin-r2-accent);
}

/* === ПЛАНШЕТ === */

@media (max-width: 1023.98px) {
    .elbin-r2-categories__mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
}

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

@media (max-width: 768px) {
    .elbin-r2-categories {
        padding: var(--elbin-r2-s-48) 0;
    }

    .elbin-r2-categories__mosaic {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: var(--elbin-r2-s-12);
    }

    .elbin-r2-cat-card--featured {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 280px;
    }

    /* Найдовша категорія «Електроінструмент» (16 літер) на full-width
       featured-картці при h2-fluid (~34px) переносила сироту-літеру.
       Менший clamp тримає слово в один рядок від 320 до 768px. */
    .elbin-r2-cat-card__headline {
        font-size: clamp(26px, 1.1rem + 2.8vw, 38px);
    }

    .elbin-r2-cat-card {
        min-height: 130px;
        padding: var(--elbin-r2-s-16);
    }
}