/* v15 - Brasa Dey tiles match the existing Brasa hero banner.
   Deliberately scoped to Brasa artwork inside event cards and its ticket thumbnail.
   Existing hero, card bodies, links, card dimensions and other events stay unchanged.
   Suriname on the left; the Netherlands fades in on the right; one yellow star. */

/* Remove only the old Brasa card-art tint so the flag colours match the banner. */
body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb)::before,
body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb)::after {
  display: none;
}

body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa {
  background: linear-gradient(180deg,
    #377E3F 0% 19.5%, #fff 20.5% 29.5%, #B40A2D 30.5% 69.5%,
    #fff 70.5% 79.5%, #377E3F 80.5% 100%);
  color: #fff;
  box-shadow: inset 1px 0 rgba(255,255,255,.14);
  isolation: isolate;
}

body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  clip-path: none;
  opacity: 1;
  background:
    radial-gradient(ellipse at 65% 4%,rgba(255,255,255,.10),transparent 65%),
    linear-gradient(180deg,#AE1C28 0% 32.8%,#fff 33.8% 66.2%,#21468B 67.2% 100%);
  -webkit-mask-image: linear-gradient(105deg,transparent 0% 32%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.42) 53%,rgba(0,0,0,.84) 65%,#000 80% 100%);
  mask-image: linear-gradient(105deg,transparent 0% 32%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.42) 53%,rgba(0,0,0,.84) 65%,#000 80% 100%);
  box-shadow: none;
  backdrop-filter: none;
  z-index: 0;
  pointer-events: none;
}

body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa::after {
  content: '';
  display: block;
  position: absolute;
  width: 12%;
  height: auto;
  aspect-ratio: 1;
  top: 50%;
  left: 53%;
  right: auto;
  bottom: auto;
  transform: translate(-50%,-50%);
  background: #ECC81D;
  clip-path: polygon(50% 0%,61.8% 35.5%,100% 35.5%,69% 58%,80.9% 94.5%,50% 72%,19.1% 94.5%,31% 58%,0% 35.5%,38.2% 35.5%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* The two-line white wordmark is centred in the red band, as in the hero. */
body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa .poster-title {
  top: 50%;
  bottom: auto;
  left: 7%;
  right: 29%;
  transform: translateY(-50%);
  max-width: none;
  font-size: clamp(22px, 2.8vw, 56px);
  line-height: .96;
  font-style: normal;
  letter-spacing: -.05em;
  text-shadow: none;
  color: #fff;
  z-index: 1;
}
body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa .poster-title small {
  font-size: 9px;
  letter-spacing: .13em;
  margin-top: 5px;
  line-height: 1.3;
  opacity: 1;
  color: #fff;
}

/* Keep the small ticket artwork readable without changing its size. */
body[data-page] .ticket-row[id="brasa-dey"] .ticket-thumb .poster-brasa .poster-title {
  font-size: 12px;
}
body[data-page] .ticket-row[id="brasa-dey"] .ticket-thumb .poster-brasa .poster-title small {
  display: none;
}

@supports (font-size: 1cqw) {
  body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa .poster-title {
    font-size: clamp(22px,10cqw,56px);
  }
  body[data-page] :is([data-event-card="brasa-dey"] .card-art, .ticket-row[id="brasa-dey"] .ticket-thumb) .poster-brasa .poster-title small {
    font-size: clamp(8px,2.1cqw,12px);
    margin-top: clamp(4px,1.5cqw,10px);
  }
  body[data-page] .ticket-row[id="brasa-dey"] .ticket-thumb .poster-brasa .poster-title {
    font-size: clamp(9px,10cqw,16px);
  }
}