/**
 * @file plugins/themes/lumina/styles/academic/pinnacle-submissions.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Pinnacle experience presentation for the OJS Submissions page
 *        (submissions.tpl). Editorial hero band plus the Editorial Information
 *        Directory restyled as a single-separator index accordion.
 *
 * Scope & ownership:
 *   - Every rule is scoped under `body.lm-layout-pinnacle .page_submissions`,
 *     so the certified Zenith presentation (zenith-submissions.css) and every
 *     other experience remain untouched. The shared directory markup
 *     (`lm-submissions-section*`) is only re-styled inside this scope; the
 *     markup itself is unchanged and the Zenith branch is byte-identical.
 *   - The Pinnacle markup is gated on `experience->id == 'pinnacle'` in the
 *     template (same pattern as the information / about / contact pages).
 *   - The H1 is owned by the Page Context (ADR-62). This stylesheet only
 *     styles the presentation band below it - never another heading 1.
 *
 * Palette / token conformance:
 *   - THIS FILE IS NOT A PALETTE SOURCE. It defines no color ramp and no
 *     custom `--lm-*` color variables (the `--ill-*` bridge below maps the
 *     approved illustration asset onto the active Lumina palette; it declares
 *     no color values of its own).
 *   - Every color resolves from canonical Lumina tokens owned by
 *     PaletteEngine (`--lm-accent-*`, `--lm-primary`, `--lm-surface-*`,
 *     `--lm-border`, `--lm-text-*`, `--lm-link`, `--lm-focus-ring`,
 *     `--lm-success`) or from the static foundation tokens
 *     (`--lm-radius-*`, `--lm-motion-*`, `--lm-ease-*`, `--lm-font-heading-sans`).
 *     Zero hex/rgb/hsl literals appear below. The page adapts automatically
 *     whenever the active Lumina palette changes.
 *
 * Illustration conformance:
 *   - The hero artwork is the approved palette-aware asset
 *     (assets/images/academic/lumina_submissions_illustration_palette_ready.svg).
 *     It is inlined in the template (no duplicate asset file, no external URL)
 *     so the host palette can drive its colors. The asset's fill classes are
 *     resolved here, scoped under the artwork container, from `--ill-*`
 *     variables that are bridged to the active Lumina palette:
 *     Lumina palette -> `--lm-*` -> `--ill-*` -> SVG. No separate palette
 *     system, no hardcoded orange/green/blue values.
 *
 * Motion conformance:
 *   - Entrance choreography and the chevron/active states are gated on
 *     `prefers-reduced-motion: no-preference`. Panel expansion is driven by
 *     pinnacle-submissions.js (Web Animations API, distance-scaled duration,
 *     editorial easing), which also honours reduced motion.
 */

/* =========================================================
   1. HERO BAND (presentation below the Page Context H1)
   ========================================================= */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl, 2.5rem);
    align-items: center;
    padding: 2.75rem 0 3.25rem;
    margin: 0;
    border-bottom: 1px solid var(--lm-border);
}

/* Editorial two-column composition on desktop - content left, illustration right */
@media (min-width: 1180px) {
    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        gap: var(--space-2xl, 3rem);
        padding: 3rem 0 3.5rem;
    }
}

/* Tablet 768-1179px: keep the balanced two-column composition with a smaller
   illustration column, instead of stacking the content. */
@media (min-width: 768px) and (max-width: 1179px) {
    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
        gap: var(--space-lg, 1.5rem);
        padding: 2.5rem 0 3rem;
    }

    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork-img {
        max-width: 17rem;
    }
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__content {
    min-width: 0;
    max-width: 36rem;
}

/* Eyebrow - same editorial chrome as the information-pages hero:
   uppercase, tracked, accent colour, with a leading accent bar. */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-accent-700);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__eyebrow::before {
    content: "";
    width: 1.25rem;
    height: 2px;
    background: var(--lm-accent-600);
    border-radius: var(--lm-radius-full);
}

/* Short horizontal accent rule under the eyebrow */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__accent-line {
    margin-top: 1rem;
    width: 2.75rem;
    height: 3px;
    background: var(--lm-accent-600);
    border-radius: var(--lm-radius-full);
}

