/* Two layouts (Index.cshtml): edge to edge, touching the header (default), or the card layout — in the page's .container, rounded and
   shadowed like the Forside promotion card below it; the club picks one in WPF. */
.shop-hero-wrap--card { padding-top: 1.5rem; }
.shop-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 12 / 5;   /* the large Forside event card incl. its text block (≈ 2.4 : 1): as wide and as tall as that card */
    overflow: hidden;
    border-radius: var(--ev-radius, 12px);
    box-shadow: var(--ev-card-shadow, 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06));
    background: #1b1b1b;
    isolation: isolate;
}

.shop-hero-wrap--bleed .shop-hero { max-height: min(65vh, 600px); border-radius: 0; box-shadow: none; }   /* 12:5 across a wide screen is tall */
.shop-hero-wrap--bleed .shop-hero__content { left: clamp(20px, 5vw, 96px); }

.shop-hero__poster,
.shop-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-hero__video {
    opacity: 0;
    transition: opacity 1s ease;   /* = the crossfade length in _HeroBannerPartial */
}

.shop-hero__video.is-playing { opacity: 1; }
/* Once the video plays, the poster steps aside (same 1s as the video fade): a sliver of it could show along the edge, behind the video */
.shop-hero__poster { transition: opacity 1s ease; }
.shop-hero:has(.shop-hero__video.is-playing) .shop-hero__poster { opacity: 0; }
.shop-hero__video { transform: scale(1.01); }   /* covers the sub-pixel gap at the rounded edge */

.shop-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18) 60%, transparent);
}

.shop-hero__content {
    position: absolute;
    z-index: 1;
    bottom: clamp(16px, 2.5vw, 48px);
    left: clamp(20px, 4vw, 56px);   /* inset from the card edge, not the screen */
    max-width: min(50%, 680px);
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.shop-hero__title {
    color: inherit;
    font-size: clamp(24px, 2.6vw, 44px);
    line-height: 1.12;
    margin: 0 0 .35em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.shop-hero__subtitle {
    color: inherit;   /* the theme paints <p> dark: it was dark on the dark shade */
    font-size: clamp(16px, 1.4vw, 22px);
    margin: 0 0 .5em;
}

.shop-hero__text {
    color: inherit;
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* The shop's pill button (club colour, like the checkout/profile buttons) instead of a square white outline. */
.shop-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin-top: 20px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--organiser-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.shop-hero__cta:hover,
.shop-hero__cta:focus {
    color: #fff;
    background: var(--organiser-color);
    filter: brightness(.92);
    text-decoration: none;
}

@media (max-width: 767px) {
    .shop-hero { aspect-ratio: 16 / 9; }   /* 12:5 on a phone is ~155px tall: too little for the text and button */
    .shop-hero__shade { background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 75%); }
    .shop-hero__content { left: 16px; right: 16px; bottom: 16px; max-width: none; }
    .shop-hero__title { font-size: clamp(18px, 5vw, 30px); -webkit-line-clamp: 2; }
    .shop-hero__subtitle, .shop-hero__text { display: none; }
    .shop-hero__cta { margin-top: 8px; padding: 7px 14px; font-size: 12px; }
    .shop-hero-wrap--card { padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-hero__video { display: none; }
}