/*==================================================================
  BBC — 4K / LARGE-SCREEN OPTIMISATION
  ------------------------------------------------------------------
  File            : assets/css/bbc-4k.css
  Loaded          : LAST stylesheet on every page
  Scope           : min-width: 1921px ONLY

  WHY THIS FILE EXISTS
  --------------------
  The layout is built on a fixed 1390px container with px-based
  typography and spacing. That is correct up to 1920px, but above it
  nothing grows: at 3840x2160 the same 1390px band occupies only 36%
  of the screen (versus 72% at 1920px), so the whole site reads at
  roughly half scale and floats in the middle of an empty canvas.

  APPROACH
  --------
  Two independent, complementary axes:

    1. SCALE  - `zoom` on the root element steps up in small
                increments. Because every ratio inside the design is
                preserved exactly, the 4K rendering is the 1920px
                design enlarged, never a re-flowed or re-tuned one.
                Nothing needs to be restyled component by component,
                so no component can be missed.

    2. WIDTH  - the container is widened so the content band keeps
                filling ~68% of the physical screen instead of
                shrinking towards the middle. This is what stops the
                page looking "lost in the center".

  Scale is deliberately NOT 2.0x at 3840px. A straight doubling is
  mathematically faithful but reads as zoomed-in. The ladder tops out
  at 1.56x and the container widening absorbs the remainder, which
  keeps the proportions natural while still using the screen.

  SAFETY
  ------
  * Every rule below sits inside `min-width: 1921px`. At 1920px and
    below this file contributes nothing - verified by pixel-diffing
    every page at 1366 / 1440 / 1536 / 1600 / 1920 before and after.
  * `--bbc-z` mirrors the active zoom so any length that must be
    expressed against the real viewport can divide it back out.
  * Browsers without `zoom` (Firefox < 126) still receive the
    container widening, so they degrade to "wider", never to "worse".

  HOW TO TUNE
  -----------
  Change only the `zoom` numbers in section 1 to make the whole site
  uniformly larger or smaller at a given width, and the 0.68 factor in
  section 3 to make the content band wider or narrower. Keep `--bbc-z`
  identical to `zoom` in the same block or section 4 will drift.
==================================================================*/


/*==================================================================
  1. SCALE LADDER
  ------------------------------------------------------------------
  Steps are small (4-6% apart) so resizing across a breakpoint is not
  perceptible. 1921px starts at 1.03 so there is no visible jump at
  the 1920/1921 boundary.
==================================================================*/

@media only screen and (min-width: 1921px) {
  html {
    zoom: 1.03;
    --bbc-z: 1.03;
  }
}

@media only screen and (min-width: 2100px) {
  html {
    zoom: 1.09;
    --bbc-z: 1.09;
  }
}

@media only screen and (min-width: 2300px) {
  html {
    zoom: 1.15;
    --bbc-z: 1.15;
  }
}

/* 2560 x 1440 — QHD */
@media only screen and (min-width: 2560px) {
  html {
    zoom: 1.23;
    --bbc-z: 1.23;
  }
}

@media only screen and (min-width: 2800px) {
  html {
    zoom: 1.30;
    --bbc-z: 1.30;
  }
}

/* 2880 x 1620 */
@media only screen and (min-width: 3000px) {
  html {
    zoom: 1.36;
    --bbc-z: 1.36;
  }
}

/* 3200 x 1800 */
@media only screen and (min-width: 3200px) {
  html {
    zoom: 1.42;
    --bbc-z: 1.42;
  }
}

/* 3440 x 1440 — ultra-wide (see section 2, height cap applies) */
@media only screen and (min-width: 3440px) {
  html {
    zoom: 1.47;
    --bbc-z: 1.47;
  }
}

@media only screen and (min-width: 3600px) {
  html {
    zoom: 1.51;
    --bbc-z: 1.51;
  }
}

/* 3840 x 2160 — 4K UHD, the primary target */
@media only screen and (min-width: 3840px) {
  html {
    zoom: 1.56;
    --bbc-z: 1.56;
  }
}

