/* ============================================================================
   RAJU — components. Consumes the token contract in tokens.css. Dark canvas,
   gold (#E9C45C) brand, FS Industrie display headings, slanted clips. Clean
   BEM (the §8 rename map); no fr-/NATO/version prefixes. @layer components so
   base resets never clobber these.
   ============================================================================ */
@layer components {

/* ── shared section scaffolding ──────────────────────────────────────────── */
.section { padding-block: var(--section-space-m); position: relative; z-index: 1; }
.section--tight { padding-block: var(--section-space-s); }
.section--alt { background: var(--color-base-ultra-dark); }
.section-head { text-align: center; margin-bottom: var(--space-xl); display: grid; gap: .6rem; justify-items: center; }
.section-head__title { font-size: clamp(2.8rem, 4vw, 4.6rem); text-transform: uppercase; letter-spacing: .01em; }
.section-head__title em { color: var(--color-primary); font-style: normal; }
.section-head__lead { color: var(--text-muted); max-width: 60ch; }
.section-cta { text-align: center; margin-top: var(--space-xl); }
.section-empty { text-align: center; color: var(--text-muted); padding-block: var(--section-space-s); }
.btn--glow { box-shadow: 0 0 0 0 var(--color-primary-trans-50); }
.btn--glow:hover { box-shadow: 0 0 24px -2px var(--color-primary-trans-50); }
.btn--pulse { animation: ticketPulse 2.2s ease-in-out infinite; }
@keyframes ticketPulse { 0%,100% { box-shadow: 0 0 0 0 var(--color-primary-trans-50); } 50% { box-shadow: 0 0 0 .9rem rgba(233,196,92,0); } }

/* page hero used by inner pages */
.page-hero { padding-block: calc(var(--header-height) + var(--section-space-m)) var(--section-space-s); text-align: center; position: relative; }
.page-hero__title { font-size: clamp(3.2rem, 6vw, 6rem); text-transform: uppercase; }
.page-hero__lead { color: var(--text-muted); max-width: 60ch; margin: 1.2rem auto 0; }

/* ════════════════════════════ HEADER / NAV ════════════════════════════════ */
.skip-link { position: absolute; }
.site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--header-height);
  background: linear-gradient(to bottom, rgba(13,13,12,.92), rgba(13,13,12,.55));
  backdrop-filter: blur(6px) saturate(33%); -webkit-backdrop-filter: blur(6px) saturate(33%);
  border-bottom: 1px solid var(--color-white-trans-10); transition: background var(--transition-duration); }
.site-header.is-scrolled { background: rgba(13,13,12,.97); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-m); }
.site-header__brand { flex: 0 0 auto; display: inline-flex; }
.site-header__logo { width: auto; height: 4.4rem; object-fit: contain; }
.site-header__aside { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-s); }

.main-nav__list { display: flex; align-items: center; gap: var(--nav-gap); }
.main-nav__item { position: relative; }
.main-nav__link { display: inline-block; padding: var(--nav-item-block-padding) var(--nav-item-inline-padding);
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-s);
  color: var(--nav-link-color); clip-path: var(--slant-nav); transition: var(--transition); }
.main-nav__link:hover { color: var(--nav-link-hover-color); background: var(--nav-item-background-hover-color); }
@media (max-width: 1100px) { .main-nav { display: none; } }

/* mega-menu */
.mega-menu { position: absolute; inset-inline-start: 50%; inset-block-start: calc(100% + .4rem); transform: translateX(-50%) translateY(10px);
  min-width: min(92vw, 88rem); background: var(--dd-bg-color); border: 1px solid var(--color-white-trans-10);
  box-shadow: var(--box-shadow-m); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s; z-index: 120; }
.main-nav__item--has-mega:hover .mega-menu, .main-nav__item--has-mega:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-menu__panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); padding: var(--dd-content-padding); }
.mega-menu__heading { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .12em; color: var(--color-primary); font-size: var(--text-s); margin-bottom: var(--space-s); }
.mega-menu__list { display: grid; gap: .4rem; }
.mega-menu__card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .6rem 1rem; transition: var(--transition); }
.mega-menu__card:hover { background: var(--dd-link-background-hover-color); }
.mega-menu__fighter { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.mega-menu__fighter:last-child { flex-direction: row-reverse; text-align: end; }
.mega-menu__fighter img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--color-base); }
.mega-menu__name { font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-menu__vs { color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-xs); }

