/**
 * Cards CSS — assets/css/cards.css
 *
 * BEM styles for all card types: hero, standard, mini.
 * Consumes tokens from base.css — no hardcoded color or spacing values.
 *
 * Block:    .card
 * Elements: .card__image, .card__body, .card__overlay, .card__badges,
 *           .card__badge, .card__title, .card__excerpt, .card__meta, .card__disclosure
 * Modifiers:.card--hero, .card--standard, .card--mini
 *           .card--breaking, .card--featured, .card--urgent,
 *           .card--sponsored, .card--promo
 */

/* ── Base Card ─────────────────────────────────────────────────────────────── */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--eln-color-bg);
    overflow: hidden;
}

/* ── Card Image ────────────────────────────────────────────────────────────── */

.card__image-link {
    display: block;
    overflow: hidden;
}

.card__image {
    overflow: hidden;
    line-height: 0;
}

/* Extra .card parent raises specificity to (0,2,1) — beats .elementor img (0,1,1)
   regardless of stylesheet load order, without needing !important. */
.card .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--eln-transition);
}

.card:hover .card__image img {
    transform: scale(1.03);
}

/* ── Badges ────────────────────────────────────────────────────────────────── */

.card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eln-space-xs);
    margin-bottom: var(--eln-space-sm);
}

.card__badge {
    display: inline-block;
    padding: 2px var(--eln-space-xs);
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eln-color-text-inverse);
    border-radius: var(--eln-radius-sm);
    line-height: 1.6;
    white-space: nowrap;
}

/* Label badge colors */
.card__badge--breaking  { background: var(--eln-badge-breaking); }
.card__badge--urgent    { background: var(--eln-badge-urgent); }
.card__badge--sponsored { background: var(--eln-badge-sponsored); }
.card__badge--promo     { background: var(--eln-badge-promo); }
.card__badge--category  { background: var(--eln-color-primary-500); }
.card__badge--scope     {
    background: var(--eln-color-black-900);
    color: var(--eln-color-text-inverse);
    border: none;
}

/* ── Card Title ────────────────────────────────────────────────────────────── */

.card__title {
    margin: 0 0 var(--eln-space-sm);
    font-family: var(--eln-font-heading);
    font-weight: var(--eln-font-weight-bold);
    line-height: var(--eln-line-height-tight);
}

.card__title-link {
    color: var(--eln-color-text);
    transition: color var(--eln-transition);
}

.card__title-link:hover {
    color: var(--eln-color-accent);
    text-decoration: none;
}

/* ── Card Excerpt ──────────────────────────────────────────────────────────── */

.card__excerpt {
    margin: 0 0 var(--eln-space-sm);
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
    line-height: var(--eln-line-height-base);
}

/* ── Card Meta ─────────────────────────────────────────────────────────────── */

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eln-space-xs);
    font-size: var(--eln-font-size-xs);
    color: var(--eln-color-text-muted);
    margin-top: auto;
}

.card__meta-sep {
    color: var(--eln-color-border);
}

/* ── Sponsor Disclosure ────────────────────────────────────────────────────── */

.card__disclosure {
    margin: var(--eln-space-xs) 0 0;
    font-size: var(--eln-font-size-xs);
    color: var(--eln-color-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO CARD (.card--hero)
   ═══════════════════════════════════════════════════════════════════════════ */

.card--hero {
    position: relative;
    height: 500px;                          /* Figma: exactly 500px */
    border-radius: var(--eln-radius-xl);    /* Figma: 10px rounded corners */
    overflow: hidden;                       /* clip image to radius */
    background: var(--eln-color-black-900); /* Prevent white bleed at border-radius
                                               corners; dark fallback when no image */
}

.card--hero .card__image-link {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.card--hero .card__image {
    height: 100%;
}

.card--hero .card__overlay {
    /* Full-card overlay — covers the entire 500px hero card so the gradient
       extends from the bottom (dark) all the way to the top (transparent).
       Content is pushed to the bottom via justify-content: flex-end.
       Previously position:relative + margin-top:auto, which only covered
       the text strip and left the upper portion of the image with no gradient. */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--eln-space-6);   /* Figma: 24px all sides */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,    /* Figma: 0.9 (was 0.85) */
        rgba(0, 0, 0, 0.4) 50%,   /* Figma: via at 50% (was 60%) */
        transparent        100%
    );
}

.card--hero .card__meta {
    /* Base .card__meta uses margin-top:auto (works in standard card body flex).
       Inside the hero overlay (flex column, justify-content:flex-end), auto
       margin would push meta to the card bottom, detaching it from the title.
       Reset to a fixed gap so badges → title → meta stack naturally. */
    margin-top: var(--eln-space-xs);
    color: rgba(255, 255, 255, 0.7);
}

.card--hero .card__title {
    font-size: var(--eln-font-size-3xl);   /* Figma: 36px at all breakpoints */
    line-height: 1.25;                     /* Figma: 45px / 36px = 1.25 (inherited tight 1.2 is too narrow) */
    color: var(--eln-color-text-inverse);
    margin-bottom: var(--eln-space-sm);
}

.card--hero .card__title-link {
    color: var(--eln-color-text-inverse);
}

.card--hero .card__title-link:hover {
    color: rgba(255, 255, 255, 0.85);
}

.card--hero .card__excerpt {
    color: rgba(255, 255, 255, 0.85);
}

.card--hero .card__disclosure {
    color: rgba(255, 255, 255, 0.6);
}

/* Hero card height (500px) and title size (3xl) are fixed at all breakpoints
   per Figma node 169-1052 — no responsive overrides needed here. */

/* Scope badge — dark-surface override for hero card contexts.
 * .hero-block__lead and .cat-featured both render .card--hero on a dark gradient
 * overlay. The base black pill is invisible against that surface; use a
 * semi-transparent white fill instead so the badge remains legible. */
.hero-block__lead .card__badge--scope,
.cat-featured .card__badge--scope {
    background: rgba(255, 255, 255, 0.20);   /* Figma: rgba-white-0.2 fill */
    color: #fff;
    border: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD CARD (.card--standard)
   ═══════════════════════════════════════════════════════════════════════════ */

.card--standard {
    border-radius: var(--eln-radius-md);  /* 8px — base .card overflow:hidden clips
                                             the image to these same rounded corners,
                                             eliminating any need for separate image
                                             border-radius and the bottom-corner gap. */
}

.card--standard .card__image {
    aspect-ratio: 4 / 3;
}

.card--standard .card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--eln-space-md);   /* Figma: 12px all sides (was top-only) */
}

