/* ============================================================
   BC Intro — Editorial categories block  v1.1
   All colors/fonts/sizes are driven by CSS variables set inline
   on .bc-intro by the shortcode. Override via settings/shortcode.
   ============================================================ */

.bc-intro,
.bc-intro * { box-sizing: border-box; }

.bc-intro {
    background: var(--bci-bg, #FAF7F2);
    color: var(--bci-text, #1A140E);
    padding: var(--bci-pad-y, 96px) var(--bci-pad-x, 20px);
    font-family: var(--bci-font-body, 'Inter', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
    /* Evita desbordes cuando el contenedor padre da 100% de ancho */
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.bc-intro__container {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ---------- Header alignment ---------- */
.bc-intro__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 56px;
    align-items: flex-start;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .bc-intro__header { flex-direction: row; align-items: flex-end; }
}
/* Header alignment modifiers */
.bc-intro--halign-center .bc-intro__header { align-items: center; text-align: center; }
.bc-intro--halign-center .bc-intro__header-text { margin-left: auto; margin-right: auto; }
.bc-intro--halign-right  .bc-intro__header { align-items: flex-end; text-align: right; }
.bc-intro--halign-right  .bc-intro__header-text { margin-left: auto; }
@media (min-width: 768px) {
    .bc-intro--halign-center .bc-intro__header { flex-direction: column; }
    .bc-intro--halign-right  .bc-intro__header { flex-direction: column; align-items: flex-end; }
}

.bc-intro__header-text { max-width: 640px; }

.bc-intro__eyebrow {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--bci-muted, #6B5F54);
}

.bc-intro__title {
    margin: 0;
    font-family: var(--bci-font-title, 'Cormorant Garamond', serif);
    font-weight: 300;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    color: var(--bci-text);
    text-wrap: balance;
}
.bc-intro__title em { color: var(--bci-accent, #C2552B); font-style: normal; }

.bc-intro__desc {
    margin: 16px 0 0;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bci-muted, #6B5F54);
}

.bc-intro__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bci-text);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--bci-text);
    text-decoration: none;
    transition: color .35s, border-color .35s;
}
.bc-intro__cta:hover { color: var(--bci-accent); border-color: var(--bci-accent); }
.bc-intro__cta span { transition: transform .5s cubic-bezier(.22,1,.36,1); display: inline-block; }
.bc-intro__cta:hover span { transform: translateX(4px); }

/* ---------- Grid layouts ---------- */
.bc-intro__grid { display: grid; width: 100%; min-width: 0; }

/* Bento — asymmetric. Use auto rows and aspect-ratios to guarantee
   images fully cover their cells (no black gaps). */
.bc-intro__grid--bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
.bc-intro__grid--bento .bc-card { aspect-ratio: 4/5; min-height: 0; }
@media (min-width: 768px) {
    .bc-intro__grid--bento {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 1fr;
        aspect-ratio: 12/7;          /* drives overall section height responsively */
    }
    .bc-intro__grid--bento .bc-card { aspect-ratio: auto; height: 100%; width: 100%; }
    .bc-intro__grid--bento .bc-card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
    .bc-intro__grid--bento .bc-card:nth-child(2) { grid-column: span 5; grid-row: span 1; }
    .bc-intro__grid--bento .bc-card:nth-child(3) { grid-column: span 2; grid-row: span 1; }
    .bc-intro__grid--bento .bc-card:nth-child(4) { grid-column: span 3; grid-row: span 1; }
}

/* 2x2 grid */
.bc-intro__grid--grid2x2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .bc-intro__grid--grid2x2 { grid-template-columns: 1fr 1fr; } }

/* 3 columns */
.bc-intro__grid--grid3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .bc-intro__grid--grid3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .bc-intro__grid--grid3 { grid-template-columns: repeat(3, 1fr); } }

/* Row carousel */
.bc-intro__grid--row {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
    max-width: 100%;
}
.bc-intro__grid--row .bc-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
}
@media (min-width: 640px) { .bc-intro__grid--row .bc-card { flex: 0 0 45%; } }
@media (min-width: 1024px){ .bc-intro__grid--row .bc-card { flex: 0 0 30%; } }

/* ---------- Card ---------- */
.bc-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #2a221a;
    color: var(--bci-card-text, #FAF7F2);
    text-decoration: none;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-width: 0;
}
/* Non-bento layouts use aspect-ratio inline; ensure they have a sensible min */
.bc-intro__grid--grid2x2 .bc-card,
.bc-intro__grid--grid3 .bc-card,
.bc-intro__grid--row .bc-card { min-height: 320px; }