/* Beyond 4K — 5K / 6K / 8K panels */
@media only screen and (min-width: 4480px) {
  html {
    zoom: 1.70;
    --bbc-z: 1.70;
  }
}

@media only screen and (min-width: 5120px) {
  html {
    zoom: 1.85;
    --bbc-z: 1.85;
  }
}

@media only screen and (min-width: 6000px) {
  html {
    zoom: 2.00;
    --bbc-z: 2.00;
  }
}


/*==================================================================
  2. HEIGHT CAPS — ultra-wide and short panels
  ------------------------------------------------------------------
  Width alone is a poor proxy for pixel density. 3440x1440 and
  2560x1080 are wide but no denser than a normal desktop, so scaling
  them by width would make everything feel oversized and would push a
  lot of content below the fold on a short viewport.

  These blocks cap the scale on short screens. Each one is gated with
  a min-width chosen so the cap can only ever LOWER the value set in
  section 1, never raise it. The container in section 3 divides
  `--bbc-z` back out, so a capped screen automatically receives a
  proportionally wider container instead — the layout still fills the
  space, it just does it with width rather than with scale.
==================================================================*/

/* <= 1200px tall — e.g. 2560x1080 ultra-wide */
@media only screen and (min-width: 2100px) and (max-height: 1200px) {
  html {
    zoom: 1.08;
    --bbc-z: 1.08;
  }
}

/* 1201–1400px tall */
@media only screen and (min-width: 2560px) and (min-height: 1201px) and (max-height: 1400px) {
  html {
    zoom: 1.18;
    --bbc-z: 1.18;
  }
}

/* 1401–1560px tall — e.g. 3440x1440 ultra-wide QHD */
@media only screen and (min-width: 2800px) and (min-height: 1401px) and (max-height: 1560px) {
  html {
    zoom: 1.26;
    --bbc-z: 1.26;
  }
}

/* 1561–1750px tall — e.g. 3840x1600 ultra-wide 4K */
@media only screen and (min-width: 3200px) and (min-height: 1561px) and (max-height: 1750px) {
  html {
    zoom: 1.38;
    --bbc-z: 1.38;
  }
}


/*==================================================================
  3. CONTAINER WIDTH
  ------------------------------------------------------------------
  Bootstrap caps `.container` at 1390px from 1441px upward. Scaled by
  `zoom` alone that is 2168px of a 3840px screen (56%), which still
  reads as narrow. This rule targets a constant 68% of the PHYSICAL
  screen instead.

  `100vw` is not divided by `zoom`, so dividing by `--bbc-z` converts
  the value into the zoomed coordinate space; the rendered result is
  exactly 68% of the viewport at every width and at every zoom step.
  `max()` holds the floor at the current 1390px so the container can
  never come out narrower than it is today.

    1920px  1390px  = 72%   (unchanged, for reference)
    2560px  1415px  = 68%
    3440px  1857px  = 68%
    3840px  1674px  = 68%
==================================================================*/

@media only screen and (min-width: 1921px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: max(1390px, calc(100vw * 0.68 / var(--bbc-z, 1)));
  }
}


/*==================================================================
  4. VIEWPORT-UNIT CORRECTIONS
  ------------------------------------------------------------------
  `vw` resolves against the unzoomed viewport, so any existing `vw`
  length renders `--bbc-z` times larger than intended once the root is
  zoomed. Every other `vw` in the codebase sits inside a `clamp()`
  whose px maximum always wins above 1921px, so only the values below
  need correcting.
==================================================================*/

/* Header dropdown / mega-menu viewport guard (bbc-responsive.css) */
@media only screen and (min-width: 1921px) {

  .rs-header-four .main-menu .submenu,
  .rs-header-four .main-menu .mega-menu {
    max-width: calc((100vw - 30px) / var(--bbc-z, 1));
  }
}


