/* Hero option 2: the same hero, rearranged. The patron stands on the left, the event panel on the
   right, the IDCE 2025 film still behind. One h1, one countdown, one stats row either way. */
.hero__patron { display: none; }

.hero--b .hero__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr);   /* two columns only when the patron block is there */
  column-gap: calc(34 * var(--pt)); row-gap: 0;
}
.hero--b .hero__inner:has(.hero__patron) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
/* let the children of main and side place themselves on the hero's own grid */
.hero--b .hero__main, .hero--b .hero__side { display: contents; }

.hero--b .hero__patron {
  display: flex; flex-direction: column; align-items: center; width: fit-content;
  grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: end; text-align: center;
  position: relative; isolation: isolate;
  margin-right: calc(-61 * var(--pt));   /* sits out past the content edge, still inside the page */
}
/* one wash, from behind the portrait down through the patronage line, soft on every side */
.hero--b .hero__patron::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-88 * var(--pt)) calc(-150 * var(--pt)) calc(-104 * var(--pt));
  background: linear-gradient(180deg,
    rgba(4, 17, 24, 0) 0%, rgba(4, 17, 24, .10) 20%, rgba(4, 17, 24, .26) 42%,
    rgba(4, 17, 24, .42) 62%, rgba(4, 17, 24, .40) 80%, rgba(4, 17, 24, .12) 93%, rgba(4, 17, 24, 0) 100%);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 52%, #000 22%, rgba(0, 0, 0, .62) 52%, rgba(0, 0, 0, .22) 78%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 52%, #000 22%, rgba(0, 0, 0, .62) 52%, rgba(0, 0, 0, .22) 78%, transparent 100%);
}
.hero--b .hero__title { grid-column: 1; grid-row: 1; }
.hero--b .hero__actions { grid-column: 1; grid-row: 2; margin-top: calc(22 * var(--pt)); }
.hero--b .countdown { grid-column: 1; grid-row: 3; margin-top: calc(26 * var(--pt)); justify-content: flex-start; }
.hero--b .hero__facts { grid-column: 1; grid-row: 4; margin-top: calc(22 * var(--pt)); }
.hero--b .hero-watch { display: none; }
.hero--b .hero__title img { width: calc(310 * var(--pt)); height: auto; }

.hero--b .hero__patron-text { position: relative; padding: calc(8 * var(--pt)) calc(14 * var(--pt)) calc(12 * var(--pt)); }

.hero__patron-photo {
  display: block; width: 100%; max-width: calc(222 * var(--pt)); height: auto;
  margin: 0 auto calc(10 * var(--pt));
  /* the portrait dissolves into the background instead of ending on a straight cut */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, .78) 74%, rgba(0, 0, 0, .3) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, .78) 74%, rgba(0, 0, 0, .3) 90%, transparent 100%);
  filter: drop-shadow(0 calc(10 * var(--pt)) calc(26 * var(--pt)) rgba(0, 0, 0, .55));
}
.hero__patron-kicker {
  font-family: var(--f-pop); font-weight: 700; text-transform: uppercase;
  font-size: calc(10 * var(--pt)); letter-spacing: .06em; color: var(--teal);
  margin-bottom: calc(6 * var(--pt));
}
.hero__patron-kicker, .hero__patron-name, .hero__patron-role { max-width: calc(222 * var(--pt)); }
.hero__patron-name {
  font-family: var(--f-pop); font-weight: 700; text-transform: uppercase; color: #fff;
  font-size: calc(14 * var(--pt)); line-height: 1.22;
}
.hero__patron-name span { display: block; text-wrap: balance; }   /* keeps "Al Khalifa" off a line of its own */
.hero__patron-name span:first-child { font-size: calc(10.5 * var(--pt)); color: rgba(255, 255, 255, .88); }
.hero__patron-role {
  margin-top: calc(6 * var(--pt)); font-family: var(--f-pop); font-weight: 400;
  font-size: calc(10 * var(--pt)); line-height: 1.35; color: var(--teal);
  text-transform: uppercase; letter-spacing: .03em; text-wrap: balance;
}

@media (max-width: 959px) {
  .hero--b .hero__inner { grid-template-columns: 1fr; row-gap: 22px; }
  .hero--b .hero__patron { grid-column: 1; grid-row: 5; margin-top: 8px; margin-left: auto; margin-right: auto; }
  .hero--b .hero__title, .hero--b .hero__actions, .hero--b .countdown, .hero--b .hero__facts { grid-column: 1; }
  .hero--b .hero__title { grid-row: 1; }
  .hero--b .hero__actions { grid-row: 2; }
  .hero--b .countdown { grid-row: 3; }
  .hero--b .hero__facts { grid-row: 4; }
  .hero__patron-photo { max-width: 250px; margin-inline: auto; }
  .hero__patron-name { font-size: 20px; }
  .hero__patron-name span:first-child { font-size: 15px; }
  .hero__patron-role { font-size: 13px; }
}