/*--- Cards (master) ---*/
/*---------------------------------------------------------------------------------*\

    Cards - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/Cards.css

    The title + top text (.top-txt-wrp) is a general component area styled in
    base.css.

    Each card carries its own scheme class (grey-bg, secondary-bg ...), so its
    background and text read the scheme variables exactly as a section does.
    .plain cards have no background of their own and sit on the section.

    Layout "Cards" (.layout-cards)
    - Photograph across the top at 3:2, then the number, title, text and button.
      The text stretches so every button in a row lines up at the bottom

    Layout "Numbered list" (.layout-list)
    - No photograph, no card. The number sits in its own column beside the text

\*---------------------------------------------------------------------------------*/
    .component.cards .cards-wrp{
        row-gap: 1.75rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .component.cards .card{
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

    .component.cards .card.plain{
        background-color: transparent;
    }

    .component.cards .img-wrp{
        margin: 0;
        overflow: hidden;
        aspect-ratio: 3 / 2;
    }

    .component.cards .img-wrp img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .component.cards .focus-top img{
        object-position: 50% 15%;
    }

    .component.cards .focus-upper img{
        object-position: 50% 32%;
    }

    .component.cards .focus-centre img{
        object-position: 50% 50%;
    }

    .component.cards .focus-lower img{
        object-position: 50% 68%;
    }

    .component.cards .focus-bottom img{
        object-position: 50% 85%;
    }

    .component.cards .content-wrp{
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.75rem;
    }

    .component.cards .card.plain .content-wrp{
        padding: 0;
    }

    .component.cards .num{
        display: grid;
        flex: none;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-bottom: .9rem;
        border-radius: 50%;
        line-height: 1;
    }

    .component.cards .title{
        margin-bottom: .5rem;
    }

    .component.cards .txt{
        flex: 1;
        margin-bottom: 0;
    }

    .component.cards .btn-wrp{
        margin-top: 1.4rem;
    }

    /* Numbered list */
    .component.cards.layout-list .cards-wrp{
        row-gap: 2rem;
    }

    .component.cards.layout-list .content-wrp{
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1.25rem;
        align-items: start;
    }

    .component.cards.layout-list .content-wrp > *{
        grid-column: 2;
    }

    .component.cards.layout-list .num{
        grid-column: 1;
        grid-row: 1 / span 3;
        margin-bottom: 0;
    }

    .component.cards.layout-list .title{
        margin-bottom: .3rem;
    }


/*--- Cards (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Cards - Theme CSS
    -------------------------

    How it looks on this site. Layout and function are in
    components/Cards/Cards.css

    Which variable does what, and why
    - Every colour inside a card comes from that card's own scheme (Card
      Colour)
    - The number disc is a button colour pair, already chosen to pass contrast
      together. It takes whichever pair the card's button does not, so the two
      never match: the alt scheme's button on a card with the Main button, the
      card's own button on a card with the Contrasting button. With the MMC
      schemes that is the mockup's orange disc on the grey and navy cards and
      the near-black disc on the orange card
    - Coloured cards take the site's one --radius and --shadow. Plain cards and
      the numbered list have neither
    - Card buttons carry the soft button shadow, as the mockup's pale buttons do
    - The numbered list keeps its title and top text to the left, as the
      mockup's steps do
    - A four-up row gets a wider container, because four cards in 1200px are too
      narrow to read

\*---------------------------------------------------------------------------------*/
    .component.cards .card:not(.plain){
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    .component.cards .num{
        background-color: var(--alt-btn-bg-colour);
        color: var(--alt-btn-txt-colour);
        font-family: var(--font-head);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .component.cards .btn-style-alt .num{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
    }

    .component.cards .btn-wrp .btn{
        box-shadow: var(--shadow-btn);
    }

    .component.cards .top-txt-wrp .txt-wrp{
        max-width: 60ch;
        margin-inline: auto;
    }

    .component.cards.layout-list .top-txt-wrp{
        max-width: none;
        text-align: left;
    }

    .component.cards.layout-list .top-txt-wrp .txt-wrp{
        margin-inline: 0;
    }

    /* Four cards need more room than this site's 1200px wide container gives
       them. Scoped to the four-up row, not raised site wide, because every other
       component is drawn to the 1200 */
    .component.cards.per-row-4 .container{
        max-width: 1440px;
    }


/*--- CtaPanel (master) ---*/
/*---------------------------------------------------------------------------------*\

    CTA Panel - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/CtaPanel.css

    The buttons (.btns-wrp) are a general component area styled in base.css.

    - The panel (.content-wrp) carries its own scheme class (secondary-bg ...)
    - One column on a phone with the photograph on top at 16:10. From 768px two
      equal halves, and the photograph stretches to the height of the text and
      is cropped to fit (.focus-* says which part to keep)
    - .img-right puts the photograph on the right from 768px

\*---------------------------------------------------------------------------------*/
    .component.cta-panel .content-wrp{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

    .component.cta-panel .img-col{
        position: relative;
        margin: 0;
        overflow: hidden;
        aspect-ratio: 16 / 10;
    }

    /* Out of the flow, so the photograph never sets the panel's height: the
       text does, and the photograph is cropped to whatever that is */
    .component.cta-panel .img-col img{
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .component.cta-panel .focus-top img{
        object-position: 50% 15%;
    }

    .component.cta-panel .focus-upper img{
        object-position: 50% 25%;
    }

    .component.cta-panel .focus-centre img{
        object-position: 50% 50%;
    }

    .component.cta-panel .focus-lower img{
        object-position: 50% 68%;
    }

    .component.cta-panel .focus-bottom img{
        object-position: 50% 85%;
    }

    .component.cta-panel .txt-col{
        align-self: center;
        padding: 2.5rem 1.5rem;
    }

    .component.cta-panel .txt-wrp > *:last-child{
        margin-bottom: 0;
    }

    .component.cta-panel .btns-wrp{
        margin-top: 2rem;
    }

    @media(min-width: 576px){

        .component.cta-panel .txt-col{
            padding: 3rem 2.5rem;
        }

    }

    @media(min-width: 768px){

        .component.cta-panel .content-wrp.has-img{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .component.cta-panel .img-col{
            aspect-ratio: auto;
            min-height: 20rem;
        }

        .component.cta-panel.img-right .img-col{
            order: 2;
        }

    }


/*--- CtaPanel (theme) ---*/
/*---------------------------------------------------------------------------------*\

    CTA Panel - Theme CSS
    -------------------------

    How it looks on this site. Layout and function are in
    components/CtaPanel/CtaPanel.css

    Which variable does what, and why
    - Every colour in the text half comes from the panel's own scheme (Panel
      Colour). On the MMC site that is Secondary: navy, with the orange button
      and the white "pale" second button of its alt scheme (Grey)
    - The mockup's rounder panel radius (site style guide, section 13, agreed
      by Jarno 2026-10-01). No shadow: the panel sits flat on the grey band
    - The main button is larger and bolder, as on the hero

\*---------------------------------------------------------------------------------*/
    .component.cta-panel:not(.remove-padding-bottom){
        padding-bottom: 5rem;
    }

    .component.cta-panel .content-wrp{
        border-radius: var(--radius-cta);
    }

    .component.cta-panel .btns-wrp .btn:not(.btn-alt){
        font-size: 1.2rem;
        font-weight: 700;
    }

    /* From 768px the photograph keeps at least the mockup's 16:10, so the
       panel is never shorter than that; a longer text still makes it taller */
    @media(min-width: 768px){

        .component.cta-panel .img-col{
            aspect-ratio: 16 / 10;
            height: 100%;
            min-height: 0;
        }

    }


/*--- HeroCollage (master) ---*/
/*---------------------------------------------------------------------------------*\

    Hero Collage - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/HeroCollage.css

    The buttons (.btns-wrp) are a general component area styled in base.css.

    The background layer (.bg)
    - The section's own background is moved onto .bg, so that the curve can be
      cut out of the background without cutting into the text or the photographs
    - .bg uses the scheme's --bg-colour exactly as base.css does for .component,
      so the hero follows the Background Colour option like any other section

    The curve (.curve-bottom)
    - A mask on .bg: see-through inside an ellipse whose top edge rises
      --curve-h into the bottom of the section. Whatever is behind the section,
      normally the page background, shows through it. The mask's colours are only
      read for how see-through they are, which is why they are transparent and
      currentColor rather than a colour from the scheme
    - The section gets the same height again as bottom padding, so nothing of its
      own sits in the arc

    Room for an overlapping panel (.overlap-room)
    - 16rem more bottom padding, for a panel in the next section that is pulled
      up over the hero. Keep it in step with whatever pulls that panel up

    The photographs
    - Up to three circles, placed by their number (.photo-1 to .photo-3) inside a
      box of fixed proportions, so they keep their arrangement at every width
    - The box runs past its column from 768px and the second circle runs past
      the box. Both are cut off by the section (overflow: hidden): that is the
      design, not an overflow
    - .focus-* says which part of the photograph stays in the circle

\*---------------------------------------------------------------------------------*/
    .component.hero-collage{
        --curve-h: clamp(40px, 9vw, 140px);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background-color: transparent;
    }

    .component.hero-collage .bg{
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background-color: var(--bg-colour);
        pointer-events: none;
    }

    .component.hero-collage .container{
        position: relative;
        z-index: 1;
    }

    .component.hero-collage.curve-bottom{
        padding-bottom: calc(var(--section-pad) + var(--curve-h));
    }

    .component.hero-collage.curve-bottom .bg{
        -webkit-mask-image: radial-gradient(ellipse 60% calc(var(--curve-h) * 1.55) at 50% calc(100% + var(--curve-h) * .55), transparent 99.5%, currentColor 100%);
        mask-image: radial-gradient(ellipse 60% calc(var(--curve-h) * 1.55) at 50% calc(100% + var(--curve-h) * .55), transparent 99.5%, currentColor 100%);
    }

    .component.hero-collage.overlap-room{
        padding-bottom: calc(var(--section-pad) + 16rem);
    }

    .component.hero-collage.remove-padding-top{
        padding-top: 0;
    }

    .component.hero-collage.remove-padding-bottom{
        padding-bottom: 0;
    }

    /* Background shapes */
    .component.hero-collage .shape{
        position: absolute;
        display: block;
        border-radius: 50%;
    }

    .component.hero-collage .shape-1{
        top: -14%;
        left: -10%;
        width: 46%;
        aspect-ratio: 1.15;
    }

    .component.hero-collage .shape-2{
        top: 6%;
        right: -14%;
        width: 54%;
        aspect-ratio: .9;
    }

    .component.hero-collage .shape-3{
        top: 44%;
        left: 16%;
        width: 38%;
        aspect-ratio: 1.3;
    }

    .component.hero-collage .shape-4{
        top: 26%;
        left: 40%;
        width: 22%;
        aspect-ratio: 1;
    }

    /* Text */
    .component.hero-collage .flex-row{
        row-gap: 2.5rem;
    }

    .component.hero-collage .txt-wrp{
        max-width: 44ch;
    }

    .component.hero-collage .btns-wrp{
        margin-top: 2rem;
    }

    /* Photographs */
    .component.hero-collage .photos-wrp{
        position: relative;
        width: 100%;
        aspect-ratio: 1.15;
    }

    .component.hero-collage .photo{
        position: absolute;
        margin: 0;
        overflow: hidden;
        border-radius: 50%;
        aspect-ratio: 1;
    }

    .component.hero-collage .photo img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .component.hero-collage .photo-1{
        top: 0;
        left: 6%;
        z-index: 2;
        width: 66%;
    }

    .component.hero-collage .photo-2{
        top: 26%;
        right: -18%;
        z-index: 1;
        width: 62%;
    }

    .component.hero-collage .photo-3{
        bottom: -4%;
        left: 0;
        z-index: 3;
        width: 40%;
    }

    .component.hero-collage .focus-top img{
        object-position: 50% 15%;
    }

    .component.hero-collage .focus-upper img{
        object-position: 50% 32%;
    }

    .component.hero-collage .focus-centre img{
        object-position: 50% 50%;
    }

    .component.hero-collage .focus-lower img{
        object-position: 50% 68%;
    }

    .component.hero-collage .focus-bottom img{
        object-position: 50% 85%;
    }

    @media(min-width: 768px){

        .component.hero-collage .photos-wrp{
            width: calc(100% + 14vw);
        }

    }


/*--- HeroCollage (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Hero Collage - Theme CSS
    -------------------------

    How it looks on this site. Layout and function are in
    components/HeroCollage/HeroCollage.css

    Which variable does what, and why
    - The shapes are the background colour mixed towards the scheme's button
      text colour (lighter) or its title colour (darker). On the MMC orange that
      gives the mockup's four accents exactly: 12%, 24% and 38% towards white,
      and 11% towards the near-black. They are always a shade of whatever the
      background is, so they suit any scheme the hero is put on, and nothing is
      read off them, so they are not checked for contrast
    - Each photograph has a ring in the background colour, so overlapping
      circles read as separate, and the mockup's deeper photograph shadow
    - The headline and lead are larger than the site's h1 and body text. This is
      the one place on a page they are this size
    - The main button is larger and bolder, as in the mockup

    Movement (only while <html> has motion-on, see Motion in theme-css/site.css)
    - The photographs float up and down, each at its own pace, as in the mockup

\*---------------------------------------------------------------------------------*/
    .component.hero-collage{
        padding-top: 3.5rem;
    }

    .component.hero-collage.overlap-room{
        padding-bottom: calc(3rem + 19rem);
    }

    .component.hero-collage .shape-1{
        background-color: color-mix(in srgb, var(--bg-colour) 88%, var(--btn-txt-colour));
    }

    .component.hero-collage .shape-2{
        background-color: color-mix(in srgb, var(--bg-colour) 76%, var(--btn-txt-colour));
    }

    .component.hero-collage .shape-3{
        background-color: color-mix(in srgb, var(--bg-colour) 89%, var(--title-colour));
    }

    .component.hero-collage .shape-4{
        background-color: color-mix(in srgb, var(--bg-colour) 62%, var(--btn-txt-colour));
    }

    .component.hero-collage h1{
        font-size: clamp(2.5rem, 6.5vw, 4.75rem);
        letter-spacing: -.01em;
        line-height: 1.15;
    }

    .component.hero-collage .txt-wrp{
        color: var(--body-colour);
        font-size: 1.3rem;
    }

    .component.hero-collage .btns-wrp .btn:not(.btn-alt){
        font-size: 1.2rem;
        font-weight: 700;
    }

    .component.hero-collage .photo{
        border: 8px solid var(--bg-colour);
        background-color: var(--bg-colour);
        box-shadow: var(--shadow-photo);
    }

    .motion-on .component.hero-collage .photo{
        will-change: transform;
    }

    .motion-on .component.hero-collage .photo-1{
        animation: float-a 9s ease-in-out infinite;
    }

    .motion-on .component.hero-collage .photo-2{
        animation: float-b 11s ease-in-out infinite;
    }

    .motion-on .component.hero-collage .photo-3{
        animation: float-a 13s ease-in-out infinite reverse;
    }


/*--- IntroPanel (master) ---*/
/*---------------------------------------------------------------------------------*\

    Intro Panel - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/IntroPanel.css

    The panel (.content-wrp)
    - Carries its own scheme class (secondary-bg ...), which sets the scheme
      variables inside it, so its background and text read them exactly as a
      section does
    - Text column, then the image. From 768px the image sits in a 190px column
      to the right; below that it follows the text, aligned right

    Pull up over the section above (.overlap-above)
    - The section moves up 16rem, the same room Hero Collage leaves with "Room
      for an Overlapping Panel". Change both together
    - Its own background is drawn by ::before from 16rem down, so the part of
      the section lying over the section above is see-through and only the
      panel covers it

\*---------------------------------------------------------------------------------*/
    .component.intro-panel{
        position: relative;
        z-index: 1;
    }

    .component.intro-panel.overlap-above{
        isolation: isolate;
        margin-top: -16rem;
        padding-top: 0;
        background-color: transparent;
    }

    .component.intro-panel.overlap-above::before{
        content: '';
        position: absolute;
        inset: 16rem 0 0;
        z-index: -1;
        background-color: var(--bg-colour);
    }

    .component.intro-panel .content-wrp{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        align-items: center;
        max-width: 52.5rem;
        margin-inline: auto;
        padding: 2.5rem 1.5rem;
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

    .component.intro-panel .subtitle{
        margin-bottom: 1.25rem;
    }

    .component.intro-panel .txt-wrp{
        max-width: 58ch;
    }

    .component.intro-panel .txt-wrp > *:last-child{
        margin-bottom: 0;
    }

    .component.intro-panel .btn-wrp{
        margin-top: 1.5rem;
    }

    .component.intro-panel .img-col{
        justify-self: end;
        width: 100%;
        max-width: 140px;
    }

    .component.intro-panel .img-col img{
        width: 100%;
        height: auto;
    }

    @media(min-width: 576px){

        .component.intro-panel .content-wrp{
            padding: 2.5rem;
        }

    }

    @media(min-width: 768px){

        .component.intro-panel .content-wrp.has-img{
            grid-template-columns: minmax(0, 1fr) 190px;
            gap: 2.5rem;
        }

        .component.intro-panel .img-col{
            max-width: 190px;
        }

    }


/*--- IntroPanel (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Intro Panel - Theme CSS
    -------------------------

    How it looks on this site. Layout and function are in
    components/IntroPanel/IntroPanel.css

    Which variable does what, and why
    - Every colour inside the panel comes from the panel's own scheme (Panel
      Colour), through the same variables a section uses. On the MMC site that is
      Secondary: navy, with the orange as the subtitle
    - The mockup's rounder panel radius and its deeper lifted shadow, because the
      panel overhangs the hero and has to read as lifted off it (site style guide,
      section 13, agreed by Jarno 2026-10-01)

    Movement (only while <html> has motion-on, see Motion in theme-css/site.css)
    - The image (the mascot) floats slowly, slower than the hero's photographs,
      so he reads as standing rather than drifting

\*---------------------------------------------------------------------------------*/
    .component.intro-panel .content-wrp{
        padding: 2.5rem;
        border-radius: var(--radius-panel);
        box-shadow: var(--shadow-lift);
    }

    .component.intro-panel h2{
        margin-bottom: .35rem;
    }

    .component.intro-panel .subtitle{
        font-family: var(--font-head);
        font-size: 1.3rem;
        font-weight: 600;
    }

    .component.intro-panel .img-col img{
        filter: drop-shadow(var(--shadow-mascot));
    }

    .motion-on .component.intro-panel .img-col img{
        will-change: transform;
        animation: float-a 15s ease-in-out infinite;
    }


/*--- LeftRightText (master) ---*/
/*---------------------------------------------------------------------------------*\

    Left / Right Text - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/LeftRightText.css

    The title + top text (.top-txt-wrp) and section button (.section-btn-wrp) are
    general component areas styled in base.css.

    Background shapes (.has-shapes, added 2026-10-01)
    - Four round shapes behind the rows, placed like Hero Collage's. Colours,
      shapes and any movement are theme CSS

    The stack (.stack-wrp, added 2026-10-01)
    - Up to three photographs in a box of fixed proportions, each at its own
      angle and shape, the later ones in front. Placed by number
      (.stack-1 to .stack-3), so the arrangement holds at every width

\*---------------------------------------------------------------------------------*/
    .component.left-right-text .row-wrp + .row-wrp{
        margin-top: 3rem;
    }

    .component.left-right-text .row-wrp .img-col img{
        width: 100%;
        height: auto;
    }

    .component.left-right-text .row-wrp .txt-wrp > *:last-child{
        margin-bottom: 0;
    }

    .component.left-right-text .row-wrp .btn-wrp{
        margin-top: 1.25rem;
    }

    /* Swap the image to the right on alternate rows (desktop only) */
    @media(min-width: 992px){

        .component.left-right-text .row-wrp.reverse .img-col{
            order: 2;
        }

        .component.left-right-text .row-wrp.reverse .txt-col{
            order: 1;
        }

    }

    /* Stack of photographs */
    .component.left-right-text .stack-wrp{
        position: relative;
        width: 100%;
        aspect-ratio: 1.1;
    }

    .component.left-right-text .stack-img{
        position: absolute;
        margin: 0;
        overflow: hidden;
    }

    .component.left-right-text .row-wrp .stack-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .component.left-right-text .stack-1{
        top: 0;
        left: 0;
        z-index: 1;
        width: 58%;
        aspect-ratio: 4 / 5;
        transform: rotate(-6deg);
    }

    .component.left-right-text .stack-2{
        top: 14%;
        right: 0;
        z-index: 2;
        width: 54%;
        aspect-ratio: 1;
        transform: rotate(4.5deg);
    }

    .component.left-right-text .stack-3{
        bottom: 0;
        left: 18%;
        z-index: 3;
        width: 50%;
        aspect-ratio: 5 / 4;
        transform: rotate(-2deg);
    }

/* ROOM BETWEEN THE STACK AND THE WORDS (Jamie, 2026-10-20).

   The photographs are rotated, so the corner of the one nearest the text reaches
   past the column's own gutter and finishes a few pixels from the first line.
   Only the stack needs it: a single photograph has straight edges and sits
   inside the gutter, which is why this is not on .img-col itself.

   :has() rather than a class on the column, because the stack is decided in the
   template by how many pictures a row has, and a second class would have to be
   kept in step with that count. */
    @media(min-width: 992px){

        .component.left-right-text .row-wrp:not(.reverse) .img-col:has(.stack-wrp){
            padding-right: 3.5rem;
        }

        .component.left-right-text .row-wrp.reverse .img-col:has(.stack-wrp){
            padding-left: 3.5rem;
        }

    }

    /* Background shapes */
    .component.left-right-text.has-shapes{
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .component.left-right-text .shapes{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .component.left-right-text.has-shapes .container{
        position: relative;
        z-index: 1;
    }

    .component.left-right-text .shape{
        position: absolute;
        display: block;
        border-radius: 50%;
    }

    .component.left-right-text .shape-1{
        top: -14%;
        left: -10%;
        width: 46%;
        aspect-ratio: 1.15;
    }

    .component.left-right-text .shape-2{
        top: 6%;
        right: -14%;
        width: 54%;
        aspect-ratio: .9;
    }

    .component.left-right-text .shape-3{
        top: 44%;
        left: 16%;
        width: 38%;
        aspect-ratio: 1.3;
    }

    .component.left-right-text .shape-4{
        top: 26%;
        left: 40%;
        width: 22%;
        aspect-ratio: 1;
    }


/*--- LeftRightText (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Left / Right Text - Theme CSS
    -------------------------

    The look of Left / Right Text for this theme. Loaded after the master CSS in
    components/LeftRightText/LeftRightText.css, so rules here win.

    Which variable does what, and why
    - Background shapes: the section background mixed a little way towards its
      button colour (lighter, on the grey that is the white button) and its
      title colour (darker), and one warm shape, the button colour with a
      little of the alt button in it (on the grey, white with a touch of the
      orange). On the MMC grey these are the mockup's four exactly
    - The stack: a frame in the scheme's button colour (white on the grey), so
      the photographs read as separate prints, square cornered, with the
      mockup's deeper stack shadow
    - The row title is set at the size of a section title, as the mockup's
      story is a section of its own with one row
    - The row button carries the soft button shadow, as the mockup's pale
      button does

    Movement (only while <html> has motion-on, see Motion in theme-css/site.css)
    - The shapes drift and change shape, as on the hero

\*---------------------------------------------------------------------------------*/
    .component.left-right-text.has-shapes:not(.remove-padding-top){
        padding-top: 5rem;
    }

    .component.left-right-text.has-shapes:not(.remove-padding-bottom){
        padding-bottom: 5rem;
    }

    .component.left-right-text .row-wrp .img-col img{
        border-radius: var(--radius);
    }

    .component.left-right-text .row-wrp h3{
        font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    }

    .component.left-right-text .row-wrp .btn-wrp{
        margin-top: 1.5rem;
    }

    .component.left-right-text .row-wrp .btn{
        box-shadow: var(--shadow-btn);
    }

    .component.left-right-text .shape-1{
        background-color: color-mix(in srgb, var(--bg-colour) 90%, var(--btn-bg-colour));
    }

    .component.left-right-text .shape-2{
        background-color: color-mix(in srgb, var(--bg-colour) 52%, var(--btn-bg-colour));
    }

    .component.left-right-text .shape-3{
        background-color: color-mix(in srgb, var(--bg-colour) 96%, var(--title-colour));
    }

    .component.left-right-text .shape-4{
        background-color: color-mix(in srgb, var(--btn-bg-colour) 85%, var(--alt-btn-bg-colour));
    }

    /* The stack */
    .component.left-right-text .stack-img{
        border: 12px solid var(--btn-bg-colour);
        background-color: var(--btn-bg-colour);
        box-shadow: var(--shadow-stack);
    }

    .component.left-right-text .row-wrp .stack-img img{
        border-radius: 0;
    }


/*--- NewsFeed (master) ---*/
/*---------------------------------------------------------------------------------*\

    News Feed - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/NewsFeed.css

    The cards are shared with the blog pages (template-parts/blog/card.php),
    so their layout is in base.css (Blog) and their look in theme-css/site.css
    (Blog Cards). Style them there, not here, so every card matches.

    The title + top text (.top-txt-wrp), empty message (.empty-msg) and view all
    button (.section-btn-wrp) are general component areas styled in base.css.

\*---------------------------------------------------------------------------------*/


/*--- NewsFeed (theme) ---*/
/*---------------------------------------------------------------------------------*\

    News Feed - Theme CSS
    -------------------------

    The look of the News Feed for this theme. Loaded after the master CSS in
    components/NewsFeed/NewsFeed.css, so rules here win.

    The cards themselves are styled in theme-css/site.css (Blog Cards), because
    the blog pages and related posts use the same cards. Only rules that apply
    to cards inside the News Feed and nowhere else are here.

    As the mockup's news cards
    - Photograph at 3:2, then the date in bold, the title and the excerpt.
      No post type label and no "Read more" (the whole card is the link)
    - Colours come from each card's scheme (Card Colours), so on alternating
      cards the date is the scheme's subtitle colour: the near-black on the
      orange card and the orange on the navy one, as in the mockup

\*---------------------------------------------------------------------------------*/
    .component.news-feed .post-card .img-wrp{
        aspect-ratio: 3 / 2;
    }

    .component.news-feed .post-card .content-wrp{
        gap: 0;
        padding: 0 1.25rem 1.25rem;
    }

    .component.news-feed .post-card .type,
    .component.news-feed .post-card .read-more{
        display: none;
    }

    .component.news-feed .post-card .date{
        order: -1;
        margin: 1rem 0 .3rem;
        font-size: 1rem;
        font-weight: 700;
    }

    .component.news-feed .post-card .title{
        margin-bottom: .5em;
        font-size: 1.2rem;
    }

    .component.news-feed .post-card .excerpt{
        margin-bottom: 0;
    }


/*--- Partners (master) ---*/
/*---------------------------------------------------------------------------------*\

    Partners - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/Partners.css

    The title + top text (.top-txt-wrp) is a general component area styled in
    base.css.

    - A fixed minimum height rather than a square, so a name that wraps to two
      lines sits level with one that does not
    - A logo is held to the tile's height and kept in proportion, so logos of
      very different shapes sit at a similar size

\*---------------------------------------------------------------------------------*/
    .component.partners .partners-wrp{
        row-gap: 1.25rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .component.partners .partner{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 96px;
        padding: 1.25rem 1rem;
        line-height: 1.3;
        text-align: center;
    }

    .component.partners a.partner:hover{
        text-decoration: none;
    }

    .component.partners .partner img{
        width: auto;
        max-width: 100%;
        max-height: 56px;
        object-fit: contain;
    }

/*---------------------------------------------------------------------------------*\
    Carousel (added 2026-10-02, only when the Carousel option is on)

    Layout and function only, as everywhere: how the arrows and dots LOOK is in
    theme-css/components/Partners.css.

    Swiper owns the track, so the grid's own row and column rules must not reach it.
    The slides are sized by Swiper (slidesPerView), not by the flex-col classes, and
    the component prints no flex-col at all in this mode.
\*---------------------------------------------------------------------------------*/
    .component.partners .partners-carousel{
        position: relative;
    }

/* The arrows sit in the wrapper's side gutters, and the TRACK is inset to leave
   them room. The inset is on the track and not on the wrapper because Swiper's own
   overflow clips at its border box: padding on the track would have put the next
   and previous tiles underneath the arrows rather than behind the edge.

   Below 768 the arrows are hidden and the inset goes, because there is no room to
   give away on a phone. */


    .component.partners .partners-carousel .partners-wrp{
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* A slide is as tall as the tallest in view, so a two line name does not make a
   short tile float. align-items on the track is what Swiper leaves to us. */

    .component.partners .partners-carousel .swiper-wrapper{
        align-items: stretch;
    }

    .component.partners .partners-carousel .swiper-slide{
        height: auto;
    }

/* Swiper eases in and out of every move. With no gap between moves that reads as a
   pulse rather than a drift, so while it is running the timing is linear. The class
   is added by Partners.js, so a carousel that never starts keeps the normal easing
   for the arrows and for swiping. */

    .component.partners .partners-carousel.is-free .swiper-wrapper{
        transition-timing-function: linear;
    }

/* The arrows. Swiper's own stylesheet draws a chevron with a font; these are real
   buttons with a mask instead, so they take the scheme's colour and have a target
   big enough for WCAG 2.5.8 (24px minimum, these are 44). */

    .component.partners .partners-carousel .swiper-button-prev,
    .component.partners .partners-carousel .swiper-button-next{
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .component.partners .partners-carousel .swiper-button-prev::after,
    .component.partners .partners-carousel .swiper-button-next::after{
        content: none;
    }

    .component.partners .partners-carousel .swiper-button-prev{
        left: 0;
    }

    .component.partners .partners-carousel .swiper-button-next{
        right: 0;
    }

    .component.partners .partners-carousel .swiper-button-disabled{
        opacity: .4;
        pointer-events: none;
    }

    .component.partners .partners-carousel .swiper-pagination{
        position: static;
        margin-top: 1.5rem;
    }

/* The gutters hold the arrows, so they are there at every width now that a phone
   shows them too. Narrower on a small screen, where 56px either side would leave
   very little for the tiles. */

    .component.partners .partners-carousel .swiper{
        margin-inline: 44px;
    }

    @media(min-width: 768px){

        .component.partners .partners-carousel .swiper{
            margin-inline: 56px;
        }

    }

/* WHEN THE ARROWS SHOW.

   A touch device has no hover, so there they are simply always there: hiding them
   would leave a phone with no visible control at all.

   On a device with a real pointer they fade in when the carousel is hovered. They
   also fade in on :focus-within, which is not decoration: without it a keyboard
   user would tab to a control they cannot see, which fails WCAG 2.4.7. They keep
   their size and their place in the tab order the whole time, so nothing moves and
   nothing is skipped; only the opacity changes.

   @media(hover: hover) and (pointer: fine) rather than a width: a small laptop is
   not a phone, and a large tablet is not a desktop. The question is what the input
   can do, not how wide the screen is. */

    @media(hover: hover) and (pointer: fine){

        .component.partners .partners-carousel .swiper-button-prev,
        .component.partners .partners-carousel .swiper-button-next{
            opacity: 0;
        }

        .component.partners .partners-carousel:hover .swiper-button-prev,
        .component.partners .partners-carousel:hover .swiper-button-next,
        .component.partners .partners-carousel:focus-within .swiper-button-prev,
        .component.partners .partners-carousel:focus-within .swiper-button-next{
            opacity: 1;
        }

    }


/*--- Partners (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Partners - Theme CSS
    -------------------------

    How it looks on this site. Layout and function are in
    components/Partners/Partners.css

    Which variable does what, and why
    - A LOGO STANDS ON THE SECTION ITSELF, with no tile behind it, so the row
      reads as a wall of real company marks rather than a grid of grey cards
      (Jamie, 2026-10-13). A logo carries its own shape and its own colours and
      does not need a plate to sit on
    - A NAME WITH NO LOGO still gets the tile, because a line of text with
      nothing round it has no edges and reads as stray copy. The tile is the
      section's line colour softened into its background, so it is a quiet step
      off whatever background the row is on. 55% of the line colour on white is
      the mockup's tile grey exactly. The name is in the title colour, and the
      tint is close enough to the background that it keeps nearly all of its
      contrast (axe checks it on the test site)
    - A linked tile shows hover and keyboard focus with a border in the title
      colour, so it is visible without a colour of its own

\*---------------------------------------------------------------------------------*/
    .component.partners .partner{
        border: 2px solid transparent;
        border-radius: var(--radius);
        color: var(--title-colour);
        font-size: 1.05rem;
        font-weight: 700;
    }

    .component.partners .partner:not(.has-logo){
        background-color: color-mix(in srgb, var(--line-colour) 55%, var(--bg-colour));
    }

    .component.partners a.partner:hover,
    .component.partners a.partner:focus-visible{
        border-color: var(--title-colour);
    }

/*---------------------------------------------------------------------------------*\
    Logo height (Jarno, 2026-11-02)

    Master holds a logo to 56px, which read too small here. Taking the limit off
    altogether is not safe: a logo would then show at its file's own size, so a
    square or tall logo uploaded at 600px would fill the row. The limit is raised
    instead, to 80px from a tablet up and 64px on a phone, where there is less
    room. A wide logo still meets the tile's width first and is kept in
    proportion by master's object-fit, so only square and tall logos get taller.
\*---------------------------------------------------------------------------------*/
    .component.partners .partner img{
        max-height: 64px;
    }

    @media(min-width: 768px){

        .component.partners .partner img{
            max-height: 80px;
        }

    }

/*---------------------------------------------------------------------------------*\
    Carousel, wider than the rest of the page

    This site sets --container-wide to 1200px, the same as --container, because the
    mockup holds everything to one measure. EVERY component uses .container.wide, so
    raising the token would widen the whole site. The carousel is widened on its own
    instead, to master's 1440px, which is a number already in the system rather than
    a new one.
\*---------------------------------------------------------------------------------*/
    .component.partners.has-carousel .container{
        max-width: 1440px;
    }

/*---------------------------------------------------------------------------------*\
    Carousel (added 2026-10-02)

    The tiles keep the look they have in the grid. Only the controls are new, and
    they follow the Slider's: dots as outlined circles that fill when current, and
    the arrows in the scheme's own colours so the row works on any background.
\*---------------------------------------------------------------------------------*/
    .component.partners .partners-carousel .swiper-button-prev,
    .component.partners .partners-carousel .swiper-button-next{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
        /* opacity is in here because master hides the arrows until hover on a
           pointer device, and this shorthand would otherwise drop the fade */
        transition: opacity .2s ease, background-color .15s ease, color .15s ease;
    }

    .component.partners .partners-carousel .swiper-button-prev:hover,
    .component.partners .partners-carousel .swiper-button-next:hover,
    .component.partners .partners-carousel .swiper-button-prev:focus-visible,
    .component.partners .partners-carousel .swiper-button-next:focus-visible{
        background-color: var(--btn-hover-bg-colour);
        color: var(--btn-hover-txt-colour);
    }

    .component.partners .partners-carousel .swiper-button-prev svg,
    .component.partners .partners-carousel .swiper-button-next svg{
        width: 22px;
        height: 22px;
    }

/* The dots, as the Slider draws them: a 24px target with a smaller ring inside, so
   the thing you can hit is bigger than the thing you can see (WCAG 2.5.8). */

    .component.partners .partners-carousel .swiper-pagination{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        color: var(--title-colour);
    }

    .component.partners .partners-carousel .swiper-pagination-bullet{
        position: relative;
        width: 24px;
        height: 24px;
        margin: 0 2px;
        background: transparent;
        opacity: 1;
    }

    .component.partners .partners-carousel .swiper-pagination-bullet::after{
        content: "";
        position: absolute;
        inset: 8px;
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    .component.partners .partners-carousel .swiper-pagination-bullet-active::after{
        background: currentColor;
    }


/*--- Stats (master) ---*/
/*---------------------------------------------------------------------------------*\

    Stats - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/Stats.css

    The title + top text (.top-txt-wrp) is a general component area styled in
    base.css.

    The ring
    - 120 by 120 user units, radius 54, so its circumference is 339.292. The dash
      array and offset below are that number, which is what lets the ring draw
      itself from nothing by moving the offset to 0
    - Rotated a quarter turn so it starts at the top rather than at three o'clock
    - .go is added by Stats.js when the figure comes into view. Without JavaScript
      the ring simply stays undrawn and the figure is still there and still right

\*---------------------------------------------------------------------------------*/
    .component.stats .stats-wrp{
        row-gap: 2rem;
    }

    .component.stats .stat{
        height: 100%;
        text-align: center;
    }

    .component.stats .dial{
        position: relative;
        width: min(132px, 38vw);
        margin: 0 auto .9rem;
        aspect-ratio: 1;
    }

    .component.stats .dial svg{
        display: block;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .component.stats .dial .track{
        fill: none;
        stroke-width: 7;
    }

    .component.stats .dial .fill{
        fill: none;
        stroke-width: 7;
        stroke-linecap: round;
        stroke-dasharray: 339.292;
        stroke-dashoffset: 339.292;
    }

    .component.stats .stat.go .dial .fill{
        stroke-dashoffset: 0;
    }

    .component.stats .dial .num{
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 0 .7rem;
        line-height: 1;
    }

    @media(prefers-reduced-motion: no-preference){

        .component.stats .dial .fill{
            transition: stroke-dashoffset 1.8s cubic-bezier(.22, .61, .36, 1);
        }

    }


/*--- Stats (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Stats - Theme CSS
    -------------------------

    How it looks on this site. Layout and function are in
    components/Stats/Stats.css

    Which variable does what, and why
    - The ring and the figure take var(--btn-bg-colour), which is the scheme's own
      emphasis colour. On the navy band that is the orange, which is what the design
      asks for; on a white section it is the navy. The component follows whichever
      background it is put on rather than carrying one colour of its own
    - The track behind the ring is the background mixed 14% towards the title
      colour: on the navy band that is the mockup's track exactly, a quiet step
      lighter than the band
    - A thinner band than other sections, as in the mockup

\*---------------------------------------------------------------------------------*/
    .component.stats:not(.remove-padding-top){
        padding-top: 3rem;
    }

    .component.stats:not(.remove-padding-bottom){
        padding-bottom: 3.25rem;
    }

    .component.stats .top-txt-wrp{
        margin-bottom: 2rem;
    }

    .component.stats .dial .track{
        stroke: color-mix(in srgb, var(--bg-colour) 86%, var(--title-colour));
    }

    .component.stats .dial .fill{
        stroke: var(--btn-bg-colour);
    }

    .component.stats .dial .num{
        color: var(--btn-bg-colour);
        font-family: var(--font-head);
        font-size: clamp(1.1rem, 3vw, 1.4rem);
        font-weight: 700;
    }

/* A word in place of a figure ("Incoming") has to fit the same ring a number does */
    .component.stats .dial .num.txt{
        font-size: clamp(.95rem, 2.4vw, 1.15rem);
    }

    .component.stats .stat .label{
        margin: 0;
        color: var(--title-colour);
        font-size: 1.15rem;
    }