/* ══════════════════════════════════════════════════════════
   Event single — undersidan för ett event

   Efter Events.dc.html (1B). Datumet är rubriken, inte publiceringsdatumet
   och inte logotypen.
   ══════════════════════════════════════════════════════════ */

.brk-event {
    display: flex;
    flex-direction: column;
    gap: var(--space-l, 4rem);
}

/* ── Hero ─────────────────────────────────────────────────
   Utan foto blir ytan enfärgat mörk. Det är ett medvetet tillstånd och inte
   ett hål: 101 av 101 event saknar hero-foto idag, så det tomma läget är
   normalläget tills någon börjar fylla på. */
.brk-event__hero {
    position: relative;
    background: var(--base, #2d2d2d);
    color: var(--text-light, #fff);
    /* Samma radie som filterrutan och "Next up" på /events/.
       overflow:hidden fanns redan — hero-fotot ligger absolutpositionerat i
       ett eget lager och hade annars fyllt hörnen fyrkantigt. */
    border-radius: var(--radius, 5px);
    overflow: hidden;
}

.brk-event__hero-media {
    position: absolute;
    inset: 0;
}

.brk-event__hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Toningen gör texten läsbar oavsett vad fotot innehåller. Den ligger på
   media-lagret och inte på hero-roten, så den aldrig ritas när det inte finns
   något foto att tona ned.

   Stoppen härleds ur --base och inte ur skissens #14161a. Skälet är inte
   tokenhygien utan att de är OLIKA färger: --base är #2d2d2d i den här
   installationen, så en gradient mot #14161a hade tonat mot ett annat mörker
   än panelen bakom och gett en synlig söm där fotot slutar.

   Felet hade dessutom varit osynligt tills vidare: noll av 101 event har ett
   hero-foto, så gradienten renderas inte alls i dag. */
.brk-event__hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--base, #2d2d2d) 95%, transparent) 0%,
        color-mix(in srgb, var(--base, #2d2d2d) 78%, transparent) 48%,
        color-mix(in srgb, var(--base, #2d2d2d) 25%, transparent) 85%,
        color-mix(in srgb, var(--base, #2d2d2d) 10%, transparent) 100%);
}

.brk-event__hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 30rem;
    gap: var(--space-l, 4rem);
    align-items: start;
    padding: var(--space-l, 4.4rem);
    min-height: 34rem;
}

.brk-event__hero--flat .brk-event__hero-inner { min-height: 28rem; }

.brk-event__crumbs {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0;

    font-weight: 700;
    font-size: var(--text-xs, 1.2rem);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.brk-event__back {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--primary, #ffcd00);
    text-decoration: none;
}

/* Färgen sätts explicit på hover. ACSS globala --link-color-hover är svart i
   den här installationen, och en svart länk på den mörka heron är i praktiken
   osynlig. Understrykningen bär hovern; färgen står stilla. */
.brk-event__back:hover {
    color: var(--primary, #ffcd00);
    text-decoration: underline;
}

/* Pilen pekar höger i filen — bakåtlänken vänder på den i stället för att
   bära en egen ikon. En ikon, två riktningar. */
.brk-event__chev--back { transform: rotate(180deg); }

.brk-event__chev { flex: 0 0 auto; }

.brk-event__type {
    padding-left: 1.2rem;
    border-left: 1px solid var(--neutral-dark, #404040);
    color: var(--text-light-muted, rgba(255,255,255,0.8));
}

/* Datumet: dagarna stort i gult, månad och år mindre bredvid. Det är sidans
   rubrik i informationshänseende även om <h1> bär eventnamnet — därför
   baseline-justering, så talen och månaden står på samma linje. */
.brk-event__date {
    display: flex;
    align-items: start;
    gap: 1.6rem;
    margin: var(--space-m, 2.6rem) 0 0;
}

.brk-event__date-days {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--h1);
    line-height: .82;
    letter-spacing: -.02em;
    color: var(--primary, #ffcd00);
}

.brk-event__date-month {
    display: block;

    font-weight: 700;
    font-size: var(--h3);
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.brk-event__date-year {
    display: block;

    font-weight: 600;
    font-size: var(--text-l);
    letter-spacing: .06em;
    color: var(--text-light-muted, rgba(255,255,255,0.8));
}

.brk-event__title {
    margin: var(--space-s, 2.2rem) 0 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--h1);
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--text-light, #fff);
}

.brk-event__where {
    margin: 1rem 0 0;
    font-size: var(--text-l);
    color: var(--text-light-muted, rgba(255,255,255,0.8));
}

.brk-event__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: var(--space-m, 2.8rem) 0 0;
}

/* Sekundär handling: ram i stället för fyllning, så den inte konkurrerar med
   "Book a meeting". Typografin ärvs från knappsystemet via .bricks-button på
   grannen; här sätts bara det som skiljer. */
.brk-event__ics {
    padding: 1.3rem 2.2rem;
    border: 1px solid var(--neutral-dark, #404040);

    font-weight: 700;
    font-size: var(--text-s, 1.5rem);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-light, #fff);
    text-decoration: none;
}

.brk-event__ics:hover {
    border-color: var(--primary, #ffcd00);
    color: var(--primary, #ffcd00);
}

/* ── Logotypen i heron ────────────────────────────────────
   Här låg tidigare en vit faktaruta med logotyp OCH en lista över stand,
   öppettider, bransch och arrangör. Kunden beskrev sidan som rörig med "många
   ställen att titta på", och rutan var ett av dem — den tävlade med datum och
   rubrik om samma blick i samma yta.

   Kvar är logotypen ensam. Den identifierar mässan på ett ögonkast och säger
   samma sak som rubriken, fast som bild; den drar alltså inte läsaren åt ett
   nytt håll. Fakta flyttade ut till .brk-event__meta under heron.

   Höjden är 14rem och inte skissens 64px, av samma skäl som förut: logotyperna
   är ungefär 3:2 (uppmätt 720x480), och i en ruta 260 bred och 64 hög renderade
   contain dem som 96x64 — en frimärksstor bild mitt i en stor vit yta. */
.brk-event__hero-logo {
    height: 14rem;
    padding: 1.8rem 2rem;
    background: var(--white, #fff);
    border-radius: var(--radius, 5px);
    box-sizing: content-box;
}

.brk-event__hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Praktiska detaljer som en rad ────────────────────────
   Stand, öppettider, bransch och arrangör är uppslagsfakta: man läser dem en
   gång och går vidare. Som boxad panel i heron blev de en egen yta att
   navigera; som en rad under heron är de en enda blick.

   flex-wrap och inte ett rutnät med fasta spalter: antalet poster varierar
   mellan noll och fyra, och ett rutnät hade lämnat tomma celler när bara en
   eller två är ifyllda.

   Raden renderas bara när något fält är ifyllt — på samtliga 102 riktiga event
   är alla fyra tomma, så sidan går i praktiken direkt från hero till text. */
.brk-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem var(--space-l, 4rem);
    /* Raden ligger INUTI .brk-event__body och ärver därmed dess 66ch-spalt.

       Två försök innan det: först full behållarbredd, vilket gav sidan tre
       olika vänsterkanter — heron kant i kant, metaraden i behållarkanten,
       brödtexten centrerad. Sedan max-width: 66ch på raden själv, vilket blev
       26px smalare än texten: ch räknas mot elementets EGEN fontstorlek, och
       en dl och ett grid-spann ärver inte samma.

       Att lägga raden i samma grid löser båda på en gång, och kan inte glida
       isär igen. */
    margin: 0 0 var(--space-m, 3rem);
    padding-bottom: var(--space-s, 2rem);
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}

.brk-event__meta-item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.brk-event__meta-item dt {
    margin: 0;

    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);
}

.brk-event__meta-item dd {
    margin: 0;
    font-size: var(--text-s, 1.4rem);
    font-weight: 600;
}

.brk-event__meta-item dd a { color: inherit; text-decoration: underline; }

@media (max-width: 991px) {
    .brk-event__hero-inner { grid-template-columns: 1fr; }
}

/* ── Brödtext + maskinlistan ──────────────────────────────── */

/* En spalt, inte två.

   Brödtext och maskinlista låg sida vid sida. Det gav två textblock som
   konkurrerade om blicken på samma höjd — precis det kunden menade med "många
   ställen att titta på". Nu läses sidan uppifrån och ned: text först, lista
   sedan.

   66ch, inte 72: uppmätt gav 72ch en radlängd på 734px vid 17px text, vilket
   är över det spann där ögat hittar tillbaka till nästa radbörjan utan
   ansträngning.

   justify-content: center är det som gör skillnaden visuellt. Spalten var
   redan kapad till 66ch, men låst i vänsterkanten, så sidan hade en tom
   högerhalva under en hero som går kant till kant. Centrerad hänger den ihop
   med heron ovanför i stället för att luta. */
.brk-event__body {
    display: grid;
    grid-template-columns: minmax(0, 66ch);
    justify-content: center;
    gap: var(--space-l, 4rem);
}

/* Ingressen. Selektorn måste VINNA över `.brk-event__copy p` längre ner:
   ingressen ligger inuti .brk-event__copy, så den regeln träffar den också.
   Ursprungligt `.brk-event__lead` (0-1-0) förlorade på specificitet och satte
   aldrig sin --text-xl — uppmätt 17,2px där 19,8 var avsikten.

   `p.brk-event__lead` (0-1-1) räcker inte heller: samma specificitet som
   `.brk-event__copy p`, och då vinner den som står SIST i filen. Därför den
   fulla nedärvningen. */
.brk-event__copy p.brk-event__lead {
    margin: 0 0 var(--space-s, 2.2rem);
    font-size: var(--text-xl);
    line-height: 1.55;
    text-wrap: pretty;
}

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

/* Styckeluft sätts här. Temat nollställer p-marginaler globalt, så utan de
   här raderna rann styckena ihop till en enda vägg text — uppmätt margin: 0
   på båda styckena.

   Storleken är --text-m, samma brödtext som resten av sajten. Eventsidan låg
   tidigare på --text-l och var alltså ensam om att vara större, utan att något
   motiverade det. */
.brk-event__copy p {
    margin: 0 0 var(--space-s, 2rem);
    font-size: var(--text-m);
    line-height: 1.7;
    text-wrap: pretty;
}

.brk-event__copy p:last-child { margin-bottom: 0; }

.brk-event__copy h2,
.brk-event__copy h3 { margin: var(--space-m, 3rem) 0 var(--space-xs, 1.2rem); }

.brk-event__copy ul,
.brk-event__copy ol { margin: 0 0 var(--space-s, 2rem); padding-left: 2.4rem; }

.brk-event__copy li { margin-bottom: .6rem; line-height: 1.7; }

/* Maskinlistan står UNDER brödtexten, inte bredvid. Utan gul vänsterkant
   (plan 055): rubriken och luften ovanför räcker som skiljelinje. */
.brk-event__stand {
    margin-top: var(--space-m, 3rem);
}

.brk-event__stand-head {
    margin: 0;

    font-weight: 700;
    font-size: var(--text-m);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.brk-event__stand-list { margin: 1.4rem 0 0; }

/* Etiketten på egen rad, noten under. En enda vänsterkant för allt.
   Raden var från början byggd för korta par — "Brokk 500⁺" mot "with BHB 705"
   — sida vid sida med justify-content: space-between. Två saker gick sönder
   så fort någon skrev en hel mening.

   Det första var att noten trycktes mot högerkanten och blev en smal fransig
   pelare, medan flexboxen klämde ihop etiketten för att ge plats: "SEO AND
   SEM" bröts till TRE rader på 54px bredd i en 340px spalt.

   Det andra syntes först när det första var löst, och var värre. När noten
   börjar där etiketten slutar får varje rad sin egen vänsterkant, eftersom
   etiketterna är olika långa. Uppmätt startade de fem noterna på 26, 57, 100,
   123 och 150px, med bredder från 190 till 314. Det är den spretigheten som
   gjorde blocket rörigt, inte radbrytningarna.

   En fast etikettspalt skulle rätta kanterna men kräva plats för den längsta
   etiketten — "WEB DEVELOPMENT" är ~16ch, vilket lämnar ~15ch till noten i en
   340px spalt. För smalt att läsa.

   Så: stapla. En kant, oavsett hur långa etiketterna och noterna är, och inget
   som kan klämmas ihop. Korta par kostar en extra rad var; det är billigare än
   fem olika kanter. */
.brk-event__stand-row {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}

.brk-event__stand-row dt {
    margin: 0 0 0.3rem;

    font-weight: 700;
    font-size: var(--h5);
    line-height: 1.15;
    text-transform: uppercase;
}

.brk-event__stand-row dd {
    margin: 0;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--text-dark, #000) 62%, transparent);
    text-wrap: pretty;
}

@media (max-width: 991px) {
    .brk-event__body { grid-template-columns: 1fr; }
}

/* ── Andra event ──────────────────────────────────────────
   Ersätter "Related news". Den som läser om en mässa letar nästa mässa, inte
   en nyhet från 2018. */
/* Nedkokad till en fotnot, inte ett andra block.

   Rutan var en beige panel i behållarens fulla bredd med en h3-stor rubrik och
   sidbreda rader. Under en brödtext som är 66ch bred blev den sidans näst
   tyngsta yta efter heron — två stora block med en smal textspalt emellan, och
   det var precis vad Anders reagerade på.

   Tre saker gör den lätt: bakgrunden bort (det var den som gjorde den till ett
   block), samma 66ch-spalt som allt annat, och en linje överst i stället för
   en ram runt om. Kvar är en liten lista i sidfoten av artikeln — den gör sin
   navigerande nytta utan att tävla med innehållet.

   Blocket behålls alltså, men slutar se ut som ett block. Den som läser om en
   mässa letar nästa mässa; att ta bort listan helt hade kostat en genväg utan
   att lösa tyngdproblemet.

   Bredden kommer från .brk-event__body, som blocket nu ligger inuti. Ett eget
   max-width: 66ch gav 359px mot brödtextens 673 — samma fälla som metaraden
   gick i: ch räknas mot elementets egen fontstorlek. Att dela grid-spalt är det
   enda som håller dem lika. */
.brk-event__more {
    padding-top: var(--space-m, 3rem);
    border-top: 1px solid var(--neutral-light, #d9d9d9);
}

.brk-event__more-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.6rem;
}

/* --text-m, inte --h3. Rubriken var lika stor som sidans egna rubriker och
   läste därför som en ny huvudavdelning. Här är den en etikett över en lista. */
.brk-event__more-title {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-m);
}

.brk-event__more-all {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: var(--text-xs, 1.3rem);
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--primary, #ffcd00);
    padding-bottom: .2rem;
}

/* Smalare spalter och lägre rader. Datumkolumnen var 11,6rem och ortkolumnen
   20 — mått från den sidbreda panelen. I 66ch fick de inte plats, och raden
   behöver dem inte: det är tre poster, inte en kalender. */
.brk-event__more-row {
    display: grid;
    /* minmax och varken fast mått eller auto.

       8,5rem fast bröt "29 SEP — 1 OCT" till två rader medan grannraderna
       rymdes på en. Enbart auto löste det men gav namnen ragged vänsterkant,
       eftersom varje rad då sizeade sin datumkolumn för sig — tre olika
       startpunkter för tre namn.

       Minimum 10,5rem rymmer det längsta datumformatet, så namnen börjar på
       samma x; auto som max låter ett ovanligt långt datum ta mer plats i
       stället för att brytas. */
    grid-template-columns: minmax(10.5rem, auto) 1fr auto;
    gap: 1.6rem;
    align-items: baseline;
    padding: 1.1rem 0;
    margin-top: 0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
    color: inherit;
    text-decoration: none;
}

.brk-event__more-row:first-of-type { margin-top: var(--space-xs, 1.2rem); }

/* Sista raden bär ingen linje — listan slutar ändå där. */
.brk-event__more-row:last-of-type { border-bottom: 0; }

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

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

/* Utan gul kantlinje, av samma skäl som i agendan: varje rad hade den, så
   den skilde inget från något. */
.brk-event__more-date { padding-left: 0; white-space: nowrap; }

/* Datumet på EN rad, som i eventkorten. Dagarna satt i --h3 med månaden staplad
   under — samma mått som listsidans rader, där datumet är huvudsaken. Här är det
   en fotnot, och en tvåradig etikett i h3-storlek drog blicken till sig igen. */
.brk-event__more-day {

    font-weight: 700;
    font-size: var(--text-m);
    line-height: 1.1;
    white-space: nowrap;
}

.brk-event__more-mon {
    margin-left: .5rem;

    font-weight: 600;
    font-size: var(--text-xs, 1.2rem);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-dark, #000) 55%, transparent);
}

.brk-event__more-name {

    font-weight: 600;
    font-size: var(--text-m);
    line-height: 1.2;
    text-transform: uppercase;
}

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

/* Inlinad SVG, inte ett tecken: ikonen bär fill="currentColor" och ärver
   därmed den gula. Som <img> hade den renderats svart. */
/* Dämpad, inte gul: gult mot den ljusa plattan gav omkring 1.7:1 och pilen
   gick inte att se. Mörknar på hover. */
/* Pilen bort i den nedkokade listan: den satt i en egen 3rem-spalt och
   upprepade bara att raden är klickbar, vilket namnet och hoverytan redan
   säger. I 66ch är den spalten dyr. */
.brk-event__more-arrow { display: none; }

.brk-event__more-arrow--kvar {
    display: flex;
    justify-content: flex-end;
    color: color-mix(in srgb, var(--text-dark, #000) 45%, transparent);
    transition: color 120ms ease;
}

.brk-event__more-row:hover .brk-event__more-arrow { color: var(--text-dark, #000); }

.brk-event__more-arrow svg { display: block; }

@media (max-width: 767px) {
    /* minmax, inte 9rem fast: "30 AUG — 19 SEP" är 9,9rem och skrev över
       eventnamnet i 478 (uppmätt 2026-09-14). Samma resonemang som
       desktopregeln — kolumnen får växa, namnen står ändå på samma x för de
       vanliga, kortare datumen. */
    .brk-event__more-row { grid-template-columns: minmax(9rem, max-content) 1fr; }
    .brk-event__more-where { grid-column: 2; }
    .brk-event__more-arrow { display: none; }
    .brk-event__hero-inner { padding: var(--space-m, 2.4rem); }
}

/* Touch (2026-09-14): "← All events" i heron var 95×18 och "All events →" under
   listan 86×25. Träffytan upp till 44 px utan att flytta texten — paddingen
   betalas tillbaka med negativ vertikal marginal. */
@media (max-width: 991px) {
    .brk-event__back,
    .brk-event__more-all {
        min-height: 44px;
        margin-block: -1rem;
    }
}