/* Submission state message - the hero's real, data-driven OJS content */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__message {
    margin-top: 1.5rem;
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__status {
    margin: 0;
    font-size: clamp(1rem, 1.4vw + 0.4rem, 1.15rem);
    line-height: 1.75;
    color: var(--lm-text-secondary);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__status--closed {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    color: var(--lm-text-primary);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__status--closed .fa {
    color: var(--lm-muted, var(--lm-text-secondary));
}

/* CTA actions - existing OJS actions (Login / Register / New Submission /
   View Submissions), styled as inline pill buttons. */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0.125rem;
    padding: 0.55rem 1.15rem;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--lm-accent-700);
    background: var(--lm-accent-50);
    border: 1px solid var(--lm-accent-100);
    border-radius: var(--lm-radius-full);
    transition: background var(--lm-motion-fast), border-color var(--lm-motion-fast), color var(--lm-motion-fast);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta:hover,
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta:focus {
    background: var(--lm-accent-100);
    border-color: var(--lm-accent-200);
    color: var(--lm-accent-800);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta--secondary {
    background: transparent;
    border-color: var(--lm-accent-200);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta--secondary:hover,
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta--secondary:focus {
    background: var(--lm-accent-50);
    border-color: var(--lm-accent-200);
    color: var(--lm-accent-800);
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta:focus-visible,
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__cta--secondary:focus-visible {
    outline: var(--lm-focus-ring);
    outline-offset: 2px;
}

/* =========================================================
   2. APPROVED ILLUSTRATION (palette bridge + scoped fill rules)
   ========================================================= */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork {
    /* Lumina palette -> --ill-* bridge. The approved asset consumes only
       --ill-* variables, so it re-themes with the active Lumina palette. */
    --ill-primary: var(--lm-primary);
    --ill-primary-dark: var(--lm-accent-700);
    --ill-primary-soft: var(--lm-accent-50);
    --ill-ink: var(--lm-text-primary);
    --ill-muted: var(--lm-text-secondary);
    --ill-line: var(--lm-border);
    --ill-paper: var(--lm-surface-card);
    --ill-bg: var(--lm-surface-muted);
    --ill-green: var(--lm-success);

    display: flex;
    align-items: center;
    justify-content: center;
}

body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork-img {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
}

/* Asset fill classes, resolved strictly inside the artwork container */
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .primary { fill: var(--ill-primary); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .primary-dark { fill: var(--ill-primary-dark); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .primary-soft { fill: var(--ill-primary-soft); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .ink { fill: var(--ill-ink); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .muted { fill: var(--ill-muted); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .line { fill: var(--ill-line); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .paper { fill: var(--ill-paper); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .bg { fill: var(--ill-bg); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .green { fill: var(--ill-green); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .none { fill: none; }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .stroke-primary { stroke: var(--ill-primary); }
body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork .stroke-line { stroke: var(--ill-line); }

/* =========================================================
   3. EDITORIAL INFORMATION DIRECTORY (index accordion)
      Shared markup, Pinnacle editorial-index presentation:
      single separator, counter gutter, chevron, no card boxes.
   ========================================================= */
body.lm-layout-pinnacle .page_submissions .lm-submissions-directory {
    counter-reset: lmPinnacleSubmissionsSeq;
    margin-top: 0.25rem;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section {
    counter-increment: lmPinnacleSubmissionsSeq;
    border-bottom: 1px solid var(--lm-border);
}

/* Full-width transparent header button */
body.lm-layout-pinnacle .page_submissions .lm-submissions-section__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    min-height: 52px;
    padding: 1.25rem 0.25rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__header:focus-visible {
    outline: var(--lm-focus-ring);
    outline-offset: 2px;
}

/* Counter gutter - the editorial index number */
body.lm-layout-pinnacle .page_submissions .lm-submissions-section__num {
    flex: 0 0 2.75rem;
    font-family: var(--lm-font-heading-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--lm-accent-600);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__num::before {
    content: counter(lmPinnacleSubmissionsSeq, decimal-leading-zero);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--lm-font-heading-sans);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lm-text-primary);
    transition: color var(--lm-motion-fast);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__header[aria-expanded="true"] .lm-submissions-section__title {
    color: var(--lm-accent-700);
}

/* Chevron - rotates in sync with the panel state */
body.lm-layout-pinnacle .page_submissions .lm-submissions-section__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--lm-accent-600);
    transition: transform var(--lm-motion-fast);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__header[aria-expanded="true"] .lm-submissions-section__chevron {
    transform: rotate(180deg);
}

/* Panel. Height is driven by pinnacle-submissions.js (WAAPI); the content is
   clipped by overflow while it grows. `hidden` fully removes closed panels. */
body.lm-layout-pinnacle .page_submissions .lm-submissions-section__body {
    overflow: hidden;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__body[hidden] {
    display: none !important;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section__body-inner {
    max-width: 72ch;
    padding: 0 0 1.75rem 4rem;
}

/* Rich OJS content typography inside the panels */
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--lm-text-secondary);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content p {
    margin: 0 0 1rem;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content p:last-child {
    margin-bottom: 0;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content a {
    color: var(--lm-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--lm-motion-fast);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content a:hover,
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content a:focus {
    color: var(--lm-link-hover);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content ul,
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content li {
    margin: 0.25rem 0;
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content h1,
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content h2,
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content h3 {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--lm-font-heading-sans);
    font-weight: 700;
    line-height: 1.3;
    color: var(--lm-text-primary);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content h1 { font-size: 1.5rem; }
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content h2 { font-size: 1.3rem; }
body.lm-layout-pinnacle .page_submissions .lm-submissions-rich-content h3 { font-size: 1.1rem; }

/* Submit-to-section link inside section policy panels */
body.lm-layout-pinnacle .page_submissions .lm-submissions-section-submit-link {
    margin: 1.25rem 0 0;
    font-weight: 600;
    color: var(--lm-text-primary);
}

body.lm-layout-pinnacle .page_submissions .lm-submissions-section-submit-link a {
    color: var(--lm-accent-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================================
   4. MOTION
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__content {
        animation: lmPinnacleSubmissionsRise 560ms var(--lm-ease-decelerate) both;
    }

    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork {
        animation: lmPinnacleSubmissionsFade 640ms var(--lm-ease-decelerate) 120ms both;
    }
}

@keyframes lmPinnacleSubmissionsRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lmPinnacleSubmissionsFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* =========================================================
   5. RESPONSIVE (mobile-first refinements)
   ========================================================= */
@media (max-width: 767px) {
    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero {
        gap: var(--space-lg, 1.5rem);
        padding: 2rem 0 2.5rem;
    }

    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-hero__artwork-img {
        max-width: 18rem;
        margin-inline: auto;
    }

    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-section__num {
        flex-basis: 2.25rem;
    }

    body.lm-layout-pinnacle .page_submissions .lm-pinnacle-submissions-section__body-inner {
        padding-left: 2.5rem;
    }
}