/* Front-end styling for the Aalborg Håndbold widgets.
   Deliberately low-specificity single class selectors: every colour, spacing and
   type control in the Elementor Style tab writes a {{WRAPPER}}-scoped rule, and
   those must win without !important. */

/* `hidden` has to actually hide, on our elements.
   hello-elementor's reset.css styles `[type=button],[type=submit],button` with
   `display:inline-block`. That is (0,1,0) — exactly the weight of the
   `[hidden],template{display:none}` rule higher up the *same* file, and it comes
   later, so it wins: `el.hidden = true` set the attribute and changed nothing.
   The browser's own `[hidden]{display:none}` is in the UA stylesheet and loses
   to any author CSS at all.
   It bit twice. The filter's "Filtrér" button stayed visible after the script
   had hidden it, and the horizontal timeline's arrows stayed visible even with
   nothing to scroll — both are <button>. Scoped to our own class prefix, at two
   classes, so it beats the reset without touching anything else on the page.
   Anything of ours toggled with `el.hidden` relies on this. */
[class^="ah-"][hidden],
[class*=" ah-"][hidden] {
    display: none;
}

/* ------------------------------------------------------------- match list */

.ah-match-list {
    display: flex;
    flex-direction: column;
}

.ah-match {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Rows beyond the first batch are in the DOM but hidden until "Vis flere". */
.ah-match.is-hidden {
    display: none;
}

/* Kort tegnet af den oprindelige Elementor-skabelon. Afstanden er de 10px Jets
   .jet-listing-grid__item havde, ellers klistrer kampene sammen. Skjulningen
   skal nævne begge indpakninger: uden den her viste hele sæsonen på én gang,
   fordi "vis 10 ad gangen" kun kendte widgetens eget kort. */
.ah-match-list__item {
    padding: 10px 0;
    position: relative;
}

/* The whole fixture is clickable. The anchor is a sibling of the card rather
   than a wrapper around it, so it cannot nest around the ticket link inside;
   that one is lifted above the overlay so it still takes the click. */
.ah-match-list__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ah-match-list__item .elementor a {
    position: relative;
    z-index: 2;
}

.ah-match-list__overlay:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ah-match-list__item.is-hidden {
    display: none;
}

.ah-match-list__more {
    display: block;
    margin: 16px auto 0;
    padding: 10px 24px;
    cursor: pointer;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    border-radius: 4px;
}

/* Card layout mirrors the live site: date block, then competition and both
   clubs, then the score or the ticket button. */

.ah-match__when {
    display: flex;
    flex-direction: column;
    min-width: 116px;
    line-height: 1.3;
}

.ah-match__date {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ah-match__time {
    font-size: 0.9em;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.ah-match__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ah-match__league {
    margin: 0 0 4px;
    font-size: 0.85em;
    opacity: 0.75;
}

.ah-match__venue {
    margin: 0 0 4px;
    font-size: 0.85em;
    opacity: 0.75;
    font-style: italic;
}

.ah-match__teams {
    margin: 0;
    font-size: 1.05em;
    display: flex;
    flex-direction: column;
}

.ah-match__teams a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

/* The home club sits above the away club, so the pairing reads in playing
   order without needing a separate Hjemme/Ude marker. */
.ah-match__home {
    font-weight: 400;
    opacity: 0.85;
}

.ah-match__away {
    font-weight: 700;
}

.ah-match__result {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ah-match__score {
    font-size: 1.25em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ah-match__halftime {
    font-size: 0.85em;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Outcome is carried on the row so a season can be scanned at a glance. */
.ah-match--win .ah-match__score { color: #1a7f37; }
.ah-match--loss .ah-match__score { color: #b32d2e; }
.ah-match--draw .ah-match__score { opacity: 0.8; }

@media (max-width: 600px) {
    .ah-match {
        flex-wrap: wrap;
    }

    .ah-match__when {
        min-width: 0;
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .ah-match__result {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }
}

/* Away fixtures show a note instead of a button — tickets are sold by the
   opposing club, not by us. */
.ah-match__tickets-note {
    margin: 0;
    font-size: 0.85em;
    opacity: 0.75;
    max-width: 12em;
    display: block;
}

/* Same wording and position whether or not it links, so the row does not shift
   between fixtures that have a ticket URL and ones that do not. */
a.ah-match__tickets-note {
    color: inherit;
    text-decoration: underline;
}

a.ah-match__tickets-note:hover {
    opacity: 1;
}

.ah-match__tickets,
.ah-next__tickets {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    background: currentColor;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

.ah-match__tickets > *,
.ah-next__tickets > * {
    color: #fff;
}

/* ------------------------------------------------------------- next match */

.ah-next {
    padding: 24px;
}

.ah-next__label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75em;
    opacity: 0.7;
}

.ah-next__opponent {
    margin: 4px 0 8px;
}

.ah-next__opponent a {
    color: inherit;
    text-decoration: none;
}

.ah-next__meta {
    margin: 0 0 12px;
    font-size: 0.9em;
    opacity: 0.8;
}

.ah-next__countdown {
    font-size: 1.1em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0 0 12px;
}

.ah-next__score {
    font-size: 2em;
    font-weight: 700;
    margin: 0 0 12px;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ player grid */

.ah-player-grid__heading {
    margin: 24px 0 12px;
}

.ah-player-grid__heading:first-child {
    margin-top: 0;
}

.ah-player-grid__row {
    display: grid;
    grid-template-columns: repeat(var(--ah-columns, 4), minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1024px) {
    .ah-player-grid__row {
        grid-template-columns: repeat(min(var(--ah-columns, 4), 3), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ah-player-grid__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ah-player {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ah-player__media {
    position: relative;
    overflow: hidden;
    /* Portraits are shot at wildly different crops; a fixed ratio keeps the grid
       aligned regardless of the source image. */
    aspect-ratio: 3 / 4;
    background: rgba(0, 0, 0, 0.05);
}

.ah-player__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.ah-player__number {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 2em;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ah-player__body {
    padding: 10px 2px;
}

.ah-player__name {
    margin: 0;
    font-size: 1em;
}

.ah-player__position {
    margin: 2px 0 0;
    font-size: 0.85em;
    opacity: 0.7;
}

.ah-player__stats {
    margin: 6px 0 0;
    display: flex;
    gap: 12px;
    font-size: 0.8em;
    opacity: 0.8;
}

/* ---------------------------------------------------------------- scorers */

.ah-scorers {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ah-scorer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ah-scorer__number {
    min-width: 28px;
    font-weight: 700;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.ah-scorer__name {
    flex: 1 1 auto;
}

.ah-scorer__name a {
    color: inherit;
    text-decoration: none;
}

.ah-scorer__goals {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ facts */

.ah-facts {
    margin: 0;
}

.ah-fact {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ah-fact__label {
    margin: 0;
    opacity: 0.7;
}

.ah-fact__value {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* ------------------------------------------------------------ news grid */

.ah-post-grid {
    display: grid;
    grid-template-columns: repeat(var(--ah-columns, 3), minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .ah-post-grid {
        grid-template-columns: repeat(min(var(--ah-columns, 3), 2), minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ah-post-grid {
        grid-template-columns: 1fr;
    }
}

/* Same button as the fixture list's, but a link: it has to work without JS. */
.ah-post-grid__more {
    display: table;
    margin: 24px auto 0;
    padding: 10px 24px;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: inherit;
    font-size: 0.9em;
    text-decoration: none;
}

.ah-post-grid__more:hover,
.ah-post-grid__more:focus-visible {
    text-decoration: underline;
}

.ah-post-grid__more[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* ---------------------------------------------------------------- promo */

.ah-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 250px;
    overflow: hidden;
    background-color: #FE0000;
    color: #FFFFFF;
}

/* A promo field can carry a background image, the way an overlay card does.
   The image is set per repeater row, so it arrives as a custom property rather
   than from a selector control. The field's background colour stays underneath
   and shows while the image loads. */
.ah-promo--has-bg {
    background-image: var(--ah-promo-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Flat, not the cards' bottom-weighted gradient: a promo's text is centred, so
   darkening only the bottom would leave it sitting on bare photo. */
.ah-promo--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--ah-promo-scrim, rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.ah-promo__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* A promo can play a video instead of showing a still. Muted, looping and
   inline so a browser will actually autoplay it; the image, when both are set,
   becomes the poster so there is something on screen before it loads. */
.ah-promo__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ah-promo__title {
    font-family: "Arvo", Sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.2;
}

.ah-promo__text {
    font-size: 14px;
}

/* Positioned, because both the video and the scrim above are absolute: a
   static body is painted before them and its title and text disappeared behind
   the video — only the button, which carries its own z-index, stayed visible. */
.ah-promo__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    text-align: center;
    padding: 20px 10px;
}

.ah-promo__title,
.ah-promo__text {
    margin: 0;
    color: inherit;
}

/* Matches the live promo's button: fully rounded, outlined, inheriting the
   field's own colours so the two style controls are enough to restyle it. */
.ah-promo__button {
    align-self: center;
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid currentColor;
    border-radius: 30px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: inherit;
}

/* The automatic lift on hover, and the way to switch it off. The widget's hover
   colour controls set `--ah-promo-btn-bright: 1`, so a chosen hover colour is
   rendered as chosen instead of 10% lighter than chosen. Untouched, the button
   lifts the way it does today. */
.ah-promo__button:hover,
.ah-promo__button:focus-visible {
    filter: brightness(var(--ah-promo-btn-bright, 1.1));
}

/* Two or more fields in the same slot share the column and split its height,
   the way the live front page stacks the fixture and the shop link beside the
   hero card. */
.ah-post-grid__item--stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ah-post-grid__item--stack > .ah-promo {
    flex: 1;
    min-height: 0;
}

/* The next-match field brings its own widget; the skin comes from .ah-promo,
   so the widget's own padding and ticket-button colours step aside. */
.ah-promo--next .ah-next {
    padding: 0;
}

.ah-promo--next .ah-next__tickets {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 30px;
    padding: 10px 24px;
    font-weight: 600;
    color: inherit;
}

.ah-promo--next .ah-next__tickets > * {
    color: inherit;
}

/* No button text means the whole field is the link. */
.ah-promo__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ah-promo__overlay:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* A promo cell, or the wide hero card, spans more than one column. The
   span is clamped to the column count so it cannot overflow the grid once the
   breakpoints above have narrowed it. */
.ah-post-grid > .ah-post,
.ah-post-grid__item {
    grid-column: span min(var(--ah-colspan, 1), var(--ah-columns, 3));
}

@media (max-width: 1024px) {
    .ah-post-grid > .ah-post,
    .ah-post-grid__item {
        grid-column: span min(var(--ah-colspan, 1), 2);
    }
}

@media (max-width: 600px) {
    .ah-post-grid > .ah-post,
    .ah-post-grid__item {
        grid-column: span 1;
    }
}

/* The card is the picture. Image as background, a dark gradient over it, text
   in the bottom — the same treatment the live listing templates use
   (linear-gradient(180deg, #00000000 0%, #000000 97%), min-height 320/460,
   content justified to the end, white text). */
.ah-post {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Image on top, text under it — the news overview's card. */
/* 300px tall and as wide as that makes the photo, capped at the column: on
   live, WebP Express wraps the <img> in a <picture> that Jet's flex figure
   shrinks to fit, so a 3:2 photo is 449px in a 473px column, left-aligned. */
.ah-post--stacked .ah-post__media picture {
    display: block;
    height: 100%;
}

.ah-post--stacked .ah-post__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
}

/* Text over the image — the front page's card. */
.ah-post--overlay {
    justify-content: flex-end;
    min-height: 320px;
    color: #fff;
    background-color: #1a1a1a;
    background-image: var(--ah-post-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ah-post--overlay.ah-post--wide {
    min-height: 460px;
}

/* The gradient is what makes white text readable over a picture, so a card
   playing a video needs it just as much as one showing a still. */
.ah-post--overlay.ah-post--has-image::before,
.ah-post--overlay.ah-post--has-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(180deg, #00000000 0%, #000000 97%);
    pointer-events: none;
}

/* The video container carries Elementor's own background-video classes, so its
   position, overflow, z-index, pointer-events and fade-in all come from
   Elementor's stylesheet — the same rules the live site used. Nothing of ours
   here: a second set would only drift out of step with it. */

.ah-post__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    /* Grows so the button lines up across a row regardless of excerpt length.
       On the overlay card that would spread the text over the whole picture,
       so there the block is pinned to the bottom instead. */
    flex: 1 1 auto;
}

.ah-post--overlay .ah-post__body {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Type scale read off the live listing templates rather than guessed:
   hero 42px, front-page card 28px, news overview 21px — all Arvo 600, which
   Elementor already loads for this site. Excerpts 25px/1.4 on the hero and
   14px elsewhere. */
.ah-post__title {
    margin: 0;
    font-family: "Arvo", Sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.2;
}

.ah-post--overlay .ah-post__title {
    font-size: 28px;
}

.ah-post--overlay.ah-post--wide .ah-post__title {
    font-size: 42px;
}

.ah-post__meta,
.ah-post__excerpt {
    margin: 0;
    font-size: 14px;
}

.ah-post__meta {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.ah-post--overlay.ah-post--wide .ah-post__excerpt {
    font-size: 25px;
    line-height: 1.4em;
}

@media (max-width: 1024px) {
    .ah-post--overlay .ah-post__title {
        font-size: 30px;
    }

    .ah-post--overlay.ah-post--wide .ah-post__title {
        font-size: 30px;
    }

    .ah-post--overlay.ah-post--wide .ah-post__excerpt {
        font-size: 20px;
    }
}

.ah-post--overlay .ah-post__title a,
.ah-post--overlay .ah-post__meta,
.ah-post--overlay .ah-post__excerpt {
    color: inherit;
}

/* Above the overlay link, so they still take the click. */
.ah-post__body a {
    position: relative;
    z-index: 2;
}

.ah-post__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ah-post__overlay:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* Listing 2091 gave the picture a fixed 300px and cropped it to fit, so a
   row of cards lines its titles up whatever shape the photos are. */
.ah-post--stacked .ah-post__media {
    position: relative;
    display: block;
    overflow: hidden;
    height: 300px;
}

.ah-post__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




.ah-post__title a {
    color: inherit;
    text-decoration: none;
}


.ah-post__button {
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    color: inherit;
}

/* The news card, measured off listing 2091 on the live site: no inner padding,
   so the text lines up with the picture's edges; 20px between the parts; a
   red Arvo title; a dark calendar line; 16px excerpt; a red pill button that
   follows the text rather than dropping to the bottom of the row. */
/* Jet padded every item and the container inside it, which left the cards
   20px in from the widget's edges, 60px apart side by side and 40px apart
   row to row. Measured at 1580px wide: three 473px pictures, as live. */
.ah-post-grid:has(> .ah-post--stacked) {
    gap: 40px 60px;
    padding: 0 20px;
}

.ah-post--stacked .ah-post__body {
    padding: 20px 0 0;
    gap: 20px;
}

.ah-post--stacked .ah-post__title {
    margin: 8px 0 16px;
    color: var(--e-global-color-primary, #e1251b);
}

.ah-post--stacked .ah-post__excerpt {
    font-size: 16px;
    line-height: 24px;
    color: #2a2a2a;
}

/* Two classes deep, so the kit's link colour cannot paint the text red on
   its own red background. */
.ah-post .ah-post__chip,
.ah-post .ah-post__chip:hover {
    color: #fff;
}

.ah-post__chip {
    position: absolute;
    top: 23px;
    left: 24px;
    z-index: 2;
    padding: 2px 10px 3px;
    border-radius: 20px;
    background-color: var(--e-global-color-primary, #e1251b);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}

/* No picture to sit on: the chip stays in the flow, above the title. */
.ah-post__body > .ah-post__chip {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-start;
}

.ah-post__date {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #2a2a2a;
}

.ah-post__date-icon {
    flex: none;
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.ah-post--stacked .ah-post__button {
    margin-top: 0;
    padding: 12px 24px;
    border-radius: 30px;
    background-color: var(--e-global-color-primary, #e1251b);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

/* ------------------------------------------------------------- term list */

.ah-term-list {
    display: grid;
    grid-template-columns: repeat(var(--ah-columns, 4), minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 767px) {
    .ah-term-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ah-term {
    display: block;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-weight: 600;
}

.ah-term__count {
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 2px;
}

/* ---------------------------------------------------------------- archive */

.ah-season-archive {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ah-season-archive__link {
    display: block;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-weight: 600;
}

.ah-season-archive__count {
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 2px;
}

/* ------------------------------------------------------------- accordion */

.ah-accordion__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.ah-accordion__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

/* Hide the native disclosure triangle in both engines so the chevron below is
   the only marker. */
.ah-accordion__label::-webkit-details-marker {
    display: none;
}

.ah-accordion__label::marker {
    content: '';
}

.ah-accordion__label::after {
    content: '';
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.ah-accordion__item[open] > .ah-accordion__label::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.ah-accordion__content {
    padding: 0 4px 16px;
}

.ah-accordion__content > *:first-child {
    margin-top: 0;
}

.ah-accordion__content > *:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- filter */

.ah-filter__label {
    margin: 0 0 8px;
    font-weight: 600;
}

.ah-filter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.ah-filter--select .ah-filter__form {
    display: block;
}

/* The native dropdown, styled so the panel's controls can actually reach it.
   hello-elementor's reset gives every `select` a 1px #666 border, 3px corners
   and `width:100%` — and on top of that Safari on macOS ignores background,
   border and radius on a native select entirely unless appearance is cleared.
   So a radius control would have looked broken in one browser and done nothing
   in another. `appearance:none` fixes both, at the cost of the OS caret, which
   is why the wrapper draws one.
   Kept deliberately in step with .ah-filter__dropdown-label, so the two
   dropdown shapes look like the same control. */
.ah-filter__select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 250px;
    width: 100%;
}

.ah-filter__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 8px 34px 8px 16px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Caret on the wrapper, not the select: a select is a replaced element and has
   no pseudo-elements, and a background-image caret cannot follow currentColor.
   pointer-events off so the click still opens the list. */
.ah-filter__select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.15em);
    pointer-events: none;
}

/* The options list is drawn by the OS and inherits none of the above; without
   this a light-on-dark filter renders white text on white in the open list. */
.ah-filter__select option {
    color: #111111;
    background: #ffffff;
}

.ah-filter__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.ah-filter__count {
    opacity: 0.6;
}

/* Hidden by the script once JS confirms change-to-submit works; without JS it
   stays visible so the form is still usable. */
.ah-filter__submit {
    padding: 8px 18px;
    cursor: pointer;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    border-radius: 4px;
}

/* Collapsed variant (the `collapse` switcher), the shape Jet's
   jet-filter-items-dropdown had: a labelled button with the choices in a panel
   under it. Measured on production: 250px wide, 30px corners, club-red label —
   but those are left to the widget's controls so an editor can change them, and
   Jet's own `dropdown_label_color` value applies again through them. */
.ah-filter__dropdown {
    position: relative;
    max-width: 250px;
    flex: 1 1 100%;
}

.ah-filter__dropdown-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    /* The default triangle sits awkwardly in a padded button; the caret below
       replaces it. list-style covers Firefox, ::-webkit-details-marker Safari. */
    list-style: none;
}

.ah-filter__dropdown-label::-webkit-details-marker {
    display: none;
}

.ah-filter__dropdown-label::after {
    content: '';
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.15em);
}

.ah-filter__dropdown[open] > .ah-filter__dropdown-label::after {
    transform: rotate(-135deg) translateY(-0.15em);
}

/* Over the content rather than pushing it down, so opening a filter does not
   move the grid it filters. */
.ah-filter__dropdown-body {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 6px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: #ffffff;
    color: #111111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ah-filter__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.ah-filter__links .ah-filter__option {
    text-decoration: none;
    color: inherit;
    opacity: 0.7;
}

.ah-filter__links .ah-filter__option.is-active {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
}

.ah-post-grid__empty,
.ah-sponsors__empty {
    padding: 24px 0;
    opacity: 0.8;
}

/* ----------------------------------------------------------- mobile menu */
/* Defaults are JetMenu's own, so an instance without style settings looks
   like an unstyled jet-mobile-menu did; the live headers' colours, fonts and
   background arrive through the widget's style controls. */

/* Every button in the menu is reset here, hover and focus included. The
   Elementor kit paints `button` and `button:hover` as round red pills
   (`.elementor-kit-4 button:hover`, two classes and an element) and loads
   after this file, so the reset needs one class more than that to hold. */
.ah-mmenu .ah-mmenu__btn,
.ah-mmenu .ah-mmenu__btn:hover,
.ah-mmenu .ah-mmenu__btn:focus {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
}

.ah-mmenu .ah-mmenu__btn {
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    white-space: normal;
    transition: none;
}

.ah-mmenu .ah-mmenu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    min-height: 35px;
    font-size: 16px;
}

/* Hamburger drawn in CSS so no icon font or SVG has to load for the header. */
.ah-mmenu__bars,
.ah-mmenu__bars::before,
.ah-mmenu__bars::after {
    display: block;
    width: 1em;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}

.ah-mmenu__bars::before,
.ah-mmenu__bars::after {
    content: '';
    position: relative;
}

.ah-mmenu__bars::before { top: -0.34em; }
.ah-mmenu__bars::after  { top: 0.21em; }

.ah-mmenu__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 9998;
}

.ah-mmenu.is-open .ah-mmenu__overlay { opacity: 1; }

.ah-mmenu__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    /* Own scroll container: a long menu must scroll inside the panel rather
       than moving the page behind it. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    color: #3a3a3a;
    z-index: 9999;
    transition: transform .28s ease;
}

.ah-mmenu--right .ah-mmenu__panel { right: 0; transform: translateX(100%); }
.ah-mmenu--left  .ah-mmenu__panel { left: 0;  transform: translateX(-100%); }
.ah-mmenu.is-open .ah-mmenu__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .ah-mmenu__panel,
    .ah-mmenu__overlay { transition: none; }
}

/* Locking the body prevents the page scrolling under an open panel. */
body.ah-mmenu-open { overflow: hidden; }

.ah-mmenu__controls {
    display: flex;
    align-items: center;
    min-height: 35px;
}

.ah-mmenu__crumbs {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 20px;
}

.ah-mmenu .ah-mmenu__crumb {
    text-decoration: underline;
}

.ah-mmenu__crumb-divider {
    margin: 0 5px;
    font-size: 8px;
}

.ah-mmenu .ah-mmenu__close,
.ah-mmenu .ah-mmenu__back {
    position: relative;
    flex: 0 0 auto;
    min-width: 30px;
    min-height: 30px;
    margin-left: auto;
    font-size: 16px;
}

.ah-mmenu__close::before,
.ah-mmenu__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 2px;
    margin: -1px 0 0 -0.5em;
    background: currentColor;
}

.ah-mmenu__close::before { transform: rotate(45deg); }
.ah-mmenu__close::after  { transform: rotate(-45deg); }

.ah-mmenu__back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.45em;
    height: 0.45em;
    margin: -0.225em 0 0 -0.1em;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.ah-mmenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ah-mmenu__item {
    border-bottom: 0 solid transparent;
}

/* The whole row is the target — a link for a page, a button for a parent. */
.ah-mmenu .ah-mmenu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
}

.ah-mmenu__arrow {
    position: relative;
    flex: 0 0 30px;
    height: 30px;
}

.ah-mmenu__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -4px 0 0 -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* ---- Tidslinje (ah-timeline) ------------------------------------------ */
/* Erstatter jet-timeline. Kortene skiftevis til hver side af en midterlinje
   på desktop; under 1024px falder alt ned i én kolonne med linjen i venstre
   side. Lagt i grid frem for Jets flex + nth-child-omvending, så årstallet
   kun står i markup én gang. */

.ah-timeline {
    position: relative;
    width: 100%;
}

.ah-timeline__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background-color: #d5d8dc;
    overflow: hidden;
}

.ah-timeline__line-progress {
    width: 100%;
    height: 100%;
}

.ah-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    column-gap: 20px;
    padding-bottom: 40px;
}

.ah-timeline__item > .ah-timeline__card {
    grid-column: 1;
}

.ah-timeline__point {
    grid-column: 2;
    display: flex;
    justify-content: center;
}

.ah-timeline__meta {
    grid-column: 3;
    text-align: left;
}

/* Ulige punkter spejles, så kortene veksler side. */
.ah-timeline__item:nth-child(even) > .ah-timeline__card {
    grid-column: 3;
}

.ah-timeline__item:nth-child(even) .ah-timeline__meta {
    grid-column: 1;
    text-align: right;
}

.ah-timeline__card {
    position: relative;
}

.ah-timeline__card-inner {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.ah-timeline__card-img img {
    display: block;
    width: 100%;
    height: auto;
}

.ah-timeline__card-content {
    padding: 20px;
}

.ah-timeline__card-title {
    margin: 0 0 10px;
}

.ah-timeline__card-desc {
    margin: 0;
}

.ah-timeline__btn {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    text-decoration: none;
}

/* Pilen der peger fra kortet mod linjen. */
.ah-timeline__card-arrow {
    position: absolute;
    top: 30px;
    width: 20px;
    height: 20px;
    background-color: inherit;
    border: 10px solid transparent;
    border-left-color: #ffffff;
    right: -20px;
}

.ah-timeline__item:nth-child(even) .ah-timeline__card-arrow {
    right: auto;
    left: -20px;
    border-left-color: transparent;
    border-right-color: #ffffff;
}

.ah-timeline__point-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e1251b;
    color: #ffffff;
    line-height: 1;
}

/* Årstallet er sat stort (70px) i Elementor, så det skal have plads at bryde i. */
.ah-timeline__meta-content {
    display: inline-block;
    line-height: 1.1;
}

@media (max-width: 1024px) {
    .ah-timeline__line {
        left: 20px;
        transform: none;
    }

    .ah-timeline__item {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
    }

    /* Punktet øverst, derefter årstal og kort i samme kolonne. */
    .ah-timeline__item > .ah-timeline__card,
    .ah-timeline__item:nth-child(even) > .ah-timeline__card {
        grid-column: 2;
        grid-row: 2;
    }

    .ah-timeline__point {
        grid-column: 1;
        grid-row: 1;
    }

    .ah-timeline__meta,
    .ah-timeline__item:nth-child(even) .ah-timeline__meta {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }

    .ah-timeline__card-arrow {
        display: none;
    }
}

/* Ikonet i punktet har egen størrelse (Jets standard: 16px); punkt-typografien
   gælder kun tekst-punkter, ellers ville de 70px sprænge cirklen. */
.ah-timeline__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ah-timeline__icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ---- Vandret tidslinje (ah-hortimeline) -------------------------------- */
/* Erstatter jet-horizontal-timeline. Sporet ruller med scroll-snap, så det kan
   svøbes igennem uden JS; pilene tilføjes af hortimeline.js når JS er der. */

.ah-hortimeline {
    position: relative;
}

.ah-hortimeline__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ah-hortimeline__track::-webkit-scrollbar {
    display: none;
}

.ah-hortimeline__item {
    display: grid;
    grid-template-rows: 1fr auto auto;
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
    scroll-snap-align: start;
    padding: 0 10px;
}

.ah-hortimeline__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-bottom: 14px;
}

.ah-hortimeline__card-inner {
    width: 100%;
}

.ah-hortimeline__card-img img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ah-hortimeline__card-title,
.ah-hortimeline__card-desc {
    margin: 0;
}

.ah-hortimeline__card-desc p {
    margin: 0;
}

/* Linjen tegnes gennem punktrækken, så den løber ubrudt på tværs af elementerne
   uden et selvstændigt element at holde på plads. */
.ah-hortimeline__point {
    --ah-line-color: #d5d8dc;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    background: linear-gradient(
        to bottom,
        transparent calc(50% - 1px),
        var(--ah-line-color) calc(50% - 1px),
        var(--ah-line-color) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
}

.ah-hortimeline__point-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e1251b;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
}

.ah-hortimeline__meta {
    padding-top: 10px;
}

.ah-hortimeline__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background-color: #e1251b;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ah-hortimeline__arrow--prev {
    left: 0;
}

.ah-hortimeline__arrow--next {
    right: 0;
}

.ah-hortimeline__arrow[disabled] {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 1024px) {
    .ah-hortimeline__item {
        flex-basis: calc(100% / 2);
        max-width: calc(100% / 2);
    }
}

@media (max-width: 767px) {
    .ah-hortimeline__item {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ---- Logorække (ah-logos) ---------------------------------------------- */
/* Erstatter jet-carousel. Tre logoer i syv pladser står stille, så rækken er
   bare en flexrække; bliver der flere end der er plads til, ruller den. */

.ah-logos__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.ah-logos__track::-webkit-scrollbar {
    display: none;
}

.ah-logos__item {
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
    scroll-snap-align: center;
    text-align: center;
}

.ah-logos__link {
    display: block;
}

.ah-logos__img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .ah-logos__item {
        flex-basis: 33.333%;
        max-width: 33.333%;
    }
}

/* ---- Logogitter med filtre (ah-portfolio) ------------------------------- */
/* Erstatter jet-portfolio. Prods udseende: hvidt felt bag logoet med 15px luft,
   logoet i object-fit:contain, og navnet på halvgennemsigtig sort. Filtrene er
   rigtige knapper, så de kan nås med tastaturet — Jets var klikbare div'er. */

.ah-portfolio__filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 10px;
    margin-bottom: 20px;
}

/* Scoped through the row for weight: these are <button>, and the Elementor kit
   styles `.elementor-kit-4 button` (0,1,1) as a red 30px pill — which outweighs
   a bare `.ah-portfolio__filter-item` and turned every button into the active
   one. The partner page never showed it, because its own element CSS is (0,2,0)
   and wins; the same rule still wins over this one, being later. */
.ah-portfolio__filter .ah-portfolio__filter-item {
    padding: 7px 15px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
}

.ah-portfolio__filter .ah-portfolio__filter-item.is-active {
    background-color: #e1251b;
}

/* Hover skal ikke runde hjørnerne af. Kittets `.elementor-kit-4 button:hover`
   er (0,2,1) og slår reglen ovenfor (0,2,0), så den 30px radius kom tilbage så
   snart musen rørte en fane. Pseudoklassen her gør reglen (0,3,0). Den røde
   baggrund bliver — så viser hover, hvordan fanen ser ud valgt. */
.ah-portfolio__filter .ah-portfolio__filter-item:hover,
.ah-portfolio__filter .ah-portfolio__filter-item:focus,
.ah-portfolio__filter .ah-portfolio__filter-item:focus-visible {
    border-radius: 0;
}

.ah-portfolio__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ah-portfolio__item.is-hidden {
    display: none;
}

.ah-portfolio__inner {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.58);
}

.ah-portfolio__image {
    padding: 15px;
    background-color: #ffffff;
    line-height: 0;
}

/* Scoped through the list for weight, not for reach: Elementor core ships
   `.elementor img { height: auto }` (0,1,1), which beats a bare
   `.ah-portfolio__img` (0,1,0) and lets every logo keep its own height. The
   partner page never showed it, because Elementor writes an element-scoped rule
   from the `item_height` control's default and that one wins — so the bug only
   surfaced where the widget draws without per-element CSS. An editor changing
   the control still wins: same weight, later in the cascade. */
.ah-portfolio__list .ah-portfolio__img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.ah-portfolio__content {
    padding: 8px 0 0;
    text-align: center;
}

.ah-portfolio__title {
    margin: 0;
    color: #ffffff;
}

/* Kategorien står i markup (den er filterets nøgle og siger hvad rækken er),
   men er skjult i visningen — som sitets egen CSS gjorde det hos Jet. */
.ah-portfolio__category {
    display: none;
}

.ah-portfolio__button {
    display: inline-block;
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .ah-portfolio__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ah-portfolio__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Kampkortet på mobil ------------------------------------------------ */
/* Skabelonen er tre kolonner: logo, holdnavne, logo. Elementor stakker dem
   under 768px, så logoerne bliver adskilt af navnene. Her lægges kortets indre
   sektion i et grid i stedet: logoerne ved siden af hinanden øverst, navnene
   over hele bredden under dem.

   Kolonnerne udpeges på position frem for element-id, fordi de to varianter af
   kortet (hjemme og ude) har hver sit id-sæt men samme form — logo, navne, logo
   — og et bytte i Elementor ikke skal kunne ramme forbi. */

@media (max-width: 767px) {
    .ah-match-list__item .elementor-inner-section > .elementor-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        row-gap: 10px;
        column-gap: 12px;
    }

    /* Skabelonen sætter selv 50%/79% bredder på kolonnerne til mobil. Som
       grid-elementer ville de kun fylde halvdelen af deres felt, så bredden
       nulstilles her. */
    .ah-match-list__item .elementor-inner-section > .elementor-container > .elementor-inner-column {
        width: 100%;
        max-width: 100%;
    }

    .ah-match-list__item .elementor-inner-section > .elementor-container > .elementor-inner-column:nth-child(1) {
        grid-area: 1 / 1;
    }

    .ah-match-list__item .elementor-inner-section > .elementor-container > .elementor-inner-column:nth-child(3) {
        grid-area: 1 / 2;
    }

    /* Navnene under begge logoer, centreret på tværs af de to spalter. */
    .ah-match-list__item .elementor-inner-section > .elementor-container > .elementor-inner-column:nth-child(2) {
        grid-area: 2 / 1 / 3 / 3;
        text-align: center;
    }

    .ah-match-list__item .elementor-inner-section > .elementor-container > .elementor-inner-column:nth-child(2)
    .elementor-widget-heading {
        text-align: center;
    }

    /* Logoerne har vidt forskellige proportioner (klubbens eget er en bred SVG,
       modstandernes er kvadratiske bitmaps), så de får en fælles højde at rette
       ind efter i stedet for en fælles bredde. */
    .ah-match-list__item .elementor-inner-section .elementor-widget-image img {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 64px;
        margin-inline: auto;
    }
}

/* ---- Kort med bagside (ah-flip) ---------------------------------------- */
/* Erstatter jet-animated-box. Begge sider ligger oven på hinanden i fuld
   størrelse; hvilken der vises styres af hover og :focus-within, så linket på
   bagsiden også kan nås med tastaturet — Jets script lyttede kun på hover.
   Tiderne er Jets egne: 0,7s med samme cubic-bezier. */

.ah-flip {
    position: relative;
    height: 485px;
}

.ah-flip__side {
    position: absolute;
    inset: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    transition: opacity 0.7s cubic-bezier(0.5, 0.12, 0.46, 0.88),
                transform 0.7s cubic-bezier(0.5, 0.12, 0.46, 0.88);
}

.ah-flip__inner {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    min-width: 100%;
}

/* Krydsfade — den effekt kortet blev sat op med. */
.ah-flip--fade .ah-flip__side--front {
    opacity: 1;
    z-index: 2;
}

.ah-flip--fade .ah-flip__side--back {
    opacity: 0;
    z-index: 1;
}

.ah-flip--fade:hover .ah-flip__side--front,
.ah-flip--fade:focus-within .ah-flip__side--front,
.ah-flip--fade.is-flipped .ah-flip__side--front {
    opacity: 0;
    pointer-events: none;
}

.ah-flip--fade:hover .ah-flip__side--back,
.ah-flip--fade:focus-within .ah-flip__side--back,
.ah-flip--fade.is-flipped .ah-flip__side--back {
    opacity: 1;
}

/* De to vendinger deler alt undtagen aksen. */
.ah-flip--flip-y .ah-flip__side,
.ah-flip--flip-x .ah-flip__side {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.ah-flip--flip-y .ah-flip__side--back {
    transform: rotateY(-180deg);
}

.ah-flip--flip-x .ah-flip__side--back {
    transform: rotateX(-180deg);
}

.ah-flip--flip-y:hover .ah-flip__side--front,
.ah-flip--flip-y:focus-within .ah-flip__side--front,
.ah-flip--flip-y.is-flipped .ah-flip__side--front {
    transform: rotateY(180deg);
}

.ah-flip--flip-x:hover .ah-flip__side--front,
.ah-flip--flip-x:focus-within .ah-flip__side--front,
.ah-flip--flip-x.is-flipped .ah-flip__side--front {
    transform: rotateX(180deg);
}

.ah-flip--flip-y:hover .ah-flip__side--back,
.ah-flip--flip-y:focus-within .ah-flip__side--back,
.ah-flip--flip-y.is-flipped .ah-flip__side--back,
.ah-flip--flip-x:hover .ah-flip__side--back,
.ah-flip--flip-x:focus-within .ah-flip__side--back,
.ah-flip--flip-x.is-flipped .ah-flip__side--back {
    transform: none;
}

/* ------------------------------------------------------------ sponsors */

/* Sponsor wall. Low-specificity selectors so the Elementor Style tab controls
   can override without !important. */

.ah-sponsors {
    display: grid;
    grid-template-columns: repeat(var(--ah-columns, 5), minmax(0, 1fr));
    gap: 20px;
    align-items: center;
}

@media (max-width: 1024px) {
    .ah-sponsors {
        grid-template-columns: repeat(min(var(--ah-columns, 5), 4), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ah-sponsors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Wrapper around a tile drawn by an Elementor document (the `card_template`
   control). The document brings its own background, padding and typography, so
   this only has to make it fill the grid cell — Jet's own wrapper did the same
   with `padding: 10px` and let the card stretch. */
.ah-sponsors__item {
    display: flex;
    min-width: 0;
}

.ah-sponsors__item > * {
    flex: 1 1 auto;
    min-width: 0;
}

.ah-sponsor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    /* Logos arrive at wildly different aspect ratios; a fixed box keeps the wall
       on a grid regardless. */
    min-height: 90px;
}

.ah-sponsor__logo {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Transitioned so the optional grayscale-until-hover control animates. */
    transition: filter .2s ease, opacity .2s ease;
}

.ah-sponsor__fallback {
    font-weight: 600;
    text-align: center;
    font-size: 0.9em;
}

.ah-sponsor__name {
    font-size: 0.8em;
    text-align: center;
    opacity: 0.8;
}

/* ---- Partnervæggen på sponsorarkiverne ---------------------------------- */
/* Sponsorgitteret tegner partnersidens felt med dens egne .ah-portfolio-klasser,
   så de to sider ikke kan skride fra hinanden. Kun det partnersiden sætter pr.
   element (typografien) og det den ikke kan have (et felt uden logo) hører til
   her. Skal stå efter .ah-portfolio-blokken — samme specificitet, sidste vinder. */

.ah-sponsors--partner .ah-portfolio__title {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 400;
}

/* Uden logo ville feltet være en tom hvid kasse, og navnet under den står
   hvidt på mørk bund. Samme højde som logoet, så rækken ikke hopper. */
.ah-portfolio__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 0 10px;
    color: #1d1d1b;
    font-weight: 600;
    text-align: center;
}

/* ---- Filterknapper (ah-filter, style "pills") --------------------------- */
/* Samme række som partnersidens filtre — knapperne dér er <button>, disse er
   links, så et valg er en delbar URL. Resten af udseendet kommer fra
   .ah-portfolio__filter-item; her står kun det partnersiden sætter pr. element. */

.ah-filter--pills .ah-portfolio__filter-item {
    display: inline-block;
    font-family: "Arvo", serif;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
}

/* These are links, so the theme's link colour outweighs the white on
   `.ah-portfolio__filter-item` — deliberately left alone. The partner page's row
   sits on black and can afford white; #18901's sits on a light grey band, where
   white would be invisible, and the theme's red reads on both. The active one
   has to be said, or it would be red on the red background. */
.ah-filter--pills .ah-portfolio__filter-item.is-active {
    color: #ffffff;
}

/* Sponsorvæggens egen filterrække. Udseendet kommer fra .ah-portfolio__filter;
   her står kun den typografi partnersiden sætter pr. element, scopet så den
   side beholder sin egen. */
.ah-portfolio--sponsors .ah-portfolio__filter-item {
    font-family: "Arvo", serif;
    font-size: 22px;
    font-weight: 600;
}

/* Undergruppe-rækkerne står i markup fra serveren og skjules her, så siden
   uden JavaScript viser den øverste række og alle sponsorer — ikke fem
   rækker oven på hinanden. */
.ah-portfolio__filter.is-hidden {
    display: none;
}

/* Tilbage-knappen er navigation, ikke et filter, så den bærer aldrig den røde
   aktive baggrund. */
.ah-portfolio__filter .ah-portfolio__filter-item--back {
    opacity: 0.75;
}

.ah-portfolio__filter .ah-portfolio__filter-item--back:hover,
.ah-portfolio__filter .ah-portfolio__filter-item--back:focus-visible {
    opacity: 1;
}