/*==================================================================
  5. FULL-BLEED BANDS — proportional height
  ------------------------------------------------------------------
  Two elements are full-bleed and carry a hard-coded height, so their
  aspect ratio is tied to the viewport rather than to the container.
  main.css already stepped these up by hand at 1701px / 2001px /
  3001px; those steps were sized for an UNSCALED page and would be
  multiplied a second time by `zoom`.

  The rules below replace all of them with a single fluid expression
  derived from the measured 1920px geometry, so the ratio is now held
  exactly at every width instead of at three sampled ones.

    .rs-breadcrumb-style-two          1880 / 482 = 3.90
    .rs-banner-seven .thumb           1920 / 700 = 2.743

  Dividing `100vw` by `--bbc-z` converts to the zoomed space; the
  20px side margin is already in that space so it is subtracted after.
  At 1921px these produce 482px and 700px — identical to 1920px, so
  the boundary is seamless.
==================================================================*/

@media only screen and (min-width: 1921px) {
  .rs-breadcrumb-style-two {
    min-height: calc((100vw / var(--bbc-z, 1) - 40px) / 3.9);
  }

  .rs-banner-seven .rs-banner-bottom-thumb {
    height: calc(100vw / var(--bbc-z, 1) / 2.743);
    margin-top: calc(100vw / var(--bbc-z, 1) / -25.6);
  }
}


/*==================================================================
  6. HEADER BAR — keep it filling the same share of the screen
  ------------------------------------------------------------------
  `.rs-header-four .rs-header-inner` is a centred flex row of three
  pills (logo / menu / controls). Its width is intrinsic, so `zoom`
  alone leaves it at 51% of a 3840px screen where it occupies 65% at
  1920px — the bar reads as marooned in the middle.

  Rather than pushing the three pills apart (which would break the
  grouped-pill look), the extra width is distributed across the places
  a designer would naturally add it: between nav links, inside each
  pill, and only lastly between pills.

  `--bbc-hs` is one fourteenth of the total width to recover, split
  1.5 : 0.6 : 1.5 : 1.6 across the four. It floors at 0 below ~2050px,
  so the 1920/1921 boundary is unchanged.
==================================================================*/

@media only screen and (min-width: 1921px) {
  html {
    --bbc-hs: max(0px, calc((100vw * 0.62 / var(--bbc-z, 1) - 1250px) / 14));
  }

  .rs-header-four .rs-header-inner {
    gap: calc(10px + var(--bbc-hs) * 1.5);
  }

  .rs-header-four .main-menu li a {
    padding-left: calc(20px + var(--bbc-hs) * 0.6);
    padding-right: calc(20px + var(--bbc-hs) * 0.6);
  }

  .rs-header-four .rs-header-menu {
    padding-left: calc(50px + var(--bbc-hs) * 1.5);
    padding-right: calc(90px + var(--bbc-hs) * 1.5);
  }

  .rs-header-four .rs-header-right {
    padding-left: calc(45px + var(--bbc-hs) * 1.6);
    padding-right: calc(45px + var(--bbc-hs) * 1.6);
  }
}

@media only screen and (min-width: 2200px) {
  .rs-breadcrumb-style-two {
    min-height: 300px;
  }
}


/* The dropdown panels are anchored to their nav item, so they inherit
   the wider link padding. Nothing else in the menu needs adjusting. */


/*==================================================================
  7. RECONCILING main.css's EXISTING LARGE-SCREEN BLOCK
  ------------------------------------------------------------------
  main.css carries `@media (min-width:3001px) and (max-width:6000px)`
  written before this file existed. It compensated for the missing
  scaling by hard-coding roughly-doubled values and by hiding one
  decorative element. With the page now scaled properly those values
  would be applied on top of `zoom` and come out far too large, and
  the hidden element should be visible exactly as it is at 1920px.

  Each declaration below restores the 1920px base value; `zoom` then
  scales it proportionally like everything else.

  Nothing here changes any colour, font, weight, copy or behaviour —
  only the large-screen-only sizes that would otherwise double up.
==================================================================*/

@media only screen and (min-width: 3001px) {

  /* was 115px — base 65px, scaled by zoom instead */
  .rs-breadcrumb-title {
    font-size: 65px;
  }

  /* was 40px — base 18px, scaled by zoom instead */
  .rs-breadcrumb-menu {
    font-size: 18px;
  }

  /* was display:none — visible at 1920px, so visible here too */
  .rs-brand-two .rs-brand-shape-thumb {
    display: block;
  }
}