/**
 * Blocks CSS — assets/css/blocks.css
 *
 * Layout styles for editorial blocks: hero, grid, category section,
 * related posts, trending, breaking news bar, and single-article components.
 * Consumes tokens from base.css only.
 *
 * Block:     .block
 * Modifiers: .block--hero, .block--grid, .block--category-section,
 *            .block--related, .block--trending
 *
 * Breaking bar:         .eln-breaking   (independent, all non-single pages)
 * Reading progress bar: .eln-reading-progress  (single posts only)
 */

/* ── Shared Block Chrome ────────────────────────────────────────────────────── */

.block {
    margin-bottom: var(--eln-space-2xl);
}

.block__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eln-space-md);
    padding-bottom: var(--eln-space-sm);
    scroll-padding-inline: var(--eln-space-sm);
    scrollbar-width: none;
    margin-bottom: var(--eln-space-lg);
    border-bottom: 2px solid var(--eln-color-accent);
}

.block__title {
    margin: 0;
    font-size: var(--eln-font-size-xl);
    font-weight: var(--eln-font-weight-bold);
    font-family: var(--eln-font-heading);
    color: var(--eln-color-brand);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.block__title-link {
    color: inherit;
    transition: color var(--eln-transition);
}

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

.block__view-more {
    font-size: var(--eln-font-size-sm);
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-accent);
    white-space: nowrap;
    transition: opacity var(--eln-transition);
}

.block__view-more:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* ── Grid ───────────────────────────────────────────────────────────────────── */

.block__grid {
    display: grid;
    gap: var(--eln-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .block__grid--cols-2,
    .block__grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .block__grid--cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── List (related / trending) ──────────────────────────────────────────────── */

.block__list {
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Standalone list item — used by both ranked (ol) and unranked (div) lists */
.block__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--eln-space-sm);
}

.block__rank {
    flex-shrink: 0;
    min-width: 1.5rem;
    font-size: var(--eln-font-size-xl);
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-border);
    line-height: 1;
    padding-top: var(--eln-space-xs);
}

/* ── Hero Block ─────────────────────────────────────────────────────────────── */

.block--hero {
    margin-bottom: var(--eln-space-2xl);
}

/*
 * Two-column grid: lead story (2fr) left, 4 mini cards (1fr) stacked right.
 * Tablet → single column, lead on top, mini cards in a 2-up row.
 * Mobile  → full single column stack.
 */
.hero-block__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--eln-gap);
    align-items: start;
}

.hero-block__lead {
    /* full height of the grid row */
    height: 100%;
}

.hero-block__secondary {
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-2);   /* Figma: 8px between stacked mini cards (was 24px) */
}

/* Tablet: single column — lead full-width, secondary becomes 2-up row */
@media (max-width: 959px) {
    .hero-block__inner {
        grid-template-columns: 1fr;
    }

    .hero-block__secondary {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--eln-gap);
    }

    .hero-block__secondary .card--mini {
        flex: 1 1 calc(50% - var(--eln-gap) / 2);
        min-width: 0;
    }
}

/* Mobile: full single-column stack */
@media (max-width: 599px) {
    .hero-block__secondary {
        flex-direction: column;
        gap: var(--eln-space-lg);
    }

    .hero-block__secondary .card--mini {
        flex: none;
        width: 100%;
    }
}

/* ── Category Section Block ─────────────────────────────────────────────────── */

.category-section {
    --category-gap: var(--eln-gap);
}

/* ─── Card Media Wrapper ───────────────────────────────────────────────────── */

/* overflow:hidden prevents the image from spilling outside the media container.
   Card-level border-radius + overflow:hidden (on base .card) handles corner
   clipping — no border-radius needed here. */
.category-section .card__media {
    overflow: hidden;
}

/* ─── Track base (shared by both modes) ─────────────────────────────────────── */

.category-section__track {
    display: grid;
    gap: var(--category-gap);
    grid-template-columns: 1fr;   /* single column on small screens */
}

/* Equal-height cards across a row */
.category-section .category-section__item .card--standard {
    height: 100%;
}

/* Card body top spacing — room below the image */
.category-section .card--standard .card__body {
    padding-top: var(--eln-space-md);
}

/* ─── Grid mode: 3 cards ─────────────────────────────────────────────────── */

@media (min-width: 680px) {
    .category-section--grid.category-section--count-3 .category-section__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .category-section--grid.category-section--count-3 .category-section__track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ─── Grid mode: 4 cards ─────────────────────────────────────────────────── */

@media (min-width: 680px) {
    .category-section--grid.category-section--count-4 .category-section__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .category-section--grid.category-section--count-4 .category-section__track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ─── Horizontal scroll mode ────────────────────────────────────────────────── */

.category-section--scroll .category-section__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--eln-space-sm);
    padding-bottom: var(--eln-space-sm);   /* room for scrollbar on Windows */
    scrollbar-width: none;                 /* Firefox */
    cursor: grab;                          /* visual desktop affordance */
}

