/* ==========================================================================
   03-parity.css
   Visual parity corrections against the legacy design (2026-08-06).

   Every number below is MEASURED from https://www.redkitegames.co.uk at 1920x950
   with scripted DOM measurement, not estimated from a screenshot.

   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%;
}

/* ==========================================================================
   #5 HOME / OUR HISTORY — the text-with-image--angled block
   2026-08-10. The media half must fill the block full-height with a centre
   crop, matching the legacy design, rather than letterboxing a scaled image.

   Measured at 1920x950:

                     source                     staging (before)
     block           272..1648  1376 x 819      240..1680  1440 x 815
     text half       304..960    656 x 819      272..922    650 x 761
     media half      960..1616   656 x 819      998..1648   650 x 500
     <img>           1280 x 948 absolute,       650 x 482 in flow,
                     centre-cropped by the      letterboxed inside a
                     656x819 window             500px min-height box

   Three independent causes, all invisible in the stylesheet:

   a) Source's .grid is display:flex, so .grid__item (the media half) STRETCHES
      to the text half's height and .text-with-image__media's height:100%
      resolves against it. A Divi row is display:block with floated columns, so
      the media column collapsed to content height and the legacy
      min-height:50rem was the only thing holding it open -> 500px, i.e. 319px
      short, which is the whitespace under the image.
   b) Source's .text-with-image__image is position:absolute with
      min-width/min-height:100%, max-width:none, centred by translate(-50%,-50%)
      — a centre crop at the image's natural size. Divi's image module renders
      <span class="et_pb_image_wrap"><img max-width:100%>, i.e. an in-flow image
      scaled DOWN to the column width — the "smaller image".
   c) Divi's 5.5% column gutter put a 76px gap between the two halves
      (text ends 922, media starts 998), so the red diagonal wedge — drawn at
      left:100% of the text panel — landed in that gap instead of overlapping
      the photo as it does on source.

   The row also now carries the source's own `constrain--no-gutter` class (added
   to module_class in post_content), which hands it the already-measured
   padding rule in #4: 0 below 96em, 32px at 96em and over. That reproduces
   source's full-bleed block at 1440 (measured 0..1440) and its 1376 inset at
   1920 (272..1648).
   ========================================================================== */

/* Source nests a SECOND .constrain inside .text-with-image, so the flex grid is
   inset a further 32px — but only where .constrain has padding, i.e. 96em and
   over. Measured: grid 304..1616 at 1920, 0..1440 at 1440. (0,5,0) beats the
   #4 no-gutter rule it is layering on top of. */
@media (min-width: 96em) {
  .et_pb_section .et_pb_row.section__content.constrain--no-gutter.text-with-image--angled {
    padding-left: 6.4rem;
    padding-right: 6.4rem;
  }
}

/* Source's .section carries the vertical rhythm (measured padding 4rem, 8rem at
   80em+); ours is built with custom_padding 0, and Divi's row supplied 27px of
   its own instead. It has to go on the SECTION, not the row: the row is the
   element carrying .constrain's overflow:hidden, which is what clips the wedge
   below (a 1200px border triangle). Vertical padding on the row would move that
   clip 80px past the panel and leak a red sliver into the gap under the block —
   exactly what the first attempt at this fix produced. With the row's padding
   box equal to its content box, it clips flush like source's .constrain does.
   Beats Divi's own `.et_pb_section_4.et_pb_section{padding:0}` on specificity,
   (0,3,0) vs (0,2,0), no !important needed. */