/* lang switcher + ticket button + event meta */
.lang-switcher { display: flex; gap: .2rem; }
.lang-switcher__link { padding: .4rem .7rem; font-family: var(--font-heading); font-size: var(--text-s); color: var(--text-muted); border: 1px solid transparent; }
.lang-switcher__link.is-current { color: var(--color-primary); border-color: var(--color-primary-trans-30); }
.lang-switcher__link:hover { color: var(--color-white); }
.ticket-button { min-width: auto; padding: .7em 1.4em; font-size: var(--text-s); }
.site-header__event-meta { display: grid; text-align: end; line-height: 1.1; }
.site-header__event-venue { font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-xs); color: var(--text-light); }
.site-header__event-date { font-size: var(--text-xs); color: var(--color-primary); }
@media (max-width: 720px) { .site-header__event-meta, .ticket-button { display: none; } }

/* mobile nav */
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-white); transition: .3s; }
.mobile-nav { position: fixed; inset: var(--header-height) 0 auto 0; background: var(--color-neutral-ultra-dark); border-bottom: 1px solid var(--color-white-trans-10);
  z-index: 90; transform: translateY(-120%); transition: transform .3s; padding: var(--space-l); }
.nav-open .mobile-nav { transform: translateY(0); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav__list { display: grid; gap: .4rem; }
.mobile-nav__list a { display: block; padding: 1.2rem; font-family: var(--font-heading); text-transform: uppercase; border-bottom: 1px solid var(--color-white-trans-10); }
@media (max-width: 1100px) { .nav-toggle { display: flex; } }

/* ════════════════════════════ HERO ════════════════════════════════════════ */
.hero { position: relative; min-height: min(92vh, 80rem); display: flex; align-items: flex-end; padding-block: calc(var(--header-height) + var(--space-xl)) var(--section-space-l); overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; inset: 0; z-index: -1; }
.hero .overlay { background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(13,13,12,.55) 100%),
    linear-gradient(to top, var(--color-neutral-ultra-dark) 4%, rgba(13,13,12,.35) 55%, rgba(13,13,12,.65) 100%); }
.hero__inner { display: grid; gap: 1.2rem; max-width: 90rem; }
.hero__eyebrow { color: var(--color-primary); }
.hero__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem; line-height: .9; margin: 0; }
.hero__name { font-size: clamp(6rem, 14vw, 16rem); text-transform: uppercase; letter-spacing: -.01em; color: var(--color-white); }
.hero__number { font-size: clamp(6rem, 14vw, 16rem); color: var(--color-primary); }
.hero__subtitle { font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(1.8rem,2.4vw,2.8rem); color: var(--text-light); letter-spacing: .04em; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
.hero__date { color: var(--color-primary); font-size: var(--text-l); }
.hero__location { color: var(--text-light); font-size: var(--text-m); position: relative; padding-inline-start: 2.4rem; }
.hero__location::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 50%; width: 1.4rem; height: 1px; background: var(--color-white-trans-20); transform: translateY(-50%); }
.hero__tagline { color: var(--text-muted); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-s); }

/* ── fighter reel / marquee ──────────────────────────────────────────────── */
.fighter-reel { overflow: hidden; border-block: 1px solid var(--color-white-trans-10); background: var(--color-base-ultra-dark); padding-block: 1.4rem; }
.fighter-reel__track { display: flex; align-items: center; gap: 2.4rem; width: max-content; animation: reelScroll 50s linear infinite; }
.fighter-reel:hover .fighter-reel__track { animation-play-state: paused; }
.fighter-reel__item { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-l); color: var(--text-light); white-space: nowrap; }
.fighter-reel__item em { color: var(--color-primary); font-style: normal; margin-inline: .6rem; }
.fighter-reel__dot { color: var(--color-primary-dark); }
@keyframes reelScroll { to { transform: translateX(-50%); } }

