/* ============================================================
   PLATFORM — the page's own bridge.
   ============================================================ */

/* ------------------------------------------------------------
   1. THE RAIL IS A GRID ITEM, AND ITS WIDGET WAS TAKING ITS PLACE
   `.flow` is a two-column grid: the rail, then the stage. Below 1081px v6 hides
   the rail with `.frail{display:none}` and gives the grid one column — but the
   rail is raw markup inside an HTML widget, and it is the WIDGET that is the
   grid item. Hiding what is inside it leaves an empty item behind, so the grid
   kept a second row and the block was 32px taller at every width below the
   breakpoint. Exactly the `hOverflow`-class of difference: nothing looks wrong,
   the numbers just do not add up.
   ------------------------------------------------------------ */
body.pag-v6 .flow > .elementor-widget-html{ display:contents; }

/* ------------------------------------------------------------
   2. FOUR PHOTOGRAPHS THAT WOULD RENDER AS NOTHING
   `.pick-fig img`, `.who-fig img` and `.fshot` are all
   `position:absolute; inset:0`, which resolves against the nearest POSITIONED
   ancestor — and every Elementor container is `position:relative`. Against a
   widget wrapper an absolutely positioned image has no height at all.

   This is trap 2, and it is the one that hides best: `.pick-fig` carries
   `aspect-ratio`, so the figure keeps its exact height with nothing inside it,
   and every section measurement passes. Online Training shipped six package
   photographs at 385x0 through a whole round of measurement and only the pixel
   diff caught it.

   `.shot` is deliberately NOT here: its image is `position:static` and needs
   nothing.
   ------------------------------------------------------------ */
body.pag-v6 .pick-fig > .elementor-widget-image,
body.pag-v6 .who-fig > .elementor-widget-image{ display:contents; }

/* ------------------------------------------------------------
   3. THE CARDS' CHILDREN ARE THEIR OWN
   Each of these is a flex column or a grid whose children v6 styles as items,
   and Elementor's wrapper is the item instead. `.pick-ico` is the clearest:
   `position:absolute; left:var(--s5); top:0; transform:translateY(-50%)` hangs
   the chip over the top edge of `.pick-body`, and against a wrapper it would
   hang over the wrapper instead.

   `> .elementor-widget`, never `> .elementor-element`: the chips and the
   figures are CONTAINERS and must keep their boxes.
   ------------------------------------------------------------ */
body.pag-v6 :is( .pick-body, .feat-words, .plan-card, .fit, .fit > .e-con,
                 .who-text, .fstep ) > .elementor-widget,
body.pag-v6 :is( .pick-body, .feat-words, .plan-card, .fit, .fit > .e-con,
                 .who-text, .fstep ) > .elementor-widget
                 > .elementor-widget-container{ display:contents; }

/* ------------------------------------------------------------
   4. THE CONTAINERS' OWN GAP
   v6 spaces these with margins on their children, so Elementor's gap would be
   added on top of every one. `gap`, not `display` — a bridge rule with no media
   query beats a v6 rule that has one, and `.flow`, `.fstage`, `.picks` and
   `.plans` all change at a breakpoint.

   ONLY THE ONES v6 GIVES NO GAP OF ITS OWN, and the first version got three of
   them wrong. `.feat{gap:var(--pad)}` is the space between a capability's words
   and its screenshot; `.fit{column-gap:var(--s4)}` sits between a gain row's
   mark and its text; `.pick-body{gap:var(--s3)}` spaces the card's title, copy
   and link. Zeroing them cost the capabilities section 97px and every pick card
   24px, and it would have left the gain rows' icons against their words.

   CHECK THE SOURCE FOR A `gap` BEFORE ADDING A CLASS HERE. This rule exists to
   remove a gap ELEMENTOR adds, and every class in it must be one v6 leaves at
   zero — otherwise it is not a bridge rule, it is a design change.
   ------------------------------------------------------------ */
body.pag-v6 :is( .pick, .feat-words, .plan-card, .fstep, .who-text ){ gap:0; }

/* ------------------------------------------------------------
   5. THE PARENT THEME'S RESET, ON TWO ELEMENTS THAT ARE NOW REAL CONTROLS
   Hello Elementor ships `a:active,a:hover{color:#336}` and a `button:hover`
   background, both at a specificity v6's own declarations do not beat. They
   only surface where v6 states a resting value and then changes something
   OTHER than that property on hover — which is exactly these two:

     `.pick{color:inherit}` with `.pick:hover{transform;box-shadow;border-color}`
        → the card's words went #336 on hover. It is a whole-card link now, so
          every word in it changed colour at once.
     `.fitem button{background:none}` with `.fitem button:hover .fitem-t{...}`
        → the rail's own hover styles its CHILDREN, so the button itself had no
          hover background of its own to win with, and the theme's #c36 showed
          through behind every rail entry.

   Both restate v6's RESTING value for the hover state, which is what v6 means
   by not mentioning it. Neither is a new value.

   The shared bridge already carries this for `.btn-primary` and says so; these
   are the same rule on two more elements, and they arrived because a container
   can be an `<a>` and a rail entry is a real `<button>`.
   ------------------------------------------------------------ */
