/* ==========================================================================
   Category hub — template-parts/content/content-category.php (page 1 only):
   intro, pinned pillar card, sub-category chips, FAQ accordion.
   Plain CSS; colours switch through the theme-mode.css tokens.
   ========================================================================== */

.arz-hub__intro, .arz-hub__pillar, .arz-hub__chips, .arz-hub__faq {
    --hub-surface: #fff;
    --hub-soft: rgb(246 247 251);
    --hub-line: rgb(232 234 242);
    --hub-title: rgb(55 59 79);
    --hub-text: rgb(75 79 99);
    --hub-muted: rgb(104 109 135);
    --hub-primary: rgb(0 168 116);
    --hub-primary-fill: rgb(0 223 154);
    --hub-primary-tint: rgb(230 252 245);
    min-width: 0;
    box-sizing: border-box;
}

html.dark-mode .arz-hub__intro, html.dark-mode .arz-hub__pillar,
html.dark-mode .arz-hub__chips, html.dark-mode .arz-hub__faq {
    --hub-surface: rgb(var(--arz-c-block));
    --hub-soft: rgb(var(--arz-c-over));
    --hub-line: rgb(var(--arz-c-border));
    --hub-title: rgb(var(--arz-c-title-strong));
    --hub-text: rgb(var(--arz-c-text));
    --hub-muted: rgb(var(--arz-c-muted));
    --hub-primary: rgb(var(--arz-c-primary-strong));
    --hub-primary-fill: rgb(var(--arz-c-primary));
    --hub-primary-tint: rgb(var(--arz-c-primary-tint));
}

/* intro */
.arz-hub__intro {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2;
    color: var(--hub-text);
}
.arz-hub__intro p { margin: 0 0 .6em; }
.arz-hub__intro p:last-child { margin-bottom: 0; }
.arz-hub__intro a { color: var(--hub-primary); text-decoration: underline; text-underline-offset: 3px; }

/* pillar card */
.arz-hub__pillar {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
    border-radius: 14px;
    border: 1px solid var(--hub-line);
    background: linear-gradient(135deg, var(--hub-primary-tint), var(--hub-surface) 60%);
    color: var(--hub-title);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.arz-hub__pillar:hover { border-color: var(--hub-primary); color: var(--hub-title); box-shadow: 0 8px 24px rgb(0 0 0 / .06); }
.arz-hub__pillar-media { display: block; flex: none; aspect-ratio: 16 / 9; background: var(--hub-soft); }
.arz-hub__pillar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arz-hub__pillar-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0; }
.arz-hub__pillar-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--hub-primary-fill);
    color: #0b2a21;
    font-size: 12px;
    font-weight: 600;
}
.arz-hub__pillar-title { font-size: 20px; font-weight: 700; line-height: 1.7; }
.arz-hub__pillar-excerpt { font-size: 14px; line-height: 1.9; color: var(--hub-text); }
.arz-hub__pillar-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--hub-primary); min-height: 40px; }

@media (min-width: 768px) {
    .arz-hub__pillar { flex-direction: row; align-items: stretch; }
    .arz-hub__pillar-media { width: 38%; max-width: 420px; aspect-ratio: auto; }
    .arz-hub__pillar-body { padding: 22px 24px; justify-content: center; }
    .arz-hub__pillar-title { font-size: 22px; }
}

/* chips */
.arz-hub__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.arz-hub__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--hub-line);
    background: var(--hub-surface);
    color: var(--hub-title);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.arz-hub__chip:hover { border-color: var(--hub-primary); background: var(--hub-primary-tint); color: var(--hub-title); }
.arz-hub__chip--parent { background: var(--hub-soft); }
.arz-hub__chip-icon { font-size: 14px; color: var(--hub-muted); }
.arz-hub__chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--hub-soft);
    color: var(--hub-muted);
    font-size: 12px;
    font-weight: 600;
}
.arz-hub__chip:hover .arz-hub__chip-count { background: var(--hub-surface); }

/* FAQ */
.arz-hub__faq { border-top: 1px solid var(--hub-line); padding-top: 8px; }
.arz-hub__faq-title {
    margin: 0;
    padding: 20px 16px 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--hub-title);
}
@media (min-width: 768px) { .arz-hub__faq-title { padding: 24px 32px 8px; } }
.arz-hub__faq .accordion-title { align-items: flex-start; }
.arz-hub__faq .accordion-title .azico-ChartUp-OutLined::before { content: "؟"; font-family: inherit; font-weight: 700; }
.arz-hub__faq .accordion-item:last-child { border-bottom: 0; }