/* ════════════════════════════ BOUT CARD (centerpiece) ═════════════════════ */
.fight-card-list { display: grid; gap: var(--space-l); }
.bout-card { position: relative; background: linear-gradient(180deg, var(--color-base) 0%, var(--color-base-ultra-dark) 100%);
  border: 1px solid var(--color-white-trans-10); padding: var(--space-l); display: grid; gap: var(--space-m); overflow: hidden; }
.bout-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #1d4ed8 0 50%, var(--color-danger) 50% 100%); opacity: .7; }

.fighter-vs { display: grid; grid-template-columns: var(--grid-3); align-items: stretch; gap: 1rem; }
.fighter-vs__corner { position: relative; display: flex; flex-direction: column; }
.fighter-vs__corner--blue { align-items: flex-start; text-align: start; }
.fighter-vs__corner--red { align-items: flex-end; text-align: end; }
.fighter-vs__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }

.fighter-card { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.fighter-vs__corner--red .fighter-card { align-items: flex-end; }
.fighter-card__photo { width: 100%; max-width: 22rem; aspect-ratio: 5 / 6; background: var(--color-base-ultra-dark); overflow: hidden; }
.fighter-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.fighter-vs__corner--blue .fighter-card__photo { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.fighter-vs__corner--red .fighter-card__photo { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.fighter-card__first-name { font-family: var(--font-body); font-size: var(--text-m); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fighter-card__last-name { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 2.6vw, 3.2rem); color: var(--color-white); line-height: 1; }
.fighter-card__nickname { color: var(--color-primary); font-style: italic; font-size: var(--text-s); }
.flag { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-size: var(--text-s); color: var(--text-light); }
.flag--red { flex-direction: row-reverse; }
.flag__img { width: 2.8rem; height: 2rem; object-fit: cover; border: 1px solid var(--color-white-trans-10); }
.flag__code { letter-spacing: .08em; }

/* center column bits */
.bout-card__weight { display: inline-block; background: var(--color-primary); color: var(--color-black); font-family: var(--font-heading); font-weight: 700; padding: .4rem 1.2rem; clip-path: var(--slant-card); font-size: var(--text-m); }
.bout-card__weight-unit { font-size: .7em; }
.bout-card__vs { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.4rem, 3vw, 3.6rem); color: var(--color-white-trans-20); letter-spacing: .1em; }
.bout-card__type { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: var(--text-xs); color: var(--color-primary); }
.bout-card__stage { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }

/* presented-by flip */
.presented-flip { position: relative; min-width: var(--width-xs); min-height: 3.2rem; display: grid; place-items: center; }
.presented-flip__slide { grid-area: 1 / 1; transition: opacity .5s; }
.presented-flip__slide--title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.presented-flip__slide--logo { opacity: 0; }
.presented-flip__slide--logo img { max-height: 3.2rem; width: auto; object-fit: contain; }
.presented-flip.is-switched .presented-flip__slide--title { opacity: 0; }
.presented-flip.is-switched .presented-flip__slide--logo { opacity: 1; }

/* winner / draw badge */
.bout-card__result { position: absolute; inset-block-start: -.4rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); font-weight: 700;
  padding: .4rem .9rem; clip-path: var(--slant-card); white-space: nowrap; }
.bout-card__result--blue, .bout-card__result--red { background: var(--color-success); color: #03210d; }
.bout-card__result--draw { background: var(--color-warning); color: #2b2200; }
.fighter-vs__corner--blue .bout-card__result { inset-inline-start: 0; }
.fighter-vs__corner--red .bout-card__result { inset-inline-end: 0; }

/* stats table */
.fight-stats { display: grid; gap: 1px; background: var(--color-white-trans-10); border: 1px solid var(--color-white-trans-10); }
.stat-row { display: grid; grid-template-columns: 1fr auto 1fr; background: var(--color-base-ultra-dark); align-items: center; }
.stat-row__value { padding: .8rem 1.4rem; font-family: var(--font-heading); font-size: var(--stats); line-height: var(--stats-height); color: var(--text-light); }
.stat-row__value--blue { text-align: start; } .stat-row__value--red { text-align: end; }
.stat-row__label { padding: .8rem 1.2rem; font-size: var(--stats-title); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-align: center; white-space: nowrap; }
.stat-row__label--short { display: none; }
.stat-country { display: inline-flex; align-items: center; gap: .5rem; }
.stat-country--red { flex-direction: row-reverse; }
.bout-card__cta { justify-self: center; }
@media (max-width: 560px) {
  .stat-row__label--full { display: none; } .stat-row__label--short { display: inline; }
  .fighter-card__photo { max-width: 14rem; }
}

/* ════════════════════════════ RESULTS TABLE ═══════════════════════════════ */
.results-table { display: grid; gap: 1px; background: var(--color-white-trans-10); border: 1px solid var(--color-white-trans-10); }
.results-table__head, .results-table__row { display: grid; grid-template-columns: 7rem 1fr 4rem 1fr 14rem; align-items: center; gap: 1rem; padding: 1rem 1.6rem; background: var(--color-base-ultra-dark); }
.results-table__head { color: var(--text-muted); font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .08em; }
.results-table__row--am { opacity: .92; }
.results-table__weight { color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-s); }
.results-table__fighter { display: flex; align-items: center; gap: .8rem; font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); }
.results-table__fighter--red { flex-direction: row-reverse; text-align: end; }
.results-table__badge { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: var(--text-xs); font-weight: 700; border-radius: 2px; }
.results-table__result--w .results-table__badge { background: var(--color-success); color: #03210d; }
.results-table__result--l .results-table__badge { background: var(--color-base-dark); color: var(--text-muted); }
.results-table__result--d .results-table__badge { background: var(--color-warning); color: #2b2200; }
.results-table__vs { text-align: center; color: var(--color-white-trans-20); font-family: var(--font-heading); }
.results-table__method { text-align: end; font-size: var(--text-s); color: var(--text-light); }
.results-table__detail { display: block; font-size: var(--text-xs); color: var(--text-muted); }
@media (max-width: 760px) {
  .results-table__head { display: none; }
  .results-table__row { grid-template-columns: 1fr; gap: .4rem; text-align: center; }
  .results-table__fighter, .results-table__fighter--red { flex-direction: row; justify-content: center; text-align: center; }
  .results-table__method { text-align: center; }
}

/* ════════════════════════════ SPONSORS ════════════════════════════════════ */
.sponsors__title { text-align: center; display: block; margin-bottom: var(--space-l); }
.sponsor-slider { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sponsor-slider__track { display: flex; align-items: center; gap: var(--space-xxl); width: max-content; animation: reelScroll 40s linear infinite; }
.sponsor-slider__item img { height: 5rem; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .65; transition: var(--transition); }
.sponsor-slider__item img:hover { filter: none; opacity: 1; }

/* ════════════════════════════ NEWS CARD / GRID ════════════════════════════ */
.news-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); }
.news-card { position: relative; background: var(--color-base); border: 1px solid var(--color-white-trans-10); overflow: hidden; clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); transition: var(--transition); }
.news-card:hover { border-color: var(--color-primary-trans-30); }
.news-card__link { display: grid; }
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.news-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card__image--empty { background: var(--color-base-ultra-dark); }
.news-card:hover .news-card__image { transform: scale(1.04); }
.news-card__body { padding: var(--space-m); display: grid; gap: .6rem; }
.news-card__date { color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.news-card__title { font-size: var(--text-l); text-transform: uppercase; }
.news-card__excerpt { color: var(--text-muted); font-size: var(--text-s); }

/* home latest videos */
.video-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
.video-card { display: grid; gap: .8rem; }
.video-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-base-ultra-dark); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.video-card:hover .video-card__thumb img { transform: scale(1.05); }
.video-card__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 5.4rem; height: 5.4rem; display: grid; place-items: center; background: var(--color-primary-trans-90); color: #000; border-radius: 50%; font-size: 2rem; }
.video-card__title { font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); color: var(--text-light); }

