/* =====================================================
   Feature Card — sc-feature-card.css
   JIT loaded via wp_enqueue_style() inside shortcode.
   Tier 2 — [celeste_feature_card]
   @since 2.14.0
   Patch 05: Equal-height stretch + portrait button bottom-align
   ===================================================== */

/* --- Outer wrapper --- */
.celeste-feature-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
    border-radius: var(--fc-rad, 0);
    box-shadow: var(--fc-shadow, none);
}

.celeste-feature-card.fc-no-bottom-margin {
    margin-bottom: 0;
}

.celeste-feature-card.fc-has-border-color {
    border: var(--fc-bw, 0) solid var(--fc-bc, transparent);
}

.celeste-feature-card.fc-has-border-image .fc-card-inner {
    padding: var(--fc-bw, 0);
    background-image: var(--fc-b-img, none);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.celeste-feature-card.fc-has-border-image .fc-card-inner-content {
    border-radius: max(0px, calc(var(--fc-rad, 0px) - var(--fc-bw, 0px)));
    overflow: hidden;
}

/* --- Card inner (image border simulation shell) --- */
.fc-card-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* --- Card inner content (flex layout container) --- */
.fc-card-inner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--fc-bg, transparent);
}

/* --- Media wrap --- */
.fc-media-wrap {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: var(--fc-ar, 16/9);
}

/* Mobile: apply mobile aspect ratio override when --fc-ar-mob is set */
@media (max-width: 767px) {
    .fc-media-wrap {
        aspect-ratio: var(--fc-ar-mob, var(--fc-ar, 16/9));
    }

    .fc-media-wrap .swiper-slide img {
        aspect-ratio: var(--fc-ar-mob, var(--fc-ar, 16/9));
    }
}

/* Portrait: image always covers the frame */
.fc-media-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slider: match media wrap dimensions */
.fc-media-wrap .swiper,
.fc-media-wrap .swiper-wrapper,
.fc-media-wrap .swiper-slide {
    width: 100%;
    height: 100%;
}

.fc-media-wrap .swiper,
.fc-media-wrap .swiper-slide {
    display: block;
}

.fc-media-wrap .swiper-slide img {
    aspect-ratio: var(--fc-ar, 16/9);
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Content wrap --- */
.fc-content-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
    padding: var(--fc-pad, 32px);
}

/* --- Title --- */
.fc-title {
    margin: 0;
}

.fc-title.fc-title-fluid {
    font-family: var(--fc-t-font, var(--font-modern));
    font-weight: var(--fc-t-weight, 700);
    font-size: var(--fc-t-size, 32px);
    line-height: 1.2;
}

/* --- Text box --- */
.fc-text-box {
    margin: 0;
}

.fc-text-box > *:first-child {
    margin-top: 0;
}

.fc-text-box > *:last-child {
    margin-bottom: 0;
}

/* --- Icon grid --- */
.fc-icon-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.fc-icon-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75em;
    text-align: left;
}

.fc-icon-wrap {
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 1em;
    margin-top: 0.25em;
}

.fc-icon-wrap i,
.fc-icon-wrap svg {
    font-size: 1em;
    width: 1em;
    height: 1em;
    line-height: 1;
    display: block;
}

.fc-icon-wrap img {
    max-height: 1em;
    width: auto;
    height: auto;
    display: block;
}

.fc-icon-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* --- Button wrap --- */
.fc-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.fc-btn-wrap .btn,
.fc-btn-wrap .celeste-text-link {
    flex: 1 1 auto;
    min-width: 0;
}

.celeste-feature-card.fc-layout--portrait .fc-btn-wrap {
    margin-top: auto;
}

/* =====================================================
   GLOBAL ALIGNMENT CASCADE
   text-align targets title and text-box only.
   Icon grid always left-aligned regardless of cascade.
   ===================================================== */

.fc-align--left .fc-content-wrap   { align-items: flex-start; }
.fc-align--left .fc-title,
.fc-align--left .fc-text-box       { text-align: left; }

.fc-align--center .fc-content-wrap { align-items: center; }
.fc-align--center .fc-title,
.fc-align--center .fc-text-box     { text-align: center; }