.category-section--scroll .category-section__track:active {
    cursor: grabbing;
}

.category-section--scroll .category-section__track::-webkit-scrollbar {
    display: none;  /* Chrome / Safari */
}

/* Items —
 * Mobile/small: ~86% viewport so the next card peeks
 * Tablet:       ~48% (two visible + peek)
 * Desktop:      calc((100% - 2 × gap) / 3.2) — 3 full + visible peek of 4th
 */
.category-section--scroll .category-section__item {
    flex: 0 0 86%;
    min-width: 260px;
    max-width: 440px;
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .category-section--scroll .category-section__item {
        flex-basis: 48%;
        max-width: none;
    }
}

@media (min-width: 1080px) {
    .category-section--scroll .category-section__item {
        flex-basis: calc((100% - 2 * var(--category-gap)) / 3.2);
        max-width: none;
    }
}

/* 5-card scroll: narrower flex-basis so a 5th card peeks at desktop */
@media (min-width: 1080px) {
    .category-section--scroll.category-section--count-5 .category-section__item {
        flex-basis: calc((100% - 3 * var(--category-gap)) / 4.2);
    }
}

/* ── Related Block ──────────────────────────────────────────────────────────── */
/*
 * Equal-card grid for related articles.
 * Supports 3-column (.related--cols-3) and 4-column (.related--cols-4) modes.
 * Load More: overflow items hidden via .related__item--overflow, revealed
 * client-side by adding .is-visible — no AJAX, no page reload.
 *
 * .related                  section wrapper (also .block--related)
 * .related__header          heading row
 * .related__grid            CSS Grid container
 * .related__item            single card slot
 * .related__item--overflow  hidden until Load More clicked
 * .related__footer          Load More button row
 * .related__load-more       the button itself
 */

.block--related {
    padding-top: var(--eln-space-xl);
    border-top: 1px solid var(--eln-color-border);
}

/* Header */
.related__header {
    margin-bottom: var(--eln-space-lg);
}