/* ════════════════════════════ SINGLE FIGHT ════════════════════════════════ */
.fight-detail { padding-block: calc(var(--header-height) + var(--section-space-s)) var(--section-space-s); }
.fight-detail__hero { text-align: center; display: grid; gap: 1rem; margin-bottom: var(--space-xl); }
.fight-detail__event-link { color: var(--color-primary); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: var(--text-s); }
.fight-detail__title { font-size: clamp(3rem, 6vw, 6rem); text-transform: uppercase; }
.fight-detail .bout-card { max-width: 96rem; margin-inline: auto; }
.fight-detail__related { margin-top: var(--section-space-s); }
.fight-detail__share { display: flex; gap: 1rem; justify-content: center; margin-top: var(--space-l); }
.fight-detail__share a, .article__share a { display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; border: 1px solid var(--color-white-trans-20); color: var(--text-light); transition: var(--transition); }
.fight-detail__share a:hover, .article__share a:hover { background: var(--color-primary); color: #000; border-color: var(--color-primary); }

.result-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--color-white-trans-10); border: 1px solid var(--color-white-trans-10); max-width: 96rem; margin: var(--space-xl) auto 0; }
.result-summary__item { background: var(--color-base-ultra-dark); padding: var(--space-m); text-align: center; display: grid; gap: .5rem; }
.result-summary__item--winner { background: linear-gradient(180deg, var(--color-primary-trans-20), var(--color-base-ultra-dark)); }
.result-summary__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.result-summary__value { font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-l); color: var(--color-white); }
.result-summary__item--winner .result-summary__value { color: var(--color-primary); }

