/**
 * @file        section/archive/archive.css
 * @location    /section/archive/archive.css
 * @description Archiv — Einzeljahrgang mit Pills/Select, Stats, 3-Spalten-Grid.
 *              Prefix: arv__ (alle Selektoren).
 *
 *              PILL-STATES:
 *                Inaktiv:  C2 BG, C6 Text, 3px solid #ffffff (weiß)
 *                Aktiv:    C2 BG, C1 Text, 3px solid C1 (dunkel)
 *                Hover:    C10 BG, C1 Text, 3px solid C1
 *
 *              FARBEN (COLOR-GUIDE.md — alle ≥ 7:1):
 *                Sektion BG:     --color-surface  #eef2f7
 *                Eyebrow:        --color-blue  C3  / surf  7.55 ✓
 *                Title:          --color-ink   C5  / surf  12.47 ✓
 *                Subtitle:       --color-ink-soft C6 / surf 7.91 ✓
 *                Pill-idle text: --color-ink-soft C6 / C2  8.89 ✓
 *                Pill-active:    --color-navy  C1  / C2   12.61 ✓
 *                Pill-hover:     --color-navy  C1  / C10  10.31 ✓
 *                Stat value:     --color-ink   C5  / surf  12.47 ✓
 *                Stat label:     --color-ink-soft C6 / surf 7.91 ✓
 *                Card-month:     --color-ink   C5  / C2   14.02 ✓
 *                Card-meta:      --color-ink-soft C6 / C2  8.89 ✓
 *
 * @version     4.0.0
 * @changelog
 *   1.0.0  2026-03-18  Erstversion.
 *   4.0.0  2026-03-18  Einzeljahrgang. Pills/Select. Jahresstatistik.
 *                      3-Spalten-Grid. max border-radius 6px.
 */

/* ── Section ─────────────────────────────────────────────────────── */
.arv__section {
    background: var(--color-surface);
    padding:    var(--pad-section);
}
.arv__inner {
    max-width: var(--max-content);
    margin:    0 auto;
    padding:   0 var(--page-padding-x);
}

/* ── Header ──────────────────────────────────────────────────────── */
.arv__header { margin-bottom: var(--space-6); }

/* C3/surf 7.55:1 ✓ */
.arv__eyebrow {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color:          var(--color-blue);
    margin:         0 0 var(--space-2);
}
/* C5/surf 12.47:1 ✓ */
.arv__title {
    font-size:      var(--text-3xl);
    font-weight:    var(--weight-black);
    color:          var(--color-ink);
    letter-spacing: var(--tracking-tight);
    margin:         0 0 var(--space-2);
    line-height:    var(--leading-tight);
}
/* C6/surf 7.91:1 ✓ */
.arv__subtitle {
    font-size:  var(--text-base);
    color:      var(--color-ink-soft);
    margin:     0;
}

/* ════════════════════════════════════════════════════════════════════
   JAHR-NAVIGATION
   ════════════════════════════════════════════════════════════════════ */

/*
 * Sticky-Wrapper: year-nav + year-stats kleben zusammen am Top.
 * top = --nav-height (62px) damit der fixe Header nicht überdeckt wird.
 * Hintergrund = --color-surface (identisch mit Section-BG) → nahtlos.
 * z-index 10 damit Karten beim Scrollen darunter verschwinden.
 */
.arv__sticky {
    position:      sticky;
    top:           var(--nav-height, 62px);
    z-index:       9;
    background:    var(--color-surface);
    padding:       var(--space-2) 0;
    box-shadow:    0 4px 12px -4px transparent;
    transition:    box-shadow .2s ease;
    margin-bottom: var(--space-5);
}
.arv__sticky--shadow {
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .12);
}

.arv__year-nav {
    margin-bottom: var(--space-2);
}

/* ── Pills (Desktop) ─────────────────────────────────────────────── */
.arv__pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
    /* Mobile: ausblenden via Media Query unten */
}

/* Skeleton-Pills */
.arv__pill-skel {
    display:       inline-block;
    width:         64px;
    height:        42px;
    background:    var(--color-white);
    border:        3px solid var(--color-white);
    border-radius: var(--radius-sm);
    position:      relative;
    overflow:      hidden;
}
.arv__pill-skel::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%);
    animation:  arv__shimmer 1.4s ease-in-out infinite;
}

/*
 * PILL STATES:
 *   idle:   C2 BG  · C6 Text · border 3px solid #ffffff (weiß, dekorativ)
 *   active: C2 BG  · C1 Text · border 3px solid C1     (dunkel, sichtbar)
 *   hover:  C10 BG · C1 Text · border 3px solid C1
 *
 * Alle Text-Kontraste ≥ 7:1 (COLOR-GUIDE).
 */
