/* ==========================================================================
   COMPONENTS — reusable across the whole site
   ========================================================================== */

[hidden] { display: none !important; }

/* ---------- Section ---------- */
.site-section--surface    { background: var(--color-surface); }
.site-section--background { background: var(--color-background); }

.section-header {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
}
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p {
    margin-inline: auto;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* ---------- Grid (cols set via custom property) ---------- */
.grid {
    display: grid;
    gap: var(--grid-gap, 1.5rem);
    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
}
.grid--2 { --grid-cols: 2; }
.grid--3 { --grid-cols: 3; }
.grid--4 { --grid-cols: 4; }

@media (max-width: 900px) {
    .grid--3, .grid--4 { --grid-cols: 2; }
}
@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4 { --grid-cols: 1; --grid-gap: 1rem; }
}

/* ---------- Card ---------- */
.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card--alt    { background: var(--color-background); } /* use inside surface sections */
.card--dashed { border-style: dashed; }
.card--center { align-items: center; text-align: center; }

.card--hover {
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}
.card--hover:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Row card: icon + text side by side (e.g. program list, info card headers) */
.card--row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
.card--row .icon-box { margin-bottom: 0; flex-shrink: 0; }

.card__body  { flex-grow: 1; }
.card__title { margin-bottom: 0.65rem; font-size: var(--font-size-lg); line-height: 1.4; }
.card__title--sm {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--font-size-base);
}
.card__text  { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.7; }

@media (max-width: 640px) { .card { padding: 1.25rem; } }

/* Link card (semester links etc.) */
a.card { text-decoration: none; }
.link-card__title { color: var(--color-primary); font-weight: var(--font-weight-bold); }
.link-card__desc  { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.5; }

/* ---------- Icon box ---------- */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.25rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
}
.icon-box svg { width: 1.6rem; height: 1.6rem; }

/* ---------- Step number (order steps / how-it-works cards) ---------- */
.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* ---------- Badge ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}
.badge svg { width: 0.8rem; height: 0.8rem; }

.badge--secondary { color: var(--color-secondary); background: var(--color-secondary-soft); }
.badge--warning   { color: #8a4b00; background: rgba(234, 151, 0, 0.12); }
.badge--neutral   { color: #334155; background: #e2e8f0; }

/* ---------- Dot list ---------- */
.dot-list {
    display: grid;
    grid-template-columns: repeat(var(--list-cols, 1), minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dot-list li {
    position: relative;
    padding-left: 1rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.dot-list li::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    background: var(--dot-color, var(--color-secondary));
    border-radius: 50%;
}
.dot-list--2 { --list-cols: 2; }

.dot-list--boxed li {
    padding: 1rem 1rem 1rem 2.1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.dot-list--boxed li::before { top: 1.45rem; left: 1rem; }

@media (max-width: 640px) { .dot-list--2 { --list-cols: 1; } }

/* ---------- CTA box (replaces WhatsApp box + Question-paper box) ---------- */
.cta-box {
    --cta-bg: var(--color-surface);
    --cta-fg: var(--color-text);
    --cta-muted: var(--color-text-muted);
    --cta-panel-bg: var(--color-background);
    --cta-panel-border: var(--color-border);

    padding: 2.5rem;
    color: var(--cta-fg);
    background: var(--cta-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.cta-box--dark {
    --cta-bg: var(--color-primary);
    --cta-fg: #fff;
    --cta-muted: rgba(255, 255, 255, 0.8);
    --cta-panel-bg: rgba(255, 255, 255, 0.08);
    --cta-panel-border: rgba(255, 255, 255, 0.12);
    --dot-color: rgba(255, 255, 255, 0.7);
    border-color: transparent;
}
.cta-box h2 { color: var(--cta-fg); }

.cta-box__label {
    margin-bottom: 0.6rem;
    color: var(--cta-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cta-box__text {
    max-width: 620px;
    margin: 0 auto 1.5rem;
    color: var(--cta-muted);
    line-height: 1.7;
}
.cta-box__panel {
    max-width: 520px;
    margin: 0 auto 1.5rem;
    padding: 1.25rem 1.5rem;
    text-align: left;
    background: var(--cta-panel-bg);
    border: 1px solid var(--cta-panel-border);
    border-radius: var(--radius-md);
}
.cta-box__panel-title { margin-bottom: 0.75rem; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.cta-box__panel li    { color: var(--cta-muted); }
.cta-box__note        { margin-top: 1rem; color: var(--cta-muted); font-size: var(--font-size-xs); }

@media (max-width: 640px) { .cta-box { padding: 2rem 1.25rem; } }

/* CTA box: alt background (light box inside a light section) */
.cta-box--alt { --cta-bg: var(--color-background); --cta-panel-bg: var(--color-surface); }

/* CTA box: split layout — content and button side by side, left aligned */
.cta-box--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: left;
    background:
        linear-gradient(135deg, var(--color-primary-soft), var(--color-secondary-soft)),
        var(--color-surface);
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.cta-box--split h2 { color: var(--color-text); }
.cta-box--split .cta-box__text { margin: 0; max-width: none; }

@media (max-width: 640px) {
    .cta-box--split { flex-direction: column; text-align: center; }
}

/* ---------- Button variants (extend .cta-btn from global.css) ---------- */
.cta-btn--whatsapp  { --btn-bg: var(--color-whatsapp); --btn-bg-hover: var(--color-whatsapp-hover); }
.cta-btn--secondary { --btn-bg: var(--color-secondary); --btn-bg-hover: var(--color-primary); }
.cta-btn--white     { --btn-bg: #fff; --btn-color: var(--color-primary); --btn-bg-hover: #f1f5f9; }
.cta-btn--outline   {
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-primary);
    --btn-bg-hover: var(--color-primary);
    --btn-color-hover: #fff;
    border-color: var(--color-border);
}
.cta-btn--rounded { --btn-radius: var(--radius-md); }
.cta-btn--sm      { min-height: 2.4rem; padding: 0.5rem 0.8rem; font-size: var(--font-size-xs); }
.cta-btn--block   { width: 100%; white-space: normal; text-align: center; }