.related__title,
.block--related .block__title {
    font-size: var(--eln-font-size-lg);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

/* Grid — mobile-first: single column */
.related__grid {
    display: grid;
    gap: var(--eln-space-lg);
    grid-template-columns: 1fr;
}

/* 2-column breakpoint (shared by both modes) */
@media (min-width: 680px) {
    .related--cols-3 .related__grid,
    .related--cols-4 .related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Full-width breakpoints */
@media (min-width: 1080px) {
    .related--cols-3 .related__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .related--cols-4 .related__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Load More — overflow hiding / reveal */
.related__item--overflow {
    display: none;
}

.related__item--overflow.is-visible {
    display: block;
}

/* Load More button row */
.related__footer {
    margin-top: var(--eln-space-lg);
    text-align: center;
}

/* Load More button — extends .btn .btn--outline from base.css.
   Elementor color/typography selectors can override these via
   {{WRAPPER}} .related__load-more for per-widget customisation. */
.related__load-more {
    min-width: 12rem;
}

/* ── Trending Block ─────────────────────────────────────────────────────────── */
/*
 * Ranked vertical list — optimised for sidebar and single-article use.
 * No grid, no images, no horizontal scroll.
 * .trending  wrapper — inherits .block margin-bottom
 * .trending-item — flex row: rank left, content right, divider bottom
 */

.trending__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ── Item ─── */

.trending-item {
    display: flex;
    align-items: flex-start;
    gap: var(--eln-space-md);
    padding-top: var(--eln-space-md);
    padding-bottom: var(--eln-space-md);
}

/*
 * Specificity (0,2,1): beats Elementor's generated .elementor-element-x .trending-item
 * rule (0,2,0) so the first item stays flush with the section header even when
 * the item_spacing Elementor control overrides padding on all other items.
 */
.trending__list > .trending-item:first-child {
    padding-top: 0;
}

.trending-item:not(:last-child) {
    border-bottom: 1px solid var(--eln-color-border);
}

/* ── Rank number ─── */

.trending-item__rank {
    flex-shrink: 0;
    font-size: var(--eln-font-size-2xl);
    font-weight: var(--eln-font-weight-bold);
    font-family: var(--eln-font-sans);
    line-height: 1;
    /*
     * Intentionally muted so the rank is a visual anchor without
     * competing with the title for attention.
     */
    color: var(--eln-color-border);
    min-width: 2ch;
    user-select: none;
}

/* ── Content ─── */

.trending-item__content {
    flex: 1;
    min-width: 0;  /* prevent flex child from overflowing narrow sidebars */
}

/* ── Category inline label ─── */

.trending-item__category {
    display: inline-block;
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-medium);
    font-family: var(--eln-font-sans);
    color: var(--eln-color-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--eln-space-xs);
    text-decoration: none;
    transition: opacity var(--eln-transition);
}

.trending-item__category:hover {
    opacity: 0.75;
    text-decoration: none;
}

/* ── Title ─── */

.trending-item__title {
    margin: 0;
    font-size: var(--eln-font-size-sm);
    font-weight: var(--eln-font-weight-bold);
    line-height: var(--eln-line-height-tight);
}

.trending-item__title-link {
    color: var(--eln-color-text);
    text-decoration: none;
    transition: color var(--eln-transition);
}

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

/* ── Meta ─── */

.trending-item__meta {
    margin-top: var(--eln-space-xs);
    font-size: var(--eln-font-size-xs);
    color: var(--eln-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKING NEWS BAR  (.eln-breaking)
   ═══════════════════════════════════════════════════════════════════════════ */
/*
 * Top-of-site urgency bar for curated breaking headlines.
 * Rendered by template-parts/blocks/block-breaking-news.php.
 *
 * Modes (set by item count after expiration filtering):
 *   .eln-breaking--static   1–2 items — inline row, no animation
 *   .eln-breaking--ticker   3+ items  — scrolling belt with seamless loop
 *
 * Ticker technique:
 *   PHP renders one .eln-breaking__belt (all items).
 *   JS clones it and adds .eln-breaking--ready to start animation.
 *   Both belts (original + clone) animate translateX(0 → -100%) in sync.
 *   When belt-1 exits the viewport left, belt-2 is exactly where belt-1
 *   started — seamless loop with no JS per-frame calculation.
 *
 *   .eln-breaking              Full-width background band (red shell)
 *   .eln-breaking__inner       1200px container — flex row (label + track)
 *   .eln-breaking__label       "Última Hora" pill (flex-shrink: 0)
 *   .eln-breaking__track       Overflow clip, flex: 1
 *   .eln-breaking__belt        Flex row of items; width: max-content; animated
 *   .eln-breaking__item        Individual headline (a or span)
 *   .eln-breaking__sep         Bullet separator (aria-hidden)
 *
 * Shell pattern:
 *   The outer .eln-breaking spans the viewport edge-to-edge so the red band
 *   reads as part of the dark header system above it. The inner content is
 *   constrained to the same 1200px container as the navbar, locking horizontal
 *   alignment with the logo / nav / utility row.
 */

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

.eln-breaking {
    /* Full-width band — background extends viewport-edge to viewport-edge */
    background: var(--eln-badge-breaking);
    color: var(--eln-color-text-inverse);
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-sm);
    line-height: 1;
    padding-block: var(--eln-space-2);   /* 10px top + bottom breathing room */
}

/* Inner — 1200px container holds the flex row (label + track) */
.eln-breaking__inner {
    display: flex;
    align-items: stretch;
    /* The container's own padding-inline (var(--eln-space-lg)) sets the
       horizontal inset so label and ticker align with the navbar above. */
}

/* "Última Hora" label pill */
.eln-breaking__label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: var(--eln-space-2) var(--eln-space-md);
    margin-right: var(--eln-space-md);
    background: rgba(0, 0, 0, 0.28);
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: var(--eln-radius-sm);
}

/* Track — clips the belt; never shows a scrollbar in normal operation */
.eln-breaking__track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* Belt — the animating row of items.
   No horizontal padding here: the 1200px .eln-breaking__inner already sets
   the gutter via the .eln-container padding, and the label pill provides the
   visual gap on the left. Vertical padding gives the band its 32px-ish height. */
.eln-breaking__belt {
    display: inline-flex;
    align-items: center;
    padding: var(--eln-space-2) 0;
    gap: var(--eln-space-md);
    flex-shrink: 0;
    white-space: nowrap;
}

/* The JS-appended clone belt is purely visual — disable all pointer interaction
   so mouse clicks and touch events only fire on the original belt's links. */
.eln-breaking__belt--clone {
    pointer-events: none;
}

/* Items */
.eln-breaking__item {
    color: inherit;
    font-weight: var(--eln-font-weight-medium);
    white-space: nowrap;
    text-decoration: none;
}

a.eln-breaking__item {
    transition: opacity var(--eln-transition);
}

a.eln-breaking__item:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Separator bullet */
.eln-breaking__sep {
    opacity: 0.55;
    font-size: var(--eln-font-size-xs);
    flex-shrink: 0;
    user-select: none;
}

/* ── Ticker animation ────────────────────────────────────────────────────── */
/*
 * Both belts (original + JS clone) carry the same animation so they move
 * as one continuous band.  Duration is set by PHP via --eln-ticker-duration
 * on the .eln-breaking wrapper (default: 20s).
 *
 * translateX(-100%) = -100% of the BELT's own width.
 * When belt-1 reaches -100%, belt-2 is exactly at visual position 0 (because
 * belt-2 started at +belt_width in the flex layout).  Seamless loop.
 */

@keyframes eln-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* JS adds .eln-breaking--ready after cloning the belt */
.eln-breaking--ready .eln-breaking__belt {
    animation: eln-ticker var(--eln-ticker-duration, 20s) linear infinite;
    will-change: transform;
}

/* ── Pause states ────────────────────────────────────────────────────────── */
/*
 * Hover: pure CSS — desktop users hovering can read items without JS.
 * Focus: JS adds .eln-breaking--paused on focusin; removes on focusout.
 *        This ensures keyboard users can read the focused headline.
 */

.eln-breaking--ticker:hover     .eln-breaking__belt,
.eln-breaking--paused           .eln-breaking__belt {
    animation-play-state: paused;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/*
 * JS skips belt cloning + .eln-breaking--ready when prefers-reduced-motion
 * is active, so this rule is a CSS-only safety net for edge cases.
 * The track becomes horizontally scrollable so all items remain accessible.
 */

@media (prefers-reduced-motion: reduce) {
    .eln-breaking--ready .eln-breaking__belt {
        animation: none;
    }

    .eln-breaking__track {
        overflow-x: auto;
        scrollbar-width: none;         /* Firefox */
    }

    .eln-breaking__track::-webkit-scrollbar {
        display: none;                 /* Chrome / Safari */
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
    /* Hide label pill on small screens to maximise headline space */
    .eln-breaking__label {
        display: none;
    }
}

/* ── Article Single Layout ──────────────────────────────────────────────────── */

.article-single {
    padding: var(--eln-space-xl) 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.article-single__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--eln-space-xs);
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-xs);
    color: var(--eln-color-text-muted);
    margin-bottom: var(--eln-space-lg);
}

.article-single__breadcrumb a {
    color: var(--eln-color-text-muted);
    text-decoration: none;
    transition: color var(--eln-transition);
}

.article-single__breadcrumb a:hover {
    color: var(--eln-color-text);
    text-decoration: underline;
}

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

.article-single__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eln-space-xs);
    margin-bottom: var(--eln-space-md);
}