.scorecard { max-width: 96rem; margin: var(--space-l) auto 0; display: grid; gap: 1rem; }
.scorecard__title { text-align: center; }
.scorecard__judges { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.scorecard__judge { background: var(--color-base); border: 1px solid var(--color-white-trans-10); padding: var(--space-s); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.scorecard__name { color: var(--text-muted); font-size: var(--text-s); }
.scorecard__score { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--text-l); }

/* fighter videos slider */
.fighter-videos { padding-block: var(--section-space-s); }
.video-slider { display: flex; gap: var(--space-m); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.video-slider__slide { flex: 0 0 min(80vw, 36rem); scroll-snap-align: start; position: relative; aspect-ratio: 16/9; background: var(--color-base-ultra-dark); overflow: hidden; cursor: pointer; border: 0; padding: 0; }
.video-slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.video-slider__slide iframe { width: 100%; height: 100%; border: 0; }
.video-slider__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 6rem; height: 6rem; display: grid; place-items: center; background: var(--color-primary-trans-90); color: #000; border-radius: 50%; font-size: 2.2rem; pointer-events: none; }

/* ════════════════════════════ SINGLE EVENT ════════════════════════════════ */
.event-page__hero { position: relative; padding-block: calc(var(--header-height) + var(--section-space-m)) var(--section-space-s); text-align: center; overflow: hidden; isolation: isolate; }
.event-page__poster { position: absolute; inset: 0; z-index: -2; }
.event-page__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.event-page__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-neutral-ultra-dark), rgba(13,13,12,.5)); }
.event-page__number { font-family: var(--font-heading); color: var(--color-primary); font-size: clamp(4rem,8vw,9rem); line-height: 1; }
.event-page__title { font-size: clamp(2.8rem, 5vw, 5rem); text-transform: uppercase; }
.event-page__meta { display: flex; gap: 1.2rem 2.4rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; font-family: var(--font-heading); text-transform: uppercase; color: var(--text-light); }
.event-nav { position: sticky; inset-block-start: var(--header-height); z-index: 40; background: rgba(13,13,12,.95); border-block: 1px solid var(--color-white-trans-10); backdrop-filter: blur(6px); }
.event-nav__list { display: flex; gap: 0; overflow-x: auto; }
.event-nav__link { padding: 1.4rem 2rem; font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); color: var(--text-muted); white-space: nowrap; }
.event-nav__link:hover { color: var(--color-primary); }

