/**
 * Archivo : pages/article.css
 * Scope   : Exclusivo de frontend/article.php
 * Función : Hero con media editorial, body estructurado, Sources y Share.
 * Depende : core.css, pages.css, hero.css
 */

/* =============================================================================
   1. LAYOUT DE SECCIÓN
   ============================================================================= */

.article-hero { background: #090909; }
.article-hero__image { position: absolute; z-index: 0; inset: -7rem 0; width: 100%; height: calc(100% + 14rem); object-fit: cover; object-position: var(--article-focus-x, 50%) var(--article-focus-y, 50%); transform: translate3d(0, var(--hero-parallax-bg-y), 0); transform-origin: center; will-change: transform; }
.article-hero::before { z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(5 5 5 / 94%) 0%, rgb(5 5 5 / 82%) 48%, rgb(5 5 5 / 56%) 100%), radial-gradient(circle at 78% 20%, rgb(242 194 48 / 18%), transparent 34rem); transform: none; }
.article-hero > .breadcrumbs,
.article-hero > .article__header { z-index: 2; }
.article-content { line-height: 1.75; }
.article-content > * { margin: 0; }
.resource-view-trigger { display: block; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.article-content ul,
.article-content ol { display: grid; gap: var(--space-2); padding-inline-start: 1.4rem; color: var(--color-muted); }


.article__content-layout { display: block; margin-block: clamp(1.75rem, 3.5vw, 3rem); }
.article__advertising { display: none; }

@media (min-width: 64rem) {
    .article__content-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        gap: clamp(1.5rem, 3vw, 3rem);
    }

    .article__body { min-width: 0; }
    .article__advertising { display: block; align-self: stretch; }
    .article__advertising .swd-ad-slot--vertical {
        position: sticky;
        top: max(7rem, calc(50dvh - 300px));
    }
}

@media (min-width: 75rem) {
    .article__content-layout { gap: clamp(2rem, 4vw, 4rem); }
}

/* =============================================================================
   2. ENCABEZADO DE SECCIÓN
   ============================================================================= */

.article-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: rgb(255 255 255 / 72%); font-size: 0.92rem; }
.article-hero__date,
.article-hero__views { color: inherit; }
.article-hero__views { font-variant-numeric: tabular-nums; }
.article-hero__meta-separator { color: var(--color-accent); }

/* =============================================================================
   3. COMPONENTES PRINCIPALES
   ============================================================================= */

.article-content__highlight { padding: clamp(var(--space-3), 4vw, var(--space-5)); border-inline-start: 0.3rem solid var(--color-accent); background: linear-gradient(120deg, rgb(242 194 48 / 14%), transparent); color: var(--color-text); font-size: clamp(1.2rem, 3vw, 1.65rem); }
.article-content__highlight p { color: inherit; }
.article-sources { border-block: 1px solid var(--color-border); }
.article-sources summary { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; padding-block: 0.75rem; color: var(--color-text); font-weight: 700; cursor: pointer; list-style: none; }
.article-sources summary::-webkit-details-marker { display: none; }
.article-sources summary::after { color: var(--color-accent); content: "+"; }
.article-sources[open] summary::after { content: "−"; }
.article-sources ol { padding-block: 0 1rem; }
.article-sources a { color: var(--color-muted); }
.article-share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.article-share__toggle,
.article-share__actions > * { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer; }
.article-share svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.article-share__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 100%; }
.article-share__actions[hidden] { display: none; }
.article-share__status { position: absolute; z-index: 3; inset-block-start: calc(100% + 0.35rem); inset-inline-start: 0; max-width: min(28rem, 100%); margin: 0; padding: 0.45rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.82rem; opacity: 0; pointer-events: none; visibility: hidden; }
.article-share__status:not(:empty) { opacity: 1; visibility: visible; }

/* =============================================================================
   4. ESTADOS E INTERACCIONES
   ============================================================================= */

.article-sources summary:hover,
.article-sources summary:focus-visible,
.article-sources a:hover,
.article-sources a:focus-visible,
.article-share__toggle:hover,
.article-share__toggle:focus-visible,
.article-share__actions > *:hover,
.article-share__actions > *:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }

/* =============================================================================
   5. RESPONSIVE
   ============================================================================= */

@media (max-width: 47.99rem) {
    .article-share { align-items: stretch; flex-direction: column; }
    .article-share__toggle { justify-content: center; }
    .article-share__actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-share__actions[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .article-hero__image { transform: none; will-change: auto; }
    .article-share *, .article-sources * { scroll-behavior: auto; }
}