/* ══════════════════════════════════════════════════════════
   Event agenda — listningen på /events/

   Efter Events.dc.html (1A). Grundtanken: datumet bär raden, inte logotypen.
   Skissens px-mått är översatta till projektets tokens där sådana finns; där
   de inte gör det står måttet kvar och är kommenterat.
   ══════════════════════════════════════════════════════════ */

.brk-agenda {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 3rem);
}

/* .brk-filter-hide kommer från filter-ui.css och används på både rader och
   grupper — agendan bär ingen egen hide-klass längre. */

/* ── Next up ──────────────────────────────────────────────
   Tre spalter: nedräkning, event, praktiskt. Den gula rutan bär nedräkningen
   eftersom "om 12 dagar" är det enda talet på sidan som ändrar sig av sig
   självt — det är sidans enda rörliga information och ska synas som sådan. */
.brk-agenda__next {
    display: grid;
    grid-template-columns: 19rem 1fr 25rem;
    background: var(--base, #2d2d2d);
    color: var(--text-light, #fff);
    /* Samma radie som filterrutan under. overflow:hidden krävs — den gula
       nedräkningscellen är ett barn med egen bakgrund och hade annars stuckit
       ut som en rak kant i det rundade hörnet. */
    border-radius: var(--radius, 5px);
    overflow: hidden;
}

/* Utan praktisk spalt blir panelen tvåspaltig i stället för att lämna en tom
   mörk yta till höger. Ett event utan monternummer och utan möteslänk har
   inget praktiskt att visa, och tomrummet läste som ett renderingsfel. */
.brk-agenda__next--nosidebar { grid-template-columns: 19rem 1fr; }

/* Samma skäl åt andra hållet: pågår eventet finns ingen nedräkning, och den
   gula spalten hade stått med bara etiketten kvar. Kombinationen av båda ger
   en enspaltig panel — det är fortfarande ett kort, inte en trasig grid. */
.brk-agenda__next--nocount { grid-template-columns: 1fr 25rem; }
.brk-agenda__next--nocount.brk-agenda__next--nosidebar { grid-template-columns: 1fr; }

.brk-agenda__next-count {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 0.5rem;
    padding: var(--space-l, 4rem);
    background: var(--primary, #ffcd00);
    color: var(--base, #2d2d2d);
}

.brk-agenda__next-label {
    margin: 0;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brk-agenda__next-days {
    margin: 0;
    font-family: var(--font-condensed);
    font-weight: 700;
    /* Skissens 54px. --h1 går 42.7->56.5px över vyportbredden och är enda
       steget i skalan som är i närheten — talet ska vara påtagligt större än
       allt annat i rutan. */
    font-size: var(--h1);
    line-height: .85;
    letter-spacing: -.02em;
}

.brk-agenda__next-unit {
    margin: .4rem 0 0;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brk-agenda__next-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs, 1.6rem);
    padding: var(--space-l, 4rem);
    min-width: 0;
}

.brk-agenda__next-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 0;
    font-size: var(--text-xs, 1.2rem);
}

.brk-agenda__next-dates {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary, #ffcd00);
}

.brk-agenda__next-where { color: var(--text-light-muted, rgba(255,255,255,0.8)); }

.brk-agenda__next-name {
    margin: 0;
    font-family: var(--font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    /* --h2, inte --h4: h4 är 18.5px i den här installationen och hade gett
       ett namn mindre än brödtexten. Skissen vill ha 34px; --h2 är 31.6->40. */
    font-size: var(--h2);
    line-height: 1;
    /* Egen färg: ACSS ger alla h1–h6 --heading-color (svart), som annars vann över den mörka rutan. */
    color: var(--text-light);
}

.brk-agenda__next-name a { color: inherit; text-decoration: none; }
.brk-agenda__next-name a:hover { color: var(--primary, #ffcd00); }

.brk-agenda__next-blurb {
    margin: 0;
    max-width: 52rem;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.55;
    color: var(--text-light-muted, rgba(255,255,255,0.8));
}

.brk-agenda__next-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    padding: 2.2rem 2.4rem;
    border-left: 1px solid var(--neutral-dark, #404040);
}

.brk-agenda__next-stand {
    margin: .4rem 0 0;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--h3);
}

/* Den gula rutan tappar sitt värde när panelen staplas — då är den bara en
   stor gul yta överst. Nedräkningen får dela rad med eventet i stället. */
@media (max-width: 991px) {
    .brk-agenda__next { grid-template-columns: 1fr; }
    .brk-agenda__next-side { border-left: 0; border-top: 1px solid var(--neutral-dark, #404040); }
    .brk-agenda__next-count { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 1.2rem; }
    .brk-agenda__next-days { font-size: var(--h2); }
}

/* Filterraden ligger i .brk-filter (filter-ui.css) — samma komponent som
   produkt- och casefiltret. Här fanns tidigare egna flikar, egna selects och
   egen c-dropdown-styling; allt det är borta.

   Enda tillägget: luft mellan filtret och listan. */
.brk-agenda .brk-filter { margin-bottom: 0; }

/* ── Månadsgrupper ──────────────────────────────────────── */

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

.brk-agenda__month { padding-top: var(--space-m, 3rem); }

.brk-agenda__month-head {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0 0 .4rem;
    font-size: inherit;
    font-weight: 400;
}

.brk-agenda__month-label {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--text-s, 1.4rem);
    text-transform: uppercase;
    color: var(--text-dark, #000);
}

.brk-agenda__month-label--quiet {
    color: color-mix(in srgb, var(--text-dark, #000) 45%, transparent);
}

.brk-agenda__month-rule {
    flex: 1;
    height: 1px;
    background: var(--neutral-light, #d9d9d9);
}

.brk-agenda__month-count {
    font-size: var(--text-xs, 1.2rem);
    color: color-mix(in srgb, var(--text-dark, #000) 45%, transparent);
}

/* Passerade event ligger dolda tills man ber om dem.

   Utgångsläget står i CSS så att den vars JS inte hunnit köra ser kommande
   event och inte en tom sida. JS visar sedan grupper efter om de har någon
   synlig rad — en regel i stället för två som måste hållas i synk. */
.brk-agenda__month--past { display: none; }
.brk-agenda__month--past:not(.brk-filter-hide) { display: block; }

/* ── Eventraden ─────────────────────────────────────────── */

.brk-agenda__row {
    display: grid;
    grid-template-columns: 11.6rem 13.2rem 1fr 21rem 3rem;
    gap: 2.4rem;
    align-items: center;
    padding: 2.8rem .8rem;
    /* Longhand, inte `border-bottom: 1px solid …`.

       Kortvyn ger raden en ram runt om. Med enbart border-bottom satt låg de tre
       andra sidorna kvar på CSS initialvärden — `medium none currentColor`,
       alltså 3px och textfärgen. I det ögonblick stilen gick från none till
       solid blev de synliga, och eftersom ACSS lägger `border .3s ease-in-out`
       på varje <a> animerades de: uppmätt startade ramen på rgb(0,0,0) 3px och
       tonade över 300ms via gråskalan till rgb(217,217,217) 1px. Det syntes som
       ett svart blink vid varje växling till kort.

       Nu bär alla fyra sidor rätt färg och bredd från början; bara stilen ändras
       vid växling, och det finns ingenting mörkt att tona från. Radvyn ser
       likadan ut som förut — none på tre sidor ger beräknad bredd 0. */
    border-width: 1px;
    border-style: none none solid;
    border-color: var(--neutral-light, #d9d9d9);
    color: inherit;
    text-decoration: none;
}

.brk-agenda__row:hover { background: var(--hdd-link-bg-hover, #f4f2ee); }

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

/* Datumet står ensamt, utan markör.
   Den gula kantlinjen togs bort: den betyder "här" i marknadsväljaren, men
   här bar den ingen betydelse alls — varje rad hade den, så den skilde inget
   från något och lade bara en gul stapel per rad i en lista som redan har en
   gul pil och gula monterpiller. */
.brk-agenda__date { padding-left: 0; }

.brk-agenda__date-day {
    display: block;
    font-family: var(--font-condensed);
    font-weight: 700;
    /* --h3 (23.6->28.3px). --h6 är 17px här och hade gjort datumet mindre
       än eventnamnet bredvid, vilket är precis tvärtom mot poängen. */
    font-size: var(--h3);
    line-height: .9;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.brk-agenda__date-mon {
    display: block;
    /* Inte nowrap: på månadsöverskridande rader bär den "Aug — 2 Sep" och ska
       få brytas hellre än att spilla ut ur kolumnen. */
    margin-top: .3rem;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--text-xs, 1.2rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-dark, #000) 55%, transparent);
}

/* Logotypen: contain, utan egen bakgrund. Ramen räcker som avgränsning —
   en grå platta bakom gjorde att logotyper med vit bakgrund fick en synlig
   fyrkant runt sig medan genomskinliga inte fick det, alltså två olika
   utseenden för samma sorts bild.

   Den ska kännas igen, inte dominera: främmande logotyper i 25 format och
   färgskalor var hela problemet med den gamla listningen. */
.brk-agenda__logo {
    display: block;
    height: 6.8rem;
    border: 1px solid var(--neutral-light, #d9d9d9);
}

/* Vit bakgrund på hover.
   Rutan har ingen egen bakgrund i viloläge — det vita underlaget räcker och gör
   att logotyper med vit egen platta inte får en synlig fyrkant. Men på hover
   målas raden beige, och då lyste den färgen igenom bakom logotypen medan
   bilden själv ofta har vitt i sig. Här sätts vitt tillbaka, så logotypen ser
   likadan ut oavsett om man pekar på raden.

   TRANSITIONEN ÄR INTE VALFRI. ACSS lägger `background .3s ease-in-out` på
   varje <a> (automatic-bricks.css), alltså på raden. Rutan här ärver ingen och
   snappade direkt: på hover-UT försvann det vita omedelbart medan radens beige
   fortfarande tonade ut i 300ms, och under de millisekunderna syntes beige där
   vitt just varit. Ett kort blink, svårt att fånga men lätt att se.

   Samma variabelkedja som ACSS använder, så de två ytorna följs åt även om
   tokenet ändras.

   TOKENET SKRIVS UT HELT, utan egen egenskap framför. --transition är en
   komplett shorthand — "background .3s ease-in-out 0s, color …, border …,
   translate …" — så `transition: background var(--transition)` blev
   "background background .3s …", vilket är ogiltigt. Deklarationen kastades
   tyst och elementet behöll `all 0s`, alltså exakt det blink regeln skulle
   ta bort. */
.brk-agenda__logo {
    transition: var(--link-transition, var(--transition, background .3s ease-in-out));
}

.brk-agenda__row:hover .brk-agenda__logo { background: var(--white, #fff); }

.brk-agenda__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Luft runt logon så den inte tangerar ramen. */
    padding: .6rem;
    box-sizing: border-box;
}

.brk-agenda__body { min-width: 0; }

.brk-agenda__name {
    display: block;
    font-family: var(--font-condensed);
    font-weight: 700;
    /* --h5 är 19px, exakt skissens mått för eventnamnet. */
    font-size: var(--h5);
    line-height: 1.15;
    text-transform: uppercase;
}

.brk-agenda__blurb {
    display: block;
    /* Explicit 400: raden är ett <a> och ingressen ärvde annars vikten från
       arvet runt omkring, vilket lät den läsa som en andra rubrik. */
    font-weight: 400;
    margin-top: .4rem;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--text-dark, #000) 60%, transparent);
    /* En rad. Ingressen är sammanhang, inte innehåll — hela texten står på
       eventets egen sida. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brk-agenda__where {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.brk-agenda__city {
    font-size: var(--text-s, 1.4rem);
    font-weight: 500;
}

.brk-agenda__pills { display: flex; flex-wrap: wrap; gap: .6rem; }

.brk-agenda__pill {
    padding: .2rem .8rem;
    border: 1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius-xs, .3rem);
    background: var(--white, #fff);
    font-size: var(--text-xs, 1.2rem);
    color: color-mix(in srgb, var(--text-dark, #000) 65%, transparent);
    white-space: nowrap;
}

/* Monternumret är det enda operativt användbara på raden, och det enda som
   är gult. Gult betyder "gör något med det här". */
.brk-agenda__pill--stand {
    border-color: var(--primary, #ffcd00);
    background: var(--primary, #ffcd00);
    font-weight: 600;
    color: var(--base, #2d2d2d);
}

/* Pilen är inlinad SVG och inte ett tecken. Ikonen bär fill="currentColor",
   så inlinad ärver den färgen härifrån; som <img> från uploads hade den
   renderats svart, eftersom currentColor då löses i bildens eget dokument.

   INTE gul. Gult mot vit rad har en kontrast omkring 1.7:1 och pilen var i
   praktiken osynlig — den syntes bara på skärmdumpar där man visste var man
   skulle leta. Den är dämpad nu och mörknar på hover, vilket också gör den
   till en affordance i stället för en dekoration. */
.brk-agenda__arrow {
    display: flex;
    justify-content: flex-end;
    color: color-mix(in srgb, var(--text-dark, #000) 45%, transparent);
    transition: color 120ms ease;
}

.brk-agenda__row:hover .brk-agenda__arrow { color: var(--text-dark, #000); }

.brk-agenda__arrow svg { display: block; }

/* Under 1100 px ryms inte fem spalter. Logon och pilen faller bort först:
   logon är igenkänning och pilen är dekor, medan datum, namn och plats är
   informationen raden finns för. */
@media (max-width: 1099px) {
    .brk-agenda__row { grid-template-columns: 10rem 1fr 18rem; gap: 1.6rem; }
    .brk-agenda__logo, .brk-agenda__arrow { display: none; }
}

@media (max-width: 767px) {
    .brk-agenda__row { grid-template-columns: 8.5rem 1fr; }
    .brk-agenda__where { grid-column: 2; }
    .brk-agenda__blurb { display: none; }
}

/* ── Passerade som dragspel per år (plan 074, Claude Design 3b) ── */

.brk-agenda__past { margin-top: var(--space-xs); }

.brk-agenda__past-year { border-top: 1px solid var(--neutral-light); }
.brk-agenda__past-year:last-child { border-bottom: 1px solid var(--neutral-light); }
.brk-agenda__past-year:first-child { border-top: 0; } /* rubrikens linje står redan där */

.brk-agenda__past-head {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.brk-agenda__past-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s) 0;
    background: none;
    border: 0;
    color: var(--text-dark);
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--h4);
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .brk-agenda__past-toggle:hover { color: var(--text-dark-muted); }
}

/* Plus som blir minus: två streck, det lodräta skalas bort när året är öppet. */
.brk-agenda__past-sign {
    position: relative;
    flex: none;
    width: 3.2rem;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    background: var(--tertiary);
}

.brk-agenda__past-sign::before,
.brk-agenda__past-sign::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 1.2rem;
    height: 2px;
    margin: -1px 0 0 -.6rem;
    background: currentColor;
}

.brk-agenda__past-sign::after {
    rotate: 90deg;
    transition: scale var(--dur-fast) var(--ease-out);
}

.brk-agenda__past-toggle[aria-expanded="true"] .brk-agenda__past-sign::after { scale: 0 1; }

.brk-agenda__past-list {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-m);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs) var(--space-l);
}

.brk-agenda__past-list[hidden] { display: none; }

.brk-agenda__past-item { margin: 0; }

.brk-agenda__past-link {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: baseline;
    color: inherit;
    text-decoration: none;
}

.brk-agenda__past-mon {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* Ljusare enligt skissen (#8a8a8a), men inte under AA: 54 % svart ≈ #757575, 4,6:1 mot vitt. */
    color: color-mix(in srgb, var(--text-dark) 54%, transparent);
}

.brk-agenda__past-name {
    font-size: var(--text-s);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-dark);
    transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .brk-agenda__past-link:hover .brk-agenda__past-name {
        color: var(--text-dark-muted);
        text-decoration: underline;
        text-underline-offset: .3em;
    }
}

@media (max-width: 1099px) { .brk-agenda__past-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .brk-agenda__past-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px)  { .brk-agenda__past-list { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .brk-agenda__past-toggle,
    .brk-agenda__past-sign::after,
    .brk-agenda__past-name { transition: none; }
}

.brk-agenda__note {
    margin: 1.4rem 0 0;
    font-size: var(--text-s, 1.3rem);
    line-height: 1.6;
    color: color-mix(in srgb, var(--text-dark, #000) 55%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Vyväxling: kort eller rader

   Kunden vill ha kort i stället för rader. Vi behåller båda och låter läsaren
   välja, med kort som default.

   ── En markup, två lägen ──────────────────────────────────────────────────
   Kortet är INTE en egen mall. Samma <a class="brk-agenda__row"> med samma
   delar — datum, logotyp, namn, ingress, ort, piller — läggs bara om med CSS
   när [data-view="cards"] står på listan.

   Skälet är inte att spara rader kod: två mallar hade betytt två uppsättningar
   <img> i dokumentet, alltså dubbla bildnedladdningar för en lista som redan
   har tolv logotyper. Och varje framtida ändring i raden hade behövt göras på
   två ställen, med risken att de glider isär.

   ── Platt rutnät, inte månadsgrupper ──────────────────────────────────────
   I kortvyn faller månadsrubrikerna bort och alla kort ligger i ett rutnät,
   som referenssajten. display: contents på månadsgruppen löser det utan att
   röra markupen: gruppen slutar vara en låda och dess kort blir barn till
   rutnätet.

   Radvyn behåller grupperingen. Där gör den nytta — man planerar efter datum.
   Med tolv kommande event blir månadsrubriker i ett rutnät mest glesa; en av
   månaderna har ett enda event.

   .brk-filter-hide sätter display: none !important och vinner därför över
   contents, så filtrerade grupper fortsätter att döljas.

   ── Bildytan är contain, inte cover ───────────────────────────────────────
   Det här är skillnaden mot referenssajten, och den är inte valfri.
   Eventbilderna är främmande MÄSSLOGOTYPER på vitt — uppmätt: samtliga
   1440x960, men själva märket har vitt runt sig och egna proportioner.
   Referenssajtens kort fungerar för att deras bilder är egen grafik som fyller
   ramen. cover här hade beskurit logotyper på måfå.

   Samma resonemang som radens logotypruta redan bär: den ska kännas igen,
   inte dominera.
   ══════════════════════════════════════════════════════════════════════════ */

/* Vyväxlaren sitter i filtrets fot, till höger om sökfältet — samma rad som
   söket och Clear, så alla listans kontroller står på ett ställe i stället för
   att växlaren hänger ensam under rutan. */
.brk-agenda__viewbar {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-top: 0;
}

/* Under 992px är foten inte ett rutnät, och .brk-filter__foot-end saknar då
   egen layout i filter-ui.css. Utan den här raden hamnar växlaren på egen rad
   under söket i stället för bredvid det. Scopad till agendan så övriga filter
   behåller sin fot orörd. */
@media (max-width: 991px) {
    .brk-ea .brk-filter__foot-end {
        display: flex;
        align-items: center;
        gap: var(--space-s, 1.25rem);
        flex-wrap: wrap;
    }

    .brk-ea .brk-filter__search { flex: 1 1 16rem; }
}

.brk-agenda__views {
    display: flex;
    gap: .4rem;
}

.brk-agenda__view {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    /* Kvadratisk, inte bred: etiketten är visuellt dold, så knappen bär bara
       ikonen. Samma höjd som filterpillren och sökfältet, så raden läses som
       en kontroll (Jonas 2026-09-07). 2,8 rem sedan den kompakta filterpanelen
       (2026-09-16), där pillren och sökfältet är 28 px. */
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    background: none;
    border: 1px solid var(--neutral-light, #d9d9d9);
    /* Filterpillren och sökfältet växer till 44 px under 992 (filter-ui.css) —
       vyknapparna följer med, annars blir raden ojämn igen. */
    @media (max-width: 991px) { width: 44px; height: 44px; }
    border-radius: var(--radius-xs, 2.222px);
    color: color-mix(in srgb, var(--text-dark, #000) 60%, transparent);
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--text-xs, 1.2rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--link-transition, var(--transition, background .3s ease-in-out));
}

.brk-agenda__view:hover { background: var(--hdd-link-bg-hover, #f4f2ee); }

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

/* Intryckt läge. aria-pressed bär tillståndet, så CSS läser attributet i
   stället för en extra klass — då kan de två aldrig hamna i otakt. */
.brk-agenda__view[aria-pressed="true"] {
    background: var(--base, #2d2d2d);
    border-color: var(--base, #2d2d2d);
    color: var(--text-light, #fff);
}

.brk-agenda__view svg { display: block; width: 1.4rem; height: 1.4rem; }

/* ── Kortvyn ──────────────────────────────────────────────────────────── */

[data-agenda-list][data-view="cards"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
    gap: 2.4rem;
    align-items: start;
}

[data-agenda-list][data-view="cards"] .brk-agenda__month {
    display: contents;
}

[data-agenda-list][data-view="cards"] .brk-agenda__month-head {
    display: none;
}

/* Passerade event är ett dragspel, inte kort. Blocket får därför vara en egen låda
   igen och spänna över hela rutnätet, med sin rubrik kvar. */
[data-agenda-list][data-view="cards"] .brk-agenda__month--past:not(.brk-filter-hide) {
    display: block;
    grid-column: 1 / -1;
}

[data-agenda-list][data-view="cards"] .brk-agenda__month--past .brk-agenda__month-head {
    display: flex;
}

[data-agenda-list][data-view="cards"] .brk-agenda__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius, 5px);
    overflow: hidden;
    height: 100%;
}

/* Logotypen först, som kortets bildband. order och inte omflyttad markup —
   se resonemanget överst om varför det bara finns en mall. */
[data-agenda-list][data-view="cards"] .brk-agenda__logo {
    order: -1;
    height: auto;
    aspect-ratio: 3 / 2;
    border: 0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
    background: var(--white, #fff);
}

[data-agenda-list][data-view="cards"] .brk-agenda__logo img {
    padding: 2rem;
}

[data-agenda-list][data-view="cards"] .brk-agenda__date {
    padding: 1.8rem 1.8rem 0;
}

/* Datumet står på en rad i kortet. I raden ligger dag och månad över varandra
   i en smal kolumn; här finns bredden, och en rad läses snabbare. */
[data-agenda-list][data-view="cards"] .brk-agenda__date-day,
[data-agenda-list][data-view="cards"] .brk-agenda__date-mon {
    display: inline;
}

[data-agenda-list][data-view="cards"] .brk-agenda__date-day {
    font-size: var(--text-l);
}

[data-agenda-list][data-view="cards"] .brk-agenda__date-mon {
    margin-left: .6rem;
}

[data-agenda-list][data-view="cards"] .brk-agenda__body {
    padding: .6rem 1.8rem 0;
}

/* Ingressen bort. Kortet ska gå att skanna — datum, namn, plats. Den som vill
   läsa mer klickar. Radvyn behåller den, för där finns bredden. */
[data-agenda-list][data-view="cards"] .brk-agenda__blurb {
    display: none;
}

[data-agenda-list][data-view="cards"] .brk-agenda__where {
    margin-top: auto;
    padding: 1.2rem 1.8rem 1.8rem;
    text-align: left;
}

[data-agenda-list][data-view="cards"] .brk-agenda__arrow {
    display: none;
}

/* Hela kortet är ytan man pekar på, så hover ska måla kortet — inte bara
   logotyprutan, som är radens beteende. */
[data-agenda-list][data-view="cards"] .brk-agenda__row:hover {
    background: var(--hdd-link-bg-hover, #f4f2ee);
}

@media (max-width: 767px) {
    [data-agenda-list][data-view="cards"] {
        grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
        gap: 1.6rem;
    }
}