/* ==========================================================================
   RESPONSIVE STYLES - ORGANISED BY BREAKPOINT

   The scale itself is not in this file. The mobile canvas (one unit = 16px / 30, the tighter
   heading ladder, the 20px gutter, --space-mobile) and the tablet type floor are tokens, so they
   live with the rest of the tokens at the bottom of vars.css. This file holds the LAYOUT changes
   that go with them.

   Rewritten 2 Oct 2026. The previous file was mostly rules from another site in the fleet
   (block_type_image_text, big_image, mobflip, owl carousel, cta_banner, hero-body, the
   navbar-start h1, navbar-item-contacts, google-reviews, the .responsive-* utilities) whose
   markup does not exist here, plus #b220 (no such block) and #b1 (the type-test page). Its one
   live side effect was hiding the header links below 480px while the burger stayed hidden, which
   left phones with no navigation at all.
   ========================================================================== */

/* The product browser's "Filter" toggle is mobile-only (styled under MOBILE below). Its <details>
   renders open, so on desktop hiding the summary leaves the filters exactly as they were. */
.product-browser__toggle {
  display: none;
}

/* ==========================================================================
   TABLET (1023px and below)
   ========================================================================== */
@media screen and (max-width: 1023px) {
  /* Header: the burger replaces the inline links. On the fluid canvas the links are 22u, about
     8px at 1023px, and the mobile menu (jquery.mmenu, set up in main.js from a clone of #mmenu)
     was already built on every page but had nothing to open it. */
  section.header .navbar-end nav#mmenu {
    display: none;
  }
  section.header .navlink {
    display: flex;
    align-items: center;
    color: var(--nav-link-colour);
  }
  /* 44 x 44px hit area around the 28px glyph, pulled back by its padding so the glyph stays
     flush with the container edge. */
  section.header .navlink {
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    flex: none;
  }
  section.header .navlink svg {
    width: 28px;
    height: 28px;
  }
  section.header .navlink:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* The menu panel's links in the header nav's own type (uppercase, letterspaced heading face)
     rather than mixed-case body copy. */
  .mm-menu .mm-listview > li > a {
    font-family: var(--nav-font);
    font-size: 18px;
    letter-spacing: var(--nav-letter-spacing);
    text-transform: uppercase;
    padding: 16px 20px;
  }

  /* Footer layout */
  section.footer .footer-cols {
    --footer-menu-grid-gap: 1.75rem 1.75rem;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Branding col: full width, children split 50/50 */
  section.footer .footer-cols .footer-col.branding {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  section.footer .footer-col.branding > a.logo {
    grid-column: 1 / -1;
  }

  section.footer .footer-cols .footer-col:not(.branding) {
    min-width: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   MOBILE (768px and below)
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* ---- Header ---------------------------------------------------------------
     The logo is 59u tall by aspect ratio, 288px wide on the phone unit, which overlapped the
     menu button below about 390px. Its width is now the smaller of that and the space the
     44px button (and a 12px gap) leaves inside the 20px gutters, with the height following the
     SVG's own 889:97 ratio. Bulma's .navbar-brand is flex-shrink: 0, hence the overrides. */
  section.header .navbar-start {
    flex: 1 1 auto;
    min-width: 0;
  }
  section.header .navbar-end {
    width: auto;
    flex: none;
  }
  section.header .navbar-brand .navbar-item img {
    width: min(calc(var(--logo-max-height) * 889 / 97), calc(100vw - 2 * var(--gutter) - 44px - 12px));
    height: auto;
    max-width: none;
  }

  /* ---- Spacing --------------------------------------------------------------
     The block and element gaps at 0.6 of the unit (--space-mobile, vars.css). These three are
     declared on section.section.block-item in custom.css (search BLOCK SYSTEM) from the stored
     steps, so redefining them here moves every gap on the site without touching a setting:
     block gaps Quarter..Triple = 7 / 13 / 27 / 53 / 80px, between elements 10 / 20 / 40 / 81px.
     A spacer element is a block-scale step too, so it takes the same factor. */
  section.section.block-item {
    --block-elementsGapPx: calc(var(--block-elementsGap) * var(--u) * var(--space-mobile));
    --block-outerGapTopPx: calc(var(--block-outerGapTop) * var(--u) * var(--space-mobile));
    --block-outerGapBottomPx: calc(var(--block-outerGapBottom) * var(--u) * var(--space-mobile));
  }
  section.section.block-item .element-spacer {
    height: calc(var(--element-size, 0) * var(--u) * var(--space-mobile));
  }

  /* Boxed blocks ("inner"). Desktop nests the content at the canvas proportion and derives
     --bleed from it (custom.css, CONTAINER-WIDTH BLOCKS). With a fixed gutter there is no
     proportion to repeat, so the box gets its own 16px inner gutter and bleed matches it. */
  section.section.block-item[style*="--block-containerWidth: inner"] {
    --bleed: 16px;
  }
  section.section.block-item[style*="--block-containerWidth: inner"] .block-container {
    width: calc(100% - 2 * 16px);
  }

  /* ---- Columns --------------------------------------------------------------
     Every element stacks full width, in builder order. */
  section.section.block-item .block-columns {
    display: flex;
    flex-direction: column;
    align-items: var(--block-horizontalAlign);
    justify-content: var(--block-verticalAlign);
  }

  section.section.block-item .block-columns .column {
    width: 100%;
    flex-grow: 0;
    order: -1000;
  }

  /* Carousel on mobile. The two rules above force a column stack, which a
     carousel must never do. The track and slide overrides in custom.css beat
     them on specificity ((0,4,1) and (0,5,1) against (0,3,1) and (0,4,1)), so
     only the WIDTH needs adding here: `width: 100%` above beats Bulma's
     .column.is-N, and below 769px is-N is not in play at all — Bulma gates it
     on min-width. 1.15 is the classic mobile peek, which the is-N grid cannot
     express.
     DELIBERATELY A DIFFERENT KEY from the desktop Slides Per Page field. That
     field emits --block-carouselPerPage INLINE on the section, and an inline
     value cannot be overridden from a media query — it can only be READ from
     one. So if this rule read the desktop key, setting "3 per page" would put
     three cards on a 390px phone at ~110px each. Mobile therefore keeps its own
     key, --block-carouselMobilePerPage, with the 1.15 peek as the fallback; add
     a mobile field later and it plugs straight in, which is the direction the
     per-device block options item is going anyway.
     `100%` resolves against the row's content box, the same basis is-N uses, so
     this is the same arithmetic as the desktop rule. */
  section.section.block-item[style*="--block-carousel:"] .block-columns > .column {
    width: calc(100% / var(--block-carouselMobilePerPage, 1.15));
  }

  /* Arrows off on touch widths: swipe is the affordance here, and the track's tabindex="0"
     keeps arrow-key scrolling. */
  section.section.block-item .block-carousel__arrow { display: none; }

  /* ---- PHONES SETTINGS ---------------------------------------------------------
     The CMS's per-device settings: the Phones box in the block settings modal
     (cms/section-blocks.php) and "Order on Phones" on every element
     (cms/_includes/_config/elements.php). Each is its own --block-*Mobile / --element-*Mobile
     key, because an inline custom property can be READ from a media query but not overridden by
     one. Empty is never emitted, so none of this matches a block nobody has set. */

  /* Image Shape. On a phone a 1.86:1 hero is 210px tall at 390px, so every ratio block, and
     every photo band below, gets AT LEAST a 4:3 shape (293px) unless the Phones box says
     otherwise: "desktop" keeps the desktop shape, or a number (1 square, 0.8 portrait) is the
     width / height. Never shorter than the desktop shape, so a portrait block stays portrait.
     The extra height is cropped from the sides of the photo (background-size: cover, centred).
     --mobile-ratio is declared on every block so the bands can read it without an aspect
     ratio; the key is ratioMobile and NOT aspectRatioMobile, because CSS finds settings by
     substring and "--block-aspectRatioMobile" would match every [style*="--block-aspectRatio"]
     rule, including the desktop ones. */
  section.section.block-item {
    --mobile-ratio: var(--block-ratioMobile, 4 / 3);
  }
  section.section.block-item[style*="--block-backgroundMobile: shade"] {
    --mobile-ratio: var(--block-ratioMobile, 0.8);
  }
  section.section.block-item[style*="--block-ratioMobile: desktop"] {
    --mobile-ratio: var(--block-aspectRatio, 16 / 9);
  }
  section.section.block-item[style*="--block-aspectRatio"]:not([style*="--block-backgroundMobile:"]) {
    min-height: max(calc(100vw / (var(--block-aspectRatio))), calc(100vw / (var(--mobile-ratio))));
  }
  section.section.block-item[style*="--block-containerWidth: inner"][style*="--block-aspectRatio"]:not([style*="--block-backgroundMobile:"]) {
    min-height: max(calc(var(--container-fluid) / (var(--block-aspectRatio))), calc(var(--container-fluid) / (var(--mobile-ratio))));
  }

  /* Background Image: above / below / hidden. The photo leaves the back of the block and takes
     its own band, at the Image Shape above (and never shorter than the block's own aspect ratio,
     16:9 if it has none), and the block's top
     or bottom padding grows by that band so the content clears it. At least a Standard gap
     (27px) separates the two, since hero blocks run with no top or bottom gap at all.
     min-height: 0 drops the ratio height: the band now provides the picture, and the ratio box
     would only add empty colour under the content. `[style]` lifts this to (0,3,1), over the
     boxed-block ratio rule in custom.css at (0,2,2). Opacity goes back to full, because the
     image no longer sits under text. */
  section.section.block-item[style*="--block-backgroundMobile:"][style] {
    --mobile-image-height: max(calc(100vw / (var(--block-aspectRatio, 16 / 9))), calc(100vw / (var(--mobile-ratio))));
    min-height: 0;
  }
  section.section.block-item[style*="--block-backgroundMobile:"][style*="--block-containerWidth: inner"] {
    --mobile-image-height: max(calc(var(--container-fluid) / (var(--block-aspectRatio, 16 / 9))), calc(var(--container-fluid) / (var(--mobile-ratio))));
  }
  section.section.block-item[style*="--block-backgroundMobile: above"] {
    padding-top: calc(var(--mobile-image-height) + max(var(--block-outerGapTopPx), 27px));
    /* Hero blocks run with no bottom gap because the photo used to fill to the edge. With the
       photo moved up, the last line of text would sit on the block's edge and be clipped by its
       overflow: hidden (Velfac Ribo b74, 5 Oct), so the far side gets the same 27px minimum. */
    padding-bottom: max(var(--block-outerGapBottomPx), 27px);
  }
  section.section.block-item[style*="--block-backgroundMobile: above"]::before {
    inset: 0 0 auto 0;
    height: var(--mobile-image-height);
    opacity: 1;
  }
  section.section.block-item[style*="--block-backgroundMobile: below"] {
    padding-bottom: calc(var(--mobile-image-height) + max(var(--block-outerGapBottomPx), 27px));
    padding-top: max(var(--block-outerGapTopPx), 27px);
  }
  section.section.block-item[style*="--block-backgroundMobile: below"]::before {
    inset: auto 0 0 0;
    height: var(--mobile-image-height);
    opacity: 1;
  }
  section.section.block-item[style*="--block-backgroundMobile: hide"]::before {
    display: none;
  }
  /* Over the photo, with shading. The text stays on the photo, as on desktop, but the block is
     taller (4:5 by default, from --mobile-ratio above), the content drops to the bottom, and a
     dark gradient behind it carries the white text. Meant for SHORT hero copy -- a logo and a
     line or two. Long copy would cover the picture, so those blocks use Above instead.
     `[style]` is needed to beat the min-height: 0 of the generic backgroundMobile rule above, and
     the container rules undo custom.css's space-between handling for ratio blocks (b13), which
     would otherwise pin the first element to the top of the photo. The gradient is ::after,
     unused on blocks elsewhere; the content clears it through .block-container's z-index: 10.
     Photo opacity goes back to full: the gradient does the job the dimming did. */
  section.section.block-item[style*="--block-backgroundMobile: shade"][style] {
    min-height: max(calc(100vw / (var(--block-aspectRatio, 16 / 9))), calc(100vw / (var(--mobile-ratio))));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: max(var(--block-outerGapTopPx), 27px);
    padding-bottom: max(var(--block-outerGapBottomPx), 27px);
  }
  section.section.block-item[style*="--block-backgroundMobile: shade"][style*="--block-containerWidth: inner"] {
    min-height: max(calc(var(--container-fluid) / (var(--block-aspectRatio, 16 / 9))), calc(var(--container-fluid) / (var(--mobile-ratio))));
  }
  section.section.block-item[style*="--block-backgroundMobile: shade"][style] > .block-container {
    flex: 0 0 auto;
    height: auto;
  }
  section.section.block-item[style*="--block-backgroundMobile: shade"][style] > .block-container > .block-columns {
    align-content: flex-start;
    justify-content: flex-start;
  }
  section.section.block-item[style*="--block-backgroundMobile: shade"]::before {
    opacity: 1;
  }
  section.section.block-item[style*="--block-backgroundMobile: shade"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 80%) 100%);
  }
  /* Spacers in a block with a background photo exist to show more of the photo beside or under
     the text (Velfac b64 and b66). Once the photo has moved out of the way, or gone, they are
     only empty background, so they go too, along with their column's gap padding. */
  section.section.block-item[style*="--block-backgroundMobile:"] .block-columns > .column.element-spacer {
    display: none;
  }

  /* Carousel on phones only. The track rules from custom.css (search BLOCK CAROUSEL), keyed on
     the phone key instead. Same specificity as the desktop ones, so they beat the column stack
     above the same way. CSS only: block-carousel.js keys on the desktop setting, so there are no
     clones, arrows or fade -- none of which a phone needs. A row break has no row to break here. */
  section.section.block-item[style*="--block-carouselMobile: on"] .block-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  section.section.block-item[style*="--block-carouselMobile: on"] .block-columns::-webkit-scrollbar {
    display: none;
  }
  section.section.block-item[style*="--block-carouselMobile: on"] .block-columns > .column {
    flex: 0 0 auto;
    order: 0;
    scroll-snap-align: start;
    width: calc(100% / var(--block-carouselMobilePerPage, 1.15));
  }
  section.section.block-item[style*="--block-carouselMobile: on"] .block-columns > .column.element-row_break {
    display: none;
  }

  /* Text Alignment. !important because the editor's own alignment is an inline style on each
     paragraph. */
  section.section.block-item[style*="--block-textAlignMobile:"] .block-columns,
  section.section.block-item[style*="--block-textAlignMobile:"] .block-columns * {
    text-align: var(--block-textAlignMobile) !important;
  }

  /* Order on Phones. Every stacked column is order -1000 (above), so one step either side
     moves an element to the top or bottom without disturbing the rest. (0,4,1) beats that rule. */
  section.section.block-item .block-columns > .column[style*="--element-mobileOrder: first"] {
    order: -1001;
  }
  section.section.block-item .block-columns > .column[style*="--element-mobileOrder: last"] {
    order: -999;
  }

  /* ---- Copy -----------------------------------------------------------------
     Breaks that only shaped a paragraph at desktop width. block_mark_line_breaks()
     (_includes/_functions/blocks.php) tags them and puts a space before every <br>, so the words
     either side stay apart once the break is gone. Structural breaks (addresses, opening hours,
     "<strong>Name</strong><br>Detail") are untagged and stay. */
  .block-item br.br-wrap {
    display: none;
  }

  /* ---- Footer ---------------------------------------------------------------
     One column, left aligned: logo, legal lines, then the menu two across. The legal lines are
     20u, which is 10.7px here. */
  section.footer .footer-inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  section.footer .footer-cols,
  section.footer .footer-cols .footer-col.branding {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  section.footer .footer-cols .footer-col.branding {
    gap: 0;
  }
  section.footer .footer-legal,
  section.footer .footer-legal p,
  section.footer .footer-legal-links a {
    font-size: 12px;
  }
  section.footer .footer-col.menu ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--footer-menu-grid-gap);
  }

  /* ---- Product browser (/products) -------------------------------------------
     Filters above the grid instead of beside it, folded into a "Filter" toggle (the <details> in
     _templates/elements/products/browser.php; product-browser.js closes it on load). */
  .product-browser {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .product-browser__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--grey-border);
    border-bottom: 1px solid var(--grey-border);
    font-family: var(--heading-font);
    font-size: 15px;
    letter-spacing: var(--nav-letter-spacing);
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }
  .product-browser__toggle::-webkit-details-marker { display: none; }
  /* sits right after "Filter"; the auto margin pushes the +/- to the far end */
  .product-browser__toggle-count {
    margin-left: 0.3em;
    margin-right: auto;
  }
  .product-browser__toggle::after {
    content: "+";
    /* the heading face has no "+" glyph */
    font-family: var(--main-font), sans-serif;
    font-size: 20px;
    line-height: 1;
  }
  .product-browser__panel[open] > .product-browser__toggle::after {
    content: "\2212";
  }
  .product-browser__panel[open] > .product-browser__filters {
    padding-top: 24px;
  }
  .product-browser__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  /* Touch-sized options: 16px labels on 44px rows (were 12.8px on ~24px), a 22px box, and the
     whole row is the <label>, so a tap anywhere on it toggles the checkbox. */
  .product-browser__option {
    min-height: 44px;
    padding: 0;
    gap: 12px;
    font-size: 16px;
  }
  .product-browser__option input {
    width: 22px;
    height: 22px;
  }
  .product-browser__option input:checked {
    box-shadow: inset 0 0 0 4px #fff;
  }
  .product-browser__show {
    display: flex;
    box-sizing: border-box;   /* .button pads 1.7rem a side; content-box made width:100% overflow by 54px */
    width: 100%;
    margin-top: 24px;
  }
  .product-browser__clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- Small labels --------------------------------------------------------------
     Uppercase, letterspaced labels sized at 22u, which is 11.7px on the phone unit. 13px keeps
     them clearly secondary to 16px body copy while staying comfortably readable. */
  .showcase-card__category,
  .showcase-feature__subline,
  .product-browser__legend,
  .product-browser__selected,
  .product-browser__total {
    font-size: 13px;
  }

  /* ---- Showcase hero lockup (/showcase) --------------------------------------
     "SCENE | SHOWCASE" is 100u + 140u type, about 630px wide on the mobile unit. Sized off the
     viewport instead so it always fits: about 320px at 390px. */
  .showcase-hero__lockup { gap: 3vw; }
  .showcase-hero__logo { height: 4.2vw; }
  .showcase-hero__rule { height: 7vw; width: 1px; }
  .showcase-hero__word { font-size: 5.6vw; }

  /* ---- Forms and modals ------------------------------------------------------ */
  .field_type_checkbox .control > label {
    width: 100%;
  }

  .modal p img {
    display: none;
  }

  .modal .fields,
  .modal .content {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   639px and below
   ========================================================================== */
@media screen and (max-width: 639px) {
  .sector-grid {
    grid-auto-rows: auto;
  }

  .sector-grid .listing.listing-overlay.sector-card--standard {
    min-height: 285px;
  }

  .sector-grid .listing.listing-overlay.sector-card--large {
    min-height: 450px;
  }
}

/* ==========================================================================
   660px and below
   ========================================================================== */
@media screen and (max-width: 660px) {
  .modal .modal-content {
    padding: 1.3rem !important;
  }
}

/* ==========================================================================
   480px and below
   ========================================================================== */
@media screen and (max-width: 480px) {
  /* The optional header button (SETTINGS header_button_label). Scoped to the direct child, so
     it no longer catches the links inside #mmenu, which are .navbar-item too. */
  section.header .navbar-end > .navbar-item {
    display: none;
  }

  .element-text.content p:has(.button:first-child:nth-last-child(2)) {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}