.article-single__title {
    font-size: var(--eln-font-size-h1);         /* Figma: Oswald Bold 48px */
    font-weight: var(--eln-font-weight-bold);
    line-height: 1.25;                          /* Figma: 60px / 48px */
    margin: 0 0 var(--eln-space-md);
    color: var(--eln-color-text);
}

.article-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eln-space-md);
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
    margin-bottom: var(--eln-space-xl);
    padding-bottom: var(--eln-space-lg);
    border-bottom: 1px solid var(--eln-color-border);
}

/* ── Meta left (clock + read time + date) ─── */

.article-single__meta-left {
    display: flex;
    align-items: center;
    gap: var(--eln-space-xs);
    flex-wrap: wrap;
}

.article-single__readtime,
.article-single__date {
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
}

.article-single__meta-icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    vertical-align: middle;
}

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

/* ── Share bar ─────────────────────────────── */

.article-single__share {
    display: flex;
    flex-direction: row;   /* never collapse into a column */
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--eln-space-sm);
    flex-shrink: 0;
}

.article-single__share-label {
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
    white-space: nowrap;
}

.article-single__share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--eln-ftr-social-bg);
    border-radius: var(--eln-radius-sm);
    color: var(--eln-color-text-inverse);
    transition: background-color var(--eln-transition), color var(--eln-transition);
    line-height: 0;
}

.article-single__share-link:hover {
    background: var(--eln-ftr-social-hover);
    text-decoration: none;
}