.bc-card:focus-visible {
    outline: 2px solid var(--bci-accent);
    outline-offset: 2px;
}

/* IMAGE — always 100% of card; no gaps. */
.bc-card__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
    z-index: 0;
}
.bc-card:hover .bc-card__img { transform: scale(1.08); }

.bc-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,calc(var(--bci-overlay, .55) + .1)) 0%,
        rgba(0,0,0,calc(var(--bci-overlay, .55) * .35)) 45%,
        rgba(0,0,0,0) 100%);
    z-index: 1;
    transition: opacity .7s ease;
    pointer-events: none;
}
/* Overlay direction follows the content position for legibility */
.bc-card--valign-top .bc-card__overlay {
    background: linear-gradient(to bottom,
        rgba(0,0,0,calc(var(--bci-overlay, .55) + .1)) 0%,
        rgba(0,0,0,calc(var(--bci-overlay, .55) * .35)) 45%,
        rgba(0,0,0,0) 100%);
}
.bc-card--valign-center .bc-card__overlay {
    background: radial-gradient(ellipse at center,
        rgba(0,0,0,calc(var(--bci-overlay, .55) + .1)) 0%,
        rgba(0,0,0,calc(var(--bci-overlay, .55) * .4)) 55%,
        rgba(0,0,0,0) 100%);
}
.bc-card:hover .bc-card__overlay { opacity: 1; }

/* Top row — badge + count */
.bc-card__top {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 20px 24px;
    z-index: 2;
    transition: opacity .5s, transform .5s;
}
.bc-card--reveal .bc-card__top {
    opacity: 0;
    transform: translateY(-4px);
}
.bc-card--reveal:hover .bc-card__top,
.bc-card--reveal:focus-within .bc-card__top {
    opacity: 1;
    transform: translateY(0);
}

