.bcnlip-cross-nav {
    padding: 3rem 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.bcnlip-cross-nav--bcnlip   { background: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A)); }
.bcnlip-cross-nav--referencia { background: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A)); }
.bcnlip-cross-nav--navy     { background: var(--wp--preset--color--bcnlip-navy-dark, var(--color-navy-dark, #0F1C35)); }

/* ── CREAM VARIANT (DS-009 interim) ───────────────────────────── */
.bcnlip-cross-nav--cream   { background: var(--wp--preset--color--bcnlip-cream, var(--color-light, #F9F5EC)); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__label { color: rgba(143, 50, 50, 0.85); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__title { color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A)); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__sub   { color: rgba(27, 42, 74, 0.7); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__main {
    border-color: color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow-dark, #C8860A) 38%, transparent);
    background: rgba(242, 169, 0, 0.05);
}
.bcnlip-cross-nav--cream .bcnlip-cross-nav__main-bar {
    background: var(--wp--preset--color--bcnlip-yellow-dark, var(--color-secondary-dark, #C8860A));
}
.bcnlip-cross-nav--cream .bcnlip-cross-nav__main-tag {
    color: var(--wp--preset--color--bcnlip-yellow-dark, var(--color-secondary-dark, #C8860A));
}
.bcnlip-cross-nav--cream .bcnlip-cross-nav__main-name { color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A)); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__main-desc { color: rgba(27, 42, 74, 0.78); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__main-here { color: rgba(27, 42, 74, 0.55); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link {
    border-color: rgba(27, 42, 74, 0.16);
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    background: rgba(255, 255, 255, 0.5);
}
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link:hover {
    border-color: rgba(27, 42, 74, 0.4);
    background: rgba(255, 255, 255, 0.85);
}
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link-tag  { color: rgba(27, 42, 74, 0.6); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link-name { color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A)); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link-desc { color: rgba(27, 42, 74, 0.72); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link-cta  { color: var(--wp--preset--color--bcnlip-yellow-dark, var(--color-secondary-dark, #C8860A)); }
.bcnlip-cross-nav--cream .bcnlip-cross-nav__link:focus-visible {
    outline-color: var(--wp--preset--color--bcnlip-yellow-dark, var(--color-secondary-dark, #C8860A));
}

.bcnlip-cross-nav .bcnlip-container { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px)  { .bcnlip-cross-nav .bcnlip-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .bcnlip-cross-nav .bcnlip-container { padding-inline: 2rem; } }

.bcnlip-cross-nav__label {
    font-family: 'Courier Prime', monospace;
    font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(255,255,255,.72); margin-bottom: .5rem;
}
.bcnlip-cross-nav__title {
    font-family: 'Courier Prime', monospace;
    font-size: 1.5rem; font-weight: 700; color: var(--wp--preset--color--white, #ffffff); margin-bottom: .4rem;
}
.bcnlip-cross-nav__sub {
    font-size: .82rem; color: rgba(255,255,255,.72); margin-bottom: 1.8rem; line-height: 1.55;
}
/* ═══════════════════════════════════════════════════════════════════════
   CROSS-PROGRAM-NAV — Subgrid-aligned card row
   ─────────────────────────────────────────────────────────────────────
   Parent declares 4 row tracks shared by every card via
   `grid-template-rows: subgrid`. Slots inherit the SAME row heights, so
   `meta`, `title`, `description` and `CTA` sit on exactly the same
   horizontal baseline across all cards regardless of content length.
   The `1fr` description row absorbs height differences.
   ═══════════════════════════════════════════════════════════════════════ */
.bcnlip-cross-nav__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: auto auto 1fr auto;
    grid-auto-rows: auto auto 1fr auto;
    gap: 1rem;
    align-items: stretch;
}
/* Flatten the side container so its children become siblings of __main in
   the parent grid — required for cross-card row subgrid. */
.bcnlip-cross-nav__grid > .bcnlip-cross-nav__side { display: contents; }

/* ── Count-aware layouts (avoid orphan cards on the last row) ──────────
   When the side container holds 4 children (→ 5 total: main + 4 sides),
   force a 5-column grid so everything fits in a single row at desktop.
   The minmax floor in default auto-fit drops below 260px for this case
   to allow 5 columns inside the 80rem container. */
@media (min-width: 1024px) {
    .bcnlip-cross-nav__grid:has(.bcnlip-cross-nav__side > :nth-child(4):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    /* 3 sides → 4 total: keep 4 cols (already covered by auto-fit, this
       just guarantees no wrap on borderline widths). */
    .bcnlip-cross-nav__grid:has(.bcnlip-cross-nav__side > :nth-child(3):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Each card inherits the parent's 4 row tracks via subgrid.
   Track order: meta → title → description(1fr) → CTA.
   Subgrid guarantees cross-card horizontal alignment of every slot. */
.bcnlip-cross-nav__main,
.bcnlip-cross-nav__link {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0.35rem;
}
/* Fallback for engines without row-subgrid: each card uses its own
   identical 4-row grid. Cross-card alignment still holds because all
   cards stretch to equal height via `align-items: stretch` and share the
   same track template. */
@supports not (grid-template-rows: subgrid) {
    .bcnlip-cross-nav__main,
    .bcnlip-cross-nav__link {
        grid-template-rows: auto auto 1fr auto;
    }
}

.bcnlip-cross-nav__main {
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 30%, transparent); padding: 1.4rem 1.6rem;
    position: relative; background: color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 3%, transparent);
}
.bcnlip-cross-nav__main-here {
    /* Anchored to row 4 by the card grid; no margin hack needed. */
}
.bcnlip-cross-nav__main-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
}
.bcnlip-cross-nav--referencia .bcnlip-cross-nav__main-bar { background: var(--wp--preset--color--bcnlip-yellow, var(--color-accent, #F2A900)); }
.bcnlip-cross-nav__main-tag {
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    margin: 0;
}
.bcnlip-cross-nav--referencia .bcnlip-cross-nav__main-tag { color: var(--wp--preset--color--bcnlip-yellow, var(--color-accent, #F2A900)); }
.bcnlip-cross-nav__main-name {
    font-family: 'Courier Prime', monospace;
    font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--white, #ffffff);
    margin: 0;
}
.bcnlip-cross-nav__main-desc { font-size: .82rem; color: rgba(255,255,255,.78); line-height: 1.55; margin: 0; }
.bcnlip-cross-nav__main-here {
    font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.62); font-style: italic; display: block;
    margin: 0;
}
/* Legacy fallback: when __side is NOT flattened (e.g., engines without
   display:contents support), keep a sane vertical stack. */
.bcnlip-cross-nav__side { display: flex; flex-direction: column; gap: .8rem; }
.bcnlip-cross-nav__link {
    border: 1px solid rgba(255,255,255,.1); padding: 1rem 1.2rem;
    position: relative; text-decoration: none; transition: border-color .2s;
    color: var(--wp--preset--color--white, #ffffff);
    /* display:grid is set in the subgrid block above. Don't override it
       here — keeping `display:block` would break the row tracks. */
}
.bcnlip-cross-nav__link:hover { border-color: rgba(255,255,255,.25); }
.bcnlip-cross-nav__link-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.bcnlip-cross-nav__link-bar--red   { background: var(--wp--preset--color--bcnlip-red, var(--color-red, #C1262C)); }
.bcnlip-cross-nav__link-bar--navy  { background: var(--wp--preset--color--bcnlip-navy-dark, var(--color-navy-dark, #0F1C35)); }
.bcnlip-cross-nav__link-tag {
    font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin: 0;
}
.bcnlip-cross-nav__link-name {
    font-family: 'Courier Prime', monospace;
    font-size: .88rem; font-weight: 700; color: var(--wp--preset--color--white, #ffffff);
    margin: 0;
}
.bcnlip-cross-nav__link-desc { font-size: .8rem; color: rgba(255,255,255,.78); line-height: 1.5; margin: 0; }
.bcnlip-cross-nav__link-cta {
    font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    font-weight: 700;
}

@media (max-width: 768px) {
    .bcnlip-cross-nav__grid { grid-template-columns: 1fr; }
    .bcnlip-cross-nav .bcnlip-container { padding: 0 1.4rem; }
    .bcnlip-cross-nav__grid > .bcnlip-cross-nav__side {
        display: flex;
        flex-direction: column;
        gap: .8rem;
    }
}

/* ── Focus states (WCAG 2.4.7) ──────────────────────────────── */
.bcnlip-cross-nav__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    outline-offset: 3px;
}