/* Feather-style SVG icons: stroked outlines, no fill */
.article-single__share-link svg {
    display: block;
    width: 16px;                                /* Figma: 16px icons inside 32px button */
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.article-single__featured-image,
.article-single__video {
    margin-bottom: var(--eln-space-xl);
}

.article-single__featured-image {
    border-radius: var(--eln-radius-xl);        /* Figma: 10px */
    overflow: hidden;
}

/* Featured image caption — native WP media caption */
.article-single__caption {
    margin-top: var(--eln-space-xs);
    font-family: var(--eln-font-ui);
    font-size: 0.75rem;                         /* Figma: Inter Regular 12px */
    color: var(--eln-color-text-muted);
    text-align: center;
}

.article-single__video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.article-single__disclosure {
    padding: var(--eln-space-sm) var(--eln-space-md);
    background: var(--eln-color-bg-alt);
    border-left: 3px solid var(--eln-badge-sponsored);
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
    font-style: italic;
    margin-bottom: var(--eln-space-xl);
}

/* ── 800px reading column ────────────────────────────────────────────────── */
/*
 * Header, content, and tags all share the same 800px centered column so that
 * breadcrumb, title, meta, body text, and tag pills all align vertically.
 * Featured image and video sit OUTSIDE this constraint (full container width).
 */

.article-single__header,
.article-single__featured-image,
.article-single__video,
.article-single__content,
.article-single__tags {
    max-width: var(--eln-article-column);
    margin-inline: auto;
}

/* ── Content typography ──────────────────────────────────────────────────── */

.article-single__content {
    font-family: var(--eln-font-body);
    font-size: var(--eln-font-size-lg);
    line-height: 1.7;                           /* slightly more open than 1.6 for 800px measure */
    color: var(--eln-color-text);
}

/* Normalize all direct children — prevents stray max-width from blocks */
.article-single__content > * {
    max-width: 100%;
}

.article-single__content p {
    margin-bottom: var(--eln-space-lg);
}

/* ── Pull quote — native WP Quote + Pull Quote blocks ────────────────────── */
/*
 * Covers three blockquote sources:
 *   - Block editor Standard Quote:  <blockquote class="wp-block-quote">
 *   - Block editor Pull Quote:      <figure class="wp-block-pullquote"><blockquote>
 *   - Classic editor fallback:      <blockquote> (no WP class)
 * All resolve to the same Figma visual treatment.
 */

.article-single__content blockquote {
    margin: var(--eln-space-xl) 0;
    padding: 20px 24px 20px 28px;           /* Figma: t20 r24 b20 l28 */
    background: #f2f2fa;                    /* Figma: lavender-white — no token, design spec */
    border: none;
    border-left: 4px solid var(--eln-color-accent);
    font-family: var(--eln-font-body);
    font-size: var(--eln-font-size-xl);     /* Inter SemiBold Italic 22px */
    font-weight: var(--eln-font-weight-semibold); /* Figma: SemiBold Italic */
    font-style: italic;
    line-height: 1.5;
    color: var(--eln-color-text);
}

.article-single__content blockquote p {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
}

.article-single__content blockquote cite,
.article-single__content blockquote footer {
    display: block;
    margin-top: var(--eln-space-sm);
    font-family: var(--eln-font-body);
    font-size: 0.75rem;                     /* 12px; xs token = 11px */
    font-style: normal;
    font-weight: var(--eln-font-weight-normal);
    color: var(--eln-color-text-muted);
}

/* ── Inline images & media (inside article content) ─────────────────────── */
/*
 * Two sources of inline images:
 *   Block editor:    <figure class="wp-block-image"><img></figure>
 *   Classic editor:  <figure class="wp-caption" style="width:Npx"><img></figure>
 *
 * All images fill the 800px content column. The 76px inset used at full
 * container width is removed — the column itself is the measure.
 */

/* All images in content: fill column, never overflow */
.article-single__content img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Rounded corners — block editor and classic editor images */
.article-single__content .wp-block-image img,
.article-single__content .wp-caption img {
    border-radius: var(--eln-radius-md);    /* 8px */
}

/* Classic editor figure: override WP's inline width:Npx constraint */
.article-single__content .wp-caption {
    width: 100% !important;
    max-width: 100%;
}

/* Gutenberg blocks: prevent any block from overflowing the column */
.article-single__content .wp-block {
    max-width: 100%;
}

.article-single__content .wp-block-image,
.article-single__content .wp-block-embed {
    max-width: 100%;
}

/* Embeds: responsive iframe — scoped to WP embed blocks only.
 * Bare iframe selector is intentionally omitted: arbitrary iframes
 * (contact forms, small widgets) should not be force-stretched to 800px. */
.article-single__content .wp-block-embed iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

/* Captions — block editor and classic editor */
.article-single__content .wp-block-image figcaption,
.article-single__content .wp-caption-text {
    font-family: var(--eln-font-body);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--eln-color-text-muted);
    text-align: center;
    margin-top: var(--eln-space-xs);
}

/* ── Badge overrides — single article context ────────────────────────────── */
/*
 * Global cards.css: border-radius: var(--eln-radius-sm) = 4px.
 * Figma article single spec: 2px for all badge types.
 * Scope badge: global uses transparent + muted border; Figma specifies lavender fill.
 * No tokens exist for 2px radius or #ededf5 — both are single-use, design spec only.
 */

.article-single .card__badge {
    border-radius: 2px;                     /* Figma: 2px vs global 4px — no token */
}

