/* ==========================================================================
   03-parity.css
   Operator parity feedback, run r-mxg96h (2026-08-06).

   Every number below is MEASURED from https://www.redkitegames.co.uk at 1920x950
   via artifacts/build/probe-games.mjs / probe-about.mjs / probe-embed.mjs, not
   estimated from a screenshot. The measurement tables are in
   artifacts/parity/r-mxg96h-feedback.md.

   Loaded after 01-styles.css and 02-updates.css so it wins equal-specificity
   ties against both the legacy sheet and Divi.
   ========================================================================== */

/* ==========================================================================
   #1 HOME / HERO VIDEO
   Symptom: video occupied only the top ~430px of the hero, then ~427px of white
   above the JOIN US button.
   Cause (probe-embed.mjs): Divi's FitVids wraps the Vimeo iframe in
   <div class="fluid-width-video-wrapper" style="padding-top:56.25%">. That
   wrapper is in-flow and position:relative, so its 1080px ratio box stacks on
   top of .embed__source's own padding-bottom:56.25% (also 1080px) and
   .embed__source computes to 2160px instead of the source site's 1080px.
   .hero__media (height 855px = 90vh, align-items:center, overflow:hidden) then
   centre-crops that double-height box, which pushes the iframe up and leaves
   empty space below it.
   Fix: take the FitVids wrapper out of the flow so the original ratio box drives
   the height again. Restores .embed__source to 1080px, identical to source.
   ========================================================================== */
