/* ===== BASE ===== */
.bcnlip-about-intro {
    padding: 5rem 0;
}

/* F-M001 P0 — Mobile above-the-fold: reduce padding so headline + eyebrow
   land within the first viewport on iPhone (Vera 2026-05-24 audit). */
@media (max-width: 639px) {
    .bcnlip-about-intro {
        padding: 2.5rem 0 3rem;
    }
}

/* ===== COLOR SCHEMES ===== */
.bcnlip-about-intro--white {
    background-color: var(--wp--preset--color--white, #ffffff);
}

.bcnlip-about-intro--cream {
    background-color: var(--wp--preset--color--bcnlip-cream, var(--color-cream-mid, #F9F5EC));
}

.bcnlip-about-intro--navy {
    background-color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
}

.bcnlip-about-intro--dark {
    background-color: var(--wp--preset--color--bcnlip-navy-dark, var(--color-navy-dark, #0F1C35));
}

/* ===== GRID ===== */
.bcnlip-about-intro__grid {
    display: grid;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .bcnlip-about-intro__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile breathing room — Vera P1: avoid text touching viewport edges */
@media (max-width: 600px) {
    .bcnlip-about-intro .bcnlip-container-xl,
    .bcnlip-about-intro .bcnlip-quien-layout {
        padding-inline: 1.25rem;
    }
    .bcnlip-quien-tags,
    .bcnlip-about-intro__tags {
        padding-inline: 0;
    }
}

/* ===== LABEL / BADGE =====
 * Default label color: navy on light schemes (WCAG AA 13:1).
 * Dark schemes override below to yellow (yellow on navy = 9:1).
 * Yellow on cream/white = 1.85:1 — WCAG AA FAIL, never use.
 */
.bcnlip-about-intro__label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    font-family: "Courier Prime", "Courier New", monospace;
    margin-bottom: 1rem;
}

/* Dark scheme — yellow label is safe on navy (9:1 ratio) */
.bcnlip-about-intro--dark .bcnlip-about-intro__label,
.bcnlip-about-intro--navy .bcnlip-about-intro__label {
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
}

/* ===== HEADING ===== */
.bcnlip-about-intro__heading {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--wp--preset--color--bcnlip-navy-dark, var(--color-dark, #0F1C35));
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-family: "Courier Prime", "Courier New", monospace;
}

@media (min-width: 768px) {
    .bcnlip-about-intro__heading {
        font-size: 3rem;
    }
}

.bcnlip-about-intro--dark .bcnlip-about-intro__heading,
.bcnlip-about-intro--navy .bcnlip-about-intro__heading {
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
}

/* ===== BODY ===== */
.bcnlip-about-intro__body {
    color: var(--stone-600, #57534e);
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    font-family: "Inter", "Roboto", sans-serif;
}

.bcnlip-about-intro__body:last-child {
    margin-bottom: 0;
}

.bcnlip-about-intro--dark .bcnlip-about-intro__body,
.bcnlip-about-intro--navy .bcnlip-about-intro__body {
    color: color-mix(in srgb, var(--wp--preset--color--bcnlip-cream, #F9F5EC) 80%, transparent);
}

/* ===== BLOCKQUOTE ===== */
.bcnlip-about-intro__quote {
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.6;
    border-left: 4px solid var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    padding-left: 1.5rem;
    margin: 0 0 1.5rem 0;
    color: var(--wp--preset--color--bcnlip-navy-dark, var(--color-dark, #0F1C35));
}

.bcnlip-about-intro--dark .bcnlip-about-intro__quote,
.bcnlip-about-intro--navy .bcnlip-about-intro__quote {
    color: var(--wp--preset--color--bcnlip-cream, var(--color-cream-mid, #F9F5EC));
}

/* ===== TAGS ===== */
.bcnlip-about-intro__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.bcnlip-about-intro__tag {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-family: "Courier Prime", "Courier New", monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    background: transparent;
}

.bcnlip-about-intro--white .bcnlip-about-intro__tag,
.bcnlip-about-intro--cream .bcnlip-about-intro__tag {
    border-color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
}

/* No-image: full width text, centered */
.bcnlip-about-intro__grid--no-image {
    grid-template-columns: 1fr !important;
    max-width: 56rem;
    margin-inline: auto;
}

/* ===== IMAGE ===== */
.bcnlip-about-intro__image-wrap {
    width: 100%;
}

.bcnlip-about-intro__image {
    width: 100%;
    object-fit: cover;
    max-height: 480px;
    display: block;
}

/* ===== DUAL-CARD LAYOUT (Misión / Visión) ===== */

/* Stack cards vertically instead of side-by-side. When the two cards
   carry asymmetric content (paragraph vs bulleted list), the 2-col grid
   leaves one card visibly taller than the other — the vertical stack
   keeps each card sized to its content and reads as a clean editorial
   sequence (Para quién es → Qué incluye) without forced equal heights. */
.bcnlip-mv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.bcnlip-mv-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.3rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bcnlip-mv-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 28, 53, 0.07);
}

.bcnlip-mv-card__label {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    opacity: 0.92;
    margin-bottom: 0.8rem;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
}

.bcnlip-mv-card__body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--wp--preset--color--bcnlip-cream, var(--color-light, #F9F5EC));
    opacity: 0.9;
    margin: 0;
}

.bcnlip-mv-card__list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bcnlip-mv-card__list li {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--wp--preset--color--bcnlip-cream, var(--color-light, #F9F5EC));
    opacity: 0.9;
    padding-left: 1.1rem;
    position: relative;
}

.bcnlip-mv-card__list li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0.05rem;
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    font-size: 0.65rem;
}

.bcnlip-about-intro--white .bcnlip-mv-card__list li,
.bcnlip-about-intro--cream .bcnlip-mv-card__list li {
    color: var(--wp--preset--color--bcnlip-navy, var(--color-text, #1B2A4A));
    opacity: 0.85;
}

/* WCAG 1.4.11: bullet ◆ yellow sobre cream/white CR 1.85:1 — usar navy en esquemas claros (CR 13:1) */
.bcnlip-about-intro--white .bcnlip-mv-card__list li::before,
.bcnlip-about-intro--cream .bcnlip-mv-card__list li::before {
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
}

/* SVG icon variant — replaces ◆ bullet with Lucide icon for richer visual hierarchy */
.bcnlip-mv-card__list--icons {
    gap: 0.85rem;
}
.bcnlip-mv-card__list--icons li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding-left: 0;
}
.bcnlip-mv-card__list--icons li::before {
    content: none;
}
.bcnlip-mv-card__list-ic {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 18%, transparent);
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
}
.bcnlip-mv-card__list--icons li .bcnlip-mv-card__list-text {
    flex: 1;
    line-height: 1.55;
    padding-top: 0.15rem;
}
/* Light scheme variant: icon bg/color tokens that pass WCAG */
.bcnlip-about-intro--white .bcnlip-mv-card__list-ic,
.bcnlip-about-intro--cream .bcnlip-mv-card__list-ic {
    background: color-mix(in srgb, var(--wp--preset--color--bcnlip-red, #C1262C) 12%, transparent);
    color: var(--wp--preset--color--bcnlip-red, var(--color-red, #C1262C));
}

.bcnlip-about-intro--white .bcnlip-mv-card,
.bcnlip-about-intro--cream .bcnlip-mv-card {
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--bcnlip-teal, #1B2A4A) 12%, transparent);
    background: color-mix(in srgb, var(--wp--preset--color--bcnlip-teal, #1B2A4A) 3%, transparent);
}

.bcnlip-about-intro--white .bcnlip-mv-card__label,
.bcnlip-about-intro--cream .bcnlip-mv-card__label {
    color: var(--wp--preset--color--bcnlip-red, var(--color-red, #C1262C));
}

.bcnlip-about-intro--white .bcnlip-mv-card__body,
.bcnlip-about-intro--cream .bcnlip-mv-card__body {
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    opacity: 0.85;
}

/* ===== TAGS-LIST LAYOUT (Quién estudia) ===== */

.bcnlip-quien-layout {
    display: grid;
    gap: 3rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .bcnlip-quien-layout {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}

.bcnlip-quien-body {
    font-size: 0.93rem;
    line-height: 1.88;
    color: var(--wp--preset--color--bcnlip-cream, var(--color-light, #F9F5EC));
    opacity: 0.9;
    margin-bottom: 1.2rem;
}

.bcnlip-quien-body:last-child {
    margin-bottom: 0;
}

.bcnlip-about-intro--cream .bcnlip-quien-body,
.bcnlip-about-intro--white .bcnlip-quien-body {
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    opacity: 0.85;
}

/* Tags column: chips arranged in a uniform 3-col grid with intrinsic
   (content-sized) row heights. The whole block centers vertically inside
   the column via align-self, so the chip group sits centered against the
   text column without bloating individual chips with empty padding. */
.bcnlip-quien-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    align-self: center;
    width: 100%;
}
@media (max-width: 640px) {
    .bcnlip-quien-tags { grid-template-columns: repeat(2, 1fr); }
}
.bcnlip-quien-tags > .bcnlip-quien-tag {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0.7rem 0.95rem;
    min-height: 2.6rem;
    line-height: 1.4;
}

/* Card variant — used when tags have icons */
.bcnlip-quien-tags--cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: stretch;
}
.bcnlip-quien-tag--card {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    line-height: 1.3;
    border-radius: 6px;
    white-space: nowrap;
}
.bcnlip-quien-tag--card .bcnlip-quien-tag__ic {
    width: 24px;
    height: 24px;
}
.bcnlip-quien-tag__ic {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 22%, transparent);
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
}
.bcnlip-about-intro--cream .bcnlip-quien-tag__ic,
.bcnlip-about-intro--white .bcnlip-quien-tag__ic {
    background: color-mix(in srgb, var(--wp--preset--color--bcnlip-red, #C1262C) 12%, transparent);
    color: var(--wp--preset--color--bcnlip-red, var(--color-red, #C1262C));
}
.bcnlip-quien-tag__text { flex: 1; }

.bcnlip-quien-tag {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.4;
    padding: 0.32rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 28%, transparent);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Courier Prime', 'Courier New', monospace;
    background: transparent;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.bcnlip-quien-tag:hover {
    border-color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    background-color: color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 6%, transparent);
    transform: translateY(-1px);
}

.bcnlip-about-intro--cream .bcnlip-quien-tag:hover,
.bcnlip-about-intro--white .bcnlip-quien-tag:hover {
    border-color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary, #F2A900));
    color: var(--wp--preset--color--bcnlip-navy-dark, var(--color-dark, #0F1C35));
    background-color: color-mix(in srgb, var(--wp--preset--color--bcnlip-yellow, #F2A900) 10%, transparent);
}

.bcnlip-about-intro--cream .bcnlip-quien-tag,
.bcnlip-about-intro--white .bcnlip-quien-tag {
    border-color: color-mix(in srgb, var(--wp--preset--color--bcnlip-teal, #1B2A4A) 25%, transparent);
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    opacity: 0.8;
}

/* ===== MAP EMBED ===== */
.bcnlip-map-wrap {
    margin-top: 1.5rem;
}

.bcnlip-map-wrap iframe {
    width: 100%;
    min-height: 300px;
    border-radius: 6px;
    filter: grayscale(20%);
    display: block;
    border: 0;
}

/* ===== EDITOR PREVIEW ===== */
.bcnlip-about-intro-editor {
    padding: 0;
}

.bcnlip-about-intro__preview {
    background-color: var(--wp--preset--color--bcnlip-cream, var(--color-cream, #F9F5EC));
    padding: 5rem 0;
}

.bcnlip-about-intro__preview .bcnlip-about-intro__grid {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .bcnlip-about-intro__preview .bcnlip-about-intro__grid {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bcnlip-about-intro__preview .bcnlip-about-intro__grid {
        padding-inline: 2rem;
    }
}