.article-single .card__badge--scope {
    background: #ededf5;                    /* Figma: light lavender solid — no token */
    color: var(--eln-color-text);
    border: none;
}

/* ── Author byline in meta row ───────────────────────────────────────────── */
/*
 * "Por " label — muted regular weight (Figma: Inter Regular, text-muted)
 * Author name  — dark semibold (Figma: Inter SemiBold, text-primary)
 */

.article-single__author-label {
    font-family: var(--eln-font-ui);
    font-weight: var(--eln-font-weight-normal);
    color: var(--eln-color-text-muted);
}

.article-single__author {
    font-family: var(--eln-font-ui);
    font-weight: var(--eln-font-weight-semibold);
    color: var(--eln-color-text);
}

/* ── Tags — pill row ─────────────────────────────────────────────────────── */
/*
 * the_tags() outputs: "Temas: <a>Tag</a>, <a>Tag</a>"
 * We target > a to style each tag as a bordered pill button.
 * The "Temas: " label span inherits the muted text style.
 * Matches .cat-tag-pills__pill from category.css exactly:
 * accent border + text, white bg, xs font, 28px height, red hover.
 */

.article-single__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eln-space-2);                     /* 8px — matches cat-tag-pills */
    margin-top: var(--eln-space-xl);
    padding-top: var(--eln-space-lg);
    border-top: 1px solid var(--eln-color-border);
    color: var(--eln-color-text-muted);
}

.article-single__tags > a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--eln-space-sm);
    border: 1px solid var(--eln-color-accent);
    border-radius: var(--eln-radius-full);
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-accent);
    background: var(--eln-color-bg);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--eln-transition), color var(--eln-transition);
}

.article-single__tags > a:hover {
    background: var(--eln-color-accent);
    color: var(--eln-color-text-inverse);
    text-decoration: none;
}

/* ── Author Bio Block ───────────────────────────────────────────────────────── */

.author-bio {
    display: flex;
    align-items: flex-start;
    gap: var(--eln-space-lg);
    max-width: var(--eln-article-column);                            /* aligns with article reading column */
    margin-inline: auto;
    margin-top: var(--eln-space-xl);
    padding: var(--eln-space-xl) 0;
    border-top: 1px solid var(--eln-color-border);
}

.author-bio__photo {
    flex-shrink: 0;
    width: 96px;                                /* Figma: 96px circular avatar */
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

.author-bio__body {
    flex: 1;
    min-width: 0;
}

.author-bio__name {
    margin: 0 0 var(--eln-space-xs);
    font-size: var(--eln-font-size-h4);         /* Figma: Inter Bold 22px */
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-text);
    line-height: var(--eln-line-height-tight);
}

.author-bio__title {
    margin: 0 0 var(--eln-space-sm);
    font-size: 0.75rem;                         /* Figma: Inter Medium 12px */
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-text-muted);
}

.author-bio__bio {
    margin: 0;
    font-size: 0.75rem;                         /* Figma: Inter Regular 12px */
    color: var(--eln-color-text-muted);
    line-height: var(--eln-line-height-base);
}