.hero__media .embed__source > .fluid-width-video-wrapper {
  padding-top: 0 !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ==========================================================================
   #2 GAMES / FEATURE BLOCKS
   ========================================================================== */

/*
 * 2a. Container width.
 * Source: section spans the viewport but .section__media (the artwork) is
 * 1440px centred at l=240 in a 1920 viewport, and .section__content sits
 * exactly on top of it (also 1440 at l=240). Ours painted the artwork as a
 * full-bleed Divi section background, so on an HD screen the block ran
 * edge-to-edge. Constraining the section reproduces the source geometry
 * because source paints nothing outside the media box anyway.
 */
.et_pb_section.section--feature {
  max-width: 144rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

/*
 * Height. Source measures 1440x810 = 16:9, driven by the artwork's own aspect
 * ratio rather than a fixed height, so it scales with the viewport. The Divi
 * min_height="700px" that used to do this job is removed from the shortcode.
 * Below 768px the desktop artwork is too wide to drive a sensible height, so
 * fall back to a floor that fits the copy.
 */
/* At 1024 and up the artwork is the 16:9 desktop crop on both sites, so the
   ratio reproduces source exactly (measured: 1440 -> 810, 1024 -> 576 on both).
   Below 1024 source swaps in per-game MOBILE artwork with its own aspect, so its
   heights vary block to block (810-1000 at 768, 411-508 at 390) and no single
   ratio can match them. We serve one desktop image at every width, so use
   min-height there instead: it lands in source's range and, unlike aspect-ratio,
   it lets a long paragraph push the section taller rather than being clipped by
   the overflow:hidden above. */
@media (min-width: 64em) {
  .et_pb_section.section--feature {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .et_pb_section.section--feature {
    min-height: 80rem;
  }
}
@media (max-width: 47.99em) {
  .et_pb_section.section--feature {
    min-height: 45rem;
  }
}

/*
 * 2b. The red radial halo behind the copy.
 * Source paints it on .section__media::after as
 * radial-gradient(circle, var(--colorPrimary) 0%, rgba(0,0,0,0) 50%) and slides
 * it to sit behind the text: translateX(-40%) left, 0 centre, +40% right
 * (measured ±576px on the 1440px box). Our artwork is a Divi section background
 * so there is no .section__media element; the section carries the pseudo instead.
 */
.et_pb_section.section--feature::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--colorPrimary, #cd2027) 0%, rgba(0, 0, 0, 0) 50%);
  transform: translateX(-40%);
  pointer-events: none;
  z-index: 0;
}
.et_pb_section.section--feature.section--center::after {
  transform: translateX(0);
}
.et_pb_section.section--feature.section--right::after {
  transform: translateX(40%);
}

/* Keep the copy above the halo. */
.et_pb_section.section--feature .section__content {
  position: relative;
  z-index: 1;
}

/*
 * 2c. Text alignment.
 * Divi forced text-align:left on every title, paragraph and button wrapper, so
 * .section--center / .section--right had no visible effect and every block read
 * as left-aligned. Source alignment per block, read from the source markup's
 * own modifier classes (section--right / section--center / none):
 *   Exoborne right · Hogwarts Legacy left · Fall Guys centre · Suicide Squad left
 *   Control Ultimate Edition right · Mafia III left · Knockout City centre
 *   Battletoads right · Two Point Hospital centre · God of War III right
 *   Plus many more right
 */
.et_pb_section.section--feature .section__content,
.et_pb_section.section--feature .section__content .et_pb_text,
.et_pb_section.section--feature .section__content .et_pb_text_inner,
.et_pb_section.section--feature .section__content h2,
.et_pb_section.section--feature .section__content p,
.et_pb_section.section--feature .et_pb_button_module_wrapper {
  text-align: left;
}
.et_pb_section.section--feature.section--center .section__content,
.et_pb_section.section--feature.section--center .section__content .et_pb_text,
.et_pb_section.section--feature.section--center .section__content .et_pb_text_inner,
.et_pb_section.section--feature.section--center .section__content h2,
.et_pb_section.section--feature.section--center .section__content p,
.et_pb_section.section--feature.section--center .et_pb_button_module_wrapper {
  text-align: center;
}
.et_pb_section.section--feature.section--right .section__content,
.et_pb_section.section--feature.section--right .section__content .et_pb_text,
.et_pb_section.section--feature.section--right .section__content .et_pb_text_inner,
.et_pb_section.section--feature.section--right .section__content h2,
.et_pb_section.section--feature.section--right .section__content p,
.et_pb_section.section--feature.section--right .et_pb_button_module_wrapper {
  text-align: right;
}

/*
 * 2d. The gap between the copy and the Discover More button.
 * Source: .section--feature .section__content p { max-width:50rem; margin-bottom:3.2rem }
 * Ours measured margin-bottom:0 because Divi zeroes module paragraph margins,
 * so the button sat hard against the text on every block.
 */
/*
 * !important is load-bearing here, not laziness: the ported 02-updates.css
 * carries a blanket `p { margin-bottom: inherit !important }`. A bare type
 * selector with !important beats any non-important rule at any specificity, so
 * the legacy sheet's own `.section--feature .section__content p{margin-bottom:3.2rem}`
 * never applied and the paragraph inherited 0 from .et_pb_text_inner. Among
 * !important declarations specificity decides again, so (0,3,1) wins.
 * Same family as the `h1..h6{color:inherit!important}` trap in that file
 * (memory.md, 2026-08-05).
 */
.et_pb_section.section--feature .section__content p {
  max-width: 50rem;
  margin-bottom: 3.2rem !important;
  padding-bottom: 0;
}

/*
 * Source insets the copy 32px inside the 1440px container: p and button start at
 * 272 on a left block, end at 1648 on a right block, and centre at 710/857.
 * Divi's row had zero horizontal padding, putting everything 32px too far out.
 */
.et_pb_section.section--feature .section__content {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}
.et_pb_section.section--feature.section--center .section__content p {
  margin-left: auto;
  margin-right: auto;
}
.et_pb_section.section--feature.section--right .section__content p {
  margin-left: auto;
  margin-right: 0;
}

/* The button is its own module now, so kill Divi's default wrapper margin and
   let the paragraph's margin-bottom be the only gap. */
.et_pb_section.section--feature .et_pb_button_module_wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   #3 SHARED — legacy container rows
   Source gives every .section__content.constrain* row 32px of horizontal
   padding (measured: the About culture row is l=32 w=1376 inside a 1440
   viewport). Divi's row supplies none, so content sat 32px too far out on both
   edges — the culture graphic ran to the very edge at 1440 (r=1440 vs source's
   r=1408). Applying it to the legacy container class rather than per page keeps
   every migrated row on the same geometry as source.
   .constrain--no-gutter keeps its own override below.
   ========================================================================== */
.et_pb_section .et_pb_row.section__content.constrain {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}

/* ==========================================================================
   #4 ABOUT
   ========================================================================== */

/*
 * 3a. The title block.
 * On source the white panel behind ABOUT US is the h1 itself
 * (.text--title { background-color: var(--colorWhite) }), 1056px wide, sitting
 * over the last 80px of the hero image; the section and row are both
 * transparent, which is why the photo stays visible either side of it.
 * Divi paints .et_pb_section white by default, so ours covered the full 1920px
 * and the container effect disappeared.
 */
.et_pb_section.section--offset-top {
  background-color: transparent !important;
}

/* Source insets the row's contents by 32px (h1 measures l=432 w=1056 inside a
   row at l=400 w=1120). Divi's row had no horizontal padding. */
.et_pb_section.section--offset-top .section__content {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
  /* Source row starts flush with its section top, so the -8rem offset lands the
     title block exactly 80px up into the hero image. Divi's row padding-top was
     eating 27px of that overlap. */
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * 3b. Hero image.
 * Handled in post_content by moving off Divi's fullwidth section onto a normal
 * row carrying the source's own container classes
 * (section__content constrain constrain--wide constrain--no-gutter padding--none).
 * This just strips the row/column padding Divi would otherwise add inside it.
 */
/* Measured on source: this row is 1440 wide with padding 0/32px, giving a 1376px
   image at top 98 (flush under the 98px header). Divi was adding 27px of row
   padding-top and no horizontal padding, so ours rendered 1440x499 at top 125. */
/* Measured on source across the boundary: this row is the one exception to the
   flat 32px above. It runs edge-to-edge (padding 0) below 1536px and picks up
   32px at 96em and over, so the hero is full-bleed on a 1440 laptop and inset
   inside the 1440 container on an HD screen. Selector is (0,4,0) and sits after
   the shared rule so it wins the tie. */
.et_pb_section .et_pb_row.section__content.constrain--no-gutter {
  padding: 0;
}
@media (min-width: 96em) {
  .et_pb_section .et_pb_row.section__content.constrain--no-gutter {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
}
.et_pb_section .section__content.constrain--no-gutter .et_pb_column {
  padding: 0;
  margin-bottom: 0;
}
.et_pb_section .section__content.constrain--no-gutter .et_pb_image {
  margin-bottom: 0;
}
.et_pb_section .section__content.constrain--no-gutter .et_pb_image,
.et_pb_section .section__content.constrain--no-gutter .et_pb_image .et_pb_image_wrap,
.et_pb_section .section__content.constrain--no-gutter .et_pb_image img {
  display: block;
  width: 100%;
}