/* 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. */

/* ------------------------------------------------------------- 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__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;
    }
}

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

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

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

.ah-promo__body {
    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;
}

.ah-promo__button:hover,
.ah-promo__button:focus-visible {
    filter: brightness(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. */
.ah-post--stacked .ah-post__image {
    display: block;
    width: 100%;
    height: auto;
}

/* 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;
}

.ah-post--overlay.ah-post--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #00000000 0%, #000000 97%);
    pointer-events: none;
}

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

.ah-post--stacked .ah-post__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

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

/* ------------------------------------------------------------- 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;
}

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

.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 */

.ah-mmenu__toggle,
.ah-mmenu__close,
.ah-mmenu__open,
.ah-mmenu__back {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.ah-mmenu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
}

/* 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: 1.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.26em; }

.ah-mmenu.is-open .ah-mmenu__bars { background: transparent; }
.ah-mmenu.is-open .ah-mmenu__bars::before { transform: translateY(0.34em) rotate(45deg); }
.ah-mmenu.is-open .ah-mmenu__bars::after  { transform: translateY(-0.26em) rotate(-45deg); }

.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: min(88vw, 380px);
    /* Own scroll container: a long menu must scroll inside the panel rather
       than moving the page behind it. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #111;
    color: #fff;
    z-index: 9999;
    transition: transform .28s ease;
    padding-bottom: 32px;
}

.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__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
}

.ah-mmenu__close::before,
.ah-mmenu__close::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 15px;
    width: 20px;
    height: 2px;
    background: currentColor;
}

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

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

.ah-mmenu__item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ah-mmenu__link {
    flex: 1 1 auto;
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
    text-align: left;
}

/* Separate hit area for opening a sub-level, so a parent that is also a real
   page keeps its own link. */
.ah-mmenu__open {
    flex: 0 0 auto;
    width: 56px;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

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

.ah-mmenu__back {
    display: block;
    width: 100%;
    padding: 12px 20px;
    text-align: left;
    opacity: 0.75;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ah-mmenu__back::before {
    content: '\2039';
    margin-right: 8px;
}

.ah-mmenu__header {
    padding: 16px 56px 8px 16px;
}

/* ---- 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;
}

.ah-portfolio__filter-item {
    padding: 7px 15px;
    border: 0;
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
}

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

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

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