/* Author bio: stack photo above text on small screens */
@media (max-width: 599px) {
    .author-bio {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE & SEARCH HEADER
   Used by: archive.php, search.php
   ═══════════════════════════════════════════════════════════════════════════ */

.archive-header {
    padding: var(--eln-space-xl) 0 var(--eln-space-lg);
    margin-bottom: var(--eln-space-xl);
    border-bottom: 2px solid var(--eln-color-brand);
}

.archive-header__title {
    margin: 0 0 var(--eln-space-xs);
    font-size: var(--eln-font-size-2xl);
    font-weight: var(--eln-font-weight-bold);
    line-height: var(--eln-line-height-tight);
    color: var(--eln-color-text);
}

/* The matched search term rendered inside the title */
.archive-header__search-term {
    color: var(--eln-color-accent);
}

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

/* Result count shown on search pages */
.archive-header__count {
    margin: var(--eln-space-sm) 0 0;
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
}

/* ── Responsive: article single ─────────────────────────────────────────────── */

@media (max-width: 599px) {
    .article-single__title {
        font-size: var(--eln-font-size-2xl);    /* Figma mobile: Oswald Bold 28px */
        line-height: 1.25;                      /* Figma: 35px / 28px */
    }

    .article-single__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--eln-space-sm);
    }

    .article-single__share {
        align-self: flex-start;
    }

    /* On mobile: inline image inset removed — full column width */
    .article-single__content .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
        margin-inline: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE ARTICLE — READING PROGRESS BAR (.eln-reading-progress)
   ═══════════════════════════════════════════════════════════════════════════ */
/*
 * Thin fixed bar at the top of the viewport indicating reading progress
 * through the article body.  Single posts only.
 *
 * JS (assets/js/reading-progress.js) drives all behavior:
 *   - measures progress against .article-single__content (not full page)
 *   - accounts for Elementor sticky header offset at runtime
 *   - hides bar on short articles (scrollable range < 75 % of viewport)
 *   - adds .is-visible when reader scrolls to the content area
 *   - sets --eln-progress CSS custom property on each scroll tick
 *   - adds .eln-reading-progress--no-motion when prefers-reduced-motion active
 *
 * .eln-reading-progress          Fixed outer wrapper (opacity clip, no events)
 * .eln-reading-progress__bar     The filled portion; width = var(--eln-progress)
 */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */

.eln-reading-progress {
    position: fixed;
    /*
     * top uses the WordPress admin bar height CSS variable (WP 5.9+).
     * When a logged-in user has the admin bar visible, WordPress sets
     * --wp-admin--admin-bar--height to 32px (desktop) or 46px (mobile).
     * When the admin bar is absent/hidden the variable is not defined,
     * so the fallback 0px applies — bar sits at the absolute top.
     *
     * This prevents the admin bar (z-index 99999) from covering the bar
     * and avoids any z-index arms race.
     */
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 10000;          /* above Elementor sticky header (typically 9999) */
    pointer-events: none;    /* never intercept clicks or touch events */
    background: transparent;

    /* Start invisible; JS adds .is-visible once reader reaches the content. */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.eln-reading-progress.is-visible {
    opacity: 1;
}

/* ── Filled bar ──────────────────────────────────────────────────────────── */

.eln-reading-progress__bar {
    height: 100%;
    width: var(--eln-progress, 0%);
    background: var(--eln-color-accent);   /* brand red — matches badge colors */
    /* Short transition keeps the bar smooth without being distracting.
       150 ms linear matches typical scroll event frequency. */
    transition: width 150ms linear;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/*
 * JS adds .eln-reading-progress--no-motion when prefers-reduced-motion is set.
 * This removes both transitions so the bar snaps instantly — still functional,
 * just no animated movement.
 * The @media block is a CSS-only safety net for the same case.
 */

.eln-reading-progress--no-motion,
.eln-reading-progress--no-motion .eln-reading-progress__bar {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .eln-reading-progress,
    .eln-reading-progress__bar {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOURNALIST PROFILE SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Career Timeline ─────────────────────────────────────────────────────── */

.journalist-timeline {
    position: relative;
    padding-left: var(--eln-space-12);
    border-left: 2px solid var(--eln-color-primary-500);
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-6);
}

.journalist-timeline__item {
    position: relative;
}

.journalist-timeline__bullet {
    position: absolute;
    left: -60px; /* accounts for 48px padding + 12px half-width of bullet */
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--eln-color-primary-500);
    border: 4px solid var(--eln-color-text-inverse);
    box-shadow: 0 0 0 2px var(--eln-color-primary-500);
}

.journalist-timeline__year {
    display: block;
    font-family: var(--eln-font-ui);
    font-size: 0.75rem; /* 0.75rem (12px) — no token; --eln-font-size-xs = 0.6875rem (11px) */
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-primary-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: var(--eln-space-1);
}

.journalist-timeline__title {
    font-family: var(--eln-font-heading);
    font-size: var(--eln-font-size-h4);     /* 22px */
    font-weight: var(--eln-font-weight-bold);
    line-height: 1.4;
    color: var(--eln-color-text-primary);
    margin: 0 0 var(--eln-space-2);
}

.journalist-timeline__description {
    font-family: var(--eln-font-ui);
    font-size: 0.875rem; /* 0.875rem (14px) — no token; --eln-font-size-sm = 0.8125rem (13px) */
    line-height: 1.6;
    color: var(--eln-color-text-muted);
    margin: 0 0 var(--eln-space-2);
}

.journalist-timeline__tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--eln-color-primary-500);
    color: var(--eln-color-text-inverse);
    font-family: var(--eln-font-ui);
    font-size: 0.75rem; /* 0.75rem (12px) — no token; --eln-font-size-xs = 0.6875rem (11px) */
    font-weight: var(--eln-font-weight-bold);
    height: 33px; /* 33px — Figma fixed height, no height token */
    padding: 0 var(--eln-space-3);
    border-radius: var(--eln-radius-md);
}

/* ── Education Cards ─────────────────────────────────────────────────────── */

.journalist-education {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--eln-space-8);
}

.journalist-education__card {
    display: flex;
    gap: 20px; /* 20px — between --eln-space-4 (16px) and --eln-space-6 (24px); Figma spec */
    background: var(--eln-color-bg);
    border: 2px solid var(--eln-color-primary-500);
    border-radius: 16px; /* 16px — no --eln-radius token at this size; Figma spec */
    overflow: hidden;
    padding: var(--eln-space-6);
}

