/* ==========================================================
   Single Bank Page
   Bank-specific overrides on top of global component CSS.
   Component CSS (hero, feature-table, text-block, faq, etc.)
   is loaded globally via enqueue.php.
   ========================================================== */

/* Top spacing so content doesn't sit flush against the header */
.finance-bank-page {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* Bank products section */
.finance-bank-products {
    margin-top: 48px;
}

.finance-bank-products__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--finance-border);
    padding-bottom: 0;
}

.finance-bank-products__tab {
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--finance-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: default;
}

.finance-bank-products__tab--active {
    color: var(--finance-primary);
    border-bottom-color: var(--finance-primary);
}

.finance-bank-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.finance-bank-products__empty {
    padding: 32px;
    text-align: center;
    color: var(--finance-muted);
    background: var(--finance-surface-soft);
    border-radius: var(--finance-radius-sm);
    font-size: 0.95rem;
}

/* ==========================================================
   Bank Info Blocks: Ventajas / Desventajas / Requisitos / Info
   ========================================================== */

.finance-bank-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}

.finance-bank-info-block {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.finance-bank-info-block--full {
    grid-column: 1 / -1;
}

/* Header row */
.finance-bank-info-block__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.finance-bank-info-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.finance-bank-info-block__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

/* List (Ventajas / Desventajas / Requisitos) */
.finance-bank-info-block__list {
    list-style: none;
    margin: 0;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finance-bank-info-block__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.finance-bank-info-block__list li::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

/* Requisitos — 2-col grid on full-width block */
.finance-bank-info-block__list--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
}

/* Content area (Información adicional) */
.finance-bank-info-block__content {
    padding: 20px 24px 24px;
    font-size: 0.925rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.finance-bank-info-block__content p {
    margin: 0 0 10px;
}

.finance-bank-info-block__content p:last-child {
    margin-bottom: 0;
}

/* ── Ventajas — green ─────────────────────────────── */

.finance-bank-info-block--advantages .finance-bank-info-block__header {
    background: var(--badge-success-bg);
}

.finance-bank-info-block--advantages .finance-bank-info-block__icon {
    background: var(--color-success);
    color: var(--color-surface);
}

.finance-bank-info-block--advantages .finance-bank-info-block__title {
    color: var(--color-success-dark);
}

.finance-bank-info-block--advantages .finance-bank-info-block__list li::before {
    background: var(--color-success);
}

/* ── Desventajas — red ────────────────────────────── */

.finance-bank-info-block--disadvantages .finance-bank-info-block__header {
    background: var(--badge-danger-bg);
}

.finance-bank-info-block--disadvantages .finance-bank-info-block__icon {
    background: var(--color-danger);
    color: var(--color-surface);
}

.finance-bank-info-block--disadvantages .finance-bank-info-block__title {
    color: var(--color-danger-dark);
}

.finance-bank-info-block--disadvantages .finance-bank-info-block__list li::before {
    background: var(--color-danger);
}

/* ── Requisitos — blue ────────────────────────────── */

.finance-bank-info-block--requirements .finance-bank-info-block__header {
    background: var(--badge-info-bg);
}

.finance-bank-info-block--requirements .finance-bank-info-block__icon {
    background: var(--link);
    color: var(--color-surface);
}

.finance-bank-info-block--requirements .finance-bank-info-block__title {
    color: var(--badge-info-text);
}

.finance-bank-info-block--requirements .finance-bank-info-block__list li::before {
    background: var(--link);
}

/* ── Información adicional — purple ──────────────── */

.finance-bank-info-block--seo-text .finance-bank-info-block__header {
    background: var(--badge-guide-bg);
}

.finance-bank-info-block--seo-text .finance-bank-info-block__icon {
    background: var(--badge-guide-text);
    color: var(--color-surface);
}

.finance-bank-info-block--seo-text .finance-bank-info-block__title {
    color: var(--badge-guide-text);
}

/* ── Mobile ──────────────────────────────────────── */

@media (max-width: 768px) {
    .finance-bank-info-grid {
        grid-template-columns: 1fr;
    }

    .finance-bank-info-block--full {
        grid-column: 1;
    }

    .finance-bank-info-block__list--grid {
        grid-template-columns: 1fr;
    }
}

/* ── FAQ spacing on bank page ────────────────────────── */

.finance-bank-page .finance-faq {
    margin-top: 48px;
}