body.pag-v6 a.pick:hover{ color:inherit; }
body.pag-v6 .fitem button:hover{ background:none; }

/* ------------------------------------------------------------
   6. `flex:1` ON A CONTAINER
   `.e-con.e-flex{flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}`
   weighs (0,2,0) and v6's `.pick-body{flex:1}` weighs (0,1,0), so Elementor won
   and the custom properties are unset — the card body stopped growing.

   It shows only where a row's cards hold UNEQUAL copy: `.pick-body` is what
   takes the leftover height so three cards line their links up, and the third
   card's title is one line where the others are two. So exactly one link in
   nine sat 4.57px high, which is 0.20% of one section in the pixel diff and
   nothing at all anywhere else.

   Restating v6's own value at (0,2,0) is enough — the bridge loads after
   Elementor's frontend stylesheet, so it wins the tie.
   ------------------------------------------------------------ */
body.pag-v6 .pick-body{ flex:1; }


/* ------------------------------------------------------------
   THE GAIN PHOTOGRAPH'S HOVER — client item 3

   "The image has no hover, where every other image of this kind warms to full
   colour and grows very slightly."

   Correct, and the report is right that this is NOT a conversion fault: the
   rule is missing from `page-platform.css` in v6.1.2 as well. About's copy of
   the same component has it and Platform's does not, so the two pages'
   identical-looking figures behave differently.

   Values are About's, copied rather than invented — same transition, same
   `filter:none`, same 1.035 — so the two are the same component again.

   ── THIS IS A DESIGN CHANGE, NOT A BRIDGE FIX, AND IT IS IN THE WRONG FILE ──

   Everything else in this file undoes something WordPress did. This does not:
   it adds behaviour the design never had. It is here because
   `pag-v6-platform.css` is a byte-for-byte copy of v6.1.2 and is never
   hand-edited — that rule is what keeps the two comparable at all.

   So the real fix belongs in `www/v6.1.2/assets/css/page-platform.css`, which
   is a different version folder and not this session's to edit. Until it is
   made there, the build and the design differ here BY INTENT, and a measurement
   that flags this figure's hover is reporting the gap correctly. Raised with the
   client rather than silently resolved.
   ------------------------------------------------------------ */
body.pag-v6 .who-fig img{
  transition:filter var(--fast) var(--ease), transform var(--fast) var(--ease);
}
body.pag-v6 .who-fig:hover img{ filter:none; transform:scale(1.035); }