/* ════════════════════════════ PAST EVENTS ═════════════════════════════════ */
.fighter-search { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; max-width: 80rem; margin: 0 auto var(--space-xl); }
.fighter-search__input, .fighter-search__event-select { background: var(--color-base); border: 1px solid var(--color-white-trans-20); color: var(--text-light); padding: 1.2rem 1.6rem; font-size: var(--text-m); min-width: 24rem; flex: 1 1 24rem; }
.fighter-search__reset { border: 1px solid var(--color-white-trans-20); color: var(--text-muted); padding: 1.2rem 1.8rem; text-transform: uppercase; font-family: var(--font-heading); font-size: var(--text-s); }
.fighter-search__reset:hover { color: var(--color-white); border-color: var(--color-primary); }
.past-events__grid, .events-archive { display: grid; gap: var(--space-l); }
.event-card { background: var(--color-base); border: 1px solid var(--color-white-trans-10); padding: var(--space-l); display: grid; gap: var(--space-s); }
.event-card__title { font-size: clamp(2.2rem,3vw,3.4rem); text-transform: uppercase; }
.event-card__title a:hover { color: var(--color-primary); }
.event-card__meta { color: var(--color-primary); font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); letter-spacing: .06em; }
.event-card__fight-list { display: grid; gap: .3rem; }
.event-card__fight { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--color-white-trans-10); font-size: var(--text-s); color: var(--text-muted); }
.event-card__fight:hover { color: var(--text-light); }
.event-card__badge { font-family: var(--font-heading); font-size: var(--text-xs); padding: .15rem .6rem; background: var(--color-base-dark); color: var(--color-primary); }
.event-card__cta { justify-self: start; }
.event-card.is-hidden { display: none; }

/* ════════════════════════════ GALLERIES ═══════════════════════════════════ */
.galleries-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); }
.gallery-card { position: relative; aspect-ratio: 1; overflow: hidden; display: block; }
.gallery-card__bg { position: absolute; inset: 0; }
.gallery-card__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-card:hover .gallery-card__bg img { transform: scale(1.06); }
.gallery-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,.92), transparent 60%); }
.gallery-card__info { position: absolute; inset: auto 0 0 0; padding: var(--space-m); }
.gallery-card__title { font-size: var(--text-l); text-transform: uppercase; }
.gallery-card__venue { color: var(--color-primary); font-size: var(--text-s); }
.photo-gallery__tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: var(--space-l); }
.photo-gallery__tab { padding: .8rem 1.6rem; border: 1px solid var(--color-white-trans-20); color: var(--text-muted); font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); }
.photo-gallery__tab.is-active { background: var(--color-primary); color: #000; border-color: var(--color-primary); }
.photo-gallery__grid { display: none; grid-template-columns: repeat(auto-fill, minmax(18rem,1fr)); gap: .8rem; }
.photo-gallery__grid.is-active { display: grid; }
.photo-gallery__item { aspect-ratio: 1; overflow: hidden; background: var(--color-base-ultra-dark); }
.photo-gallery__item[data-extra] { display: none; }
.photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.photo-gallery__item:hover img { transform: scale(1.05); }
.photo-gallery__load-more { display: block; margin: var(--space-l) auto 0; }
.photo-gallery__external { color: var(--color-primary); }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94); display: none; place-items: center; }
.lightbox.is-open { display: grid; }
.lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lightbox__close, .lightbox__next, .lightbox__prev { position: absolute; color: #fff; font-size: 3rem; width: 5rem; height: 5rem; display: grid; place-items: center; }
.lightbox__close { inset: 2rem 2rem auto auto; }
.lightbox__prev { inset: 50% auto auto 1rem; transform: translateY(-50%); }
.lightbox__next { inset: 50% 1rem auto auto; transform: translateY(-50%); }

/* ════════════════════════════ ARTICLE / PROSE / PAGINATION ════════════════ */
.article { padding-block: calc(var(--header-height) + var(--section-space-s)) var(--section-space-s); }
.article__header { max-width: 80rem; margin: 0 auto var(--space-xl); text-align: center; display: grid; gap: 1rem; }
.article__hero { aspect-ratio: 16/9; overflow: hidden; margin-bottom: var(--space-l); }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__date { color: var(--color-primary); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-s); }
.article__title { font-size: clamp(3rem,5vw,5.4rem); text-transform: uppercase; }
.article__body, .prose { max-width: 76rem; margin-inline: auto; }
.prose, .article__body { color: var(--text); }
.prose p, .article__body p { margin-block: 1.2em; }
.prose h2, .article__body h2, .prose h3, .article__body h3 { margin-block: 1.6em .6em; text-transform: uppercase; }
.prose a, .article__body a { color: var(--color-primary); text-decoration: underline; }
.prose blockquote, .article__body blockquote { border-inline-start: 3px solid var(--color-primary); padding-inline-start: 2rem; margin-block: 1.6em; font-style: italic; color: var(--text-light); }
.article__tags { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: var(--space-l); }
.article__share { display: flex; gap: 1rem; justify-content: center; margin-top: var(--space-l); }
.pagination { display: flex; gap: .6rem; justify-content: center; margin-top: var(--section-space-s); }
.pagination__link { padding: 1rem 1.6rem; border: 1px solid var(--color-white-trans-20); font-family: var(--font-heading); color: var(--text-muted); }
.pagination__link--current { background: var(--color-primary); color: #000; border-color: var(--color-primary); }

/* ════════════════════════════ WATCH LIVE / TICKETS ════════════════════════ */
.ppv-player { max-width: 110rem; margin-inline: auto; }
.ppv-player__frame { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--color-white-trans-10); }
.ppv-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal { border: 1px solid var(--color-white-trans-20); background: var(--color-base); color: var(--text); max-width: 60rem; padding: var(--space-l); }
.modal::backdrop { background: rgba(0,0,0,.8); }
.ticket__cta { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; margin-block: var(--space-l); }
.sponsor-logos { display: flex; flex-wrap: wrap; gap: var(--space-l); justify-content: center; align-items: center; margin-top: var(--section-space-s); }
.sponsor-logos__item img { height: 4.6rem; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .7; }
.sponsor-logos__item img:hover { filter: none; opacity: 1; }