/* Even cards: dark border + dark badge */
.journalist-education__card:nth-child(even) {
    border-color: var(--eln-color-text-primary);
}

.journalist-education__badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background-color: var(--eln-color-primary-500);
    color: var(--eln-color-text-inverse);
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-h3);     /* 28px */
    font-weight: var(--eln-font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Even cards: dark badge */
.journalist-education__card:nth-child(even) .journalist-education__badge {
    background-color: var(--eln-color-text-primary);
}

.journalist-education__body {
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-xs);
}

.journalist-education__degree {
    font-family: var(--eln-font-heading);
    font-size: var(--eln-font-size-h2);     /* 36px */
    font-weight: var(--eln-font-weight-bold);
    line-height: 1.2;
    color: var(--eln-color-text-primary);
    margin: 0;
}

.journalist-education__institution {
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-lg);    /* 18px */
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-primary-500);
    margin: 0;
}

/* Even cards: institution label in dark color */
.journalist-education__card:nth-child(even) .journalist-education__institution {
    color: var(--eln-color-text-primary);
}

.journalist-education__description {
    font-family: var(--eln-font-ui);
    font-size: 0.875rem; /* 0.875rem (14px) — no token; --eln-font-size-sm = 0.8125rem (13px) */
    line-height: 1.6;
    color: var(--eln-color-text-muted);
    margin: 0;
}

/* ── Coverage Cards ──────────────────────────────────────────────────────── */

.journalist-coverage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--eln-space-6);
}

.journalist-coverage__card {
    display: flex;
    flex-direction: column;
    background: var(--eln-color-bg);
    border-radius: 16px; /* 16px — no --eln-radius token at this size; Figma spec */
    padding: var(--eln-space-8);
}

.journalist-coverage__icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--eln-color-primary-500);
    color: var(--eln-color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: var(--eln-space-4);
}

/* Even cards: black badge bg */
.journalist-coverage__card:nth-child(even) .journalist-coverage__icon-badge {
    background: var(--eln-color-text-primary);
}

/* Dashicons inside coverage badge — override WordPress default 20px sizing */
.journalist-coverage__icon-badge .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: inherit;
}

.journalist-coverage__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-2);
}

.journalist-coverage__title {
    font-family: var(--eln-font-heading);
    font-size: var(--eln-font-size-h3);     /* 28px */
    font-weight: var(--eln-font-weight-bold);
    line-height: 1.2;
    color: var(--eln-color-text-primary);
    margin: 0;
}

.journalist-coverage__description {
    font-family: var(--eln-font-ui);
    font-size: 0.875rem; /* 0.875rem (14px) — no token; --eln-font-size-sm = 0.8125rem (13px) */
    line-height: 1.6;
    color: var(--eln-color-text-muted);
    margin: 0;
}

.journalist-coverage__tagline {
    font-family: var(--eln-font-ui);
    font-size: 0.75rem; /* 0.75rem (12px) — no token; --eln-font-size-xs = 0.6875rem (11px) */
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-primary-500);
    margin: var(--eln-space-4) 0 0;
    padding-top: var(--eln-space-4);
    border-top: 1px solid var(--eln-color-grey-200);
}

/* ── Highlights List ─────────────────────────────────────────────────────── */

.journalist-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-4);
}

.journalist-highlights__row {
    display: flex;
    align-items: center;
    gap: var(--eln-space-3);
}

.journalist-highlights__icon-badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--eln-radius-md);
    background-color: var(--eln-color-primary-500);
    color: var(--eln-color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Highlights badge stays red on all rows — no alternation */

/* Dashicons inside highlights badge — match badge size (WordPress default is 20px) */
.journalist-highlights__icon-badge .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: inherit;
}

.journalist-highlights__content {
    display: flex;
    flex-direction: column;
    gap: 2px; /* 2px — below --eln-space-1 (4px) minimum; intentionally tight */
}

.journalist-highlights__title {
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-base);
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-text-inverse);
    line-height: 1.4;
}

.journalist-highlights__description {
    font-family: var(--eln-font-ui);
    font-size: 0.75rem; /* 0.75rem (12px) — no token; --eln-font-size-xs = 0.6875rem (11px) */
    color: var(--eln-color-text-inverse);
    line-height: 1.5;
}

/* ── Journalist Sections — Responsive ────────────────────────────────────── */

@media (max-width: 1024px) {
    .journalist-coverage {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .journalist-education {
        grid-template-columns: 1fr;
    }

    .journalist-coverage {
        grid-template-columns: 1fr;
    }
}

/* Search page styles → assets/css/search.css */