.bc-card__badge {
    display: inline-flex; align-items: center;
    padding: 5px 10px;
    background: var(--bci-bg, #FAF7F2);
    color: var(--bci-text, #1A140E);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.bc-card__count {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.85);
}

/* Content block — horizontal + vertical alignment via modifier classes */
.bc-card__bottom {
    position: absolute;
    left: 0; right: 0;
    padding: 24px 28px 28px;
    z-index: 2;
    text-align: left;
    /* default = bottom */
    bottom: 0; top: auto;
}
/* Vertical positions */
.bc-card--valign-bottom .bc-card__bottom { top: auto; bottom: 0; transform: none; }
.bc-card--valign-top    .bc-card__bottom { top: 0;   bottom: auto; transform: none; padding: 28px 28px 24px; }
.bc-card--valign-center .bc-card__bottom {
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    padding: 24px 28px;
}

/* Horizontal alignment */
.bc-card--align-center .bc-card__bottom { text-align: center; }
.bc-card--align-right  .bc-card__bottom { text-align: right; }

.bc-card--align-center .bc-card__desc { margin-left: auto; margin-right: auto; }
.bc-card--align-right  .bc-card__desc { margin-left: auto; margin-right: 0; }

.bc-card--align-center .bc-card__action { justify-content: center; }
.bc-card--align-right  .bc-card__action { justify-content: flex-end; }

.bc-card__eyebrow {
    margin: 0 0 8px;
    font-size: var(--bci-eyebrow-size, 10px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: calc(var(--bci-eyebrow-tracking, .22) * 1em);
    color: rgba(255,255,255,0.8);
}

.bc-card__title {
    margin: 0;
    font-family: var(--bci-font-title);
    font-weight: var(--bci-title-weight, 300);
    font-size: var(--bci-title-size, 48px);
    line-height: 0.95;
    color: var(--bci-card-text);
    letter-spacing: -0.01em;
}
.bc-card--hero .bc-card__title {
    font-size: calc(var(--bci-title-size, 48px) * 1.4);
}

.bc-card__details {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .5s;
}
.bc-card--reveal .bc-card__details {
    grid-template-rows: 0fr;
    opacity: 0;
}
.bc-card--reveal:hover .bc-card__details,
.bc-card--reveal:focus-within .bc-card__details {
    grid-template-rows: 1fr;
    opacity: 1;
}
.bc-card__details > * { min-height: 0; overflow: hidden; }

.bc-card__desc {
    margin: 16px 0 0;
    max-width: 420px;
    font-size: var(--bci-desc-size, 14px);
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
}

.bc-card__action {
    margin-top: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bc-card__discover {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--bci-card-text);
}
.bc-card__line {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
    max-width: 80px;
}
.bc-card__line span {
    position: absolute; inset: 0;
    background: var(--bci-card-text);
    transform: translateX(-100%);
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.bc-card:hover .bc-card__line span { transform: translateX(0); }

.bc-card__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.5);
    color: var(--bci-card-text);
    transition: all .5s cubic-bezier(.22,1,.36,1);
}
.bc-card:hover .bc-card__arrow {
    background: var(--bci-card-text);
    color: var(--bci-text);
    border-color: var(--bci-card-text);
}

/* Touch devices: always show details */
@media (hover: none) {
    .bc-card--reveal .bc-card__top,
    .bc-card--reveal .bc-card__details {
        opacity: 1;
        transform: none;
        grid-template-rows: 1fr;
    }
}

/* ============================================================
   HOVER MEDIA GALLERY — v1.5.0
   The featured image ALWAYS stays rendered behind the gallery
   (it's at z-index:0). Gallery layers must NOT use opaque
   backgrounds, so the featured image remains visible whenever
   the gallery has gaps, gutters, or transparent transitions.
   ============================================================ */
.bc-card__hover {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background: transparent;     /* let featured image peek through */
}
.bc-hover__img {
    display: block;
    width: 100% !important; height: 100% !important;
    max-width: none;
    object-fit: cover; object-position: center;
}
.bc-hover__cell { position: relative; overflow: hidden; }
.bc-hover__cell .bc-hover__img,
.bc-hover__card .bc-hover__img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
}

/* Hover overlay (extra tint applied OVER the gallery layer, BELOW the text). */
.bc-card__hover-overlay {
    position: absolute; inset: 0;
    background: var(--bci-hover-overlay, rgba(0,0,0,0));
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
    z-index: 2;                 /* below text (text is z:5) */
}
.bc-card:hover .bc-card__hover-overlay,
.bc-card:focus-within .bc-card__hover-overlay { opacity: 1; }

/* ----- Keep-featured modes: image stays visible, gallery accompanies ----- */
/* PIP: small thumbnail in a corner */
.bc-card__featured-pip {
    position: absolute; right: 16px; top: 16px;
    width: 32%; aspect-ratio: 4/5;
    overflow: hidden; z-index: 5;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transform: translateY(-8px) scale(.9);
    opacity: 0;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.bc-card__featured-pip .bc-hover__img { position:absolute; inset:0; }
.bc-card:hover .bc-card__featured-pip,
.bc-card:focus-within .bc-card__featured-pip { opacity: 1; transform: translateY(0) scale(1); }

/* Side strip: column on the right with stacked thumbs */
.bc-card__featured-strip {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 35%;
    display: grid; grid-auto-rows: 1fr; gap: 4px;
    background: rgba(0,0,0,.4);
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    z-index: 5;
}
.bc-card__featured-strip .bc-hover__cell { width: 100%; height: 100%; }
.bc-card:hover .bc-card__featured-strip,
.bc-card:focus-within .bc-card__featured-strip { transform: translateX(0); }

/* Bottom band: row of thumbs sliding up */
.bc-card__featured-band {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 30%;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    background: rgba(0,0,0,.4);
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    z-index: 5;
}
.bc-card__featured-band .bc-hover__cell { width: 100%; height: 100%; }
.bc-card:hover .bc-card__featured-band,
.bc-card:focus-within .bc-card__featured-band { transform: translateY(0); }

/* Frame: featured image scales down, gallery wraps as border collage */
.bc-card--keep-frame .bc-card__img { transition: transform .8s cubic-bezier(.22,1,.36,1), inset .8s cubic-bezier(.22,1,.36,1); }
.bc-card--keep-frame:hover .bc-card__img,
.bc-card--keep-frame:focus-within .bc-card__img {
    transform: scale(.62);
    z-index: 6;
}


/* Crossfade: replaces featured image on hover */
.bc-hover--crossfade .bc-hover__img {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
    transform: scale(1.04);
}
.bc-card:hover .bc-hover--crossfade .bc-hover__img,
.bc-card:focus-within .bc-hover--crossfade .bc-hover__img { opacity: 1; transform: scale(1); }

/* Slideshow: stacked images, JS toggles data-bci-active */
.bc-hover--slideshow { background: transparent; }
.bc-hover--slideshow .bc-hover__slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
}
.bc-card:hover .bc-hover--slideshow .bc-hover__slide[data-bci-active="1"],
.bc-card:focus-within .bc-hover--slideshow .bc-hover__slide[data-bci-active="1"] { opacity: 1; }

/* Split 2 — vertical halves slide in (transparent gutters reveal featured) */
.bc-hover--split2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 0; background: transparent;
    opacity: 0;
    transition: opacity .45s ease;
}
.bc-hover--split2 .bc-hover__cell { position: relative; overflow: hidden; }
.bc-hover--split2 .bc-hover__cell:nth-child(1) .bc-hover__img { transform: translateY(-100%); }
.bc-hover--split2 .bc-hover__cell:nth-child(2) .bc-hover__img { transform: translateY(100%); }
.bc-hover--split2 .bc-hover__img { transition: transform .7s cubic-bezier(.22,1,.36,1) .05s; }
.bc-card:hover .bc-hover--split2,
.bc-card:focus-within .bc-hover--split2 { opacity: 1; }
.bc-card:hover .bc-hover--split2 .bc-hover__img,
.bc-card:focus-within .bc-hover--split2 .bc-hover__img { transform: translate(0,0); }