.arv__pill {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     64px;
    height:        42px;
    padding:       0 var(--space-4);
    background:    var(--color-white);
    border:        3px solid var(--color-white);     /* idle: weiße Ramka */
    border-radius: var(--radius-sm);
    color:         var(--color-ink-soft);            /* C6/C2 8.89:1 ✓ */
    font-family:   var(--font-base);
    font-size:     var(--text-base);
    font-weight:   var(--weight-bold);
    cursor:        pointer;
    transition:    background var(--transition-fast),
                   border-color var(--transition-fast),
                   color var(--transition-fast);
    user-select:   none;
}

/* Hover: C10 BG, C1 tekst, C1 border — wyraźna zmiana */
.arv__pill:hover:not(.arv__pill--active) {
    background:   var(--color-ice);      /* C10 */
    border-color: var(--color-navy);     /* C1 */
    color:        var(--color-navy);     /* C1/C10 10.31:1 ✓ */
}

/* Aktiv: C2 BG, C1 tekst, C1 border — dunkel und klar */
.arv__pill--active {
    background:   var(--color-white);
    border-color: var(--color-navy);     /* 3px dunkel */
    color:        var(--color-navy);     /* C1/C2 12.61:1 ✓ */
    cursor:       default;
}

.arv__pill:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: 2px;
}

/* ── Select (Mobile) ─────────────────────────────────────────────── */
.arv__sel-label {
    display:     none;    /* via MQ einblenden */
    font-size:   var(--text-sm);
    font-weight: var(--weight-bold);
    color:       var(--color-ink-soft);
    margin-bottom: var(--space-2);
}
.arv__year-select {
    display:       none;   /* via MQ einblenden */
    width:         100%;
    background:    var(--color-white);
    border:        3px solid var(--color-navy);
    border-radius: var(--radius-sm);
    color:         var(--color-ink);      /* C5/C2 14.02:1 ✓ */
    font-family:   var(--font-base);
    font-size:     var(--text-base);
    font-weight:   var(--weight-bold);
    padding:       var(--space-2) var(--space-3);
    cursor:        pointer;
    outline:       none;
}
.arv__year-select:focus { border-color: var(--color-blue); }

/* ════════════════════════════════════════════════════════════════════
   JAHRESSTATISTIK — kompakt, einzeilig
   ════════════════════════════════════════════════════════════════════ */
/* C10/C1 10.31:1 ✓  C2/C1 12.61:1 ✓  C6/C2 8.89:1 ✓  C1/C2 12.61:1 ✓ */
.arv__year-stats {
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    padding:       var(--space-2) var(--space-4);
    background:    var(--color-white);
    border:        3px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height:    40px;
    overflow:      hidden;
}
.arv__yst-block--year {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    background:    var(--color-navy);
    border-radius: var(--radius-xs);
    padding:       var(--space-1) var(--space-3);
    flex-shrink:   0;
}
.arv__yst-label-year {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color:          var(--color-ice);
    line-height:    1;
}
.arv__yst-val-year {
    font-size:      var(--text-lg);
    font-weight:    var(--weight-black);
    color:          var(--color-white);
    letter-spacing: var(--tracking-tight);
    line-height:    1;
}
.arv__yst-block {
    display:     flex;
    align-items: baseline;
    gap:         var(--space-2);
    line-height: 1;
}
.arv__yst-block + .arv__yst-block::before {
    content:   '·';
    color:     var(--color-border);
    font-size: var(--text-base);
}
.arv__yst-label {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color:          var(--color-ink-soft);
}
.arv__yst-val {
    font-size:            var(--text-lg);
    font-weight:          var(--weight-black);
    color:                var(--color-navy);
    font-variant-numeric: tabular-nums;
    line-height:          1;
}

/* ════════════════════════════════════════════════════════════════════
   AUSGABEN-GRID — 3 Spalten
   ════════════════════════════════════════════════════════════════════ */
.arv__grid-wrap { min-height: 200px; }

.arv__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-5);
    list-style:            none;
    padding:               0;
    margin:                0;
}

/* ── Karte ───────────────────────────────────────────────────────── */
.arv__card {
    background:     var(--color-white);
    border:         3px solid var(--color-border);
    border-radius:  var(--radius-sm);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    box-shadow:     var(--shadow-xs);
    transition:     transform var(--transition-base),
                    box-shadow var(--transition-base),
                    border-color var(--transition-fast);
}
.arv__card:hover {
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-md);
    border-color: var(--color-blue);
}

/* Karten-Eintritt: slideUp + fadeIn, gestaffelt via animationDelay */
.arv__card--enter {
    animation: arv__cardEnter .35s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes arv__cardEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Cover-Bereich */
.arv__card-cover {
    height:      140px;
    background:  var(--color-navy);
    overflow:    hidden;
    flex-shrink: 0;
    position:    relative;
    cursor:      pointer;
}
.arv__card-cover:hover .arv__cover-img,
.arv__card-cover:hover .arv__cover-ph {
    opacity: .82;
    transition: opacity .15s ease;
}
.arv__card-cover:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: -3px;
}

