/**
 * @file plugins/themes/lumina/styles/components/issue-hero.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Reusable issue hero banner component.
 */

.lm-issue-hero {
    display: flex;
    flex-direction: row;
    gap: var(--space-lg);
    background-color: var(--lm-cmp-card-bg, var(--lm-surface-card, #ffffff));
    border: 1px solid var(--lm-cmp-card-border, var(--lm-border, #e5e7eb));
    border-radius: var(--lm-radius-lg, 8px);
    box-shadow: var(--lm-shadow-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    align-items: flex-start;
}

/* Blend seamlessly inside pre-existing container card on home page */
.lm-pinnacle-issue-toc .lm-issue-hero {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--space-lg);
}

/* 1. Cover Image (Left Side) */
.lm-hero-cover {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lm-radius-md, 6px);
    overflow: hidden;
    border: 1px solid var(--lm-cmp-card-border, var(--lm-border, #e5e7eb));
    box-shadow: var(--lm-shadow-sm);
    background-color: var(--lm-surface-muted, #f3f4f6);
}

.lm-hero-cover img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 270px; /* Cap image vertical stretch */
}

/* 2. Metadata Details (Right Side) */
.lm-hero-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-sm);
}

.lm-hero-series {
    font-size: var(--lm-font-size-xs, 0.75rem);
    font-weight: var(--lm-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lm-text-secondary, #6b7280);
}

.lm-hero-title {
    font-size: var(--lm-font-size-2xl, 1.5rem);
    font-weight: var(--lm-weight-bold, 700);
    color: var(--lm-sem-text-dark, #111827);
    margin: 0;
    line-height: var(--lm-lh-tight, 1.25);
}

.lm-hero-description {
    font-size: var(--lm-font-size-sm, 0.875rem);
    color: var(--lm-text-secondary, #4b5563);
    line-height: var(--lm-lh-normal, 1.5);
}

.lm-hero-description p {
    margin: 0 0 var(--space-xs) 0;
}

.lm-hero-description p:last-child {
    margin-bottom: 0;
}

/* Split-Badge Meta Row (DOI & Published Date) */
.lm-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.lm-hero-doi,
.lm-hero-published,
.lm-hero-pub-id {
    display: inline-flex;
    align-items: center;
    font-size: var(--lm-font-size-xs, 0.75rem);
    border-radius: var(--lm-radius-sm, 4px);
    border: 1px solid var(--lm-cmp-card-border, var(--lm-border, #e5e7eb));
    overflow: hidden;
    line-height: 1.2;
}

.lm-hero-doi .doi-label,
.lm-hero-published .published-label,
.lm-hero-pub-id .pub-id-label {
    background-color: var(--lm-surface-muted, #f3f4f6);
    color: var(--lm-text-secondary, #4b5563);
    padding: var(--space-xs) var(--space-sm);
    font-weight: var(--lm-weight-semibold, 600);
    border-right: 1px solid var(--lm-cmp-card-border, var(--lm-border, #e5e7eb));
}

.lm-hero-doi .doi-val,
.lm-hero-published .published-val,
.lm-hero-pub-id .pub-id-val {
    background-color: var(--lm-cmp-card-bg, #ffffff);
    color: var(--lm-sem-text-dark, #111827);
    padding: var(--space-xs) var(--space-sm);
}

.lm-hero-doi .doi-val a,
.lm-hero-pub-id .pub-id-val a {
    color: var(--lm-link, #0284c7);
    text-decoration: none;
    font-weight: var(--lm-weight-medium, 500);
}

.lm-hero-doi .doi-val a:hover,
.lm-hero-pub-id .pub-id-val a:hover {
    text-decoration: underline;
}

/* 3. Issue Downloads Block */
.lm-hero-downloads {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lm-hero-downloads-label {
    font-size: var(--lm-font-size-xs, 0.75rem);
    font-weight: var(--lm-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lm-text-secondary, #6b7280);
}

.lm-hero-downloads ul.galleys_links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.lm-hero-downloads ul.galleys_links a.obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--lm-link, #0284c7);
    border-radius: var(--lm-radius-sm, 4px);
    font-size: var(--lm-font-size-xs, 0.75rem);
    font-weight: var(--lm-weight-semibold, 600);
    text-decoration: none;
    color: var(--lm-link, #0284c7);
    background-color: transparent;
    transition: all var(--lm-motion-fast, 150ms ease-in-out);
}

.lm-hero-downloads ul.galleys_links a.obj_galley_link:hover {
    color: #ffffff;
    background-color: var(--lm-link, #0284c7);
}

/* 4. Article Count Badge (Structured matching DOI/Published) */
.lm-hero-article-count {
    display: inline-flex;
    align-items: center;
    font-size: var(--lm-font-size-xs, 0.75rem);
    border-radius: var(--lm-radius-sm, 4px);
    border: 1px solid var(--lm-cmp-card-border, var(--lm-border, #e5e7eb));
    overflow: hidden;
    line-height: 1.2;
}

.lm-hero-article-count .lm-hero-badge-label {
    background-color: var(--lm-surface-muted, #f3f4f6);
    color: var(--lm-text-secondary, #4b5563);
    padding: var(--space-xs) var(--space-sm);
    font-weight: var(--lm-weight-semibold, 600);
    border-right: 1px solid var(--lm-cmp-card-border, var(--lm-border, #e5e7eb));
}

.lm-hero-article-count .lm-hero-badge-value {
    background-color: var(--lm-cmp-card-bg, #ffffff);
    color: var(--lm-sem-text-dark, #111827);
    padding: var(--space-xs) var(--space-sm);
}

/* 5. Quick Actions Area */
.lm-hero-actions {
    margin-top: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.lm-hero-action {
    display: inline-flex;
}

/* ==========================================================================
   Vanguard Issue Detail V1.1 — refinements
   1) Strengthen ambient masthead background (still reduced-motion safe).
   2) Replace the V1 2px full-row outline with a 2px logical-start precision
      beam + soft tint + slight shadow elevation. NO translate / NO scale.
   3) Compact horizontal article row layout (cover left, content middle,
      actions right) inside .lmv-paginated; remove inter-row gradient
      dividers and the cover image scale-on-hover.
   4) Remove the long border-top divider above the pagination; tighten the
      pagination to a compact premium footer.
   5) Page size reduced 10 -> 5 (template data attribute + JS default).
   All rules are additive; no existing rule above was modified.
   ========================================================================== */

/* 1) Ambient masthead background (slightly stronger than V1) ----------------- */
.lm-issue-hero { position: relative; overflow: hidden; }
.lm-issue-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(65% 85% at 12% 8%, rgba(var(--lm-primary-rgb), 0.11), transparent 60%),
        radial-gradient(55% 75% at 95% 110%, rgba(var(--lm-primary-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, color-mix(in srgb, var(--lm-primary) 4%, transparent), transparent 60%);
    animation: lmv-ambient-drift 14s ease-in-out infinite alternate;
}
.lm-issue-hero > * { position: relative; z-index: 1; }
@keyframes lmv-ambient-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: .9; }
    50%  { transform: translate3d(1.5%, -1%, 0) scale(1.02); opacity: 1;  }
    100% { transform: translate3d(-1%, 1%, 0) scale(1);   opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {

/* 2) Article stream row layout (Vanguard V1.1) ------------------------------- */
/* Override the existing stacked layout + gradient inter-row dividers + cover
   scale-on-hover ONLY inside .lmv-paginated (the issue detail scope), and
   replace the V1 full-row outline with a 2px logical-start precision beam. */
.lmv-paginated .obj_article_summary.lm-art-summary {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--space-md, 1rem);
    align-items: center;
    padding: var(--space-sm, .75rem) var(--space-md, 1rem);
    margin: 0;
    background: var(--lm-surface-card, var(--lm-surface));
    border: 1px solid var(--lm-border);
    border-left: 2px solid transparent;
    border-radius: var(--lm-radius-md, 10px);
    box-shadow: none;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    position: relative;
    overflow: hidden;
}
.lmv-paginated .obj_article_summary.lm-art-summary + .obj_article_summary.lm-art-summary {
    margin-top: var(--space-2xs, .25rem);
}
.lmv-paginated .obj_article_summary.lm-art-summary::before { content: none; }
.lmv-paginated .obj_article_summary.lm-art-summary:hover,
.lmv-paginated .obj_article_summary.lm-art-summary:focus-within {
    background: color-mix(in srgb, var(--lm-state-hover-tint, var(--lm-primary)) 4%, var(--lm-surface-card, var(--lm-surface)));
    border-left-color: var(--lm-primary);
    border-top-color: color-mix(in srgb, var(--lm-primary) 35%, var(--lm-border));
    border-right-color: color-mix(in srgb, var(--lm-primary) 35%, var(--lm-border));
    border-bottom-color: color-mix(in srgb, var(--lm-primary) 35%, var(--lm-border));
    box-shadow: 0 4px 16px -8px rgba(var(--lm-primary-rgb), 0.18), var(--lm-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.lmv-paginated .obj_article_summary.lm-art-summary a:focus-visible {
    outline: 2px solid var(--lm-focus-ring, var(--lm-primary));
    outline-offset: 2px;
    border-radius: var(--lm-radius-sm, 4px);
}
.lmv-paginated .obj_article_summary.lm-art-summary .lm-art-title a {
    color: var(--lm-text-primary);
    text-decoration: none;
    transition: color 150ms ease;
}
.lmv-paginated .obj_article_summary.lm-art-summary:hover .lm-art-title a,
.lmv-paginated .obj_article_summary.lm-art-summary:focus-within .lm-art-title a {
    color: var(--lm-link-hover, var(--lm-primary));

/* Thumbnail column (compact, fixed) */
.lmv-paginated .obj_article_summary .lm-art-cover {
    width: 96px;
    height: 64px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--lm-radius-sm, 6px);
    background: var(--lm-surface-muted, rgba(0,0,0,.04));
}
.lmv-paginated .obj_article_summary .lm-art-cover a {
    display: block;
    width: 100%;
    height: 100%;
}
.lmv-paginated .obj_article_summary .lm-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--lm-radius-sm, 6px);
    border: none;
    display: block;
    transition: none;
}
.lmv-paginated .obj_article_summary:hover .lm-art-img,
.lmv-paginated .obj_article_summary:hover .lm-art-cover-fallback { transform: none; }
.lmv-paginated .obj_article_summary .lm-art-cover-fallback {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--lm-radius-sm, 6px);
    transition: none;
}
.lmv-paginated .obj_article_summary .lm-art-cover-fallback span {
    font-size: var(--lm-font-size-sm, .9rem);
}

/* Content column (middle) */
.lmv-paginated .obj_article_summary .lm-art-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, .25rem);
    flex-grow: 1;
    min-width: 0;
}
.lmv-paginated .obj_article_summary .lm-art-title {
    font-size: var(--lm-font-size-base, 1rem);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -.005em;
}
.lmv-paginated .obj_article_summary .lm-art-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.lmv-paginated .obj_article_summary .lm-art-author-row { flex-wrap: wrap; gap: .5rem; }
.lmv-paginated .obj_article_summary .lm-art-affiliations {
    font-size: var(--lm-font-size-xs, .78rem);
    padding-left: var(--space-sm, 1rem);
    line-height: 1.35;
}
.lmv-paginated .obj_article_summary .lm-art-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    font-size: var(--lm-font-size-xs, .78rem);
    color: var(--lm-text-secondary);
    margin-top: .1rem;
}
.lmv-paginated .obj_article_summary .lm-art-metrics-row .lm-art-metric-left,
.lmv-paginated .obj_article_summary .lm-art-metrics-row .lm-art-metric-right {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.lmv-paginated .obj_article_summary .lm-art-metrics-row .fa {
    color: var(--lm-text-muted);
    font-size: .7rem;
    width: 1em;
    text-align: center;
}
.lmv-paginated .obj_article_summary .lm-art-metrics-row .lm-label { color: var(--lm-text-muted); }

/* Actions column (right) */
.lmv-paginated .obj_article_summary .lm-art-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}
.lmv-paginated .obj_article_summary .lm-art-galleys {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lmv-paginated .obj_article_summary .lm-art-galleys li { list-style: none; margin: 0; padding: 0; }
.lmv-paginated .obj_article_summary .lm-art-galleys a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    font-size: var(--lm-font-size-xs, .78rem);
    font-weight: 600;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-sm, 6px);
    background: var(--lm-surface, transparent);
    color: var(--lm-text-primary);
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    line-height: 1.2;
}
.lmv-paginated .obj_article_summary .lm-art-galleys a:hover {
    border-color: var(--lm-primary);
    color: var(--lm-primary);
    background: color-mix(in srgb, var(--lm-primary) 6%, transparent);
    text-decoration: none;
}
.lmv-paginated .obj_article_summary .lm-art-doi {
    display: inline-flex;
    align-items: center;
    font-size: var(--lm-font-size-xs, .72rem);
}
.lmv-paginated .obj_article_summary .lm-art-doi-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid var(--lm-accent);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 150ms ease, color 150ms ease;
    line-height: 1.2;
}
.lmv-paginated .obj_article_summary .lm-art-doi-link:hover { border-color: var(--lm-link); color: var(--lm-link); }
.lmv-paginated .obj_article_summary .lm-art-doi-link .doi-label {
    padding: .15rem .5rem;
    font-size: var(--lm-font-size-xs, .7rem);
    font-weight: 700;
    background: var(--lm-accent);
    color: var(--lm-text-inverse);
}
.lmv-paginated .obj_article_summary .lm-art-doi-link .doi-val {
    padding: .15rem .5rem;
    font-size: var(--lm-font-size-xs, .7rem);
    background: var(--lm-surface-card);
    color: var(--lm-text-secondary);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .lmv-paginated .obj_article_summary.lm-art-summary,
    .lmv-paginated .obj_article_summary.lm-art-summary .lm-art-title a,

/* 3) Frontend-only progressive pagination (compact premium footer) ----------- */
.lmv-paginated .cmp_article_list { transition: opacity 180ms ease; }
.lmv-paginated .cmp_article_list.lmv-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .lmv-paginated .cmp_article_list { transition: none; }
}

.lmv-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, .75rem);
    margin-top: var(--space-md, 1.25rem);
    padding: 0;
    border-top: 0;
    background: transparent;
}
.lmv-pagination .lmv-page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    order: 1;
}
.lmv-pagination .lmv-pagination-info {
    order: 2;
    margin: 0;
    color: var(--lm-text-muted, var(--lm-text-secondary));
    font-size: var(--lm-font-size-sm, .85rem);
}
.lmv-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    border-radius: var(--lm-radius-sm, 6px);
    border: 1px solid var(--lm-border, #e5e7eb);
    background: var(--lm-surface, transparent);
    color: var(--lm-text-primary);
    font-size: var(--lm-font-size-sm, .85rem);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.lmv-page-btn:hover:not(:disabled):not(.lmv-page-active) {
    background: color-mix(in srgb, var(--lm-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--lm-primary) 30%, transparent);
    color: var(--lm-primary);
}
.lmv-page-btn:focus-visible {
    outline: 2px solid var(--lm-focus-ring, var(--lm-primary));
    outline-offset: 2px;
}
.lmv-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.lmv-page-btn.lmv-page-active {
    background: var(--lm-primary);
    color: var(--lm-primary-contrast, #fff);
    border-color: var(--lm-primary);
}
.lmv-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    color: var(--lm-text-muted, var(--lm-text-secondary));
}
@media (prefers-reduced-motion: reduce) { .lmv-page-btn { transition: none; } }

/* Pagination responsive: stack info line on narrow viewports */
@media (max-width: 640px) {
    .lmv-pagination { justify-content: center; }
    .lmv-pagination .lmv-pagination-info { text-align: center; order: 3; flex-basis: 100%; }
}

/* Responsive: collapse row to 2 columns (cover + content) on narrow viewports */
@media (max-width: 720px) {
    .lmv-paginated .obj_article_summary.lm-art-summary {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .lmv-paginated .obj_article_summary .lm-art-footer {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: var(--space-2xs, .25rem);
        border-top: 1px dashed var(--lm-border);
        margin-top: var(--space-2xs, .25rem);
    }
    .lmv-paginated .obj_article_summary .lm-art-galleys { justify-content: flex-start; }
    .lmv-paginated .obj_article_summary .lm-art-cover { width: 72px; height: 54px; }
}

    .lmv-paginated .obj_article_summary .lm-art-galleys a,
    .lmv-paginated .obj_article_summary .lm-art-doi-link { transition: none; }
}

}

    .lm-issue-hero::before { animation: none; }
}


.lm-hero-action a.obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--lm-link, #0284c7);
    border-radius: var(--lm-radius-md, 6px);
    font-size: var(--lm-font-size-xs, 0.75rem);
    font-weight: var(--lm-weight-semibold, 600);
    text-decoration: none;
    color: var(--lm-link, #0284c7);
    background-color: var(--lm-surface-card, #ffffff);
    box-shadow: var(--lm-shadow-sm);
    transition: all var(--lm-motion-fast, 150ms ease-in-out);
}

.lm-hero-action a.obj_galley_link:hover {
    color: #ffffff;
    background-color: var(--lm-link, #0284c7);
}

/* 6. Section Divider */
.lm-hero-divider {
    width: 100%;
    border-top: 1px solid var(--lm-border, #e5e7eb);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
}