/* ── Image-Left orientation (.card--standard.card--image-left) ──────────────
   Used by the Related block horizontal layout. The card flex container
   switches to row; the media has a fixed 120px square; the body fills the rest.
   Specificity (0,3,0) beats .card--standard .card__image (0,2,0) so the 4:3
   aspect-ratio is safely overridden for this orientation. */

.card--standard.card--image-left {
    flex-direction: row;
    align-items: stretch;
}

.card--standard.card--image-left .card__media {
    flex-shrink: 0;
    width: 120px;
    overflow: hidden;
}

.card--standard.card--image-left .card__image {
    width: 120px;
    height: 120px;   /* fixed square; overrides 4:3 aspect-ratio */
    aspect-ratio: unset;
}

.card--standard.card--image-left .card__body {
    flex: 1;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AD PLACEHOLDER CARD (.card--ad-placeholder)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Empty slot rendered when the category-section widget is configured for
 * 3 editorial cards + 1 ad slot. Matches the standard card grid column
 * so the layout remains a consistent 4-column grid.
 */

.card--ad-placeholder {
    background: var(--eln-color-bg-alt);
    border: 2px dashed var(--eln-color-border);
    border-radius: var(--eln-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;   /* enough height to anchor the label without a real image */
}

.card--ad-placeholder:hover .card__image img {
    transform: none;   /* suppress the base .card hover scale — no image here */
}

/*
 * .card__ad-label — "PUBLICIDAD" text inside the ad placeholder slot.
 * Scoped via the .card--ad-placeholder parent in the template; letter-spacing
 * 0.08em has no token equivalent (--eln-space-* covers layout, not tracking).
 */
.card__ad-label {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card--standard .card__title {
    font-size: var(--eln-font-size-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINI CARD (.card--mini)
   ═══════════════════════════════════════════════════════════════════════════ */

.card--mini {
    flex-direction: row;
    gap: var(--eln-space-2);                /* Figma: 10px gap; --eln-space-2 = 8px (closest token) */
    align-items: flex-start;
    background: var(--eln-color-bg-alt);    /* Figma: #f5f5f5; token = #FAFAFA — imperceptible delta */
    padding: var(--eln-space-xs);           /* Figma: 6px all sides */
    border-radius: var(--eln-radius-md);    /* Figma: 8px */
}

.card--mini .card__image-link {
    flex-shrink: 0;
    width: 155px;   /* Figma: 155px (was 80px) */
}

.card--mini .card__image {
    width: 155px;        /* Figma: 155px wide */
    aspect-ratio: 4 / 3; /* → 116px tall; replaces hardcoded 107px (was 16:9) */
    border-radius: var(--eln-radius-sm);   /* Figma: 4px (was 8px) */
}

.card--mini .card__image img {
    object-fit: cover;
    height: 100%;
}

.card--mini .card__body {
    flex: 1;
    min-width: 0;
}

.card--mini .card__title {
    font-family: var(--eln-font-heading);      /* Figma: Oswald (was Inter) */
    font-size: var(--eln-font-size-base);      /* Figma: 16px (was 13px) */
    font-weight: var(--eln-font-weight-bold);  /* Figma: Bold (was Medium) */
    line-height: 1.094;                        /* Figma: 17.5 / 16 */
    margin-bottom: var(--eln-space-xs);

    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card--mini .card__meta {
    font-size: var(--eln-font-size-xs);
}

/* Mini card badge size — Figma specifies 8px; no token at this size in the type scale.
 * Override the base .card__badge rule which inherits --eln-font-size-xs (11px). */
.card--mini .card__badge {
    font-size: 0.5rem;   /* 8px — Figma mini badge spec */
}

/* ── Image-badge overlay (.card--image-badges) ─────────────────────────────── */
/*
 * Applied when badge_in_image => true is passed to card-standard.php.
 * Used by category.php grid cards where Figma places pills inside the image
 * at the top-left. The base standard card places badges in .card__body.
 */

.card--image-badges .card__media {
    position: relative;
    overflow: hidden;
}

.card--image-badges .card__media .card__badges {
    position: absolute;
    z-index: 3;
    top: var(--eln-space-sm);
    left: var(--eln-space-sm);
    flex-wrap: wrap;
    gap: var(--eln-space-xs);
    max-width: calc(100% - 2 * var(--eln-space-sm));
    margin-bottom: 0;   /* no gap needed — badges float above image, not in flow */
}