.et_pb_section.section.bg--grunge-light:has(.text-with-image--angled) {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 80em) {
  .et_pb_section.section.bg--grunge-light:has(.text-with-image--angled) {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* The wedge is drawn by .text-with-image__content::before/::after at left:100%,
   and on source it lands over the photo because source's .grid__item is a plain
   static div. Divi gives EVERY .et_pb_column `position:relative; z-index:2`, so
   each column is its own stacking context: the pseudo's z-index 1/2 is scoped
   inside the text column and the media column, later in DOM order at the same
   z-index 2, paints straight over it. Computed styles on the two pseudos are
   byte-identical to source — the wedge was never missing, only buried. Lifting
   the text column one level above its sibling restores source's paint order. */
.et_pb_section .et_pb_row.text-with-image--angled > .et_pb_column:first-child {
  z-index: 3;
}

/* (a) + (c). Scoped to 48em and up because that is where source's .grid--double
   splits into halves (.grid__item max-width:50% at min-width:48em); below it
   source stacks full-width and so does Divi, so Divi's own responsive CSS is
   left alone there. */
@media (min-width: 48em) {
  .et_pb_section .et_pb_row.section__content.text-with-image--angled {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .et_pb_section .et_pb_row.text-with-image--angled > .et_pb_column.et_pb_column_1_2 {
    width: 50%;
    max-width: 50%;
    margin: 0;
    padding: 0;
    float: none;
  }
  /* The red panel is the text module's own background, so it has to stretch too. */
  .et_pb_section .et_pb_row.text-with-image--angled .text-with-image__content {
    height: 100%;
    margin-bottom: 0;
  }
  .et_pb_section .et_pb_row.text-with-image--angled .text-with-image__media {
    height: 100%;
  }
}

/* (b). Verbatim reproduction of source's .text-with-image__image rules. NOT
   object-fit:cover: cover would scale 1280x948 DOWN to fit the 656px width
   (1106x819 rendered), giving a wider, less zoomed crop than source, which
   centres the image at its natural size and lets the window clip it. The
   .et_pb_image_wrap span has to become a block first or the absolute image has
   no full-height containing block. Selector is (0,5,0) so it beats the
   `constrain--no-gutter ... img { width:100% }` rule in #4 above. */
.et_pb_section .et_pb_row.text-with-image--angled .et_pb_image.text-with-image__media {
  display: block;
  width: 100%;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.et_pb_section .et_pb_row.text-with-image--angled .text-with-image__media .et_pb_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.et_pb_section .et_pb_row.text-with-image--angled .text-with-image__media .et_pb_image_wrap img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
}

/* The panel's own vertical rhythm. Measured per element at 1920, source vs ours:
     h2  86 + mb 24   ->  96 + mb 0   (Divi: padding-bottom 10px)
     h3 134 + mb 24   -> 144 + mb 0   (Divi: padding-bottom 10px)
     p  151 + mb 24   -> 169 + mb 0   (Divi: padding-bottom 1em, last-of-type 0)
     p  151 + mb 24   -> 151 + mb 0
   Sum 619 vs 561, i.e. the red panel stood 761px against source's 819px, and
   the copy read as one undifferentiated block because the paragraph gaps came
   from padding on the wrong elements. margin-bottom needs !important for the
   same reason as #2d: 02-updates.css carries a blanket
   `p { margin-bottom: inherit !important }`. */
.et_pb_section .et_pb_row.text-with-image--angled .text-with-image__content h2,
.et_pb_section .et_pb_row.text-with-image--angled .text-with-image__content h3,
.et_pb_section .et_pb_row.text-with-image--angled .text-with-image__content p {
  padding-bottom: 0;
  margin-bottom: 2.4rem !important;
}

/* Below 48em both sites stack, and there the natural-size centring above breaks
   down for us but not for source: WordPress's srcset hands a 480x356 variant to
   a 390px viewport, and 356px cannot fill the 500px min-height box, so the photo
   sat letterboxed inside it (measured 480x356 in a 390x500 window). Source is
   unaffected only because it serves a 768x569 file at that width. Forcing the
   full-size file on a phone would be a real payload regression, so use
   object-fit:cover here instead — it fills without distortion whatever variant
   the browser picks. The wrap needs a definite height for the crop to resolve;
   50rem is the legacy min-height. */
@media (max-width: 47.99em) {
  .et_pb_section .et_pb_row.text-with-image--angled .et_pb_image.text-with-image__media,
  .et_pb_section .et_pb_row.text-with-image--angled .text-with-image__media .et_pb_image_wrap {
    height: 50rem;
  }
  .et_pb_section .et_pb_row.text-with-image--angled .text-with-image__media .et_pb_image_wrap img {
    position: static;
    transform: none;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }
}