/* Manual event gallery; only event cards use these rules. */
.event-card-tile .salesCard { position: relative; }
.event-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.event-card-link:focus-visible::after { outline: 3px solid var(--ev-accent, #207ab6); outline-offset: 2px; }
.event-card-tile .sales-card-buttons > .btn:first-child { position: relative; z-index: 2; }
.event-sales-gallery { position: relative; width: 100%; aspect-ratio: 10 / 3; overflow: hidden; }
.event-sales-gallery__image { width: 100%; height: 100%; max-height: none !important; display: block; object-fit: cover; }
/* Sold out: the photo is muted (like the "kommer snart" tiles) with one centred pill on it; the text below goes grey */
.event-card--soldout .salesCard { background: transparent; }
.event-card--soldout .event-sales-gallery__image { filter: grayscale(.7) brightness(.65); opacity: .8; }
.event-sales-gallery__soldout { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 12px; pointer-events: none; }
.event-sales-gallery__soldout > span { max-width: 100%; color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.15; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.45); }
.event-card--soldout .salesCard .card-title-soldOut, .event-card--soldout .salesCard .card-text, .event-card--soldout .salesCard .card-text > .fa:first-child { color: #9ca3af !important; }
.event-card--soldout .salesCard > .card-body > .btn { display: none; }
/* Sold out: no browsing; the controls would sit on the "Ingen billetter til salg" overlay */
.event-card--soldout .event-sales-gallery__arrow, .event-card--soldout .event-sales-gallery__dots { display: none; }
/* The hover lift (transform) makes the gallery its own stacking context, which trapped the buttons under the tile's link overlay (z-index 1):
   lift the gallery above it, but let clicks on the picture fall through to the link; only the buttons catch them. */
.event-sales-gallery { z-index: 2; pointer-events: none; }
.event-sales-gallery__arrow, .event-sales-gallery__dot, .event-sales-gallery__dots { pointer-events: auto; }
.event-sales-gallery__arrow, .event-sales-gallery__dot { position: absolute; z-index: 2; cursor: pointer; border: 0; }
/* Design language: white round chips with the card shadow, club colour on hover; dots are plain white, the active one a pill */
.event-sales-gallery__arrow { top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #111827; line-height: 1; box-shadow: 0 2px 8px rgba(var(--ev-shadow-rgb), .25); transition: background .15s ease, color .15s ease; }
.event-sales-gallery__arrow:hover { background: var(--ev-accent, var(--organiser-color)); color: var(--ev-on-accent); }
.event-sales-gallery__arrow--previous { left: 12px; }
.event-sales-gallery__arrow--next { right: 12px; }
.event-sales-gallery__arrow svg { display: block; flex: none; width: 24px; height: 24px; }
.event-sales-gallery__dots { position: absolute; z-index: 2; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; padding: 0 6px; border-radius: 999px; background: rgba(17,24,39,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.event-sales-gallery__dot { position: static; display: flex; align-items: center; justify-content: center; width: 20px; height: 24px; padding: 0; background: transparent; }
.event-sales-gallery__dot::after { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.55); transition: width .2s ease, background .2s ease; }
.event-sales-gallery__dot[aria-pressed="true"]::after { width: 20px; background: #fff; }
.event-sales-gallery button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(var(--ev-shadow-rgb), .35); }
/* The gallery clips its image (overflow hidden), so the compact tile's radius, shadow and hover lift live on the gallery, not on the image:
   on the image they were cut off (no shadow, no lift). */
.home-page--compact .salesCard .event-sales-gallery { border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.home-page--compact .salesCard .event-sales-gallery:not(.event-sales-gallery--single) > .card-img-top { border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.home-page--compact .event-card-tile:not(.event-card--advertised):not(.event-card--soldout):hover .salesCard .event-sales-gallery,
.home-page--compact .event-card-tile:not(.event-card--advertised):not(.event-card--soldout):focus-within .salesCard .event-sales-gallery { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--ev-shadow-rgb), .22); }
/* The tile is no longer wrapped in an <a> (the link is the overlay above), so shop-ui.css's "a:hover .card-title" never matches: the title
   takes the club colour with its underline here instead, on hover and on keyboard focus of the overlay link. */
.home-page--compact .event-card-tile:not(.event-card--advertised):not(.event-card--soldout):hover .salesCard .card-title,
.home-page--compact .event-card-tile:not(.event-card--advertised):not(.event-card--soldout):has(.event-card-link:focus-visible) .salesCard .card-title { color: var(--ev-accent); text-decoration: underline; text-underline-offset: 3px; }
.home-page--compact .event-card-tile:not(.event-card--advertised):not(.event-card--soldout):has(.event-card-link:focus-visible) .salesCard .event-sales-gallery { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--ev-shadow-rgb), .22); }
.home-page--compact .event-card--advertised .card-img-top { opacity: .55; filter: saturate(.6); }
.home-page--compact .event-card--advertised .salesCard .card-title,
.home-page--compact .event-card--advertised .salesCard .card-text,
.home-page--compact .event-card--advertised .salesCard .card-text > .fa:first-child { color: #9ca3af; }
.home-page--compact .event-card-tile:not(.event-card--advertised):not(.event-card--soldout):hover .salesCard .card-img-top,
.home-page--compact .event-card-tile:focus-within .salesCard .card-img-top { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--ev-shadow-rgb), .22); }
/* One picture (no controls, not sold out): the wrapper steps out of the layout and the image is exactly what it was before the gallery: a direct
   child of the card, natural height capped like the theme's .card-img-top, its own radius, shadow and hover lift. */
.event-sales-gallery--single { display: contents; }
.event-sales-gallery--single > .event-sales-gallery__image { display: inline; width: 100%; height: auto; max-height: 332px !important; object-fit: fill; }
.col-sm-6 .zooming .card.salesCard .event-sales-gallery--single > .event-sales-gallery__image { max-height: 200px !important; }
@media (max-width: 575.98px) { .event-sales-gallery__arrow { width: 34px; height: 34px; } .event-sales-gallery__arrow svg { width: 22px; height: 22px; } .event-sales-gallery__arrow--previous { left: 8px; } .event-sales-gallery__arrow--next { right: 8px; } }