/* ══════════════════════════════════════════════════════════
   News + upcoming events — startsidans 2b-sektion

   Efter Events.dc.html (2b): nyhetsraden orörd, events som kompakt datumlista
   i en mörk kolumn till höger. Layouten (rutnätet, den mörka panelen,
   rubriker, knapp) ligger som Bricks-inställningar på elementen och är
   redigerbar i byggaren. Den här filen bär bara det Bricks inte kan:
   shortcodens rader och två småsaker på panelen.
   ══════════════════════════════════════════════════════════ */

/* ── Raderna ──────────────────────────────────────────────
   flex:1 skjuter "All events"-knappen under listan till panelens botten, så
   att den står på samma höjd som nyhetskortens underkant oavsett radantal. */
.brk-upcoming {
    --upcoming-hold: 3600ms;   /* paus mellan stegen */
    --upcoming-step: 600ms;    /* den automatiska glidningen; pilar och dragning är kortare, se JS */
    --upcoming-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --upcoming-fade: 2.4rem;
    --upcoming-pad: 1.5rem;    /* radernas luft; JS tätar den i panelen, se nedan */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.brk-upcoming__viewport { position: relative; }

.brk-upcoming__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brk-upcoming__item { margin: 0; }

/* ── Tickern ──────────────────────────────────────────────
   Klassen sätts av news-events.js först när den har något att rotera. Vyn
   får sin höjd (de synliga radernas) från JS; listan glider upp med
   transform. Kanterna tonas med en mask, inte målade gradienter, så
   panelens bakgrund kan vara vad som helst. Toppen tonar kortare än botten:
   första raden ska stå hel när listan vilar. */
.brk-upcoming.is-ticking .brk-upcoming__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        transparent 0,
        black calc(var(--upcoming-fade) / 2),
        black calc(100% - var(--upcoming-fade)),
        transparent 100%);
    mask-image: linear-gradient(
        transparent 0,
        black calc(var(--upcoming-fade) / 2),
        black calc(100% - var(--upcoming-fade)),
        transparent 100%);
}

.brk-upcoming.is-ticking .brk-upcoming__list {
    transform: translateY(0);
    will-change: transform;
}

/* JS driver glidningen:
     list.style.transition = 'transform var(--upcoming-step) var(--upcoming-ease)';
     list.style.transform  = 'translateY(-' + offset + 'px)';
   och flyttar ett varv med transition: none när kopian nåtts. Med reducerad
   rörelse rullar listan inte av sig själv, men pilarna och dragningen
   fungerar — utan glidning. */

/* Dragning (bara mus, se news-events.js). Under dragningen: ingen
   textmarkering och grabbing-markören över allt, även länkarna. I vila står
   radernas vanliga pekare kvar — raderna är länkar, och pilarna är det
   upptäckbara sättet att bläddra. */
.brk-upcoming.is-dragging,
.brk-upcoming.is-dragging * {
    cursor: grabbing !important;
    user-select: none;
    -webkit-user-select: none;
}

/* Skrivs med listan som förälder i selektorn: ACSS ger länkar i bg--dark
   primärfärgen med `.bg--dark a`, som annars vinner över en ensam klass och
   gjorde eventnamnen gula. Raden ska ärva panelens vita text; det gula är
   reserverat för dagen. */