/* ════════════════════════════ FOOTER ══════════════════════════════════════ */
.site-footer { background: var(--color-black); border-top: 1px solid var(--color-white-trans-10); margin-top: var(--section-space-m); }
.site-footer__inner { display: grid; gap: var(--space-xl); padding-block: var(--section-space-s); grid-template-columns: 1.6fr 1fr 1fr; }
.site-footer__logo { height: 5rem; width: auto; object-fit: contain; }
.site-footer__lede { color: var(--text-muted); max-width: 36ch; margin-block: 1.2rem; }
.site-footer__col-title { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; color: var(--color-primary); font-size: var(--text-s); margin-bottom: var(--space-s); }
.site-footer__list { display: grid; gap: .6rem; }
.site-footer__link { color: var(--text-muted); font-size: var(--text-s); }
.site-footer__link:hover { color: var(--color-primary); }
.social-links { display: flex; gap: .8rem; margin-top: var(--space-s); }
.social-links__link { display: inline-grid; place-items: center; width: 4.2rem; height: 4.2rem; border: 1px solid var(--color-white-trans-20); color: var(--text-light); transition: var(--transition); }
.social-links__link:hover { background: var(--color-primary); color: #000; border-color: var(--color-primary); }
.social-links__icon { width: 2rem; height: 2rem; }
.site-footer__bottom { border-top: 1px solid var(--color-white-trans-10); padding-block: var(--space-m); }
.site-footer__copyright { color: var(--text-muted); font-size: var(--text-xs); text-align: center; }
@media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ════════════════════════════ HOME INTRO (admin copy) ═════════════════════ */
.home-intro__inner { max-width: 88rem; margin-inline: auto; text-align: center; display: grid; gap: 1.2rem; }
.home-intro__title { font-size: clamp(2.6rem, 4vw, 4.2rem); text-transform: uppercase; }
.home-intro__title em { color: var(--color-primary); font-style: normal; }
.home-intro__text { color: var(--text-muted); }

/* ════════════════════════════ PAGE-HERO variants ═════════════════════════ */
.page-hero { isolation: isolate; overflow: hidden; }
.page-hero--img { padding-block: calc(var(--header-height) + var(--section-space-l)) var(--section-space-m); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.page-hero--img .overlay { background: linear-gradient(to top, var(--color-neutral-ultra-dark), rgba(13,13,12,.55)); }
.page-hero__eyebrow { display: block; margin-bottom: 1rem; }
.page-hero__actions { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; margin-top: var(--space-l); }
.section-head--left { text-align: start; justify-items: start; }

/* ════════════════════════════ WATCH LIVE ═════════════════════════════════ */
.ppv-player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch__features { max-width: 70rem; margin: 0 auto; display: grid; gap: 1rem; }
.watch__feature { position: relative; padding-inline-start: 3rem; color: var(--text-light); font-size: var(--text-m); }
.watch__feature::before { content: "✦"; position: absolute; inset-inline-start: 0; color: var(--color-primary); }
.watch__devices { text-align: center; margin-top: var(--section-space-s); display: grid; gap: .6rem; }
.watch__devices-title { text-transform: uppercase; }
.watch__devices-text { color: var(--text-muted); }
.watch__cta { text-align: center; margin-top: var(--space-xl); }
.watch-support__links { display: flex; gap: 1rem; flex-wrap: wrap; }
.watch-support__link { padding: 1rem 1.8rem; border: 1px solid var(--color-white-trans-20); color: var(--text-light);
  font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); transition: var(--transition); }
.watch-support__link:hover { background: var(--color-primary); color: #000; border-color: var(--color-primary); }
.watch-support__form-wrap { margin-top: var(--space-l); max-width: 60rem; }
.watch-support__form-toggle { cursor: pointer; color: var(--color-primary); font-family: var(--font-heading); text-transform: uppercase; padding: 1rem 0; }
.watch-support__form { display: grid; gap: 1.2rem; margin-top: var(--space-s); }
.watch-support__intro { color: var(--text-muted); }
.watch-support__field { display: grid; gap: .5rem; }
.watch-support__label { font-size: var(--text-s); color: var(--text-muted); text-transform: uppercase; }
.watch-support__input { background: var(--color-base); border: 1px solid var(--color-white-trans-20); color: var(--text-light); padding: 1.1rem 1.4rem; font-size: var(--text-m); }
.watch-support__input--area { resize: vertical; min-height: 12rem; }

/* modal internals */
.modal { inset: 0; margin: auto; }
.modal__panel { position: relative; }
.modal__close { position: absolute; inset: 0 0 auto auto; font-size: 2.6rem; color: var(--text-muted); width: 4rem; height: 4rem; }
.modal__close:hover { color: var(--color-primary); }
.modal__title { text-transform: uppercase; margin-bottom: var(--space-s); padding-inline-end: 4rem; }
.modal__body { max-height: 60vh; overflow-y: auto; }

/* ════════════════════════════ TICKETS ════════════════════════════════════ */
.ticket-embed { max-width: 96rem; margin: var(--space-xl) auto 0; }
.ticket-embed__frame { position: relative; min-height: 60rem; border: 1px solid var(--color-white-trans-10); background: var(--color-base); }
.ticket-embed__iframe { width: 100%; min-height: 60rem; border: 0; }
.ticket-embed__fallback { text-align: center; padding: var(--space-l); color: var(--text-muted); }
.ticket-tiers { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); margin-top: var(--section-space-s); }
.sponsor-logos__link { display: inline-flex; }
.sponsor-logos__img { height: 4.6rem; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .7; transition: var(--transition); }
.sponsor-logos__link:hover .sponsor-logos__img { filter: none; opacity: 1; }

/* breadcrumbs */
.breadcrumbs { display: flex; gap: .6rem; flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-s); }
.breadcrumbs__sep { color: var(--color-white-trans-20); }
.breadcrumbs__current { color: var(--color-primary); }

/* fight-detail related + share lists */
.fight-detail__related { text-align: center; }
.fight-detail__related-title { display: block; margin-bottom: var(--space-s); }
.fight-detail__related-list { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.fight-detail__related-link { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border: 1px solid var(--color-white-trans-10);
  font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); color: var(--text-muted); transition: var(--transition); }
.fight-detail__related-link:hover { color: var(--color-primary); border-color: var(--color-primary-trans-30); }
.fight-detail__related-vs { color: var(--color-primary); }
.fight-detail__share { flex-direction: column; align-items: center; }
.fight-detail__share-title { display: block; margin-bottom: var(--space-s); }
.fight-detail__share-list { display: flex; gap: 1rem; justify-content: center; }
.fight-detail__share-link { display: inline-grid; place-items: center; min-width: 12rem; padding: 1rem 1.6rem; border: 1px solid var(--color-white-trans-20);
  font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-s); color: var(--text-light); transition: var(--transition); }
.fight-detail__share-link:hover { background: var(--color-primary); color: #000; border-color: var(--color-primary); }

/* reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity .6s, transform .6s; }
[data-reveal].is-revealed { opacity: 1; transform: none; }

}