/* Grid 2x2 — staggered reveal */
.bc-hover--grid2x2 {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 4px; background: transparent;
}
.bc-hover--grid2x2 .bc-hover__cell {
    position: relative; overflow: hidden;
    opacity: 0; transform: scale(.92);
    transition: opacity .55s cubic-bezier(.22,1,.36,1) var(--bci-d, 0ms),
                transform .55s cubic-bezier(.22,1,.36,1) var(--bci-d, 0ms);
}
.bc-card:hover .bc-hover--grid2x2 .bc-hover__cell,
.bc-card:focus-within .bc-hover--grid2x2 .bc-hover__cell { opacity: 1; transform: scale(1); }

/* Mosaic 1 + 2 */
.bc-hover--mosaic {
    display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 4px; background: transparent;
}
.bc-hover--mosaic .bc-hover__cell { position: relative; overflow: hidden; opacity: 0; }
.bc-hover--mosaic .bc-hover__cell--main { grid-row: span 2; transform: translateX(-30px); transition: opacity .55s, transform .65s cubic-bezier(.22,1,.36,1); }
.bc-hover--mosaic .bc-hover__cell:nth-child(2) { transform: translateX(30px); transition: opacity .55s .08s, transform .65s cubic-bezier(.22,1,.36,1) .08s; }
.bc-hover--mosaic .bc-hover__cell:nth-child(3) { transform: translateX(30px); transition: opacity .55s .16s, transform .65s cubic-bezier(.22,1,.36,1) .16s; }
.bc-card:hover .bc-hover--mosaic .bc-hover__cell,
.bc-card:focus-within .bc-hover--mosaic .bc-hover__cell { opacity: 1; transform: translateX(0); }

/* Polaroid stack — fanned out (transparent backdrop reveals featured) */
.bc-hover--stack {
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    opacity: 0; transition: opacity .45s ease;
}
.bc-hover--stack .bc-hover__card {
    position: absolute;
    width: 55%; aspect-ratio: 3/4;
    background: #fff; padding: 8px 8px 28px;
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
    transform: translate(-50%, -50%) rotate(0deg) scale(.7);
    left: 50%; top: 50%;
    opacity: 0;
    transition: transform .65s cubic-bezier(.22,1,.36,1) var(--bci-d, 0ms),
                opacity .5s ease var(--bci-d, 0ms);
}
.bc-hover--stack .bc-hover__card .bc-hover__img { width: 100%; height: 100%; }
.bc-card:hover .bc-hover--stack,
.bc-card:focus-within .bc-hover--stack { opacity: 1; }
.bc-card:hover .bc-hover--stack .bc-hover__card,
.bc-card:focus-within .bc-hover--stack .bc-hover__card {
    opacity: 1;
    transform: translate(calc(-50% + var(--bci-tx,0%)), -50%) rotate(var(--bci-rot,0deg)) scale(1);
}

/* Ken Burns — zoom + pan on featured image replacement */
.bc-hover--kenburns .bc-hover__img {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(1) translate(0,0);
    transition: opacity .6s ease;
}
.bc-card:hover .bc-hover--kenburns .bc-hover__img,
.bc-card:focus-within .bc-hover--kenburns .bc-hover__img {
    opacity: 1;
    animation: bcKenBurns 6s ease-in-out infinite alternate;
}
@keyframes bcKenBurns {
    0%   { transform: scale(1.05) translate(0%, 0%); }
    50%  { transform: scale(1.15) translate(-3%, -2%); }
    100% { transform: scale(1.1)  translate(2%, 2%); }
}

