/**
 * Shared Hub Styles
 *
 * Shared by topic hubs and category hubs.
 * Keep only cross-hub visuals and reusable hub-card components here.
 */

body.hub-page,
.hub-cat-page {
    --hub-header-left-image: url("https://itako999.com/itako-dict/hero-left/");
    --hub-header-right-image: url("https://itako999.com/itako-dict/hero-right/");
    --hub-header-bottom-image: url("https://itako999.com/itako-dict/hero-bottom/");
    --hub-header-image-opacity: 0.95;
    --hub-header-rule-offset: 20px;
}

.hub-hero,
.hub-cat-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    background-image:
        var(--hub-header-left-image),
        var(--hub-header-right-image),
        linear-gradient(rgba(224, 122, 0, 0.18), rgba(224, 122, 0, 0.18)),
        linear-gradient(rgba(224, 122, 0, 0.18), rgba(224, 122, 0, 0.18)),
        radial-gradient(circle at 50% 45%, rgba(224, 122, 0, 0.08), transparent 28%),
        linear-gradient(180deg, #fffdf8 0%, #fbf7ef 100%);
    background-position:
        left var(--hub-header-rule-offset) top var(--hub-header-rule-offset),
        right var(--hub-header-rule-offset) top var(--hub-header-rule-offset),
        center var(--hub-header-rule-offset),
        center calc(100% - var(--hub-header-rule-offset)),
        50% 45%,
        center;
    background-size:
        160px 80px,
        160px 80px,
        calc(100% - 48px) 1px,
        calc(100% - 48px) 1px,
        100% 100%,
        100% 100%;
    background-repeat: no-repeat;
    border: 1px solid rgba(195, 180, 158, 0.72);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.hub-hero::before,
.hub-hero::after,
.hub-cat-hero::before,
.hub-cat-hero::after {
    content: '';
    position: absolute;
    width: clamp(96px, 18vw, 190px);
    height: clamp(96px, 18vw, 190px);
    pointer-events: none;
    bottom: var(--hub-header-rule-offset);
    background-image: var(--hub-header-bottom-image);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: var(--hub-header-image-opacity, 0.95);
}

.hub-hero::before,
.hub-cat-hero::before {
    left: var(--hub-header-rule-offset);
    background-position: bottom left;
}

.hub-hero::after,
.hub-cat-hero::after {
    right: var(--hub-header-rule-offset);
    background-position: bottom right;
    transform: scaleX(-1);
}

.hub-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}

.hub-cat-card {
    background: #fff;
    border: 1px solid var(--line-gray, #d4c8b8);
    border-left: 3px solid #c0ad98;
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}

.hub-cat-card:hover {
    box-shadow: 0 5px 14px rgba(59, 36, 17, 0.08);
    border-left-color: var(--hub-cat, var(--wood-orange, #e07a00));
    background-color: #fffdf9;
    color: inherit;
}

.hub-cat-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.hub-cat-card__badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.hub-cat-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.hub-cat-badge--glossary,
.hub-cat-badge--card-infographic,
.hub-cat-badge--visual-infographic {
    background: #faf7f1;
    border: 1px solid #d8cfc3;
    color: #6b5b4b;
}

.hub-cat-card__jp {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark, #3b2411);
    margin-bottom: 3px;
    line-height: 1.3;
}

.hub-cat-card__mn {
    font-size: 0.74rem;
    color: var(--ink-soft, #5a4943);
    margin-bottom: 7px;
}

html[lang="mn"] .hub-cat-card__jp,
html[lang="en"] .hub-cat-card__jp {
    font-weight: 600;
}

@media (max-width: 1100px) {
    .hub-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hub-cat-grid {
        grid-template-columns: 1fr;
    }
}