/* Moved from app.css and scoped to the new storycard class.
   Targets the Secondary Featured variant (medium, stacked/compact). */

.storycard--secondary-medium .category-featured {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 12px;
    /* Give secondary featured items a faint card background like main featured */
    background: #f2f2f6;
    /* subtle border and shadow to lift the card */
    border: 1px solid rgba(22,27,33,0.03);
    box-shadow: 0 4px 12px rgba(22,27,33,0.04);
    overflow: visible;
}

/* Content column */
.storycard--secondary-medium .category-featured .category-content {
    flex: 1 1 60%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Image column */
.storycard--secondary-medium .category-featured .featured-image,
.storycard--secondary-medium .category-featured .category-image {
    flex: 0 0 40%;
    max-width: 40%;
    overflow: hidden;
    position: relative;
}

.storycard--secondary-medium .category-featured .featured-image img,
.storycard--secondary-medium .category-featured .category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Variant that matches MainFeatured layout where needed */
.storycard--secondary-medium .category-featured,
.storycard--secondary-medium .category-featured.feature-vertical {
    display: flex !important;
    gap: 1rem !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem !important;
    border-radius: 12px !important;
    /* Match main featured stacked/card appearance */
    background: #f2f2f6 !important;
    border: 1px solid rgba(22,27,33,0.06) !important;
    box-shadow: 0 8px 22px rgba(22,27,33,0.07) !important;
    overflow: hidden;
}

.storycard--secondary-medium .category-featured .category-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.5rem 0.75rem !important;
    flex: 1 1 60% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.storycard--secondary-medium .category-featured .featured-image {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    order: 2 !important;
    align-self: stretch !important;
    overflow: hidden !important;
    position: relative !important;
}

.storycard--secondary-medium .category-featured .featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.storycard--secondary-medium .category-featured .btn-shop,
.storycard--secondary-medium .category-featured .featured-cta {
    align-self: flex-start !important;
    float: none !important;
    margin-top: 0.5rem !important;
}

/* Slightly smaller CTA for secondary featured cards */
.storycard--secondary-medium .category-featured .featured-cta,
.storycard--secondary-medium .category-featured .btn-shop {
    font-size: 0.88rem !important;
    padding: 0.22rem 0.48rem !important;
    border-radius: 6px !important;
    line-height: 1 !important;
}

/* Force stacked (title -> image -> teaser -> CTA) flow where desired */
.storycard--secondary-medium.storycard--stacked .category-featured,
.storycard--secondary-medium .category-featured.storycard--stacked {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 12px !important;
}

.storycard--secondary-medium .category-featured .category-content {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.5rem 0.75rem !important;
    display: block !important;
}

.storycard--secondary-medium .category-featured .category-image {
    order: 2 !important;
    position: relative !important;
    z-index: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.5rem !important;
    overflow: hidden !important;
}

.storycard--secondary-medium .category-featured .category-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Prefer top-aligned crop for thumbnails so top-of-image remains visible */
.storycard--secondary-medium .category-featured .category-image img {
    object-fit: cover !important;
    object-position: top center !important;
    max-height: 150px !important;
}

.storycard--secondary-medium .category-featured .category-image img[src$="/20260219_183920.png"] {
    object-fit: contain !important;
    object-position: top center !important;
    max-height: 150px !important;
}

/* Keep vertical stacking on small screens */
@media (max-width: 767.98px) {
    .storycard--secondary-medium .category-featured {
        flex-direction: column !important;
    }
    .storycard--secondary-medium .category-featured .category-image,
    .storycard--secondary-medium .category-featured .category-content {
        order: initial !important;
        max-width: 100% !important;
    }
}

/* Media wrap to allow overlays */
.storycard--secondary-medium .media-wrap {
    position: relative;
    display: block;
}

/* Overlay badges (community, small product badges) */
.storycard--secondary-medium .badge-overlay {
    position: absolute;
    z-index: 1000;
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    border-radius: 6px;
    color: #fff;
    background: rgba(0,0,0,0.65);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: inline-block;
    white-space: nowrap;
}

.storycard--secondary-medium .badge-overlay-top-left { top: 8px; left: 8px; }
.storycard--secondary-medium .badge-overlay-top-right { top: 8px; right: 8px; }

.storycard--secondary-medium .product-badge { position: absolute; bottom: 8px; left: 8px; z-index: 1010; background: #ff6b6b; color: #fff; padding: 0.2rem 0.45rem; border-radius: 6px; font-weight: 600; font-size: 0.75rem; }

/* Visibility overlay button for secondary cards */
.storycard--secondary-medium .media-wrap { position: relative; }
/* overlay visibility removed for secondary featured (no-op placeholder kept if needed) */
.storycard--secondary-medium .media-wrap { position: relative; }
.storycard--secondary-medium .media-wrap .featured-visibility {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1050;
    width: 32px;
    height: 32px;
    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--secondary-medium .media-wrap .featured-visibility.visible { background: rgba(25,135,84,0.95); }
.storycard--secondary-medium .media-wrap .featured-visibility.hidden { background: rgba(220,53,69,0.95); }
.storycard--secondary-medium .media-wrap .featured-visibility .bi { font-size: 0.95rem; }

/* Right-aligned meta badges used in SecondaryFeatured */
.storycard--secondary-medium .meta-badges--right { text-align: right; }
.storycard--secondary-medium .meta-badges--right .badge { margin-left: 0.4rem; display: inline-block; }

/* Category and tag badge styles (slightly smaller than main) */
/* Ensure category badge color matches main featured */
.storycard--secondary-medium .badge-category,
.storycard--featured-large .badge-category {
    display: inline-block;
    background: #198754; /* category green */
    color: #fff;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 0.4rem;
    border: 1px solid rgba(22,52,74,0.05);
}

.storycard--secondary-medium .badge-category-alt,
.storycard--featured-large .badge-category-alt {
    display: inline-block;
    background: #ffeeda;
    color: #8a4b1a;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 0.4rem;
    border: 1px solid rgba(138,75,26,0.05);
}

.storycard--secondary-medium .badge-tag {
    display: inline-block;
    background: #dcefeff0;
    color: #254f4f;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 0.4rem;
    border: 1px solid rgba(37,79,79,0.05);
}

/* Make sure overlays appear above image */
.storycard--secondary-medium .media-wrap img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* Teaser typography for secondary featured: match main featured but slightly smaller */
.storycard--secondary-medium .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.85rem, 1.0vw, 0.98rem);
    line-height: 1.55;
    color: #42494a;
    font-weight: 400;
    margin-top: 0.5rem;
}

/* General teaser paragraph used in promo cards */
.promo-cards .category-featured .category-content p,
.promo-cards .category-featured .category-content .featured-teaser {
    font-size: 1rem;
    margin-bottom: 30px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.6;
}

/* Main featured teaser (larger, more prominent) */
.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;
    font-weight: 400;
    margin-top: 0.5rem;
}

/* Ensure feature-vertical variant for secondary uses full-width image containers
   and predictable cropping without relying on inline styles. */
.storycard--secondary-medium .category-featured.feature-vertical .category-image,
.storycard--secondary-medium .category-featured.feature-vertical .media-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.storycard--secondary-medium .category-featured.feature-vertical .category-image img,
.storycard--secondary-medium .category-featured.feature-vertical .media-wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: top center !important;
    max-height: 160px !important;
}

/* Ensure placeholder images use contain so they don't crop badly */
.storycard--secondary-medium .category-featured.feature-vertical .category-image img[src$="/20260219_183920.png"] {
    object-fit: contain !important;
}

/* SecondaryFeatured: stack tags vertically (right-aligned) instead of inline */
.storycard--secondary-medium .product-badge-container > .d-inline-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    align-items: flex-end !important; /* keep badges right aligned */
    margin-top: 0.2rem !important;
}

.storycard--secondary-medium .product-badge-container > .d-inline-block .badge-tag,
.storycard--secondary-medium .product-badge-container > .d-inline-block a.badge-tag,
.storycard--secondary-medium .product-badge-container > .d-inline-block button.badge-tag {
    margin-right: 0 !important;
}