/* ------------------------------------------------------------
   7. THE PROCESS PANEL FITS INSIDE ONE WINDOW, 27 Aug 2026
   A deliberate change, asked for on 27 Aug over seven rounds of client feedback,
   not a re-pointing of something Elementor broke. Read the sizing notes before
   changing any number here: most of them are the answer to a specific complaint
   and reverting one quietly brings that complaint back.

   ── THE TWO ORIGINAL FAULTS ──

   ONE: the panel pinned at 16px from the top of the WINDOW, but the sticky bar
   is 85.5px and sits over it, so the heading was cut in half at 1600, 1440 and
   1280. The homepage's pinned section was given the bar's height in §26.4 of the
   shared bridge; this one was built later and never was.

   TWO: the stage stacked the screen and the card that explains it, so the panel
   was 869px inside a window that has 667px to give on a 1366x768 laptop. Its own
   comments say twice that it "has to finish inside one window on a short laptop"
   and it had stopped being true. At 1366x768 the last 195px, most of the
   explaining card, was below the fold and UNREACHABLE: the panel is pinned, so
   there is nothing to scroll to reach it.

   The stage becomes the third COLUMN instead of the second row: rail, screen,
   words. `display:contents` on `.fstage` promotes its two children into `.flow`'s
   own grid rather than rebuilding markup, so every widget stays where the builder
   puts it and stays editable.

   ── SIX TRACKS, AND WHY IT IS NOT THREE ──

   `grid-template-columns` reads rail · spacer · screen · gutter · words · spacer,
   with `column-gap:0`. Three tracks and a gap cannot express what was asked for,
   and each of the four attempts before this one failed a different way:

     `minmax(0,1fr)` for the screen      the capture is capped, so at 1920 a 1fr
                                         track was 1109px holding a 660px picture:
                                         256px of dead air INSIDE the track, on
                                         each side of it
     leftover to the words as `1fr`      card 499px wide at 1920 while the gutters
                                         stayed 32px — the opposite of the brief,
                                         which was a smaller picture and more room
                                         between the columns, not a wider card
     `justify-content:space-between`     splits the slack evenly, so the gutter
                                         between screen and words grew with the
                                         one beside the rail; that gutter has to
                                         stay at the standard 48px
     `justify-self:end` on the screen    puts ALL the slack in one gutter: 328px
                                         beside the rail at 1920, and the picture
                                         and the card pushed hard right

   So the two SPACERS carry the slack and the gutter between screen and words is
   a track of its own at a flat `var(--s7)`. `minmax(var(--s7),1fr)` on the left
   spacer keeps 48px there even when there is nothing spare; `minmax(0,1fr)` on
   the right lets that one close completely. At 1920 they land at 164px each, at
   1600 at 69px, and at 1440 both are at their floor.

   `column-gap:0` matters: with a gap AND six tracks, every spacer would be paying
   the gap twice and the picture lost 96px at 1440 for nothing.

   The rail is a flat `150px`, NOT `minmax(0,150px)`. With a zero floor it is the
   track the browser collapses first, and at 1081px it collapsed to nothing — the
   rail vanished, silently, with no overflow to show for it.

   The words cap is a `clamp`, not a fixed width. Fixed at 320px the card held its
   width at 1081 and took it out of the picture instead: 342px of screenshot where
   there had been 484. The clamp gives the width back on a narrow window.

   `min-width:0` on the screen and the words: grid items default to
   `min-width:auto` and refuse to shrink below their content, which turns a tight
   row into overflow instead of a smaller picture.

   ── THE CAPTURE IS CAPPED BY THE WINDOW'S HEIGHT ──

   `min(760px, calc((100vh - 440px) * 1.6))`: take 760px, unless the window is too
   short, in which case take what is left after the head, the panel's padding and
   the rail. 1.6 is the 16:10 the captures are, so a height budget converts to a
   width. Only short windows see the smaller number.

   760 rather than the 720 it began at or the 900 it briefly became: 900 filled the
   row but read as too large beside the other two columns. The ceiling that matters
   technically is 900 — the sources are 1800x1125, so 900 CSS px is 1:1 on a 2x
   screen — and 760 sits under it, so the screenshots are never upscaled.

   ── WHERE IT STOPS, WHICH IS NOT THE SAME AS HOW BIG IT IS ──

   Pinned at `--nav-h + --s4` the panel stopped 17px under the bar with 187px of
   empty page below it at 1920 — "too much empty space below this section and
   above it the section is right after nav bar, can you make them equal".

   The obvious fix is to give the panel the whole window with `min-height` and
   centre its content. That equalises the margins but it does it by making the
   navy card fill the screen, and the card's size was not the thing that was
   wrong: "I don't want the navy section to be full height, fine to see free
   space above and below, but this free space should be the same."

   So the panel keeps its own height and the STOP POINT moves. Centring a
   `position:sticky` box normally needs its height, which CSS cannot read — but
   it does not have to. Stick the box's TOP to the middle of the space under the
   bar, `calc((100vh + var(--nav-h)) / 2)`, then pull it back up by half of
   ITSELF with `translateY(-50%)`. The percentage in a transform resolves against
   the element, so the browser supplies the height the sticky offset could not.
   Above and below come out equal at every viewport with nothing measured:

       1920x1080  102 / 102      1366x768   45 / 44
       1600x900    34 / 33       1280x800   50 / 50
       1440x900    47 / 46       1440x700   34 / 33

   TWO THINGS MAKE THIS SAFE, AND BOTH WERE CHECKED RATHER THAN ASSUMED. The
   panel carries `.rise`, so the reveal engine could have owned its transform and
   overwritten this one — it does not: `.flowstage` has no inline transform before
   or after the reveal, and the computed matrix is only this rule. And the hold
   itself is unchanged: driven through the whole runway the panel still pins,
   still releases, and `--p` still runs 0 to 1 across it, because the transform
   moves where the box is PAINTED and not where it sticks.

   ── THE WORDS SIT AT THEIR OWN HEIGHT, BOTTOM-ALIGNED ──

   `align-self:end`, NOT `stretch`. Stretched, the card was as tall as the picture
   — 568px of card holding 148px of text, "a lot of empty space in it". It fills
   the column's WIDTH and keeps its own height, and its bottom edge lands on the
   same line as the picture's and the rail's.

   The rail is 150px because its five labels are single verbs now — Upload,
   Analyse, Enhance, Assess, Publish — a content change made in the same round.
   The live step's full title is the heading on the card, so nothing is lost, and
   the verbs read the same as the platform's own "Course Creation Steps" list
   inside the screenshot next to them.

   SCOPED `:not([data-static])`. `[data-static].flow{grid-template-columns:1fr}`
   weighs (0,1,1) and these weigh more, so without the guard they would beat the
   unpinned fallback and leave an empty first column where the hidden rail was.
   Below 1081px none of this applies.
   ------------------------------------------------------------ */
body.pag-v6 .flowstage{
  top:var(--flow-top, calc(var(--nav-h) + var(--s4)));
}

@media (min-width:1081px){
  body.pag-v6 .flow:not([data-static]){
    grid-template-columns:150px minmax(var(--s7),1fr) minmax(0,max-content) var(--s7) minmax(210px,clamp(240px,17vw,330px)) minmax(0,1fr);
    column-gap:0;
  }
  body.pag-v6 .flow:not([data-static]) .fstage{ display:contents; }
  body.pag-v6 .flow:not([data-static]) .flow-shot{
    grid-column:3;
    width:min(760px, calc((100vh - 440px) * 1.6));
    max-width:100%; min-width:0;
    align-self:center;
  }
  body.pag-v6 .flow:not([data-static]) .flow-steps{
    grid-column:5; max-width:none; min-width:0;
    align-self:end;
  }
}