/* Curtain reveal — wipe from left */
.bc-hover--reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(.77,0,.18,1);
}
.bc-card:hover .bc-hover--reveal,
.bc-card:focus-within .bc-hover--reveal { clip-path: inset(0 0 0 0); }

/* Z-index stack: featured(0) → hover gallery(1) → hover-overlay(2) → base overlay(3) → text(5) */
.bc-card__overlay { z-index: 3 !important; }
.bc-card__top, .bc-card__bottom { z-index: 5 !important; }
.bc-card__hover { z-index: 1; }

/* When the hover layer is opaque (split/grid/mosaic/stack), darken text overlay slightly less */
.bc-card--hover-split2 .bc-card__overlay,
.bc-card--hover-grid2x2 .bc-card__overlay,
.bc-card--hover-mosaic .bc-card__overlay,
.bc-card--hover-stack  .bc-card__overlay {
    transition: opacity .5s ease;
}
.bc-card--hover-split2:hover .bc-card__overlay,
.bc-card--hover-grid2x2:hover .bc-card__overlay,
.bc-card--hover-mosaic:hover .bc-card__overlay { opacity: .35; }

/* Touch — disable hover effects (no media swap) */
@media (hover: none) {
    .bc-card__hover { display: none; }
}

/* ============================================================
   RESPONSIVE — v1.5.0
   The actual mobile-layout overrides are injected per-instance
   from PHP using the user's chosen breakpoint. This keeps the
   default `inherit` behavior intact (no forced overrides).
   ============================================================ */


/* Instance responsive modes injected by PHP intentionally reset card height to auto below the chosen breakpoint. */

/* ============================================================
   v1.8.0 — Feature 2 layout (1 large + 1 small)
   ============================================================ */
.bc-intro__grid--feature2 { grid-template-columns: 1fr; grid-auto-rows: auto; }
.bc-intro__grid--feature2 .bc-card { aspect-ratio: 4/5; min-height: 0; }
@media (min-width: 768px) {
    .bc-intro__grid--feature2 {
        grid-template-columns: 2fr 1fr;
        grid-auto-rows: 1fr;
        aspect-ratio: 16/9;
    }
    .bc-intro__grid--feature2 .bc-card { aspect-ratio: auto; height: 100%; width: 100%; }

    /* Large column on the LEFT (default): 1st card big, 2nd small */
    .bc-intro--feature2-large-left  .bc-intro__grid--feature2 { grid-template-columns: 2fr 1fr; }
    .bc-intro--feature2-large-left  .bc-intro__grid--feature2 > .bc-card:nth-child(1) { order: 1; }
    .bc-intro--feature2-large-left  .bc-intro__grid--feature2 > .bc-card:nth-child(2) { order: 2; }

    /* Large column on the RIGHT: swap columns AND visual order so the 1st card is small (left), 2nd card is large (right) */
    .bc-intro--feature2-large-right .bc-intro__grid--feature2 { grid-template-columns: 1fr 2fr; }
    .bc-intro--feature2-large-right .bc-intro__grid--feature2 > .bc-card:nth-child(1) { order: 1; }
    .bc-intro--feature2-large-right .bc-intro__grid--feature2 > .bc-card:nth-child(2) { order: 2; }
}

/* ============================================================
   v1.8.0 — Card CTA (Discover) alignment fix
   The action row was using space-between which pushed the
   horizontal line away from the discover label, looking
   disconnected when card alignment was "left". Now the row
   only takes the natural width (no space-between), so it
   actually respects card_align (left/center/right).
   ============================================================ */
.bc-card__action {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.bc-card--align-left   .bc-card__action { justify-content: flex-start; }
.bc-card--align-center .bc-card__action { justify-content: center; }
.bc-card--align-right  .bc-card__action { justify-content: flex-end; }

/* When alignment is left/right, the line should sit between the
   label and the arrow naturally — keep its max-width but allow
   it to flex so it remains visually anchored to the discover label. */
.bc-card__line { flex: 0 1 80px; }

/* Ensure non-arrow CTA (just text) also aligns well */
.bc-card__cta {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 20px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bci-card-text);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--bci-card-text);
    text-decoration: none;
    transition: color .35s, border-color .35s, transform .35s;
    width: auto;
}
.bc-card__cta:hover { color: var(--bci-accent); border-color: var(--bci-accent); }
.bc-card__cta-arrow { transition: transform .5s cubic-bezier(.22,1,.36,1); display: inline-block; }
.bc-card__cta:hover .bc-card__cta-arrow { transform: translateX(4px); }