.fc-align--right .fc-content-wrap  { align-items: flex-end; }
.fc-align--right .fc-title,
.fc-align--right .fc-text-box      { text-align: right; }

/* =====================================================
   SECTION ALIGNMENT OVERRIDES
   ===================================================== */

.fc-content-wrap.fc-content-override--left  { align-items: flex-start; }
.fc-content-wrap.fc-content-override--left .fc-title,
.fc-content-wrap.fc-content-override--left .fc-text-box { text-align: left; }

.fc-content-wrap.fc-content-override--center { align-items: center; }
.fc-content-wrap.fc-content-override--center .fc-title,
.fc-content-wrap.fc-content-override--center .fc-text-box { text-align: center; }

.fc-content-wrap.fc-content-override--right { align-items: flex-end; }
.fc-content-wrap.fc-content-override--right .fc-title,
.fc-content-wrap.fc-content-override--right .fc-text-box { text-align: right; }

.fc-icon-grid.fc-icons-override--left   { align-self: flex-start; }
.fc-icon-grid.fc-icons-override--center { align-self: center; }
.fc-icon-grid.fc-icons-override--right  { align-self: flex-end; }

.fc-btn-wrap.fc-btns-override--left   { justify-content: flex-start; }
.fc-btn-wrap.fc-btns-override--center { justify-content: center; }
.fc-btn-wrap.fc-btns-override--right  { justify-content: flex-end; }

/* =====================================================
   LANDSCAPE LAYOUT (768px+)
   ===================================================== */

@media (min-width: 768px) {
    .celeste-feature-card.fc-layout--landscape .fc-card-inner-content {
        flex-direction: row;
        align-items: stretch;
    }

    .celeste-feature-card.fc-layout--landscape .fc-media-wrap {
        width: 50%;
        flex-shrink: 0;
        align-self: stretch;
        aspect-ratio: unset;
    }

    .celeste-feature-card.fc-layout--landscape .fc-media-wrap::before {
        content: '';
        display: block;
        aspect-ratio: var(--fc-ar);
        width: 100%;
    }

    .celeste-feature-card.fc-layout--landscape .fc-media-wrap > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .celeste-feature-card.fc-layout--landscape .fc-media-wrap .celeste-feature-card-slider {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .celeste-feature-card.fc-layout--landscape .fc-media-wrap .swiper,
    .celeste-feature-card.fc-layout--landscape .fc-media-wrap .swiper-wrapper,
    .celeste-feature-card.fc-layout--landscape .fc-media-wrap .swiper-slide {
        height: 100%;
    }

    .celeste-feature-card.fc-layout--landscape .fc-media-wrap .swiper-slide img {
        aspect-ratio: unset;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .celeste-feature-card.fc-layout--landscape .fc-content-wrap {
        flex: 1 1 0;
        min-width: 0;
    }

    .celeste-feature-card.fc-layout--landscape.fc-valign--top    .fc-content-wrap { justify-content: flex-start; }
    .celeste-feature-card.fc-layout--landscape.fc-valign--center .fc-content-wrap { justify-content: center; }
    .celeste-feature-card.fc-layout--landscape.fc-valign--bottom .fc-content-wrap { justify-content: flex-end; }
}

/* =====================================================
   SLIDER NAV
   ===================================================== */

.fc-slider-nav {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--fc-nav-bg, #1a1a1a);
}

.fc-slider-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fc-nav-color, #ffffff);
    padding: 0 12px;
}

.fc-slider-nav__btn svg {
    width: 1em;
    height: 1em;
    display: block;
}

.fc-slider-nav__btn--prev svg {
    transform: scaleX(-1);
}

.fc-slider-nav__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.celeste-feature-card .fc-slider-nav__pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 0.75rem;
    color: var(--fc-nav-color, #ffffff);
    white-space: nowrap;
}

.fc-frac-sep {
    opacity: 0.6;
}

/* =====================================================
   v7.0 Hydration Symmetry (Zero-CLS)
   Pre-init CLS: FOUC opacity locks and structural mimicry.
   ===================================================== */

.celeste-feature-card .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
}

.celeste-feature-card .swiper:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.celeste-feature-card .swiper:not(.swiper-initialized) .swiper-slide:first-child {
    opacity: 1;
    pointer-events: auto;
}