/* =====================================================================
   BFO Photos (v0.28.0) — values come from Settings → BFO Photos
   --bfo-wash  : 0.50–1.50 (1 = the locked design)
   --bfo-match : 0–1      (0 = off)
   ===================================================================== */
:root{ --bfo-wash:1; --bfo-match:0; }

/* Per-photo Overlay slider (v0.28.1) on any framed photo */
.bfo-photo .wp-block-image::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#033B5A; opacity:var(--bfo-ovx, var(--bfo-ovi, 0));
}

/* Each section's own wash level; per-photo Lighter/Darker nudges it */
.bfo-sec{ --bfo-w:var(--bfo-wash); }
.bfo-sec:has(.is-style-bfo-wash-lighter){ --bfo-w:calc(var(--bfo-wash) - .3); }
.bfo-sec:has(.is-style-bfo-wash-darker){ --bfo-w:calc(var(--bfo-wash) + .3); }

/* ---------- Hero wash ----------
   Below 100%: the designed navy wash fades.
   Above 100%: an extra navy layer sits over the photo itself. */
.bfo-chero:not(.bfo-chero--split)::before,
.bfo-fhero::before,
.bfo-finalband::before,
.bfo-hquote::before,
.bfo-jhero::before{ opacity:clamp(0, var(--bfo-w), 1); }

.bfo-chero:not(.bfo-chero--split) .bfo-chero__media .wp-block-image::after,
.bfo-fhero .bfo-fhero__media .wp-block-image::after,
.bfo-finalband .bfo-finalband__media .wp-block-image::after,
.bfo-hquote .bfo-hquote__media .wp-block-image::after,
.bfo-jhero .bfo-jhero__media .wp-block-image::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#033B5A; opacity:min(.9, calc(var(--bfo-ovx, var(--bfo-ovi, 0)) + clamp(0, calc((var(--bfo-w) - 1) * .8), .6)));
}

/* Homepage hero only sits behind words on tablet/desktop */
@media (min-width:768px){
  .bfo-hhero::before{ opacity:clamp(0, var(--bfo-w), 1); }
  .bfo-hhero .bfo-hhero__media .wp-block-image::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:#033B5A; opacity:min(.9, calc(var(--bfo-ovx, var(--bfo-ovi, 0)) + clamp(0, calc((var(--bfo-w) - 1) * .8), .6)));
  }
}

/* ---------- Photo match + per-photo Brighten / Darken ---------- */
.is-style-bfo-brighten{ --bfo-br:1.14; }
.is-style-bfo-darken{ --bfo-br:.86; }

.bfo-photo img,
.bfo-post-figure img,
.bfo-post-editorial__media img,
.bfo-qr-whats__media img,
img.wp-post-image{
  filter:
    brightness(var(--bfo-brx, var(--bfo-br, 1)))
    saturate(calc(1 - .28 * var(--bfo-match)))
    sepia(calc(.14 * var(--bfo-match)))
    contrast(calc(1 + .05 * var(--bfo-match)));
}

/* Shared navy tone, scaled by Photo match (invisible at 0) */
.bfo-photo .wp-block-image::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#033B5A; mix-blend-mode:soft-light; opacity:calc(.35 * var(--bfo-match));
}

/* ---------- Focus point (v0.28.1) + Zoom (v0.28.2) ----------
   Zoom scales the photo around its focus point, so the focus point
   doubles as a pan control once zoomed in. */
.bfo-sec .bfo-photo img{
  object-position:var(--bfo-fx, 50%) var(--bfo-fy, 50%);
  transform:scale(var(--bfo-zoom, 1)); transform-origin:var(--bfo-fx, 50%) var(--bfo-fy, 50%);
}
@media (max-width:767px){
  .bfo-sec .bfo-photo img{
    object-position:var(--bfo-fxm, var(--bfo-fx, 50%)) var(--bfo-fym, var(--bfo-fy, 50%));
    transform:scale(var(--bfo-zoomm, var(--bfo-zoom, 1)));
    transform-origin:var(--bfo-fxm, var(--bfo-fx, 50%)) var(--bfo-fym, var(--bfo-fy, 50%));
  }
}

/* ---------- Icon tiles (v0.28.4) ----------
   The icon is drawn as a mask in one exact brand colour, so every icon
   matches regardless of its original shade. */
