/* Moved from app.css and scoped to the new storycard class.
   Targets the MainFeatured component only (large vertical featured story). */

.storycard--featured-large,
.storycard--featured-large.storycard--feature-vertical {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure the content column spans the left side fully */
.storycard--featured-large .category-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.75rem 1rem;
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Keep the image column on the right and let it occupy its fraction */
/* support both .category-image and .featured-image used across templates */
.storycard--featured-large .category-image,
.storycard--featured-large .featured-image {
    flex: 0 0 40%;
    max-width: 40%;
    order: 2;
    align-self: stretch;
    overflow: visible;
    position: relative;
}

/* Image fill */
.storycard--featured-large .category-image img,
.storycard--featured-large .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* When the image is rendered inside the .category-content column (vertical flow)
   ensure it follows the title by resetting the flex order and sizing. */
.storycard--featured-large .category-content .category-image,
.storycard--featured-large .category-content .featured-image {
    order: 1; /* place after the title (default order 0) */
    max-width: 100%;
    /* force the image wrapper to span the full content width so it appears
       below the title (prevents it floating alongside the heading) */
    flex: 0 0 100%;
    width: 100%;
    display: block;
    clear: both;
}

/* When the image is inside the content column we want it centered and
   sized appropriately under the title (not stretched to the full column height). */
.storycard--featured-large .category-content .category-image {
    text-align: center;
}

.storycard--featured-large .category-content .category-image img,
.storycard--featured-large .category-content .cf-embed img {
    width: auto;           /* allow intrinsic sizing */
    max-width: 60%;        /* constrain image width under the title */
    height: auto;          /* keep aspect ratio */
    margin: 1rem auto;     /* center horizontally and add spacing */
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Badge styles for MainFeatured */
.storycard--featured-large .badge-subcommunity {
    display: inline-block;
    background: transparent;
    color: #6c757d;
    border: 1px solid rgba(108,117,125,0.12);
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}



/* Category badge styles (match SecondaryFeatured) */
.storycard--featured-large .meta-badges .badge-category,
.storycard--featured-large .badge-category {
    display: inline-block;
    background: #198754; /* category green */
    color: #fff;      /* white text for contrast */
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
    border: 1px solid rgba(22,52,74,0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}

.storycard--featured-large .meta-badges .badge-category-alt,
.storycard--featured-large .badge-category-alt {
    display: inline-block;
    background: #ffeeda; /* slightly stronger warm tone for contrast */
    color: #8a4b1a;      /* clearer brown */
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
    border: 1px solid rgba(138,75,26,0.06);
}

/* Ensure the content sits left (text, teaser, CTA) */
.storycard--featured-large .btn-shop,
.storycard--featured-large .featured-cta {
    align-self: flex-start;
    float: none;
    margin-top: 0.5rem;
}

/* Make the Read / CTA button slightly smaller to better fit featured layouts */
.storycard--featured-large .featured-cta,
.storycard--featured-large .btn-shop {
    font-size: 0.95rem; /* slightly reduced */
    padding: 0.28rem 0.6rem; /* reduce visual weight */
    border-radius: 6px; /* a bit tighter corner */
    line-height: 1; /* keep compact vertical spacing */
}

/* Responsive: stack on small screens */
@media (max-width: 767.98px) {
    .storycard--featured-large {
        flex-direction: column;
        min-height: auto;
    }

    .storycard--featured-large .category-image,
    .storycard--featured-large .featured-image,
    .storycard--featured-large .category-content {
        max-width: 100%;
        flex: 0 0 auto;
        order: initial;
    }
}

/* Stacked / vertical variant to match SecondaryFeatured layout but larger */
.storycard--featured-large.storycard--feature-vertical,
.category-featured.storycard--featured-large.storycard--feature-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    /* Restore card look - slightly darker faint grey for more contrast */
    background: #f2f2f6 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(22,27,33,0.07) !important;
    border: 1px solid rgba(22,27,33,0.06) !important;
}

.storycard--featured-large.storycard--feature-vertical .category-content {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.storycard--featured-large.storycard--feature-vertical .category-image {
    order: 2 !important;
    position: relative !important;
    z-index: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
    overflow: hidden !important;
    text-align: center !important;
}

.storycard--featured-large.storycard--feature-vertical .category-image img,
.storycard--featured-large.storycard--feature-vertical .cf-embed img {
    display: block !important;
    /* Use full width for the stacked main featured image */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0.75rem 0 !important;
}

/* Bigger title for main featured */
.storycard--featured-large.storycard--feature-vertical .featured-title {
    /* Reduced size further for better balance */
    font-size: clamp(1.4rem, 3.5vw, 2.4rem) !important;
    line-height: 1.4 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Override the centered small-image behavior when in stacked/card mode so
   the content image spans the card width underneath the title. */
.storycard--featured-large.storycard--feature-vertical .category-content .category-image,
.storycard--featured-large.storycard--feature-vertical .category-content .featured-image {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.category-image {
    position: relative;
}

    .category-image .media-wrap {
        position: relative;
        display: block;
        overflow: visible;
    }

    .category-image .img-fluid {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 1;
    }

/* General overlay badge styling */
.badge-overlay {
    position: absolute;
    z-index: 1000;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    color: #fff;
    background: rgba(0,0,0,0.65);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: inline-block;
    white-space: nowrap;
}

.badge-overlay-top-left {
    top: 12px;
    left: 12px;
}

.badge-overlay-top-right {
    top: 12px;
    right: 12px;
}

/* Product badge placed inside embeds or attached to media */
.product-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1010;
    background: #ff6b6b;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Ensure embed container is positioned so absolute children are relative to it */
.cf-embed {
    position: relative;
    display: block;
}

    .cf-embed img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Right-aligned meta badges used in MainFeatured */
.storycard--featured-large .meta-badges--right {
    text-align: right;
}

.storycard--featured-large .meta-badges--right .badge {
    margin-left: 0.5rem;
    display: inline-block;
}

/* Tag badge distinct color */
.storycard--featured-large .badge-tag {
    display: inline-block;
    background: #dcefeff0; /* slightly stronger desaturated teal */
    color: #254f4f;      /* deeper muted teal */
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
    border: 1px solid rgba(37,79,79,0.06);
}

/* Visibility overlay button (eye / eye-slash) placed over images */
.storycard--featured-large .media-wrap {
    position: relative;
}

/* overlay visibility removed for main featured (no-op placeholder kept if needed) */
.storycard--featured-large .media-wrap {
    position: relative;
}

.storycard--featured-large .media-wrap .featured-visibility {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1050;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 0;
}

.storycard--featured-large .media-wrap .featured-visibility:focus {
    outline: 2px solid rgba(255,255,255,0.6);
}

.storycard--featured-large .media-wrap .featured-visibility.visible {
    background: rgba(25,135,84,0.95); /* green */
}

.storycard--featured-large .media-wrap .featured-visibility.hidden {
    background: rgba(220,53,69,0.95); /* red */
}

.storycard--featured-large .media-wrap .featured-visibility .bi {
    font-size: 1rem;
}

/* Ensure community overlay badge stands out on image */
.storycard--featured-large .badge-overlay-top-left {
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Teaser typography: use a readable modern UI font stack with comfortable spacing
   Adjust size with clamp for responsiveness. Prefer 'Inter' if available, fall back to
   system UI fonts for performance and consistency. */
.storycard--featured-large .featured-teaser {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.6;
    color: #394041; /* slightly stronger muted tone for better contrast */
    font-weight: 400;
    margin-top: 0.5rem;
}