/* Spinner während Bild lädt */
.arv__cover-spinner {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-navy);
    transition:      opacity .25s ease;
}
.arv__cover-spinner--done {
    opacity: 0;
    pointer-events: none;
}

/* Dreh-Ring */
.arv__cover-spin {
    display:       block;
    width:         28px;
    height:        28px;
    border:        3px solid rgba(221, 234, 245, .25);
    border-top-color: var(--color-ice);
    border-radius: 50%;
    animation:     arv__spin .75s linear infinite;
}

/* Bild: zuerst unsichtbar, nach load = sichtbar */
.arv__cover-img {
    position:    absolute;
    inset:       0;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: top;
    display:     block;
}
.arv__cover-img--loading {
    opacity: 0;
}
.arv__cover-img--ready {
    animation: arv__coverFade .4s ease forwards;
}
@keyframes arv__coverFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Placeholder */
.arv__cover-ph {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.4rem;
    color:           var(--color-on-dark);
    opacity:         .35;
}
.arv__cover-ph--fade {
    animation: arv__coverFade .3s ease forwards;
}

/* Loading-Overlay (beim PDF öffnen) */
.arv__card--loading .arv__card-cover::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: rgba(0,51,102,.5);
    z-index:  1;
}
.arv__card--loading .arv__card-cover::before {
    content:       '';
    position:      absolute;
    width:         24px;
    height:        24px;
    border:        2.5px solid rgba(255,255,255,.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    top: 50%; left: 50%; z-index: 2;
    transform:     translate(-50%,-50%);
    animation:     arv__spin .7s linear infinite;
}

/* Card-Body */
.arv__card-body {
    padding: var(--space-4);
    flex:    1;
    display: flex;
    flex-direction: column;
    gap:     var(--space-1);
}
/* C5/C2 14.02:1 ✓ */
.arv__card-month {
    font-size:      var(--text-lg);
    font-weight:    var(--weight-black);
    color:          var(--color-ink);
    letter-spacing: var(--tracking-tight);
    margin:         0;
}
/* C6/C2 8.89:1 ✓ */
.arv__card-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
    font-size: var(--text-xs);
    color:     var(--color-ink-soft);
    margin-top: var(--space-1);
}
.arv__card-meta span {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
}

/* Card-Footer */
.arv__card-foot {
    padding: var(--space-2) var(--space-4) var(--space-4);
    display: flex;
    gap:     var(--space-2);
}
.arv__card-foot .g-btn {
    flex:            1;
    justify-content: center;
    font-size:       var(--text-xs);
}

/* ── Skeleton-Grid ───────────────────────────────────────────────── */
.arv__card-skel {
    background:    var(--color-white);
    border:        3px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow:      hidden;
}
.arv__skel-cover {
    height:   140px;
    background: var(--color-page);
    position: relative;
    overflow: hidden;
}
.arv__skel-cover::after,
.arv__skel-line::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
    animation:  arv__shimmer 1.4s ease-in-out infinite;
}
.arv__skel-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.arv__skel-line {
    height:        10px;
    border-radius: 5px;
    background:    var(--color-page);
    position:      relative;
    overflow:      hidden;
}

/* ── Leer / Fehler ───────────────────────────────────────────────── */
.arv__empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-4);
    text-align:     center;
    padding:        var(--space-16) var(--space-4);
    color:          var(--color-ink-soft);
}
.arv__empty i { font-size: 2.5rem; opacity: .28; display: block; }

.arv__error-msg {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    padding:         var(--space-5);
    background:      var(--color-error-lt);
    border-radius:   var(--radius-sm);
    color:           var(--color-error);
    font-weight:     var(--weight-bold);
    font-size:       var(--text-sm);
}

/* ════════════════════════════════════════════════════════════════════
   ANIMATIONEN
   ════════════════════════════════════════════════════════════════════ */
@keyframes arv__shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@keyframes arv__spin {
    to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .arv__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: Select statt Pills */
@media (max-width: 640px) {
    .arv__section { padding: var(--space-10) 0; }
    .arv__inner   { padding: 0 var(--page-padding-x-sm); }

    /* Pills ausblenden */
    .arv__pills   { display: none; }

    /* Select einblenden */
    .arv__sel-label    { display: block; }
    .arv__year-select  { display: block; }

    .arv__grid     { grid-template-columns: 1fr; }
    /* Stats: rok ukryty — widoczny już w Select; tylko Ausgaben + Seiten */
    .arv__yst-block--year { display: none; }
    .arv__year-stats { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .arv__card,
    .arv__pill { transition: none; }
    .arv__card--enter             { animation: none; opacity: 1; transform: none; }
    .arv__cover-img--ready        { animation: none; opacity: 1; }
    .arv__cover-ph--fade          { animation: none; opacity: .35; }
    .arv__card--loading .arv__card-cover::before,
    .arv__cover-spin,
    .arv__skel-cover::after,
    .arv__skel-line::after,
    .arv__pill-skel::after        { animation: none; }
}