.brk-upcoming .brk-upcoming__row {
    display: grid;
    /* Fast spalt, INTE auto. Med auto växte spalten på raderna som spänner
       över en månadsgräns ("Sep – 1 Oct") och eventnamnen hamnade på olika
       x-position rad för rad (Anders 2026-09-08). Bredden rymmer den längsta
       formen på en rad; raderna med bara "Sep" får luft till höger i stället,
       och alla namn står på samma linje. */
    grid-template-columns: 9.6rem 1fr;
    gap: 1.4rem;
    align-items: center;
    /* I panelen bredvid nyhetskorten sätter news-events.js --upcoming-pad så
       att `limit` rader fyller höjden ovanför knappen: tätare på skärmar där
       korten är låga (ned till två tredjedelar), aldrig glesare än så här.
       Fem rader rymdes annars bara från ~1700 px, fyra lämnade upp till en
       rads tomrum (Jonas 2026-09-25). */
    padding: var(--upcoming-pad) 0;
    /* Skissens #444 på #2d2d2d, härlett ur textfärgen i stället för
       hårdkodat så linjen följer panelen om dess färg byts. */
    border-top: 1px solid color-mix(in srgb, var(--text-light, #fff) 18%, transparent);
    color: inherit;
    text-decoration: none;
}

/* Färgen sätts explicit på hover: ACSS globala --link-color-hover är mörk i
   den här installationen och hade gjort raden osynlig på panelen.
   Understrykningen på namnet bär hovern. */
.brk-upcoming .brk-upcoming__row:hover,
.brk-upcoming .brk-upcoming__row:focus-visible { color: inherit; }
.brk-upcoming__row:hover .brk-upcoming__name,
.brk-upcoming__row:focus-visible .brk-upcoming__name { text-decoration: underline; text-underline-offset: .15em; }

.brk-upcoming__date {
    display: flex;
    flex-direction: column;
}

/* Skissens 24px i gult — samma steg (--h3) som agendans datum på /events/,
   så samma datum ser lika stort ut på båda ställena. */
.brk-upcoming__day {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--h4);
    line-height: 1;
    color: var(--primary, #ffcd00);
    white-space: nowrap;
}

/* nowrap: spalten är dimensionerad för "Sep – 1 Oct" på en rad, och en
   brytning hade gett raderna olika höjd utan att vinna något. */
.brk-upcoming__mon {
    margin-top: .3rem;
    white-space: nowrap;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light-muted, rgba(255,255,255,.8));
}

.brk-upcoming__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.brk-upcoming__name {
    font-family: var(--font-condensed);
    font-size: var(--text-m);
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.brk-upcoming__where {
    font-size: var(--text-xs, 1.2rem);
    color: var(--text-light-muted, rgba(255,255,255,.8));
}

/* ── Panelen ──────────────────────────────────────────────
   Knappen fyller panelens bredd med pilen längst till höger, som i skissen.
   Färgerna kommer från ACSS: panelen bär bg--dark och knappen btn--outline,
   vilket ger gul kontur och gul text utan en enda egen färgregel här. */
.brk-upcoming__all {
    inline-size: 100%;
    justify-content: space-between;
}

/* Knappen står mot panelens nederkant. Panelen sträcks till nyhetskolumnens
   höjd, och utan det här hamnade överskottet under knappen: på smalare
   skärmar blev avståndet nedtill dubbelt så stort som ovanför rubriken
   (Anders 2026-09-16). margin-top: auto lägger överskottet ovanför i stället,
   så nedre avståndet alltid är panelens padding — samma som upptill. */
.brk-upcoming__panel > .brk-upcoming__all,
.brk-upcoming__panel > .brk-upcoming__actions {
    margin-top: auto;
}

/* ── Pilarna ──────────────────────────────────────────────
   JS lägger "All events"-knappen och pilarna i en gemensam rad, så att de
   inte gör panelen högre än nyhetskolumnen. Panelen är 34rem bred på desktop
   och raden rymmer ~284 px: två fristående kvadrater på knappens höjd tog så
   mycket att "All events" bröts på två rader. Pilarna är därför EN kontroll
   med delad ram och en avdelare, 4,4 rem per halva — samma linjefärg som
   radernas avdelare, gul först vid hover, så de inte konkurrerar med knappens
   gula kontur. */
.brk-upcoming__actions {
    display: flex;
    align-items: stretch;
    gap: var(--space-xs, 1.2rem);
}

.brk-upcoming__actions > .brk-upcoming__all {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 0;
    white-space: nowrap;
}

.brk-upcoming__controls:not([hidden]) {
    --upcoming-line: color-mix(in srgb, var(--text-light, #fff) 18%, transparent);
    display: flex;
    flex: none;
    border: 1px solid var(--upcoming-line);
    border-radius: var(--radius-xs, 2.222px);
}

.brk-upcoming__step {
    display: grid;
    place-items: center;
    inline-size: 4.4rem;
    min-block-size: 4.4rem;   /* träffyta när raden står ensam utan knapp */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-light, #fff);
    cursor: pointer;
    transition:
        color 150ms ease,
        background-color 150ms ease;
}

/* Trycket syns på ikonen, inte på halvan. Skalades hela knappen krympte den
   bort från den gemensamma ramen och avdelaren hackade till vid varje klick. */
.brk-upcoming__step svg {
    transition: scale 160ms var(--ease-out);
}

.brk-upcoming__step + .brk-upcoming__step {
    border-left: 1px solid var(--upcoming-line);
}

.brk-upcoming__step:active svg {
    scale: 0.85;
}

.brk-upcoming__step:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
    .brk-upcoming__step:hover {
        color: var(--primary, #ffcd00);
        background-color: color-mix(in srgb, var(--text-light, #fff) 6%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-upcoming__step { transition: color 150ms ease, background-color 150ms ease; }
    .brk-upcoming__step svg { transition: none; }
    .brk-upcoming__step:active svg { scale: none; }
}

.brk-upcoming__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}