.bfo-photo .wp-block-image.bfo-icon-tile{ background:var(--bfo-tile-bg); }
.bfo-icon-tile--navy { --bfo-tile-bg:#033B5A; --bfo-tile-fg:#F2A01F; }
.bfo-icon-tile--mist { --bfo-tile-bg:#EDF3F6; --bfo-tile-fg:#033B5A; }
.bfo-icon-tile--paper{ --bfo-tile-bg:#FDFCFA; --bfo-tile-fg:#F2A01F; }
.bfo-photo .wp-block-image.bfo-icon-tile img{ opacity:0; }
.bfo-photo .wp-block-image.bfo-icon-tile::after{ opacity:0; }
.bfo-photo .wp-block-image.bfo-icon-tile::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:normal; opacity:1; background:var(--bfo-tile-fg);
  -webkit-mask:var(--bfo-icon) center / contain no-repeat; mask:var(--bfo-icon) center / contain no-repeat;
  transform:scale(calc(.62 * var(--bfo-zoom, 1)));
}
@media (max-width:767px){
  .bfo-photo .wp-block-image.bfo-icon-tile::before{ transform:scale(calc(.62 * var(--bfo-zoomm, var(--bfo-zoom, 1)))); }
}
.bfo-icon-tile--glass{ --bfo-tile-bg:rgba(255,255,255,.08); --bfo-tile-fg:#F2A01F; }

/* ---------- Fixed photo / parallax (v0.28.8) ----------
   The photo is pinned to the screen and the section slides over it like a
   window. clip-path on the frame keeps the pinned photo inside the section
   (this is the version that also works on iPhone, unlike background-attachment). */
.bfo-sec .bfo-photo:has(> .wp-block-image.bfo-parallax){ clip-path:inset(0); }
.bfo-sec .bfo-photo .wp-block-image.bfo-parallax img{
  position:fixed; top:0; left:0;
  width:100vw !important; height:100vh !important; height:100lvh !important; max-width:none;
}

/* ---------- Frames always win (v0.28.10) ----------
   If an image block has been given a size (resize handles, or Width/Height
   in its settings), WordPress writes it inline. Inside a BFO photo frame the
   photo must always fill the frame, so override that — editor included. */
.bfo-sec .bfo-photo .wp-block-image,
.bfo-sec .bfo-photo figure{ position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; max-width:none !important; margin:0 !important; }
.bfo-sec .bfo-photo .components-resizable-box__container{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; }
.bfo-sec .bfo-photo .components-resizable-box__container > img,
.bfo-sec .bfo-photo .wp-block-image img{ width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; aspect-ratio:auto !important; }
.bfo-sec .bfo-photo .components-resizable-box__handle{ display:none !important; }
/* pinned (parallax) photos keep their screen-sized box */
.bfo-sec .bfo-photo .wp-block-image.bfo-parallax img{ width:100vw !important; height:100lvh !important; }

/* ---------- Frame shape (v0.28.11) ----------
   Per-photo option: the frame takes the chosen shape instead of its designed
   height. The photo still fills it (focus point / zoom still apply). */
.bfo-sec .bfo-photo:has(.bfo-shape--21-9){ aspect-ratio:21/9; }
.bfo-sec .bfo-photo:has(.bfo-shape--16-9){ aspect-ratio:16/9; }
.bfo-sec .bfo-photo:has(.bfo-shape--3-2){ aspect-ratio:3/2; }
.bfo-sec .bfo-photo:has(.bfo-shape--4-3){ aspect-ratio:4/3; }
.bfo-sec .bfo-photo:has(.bfo-shape--1-1){ aspect-ratio:1/1; }
.bfo-sec .bfo-photo:has(.bfo-shape--4-5){ aspect-ratio:4/5; }
.bfo-sec .bfo-photo:has([class*="bfo-shape--"]){ min-height:0 !important; height:auto !important; }

/* ---------- Phone overlay + phone brightness (v0.28.23) ----------
   Per-photo, set in the BFO photo panel. On phones they replace the desktop
   Overlay / Brightness; unset = phones follow desktop as before. */
@media (max-width:767px){
  .bfo-photo .wp-block-image{ --bfo-ovx:var(--bfo-ovim); --bfo-brx:var(--bfo-brm); }
}