/* ── Visual bands ─────────────────────────────────────────────────
   The shared media system: full-bleed runs of stills, some of them
   with silent video behind. Used by the homepage bands, the homepage
   hero and the whole of the Original Content page.

   Tokens come from home.css, which is enqueued sitewide.
   ───────────────────────────────────────────────────────────────── */

  .bmp-visband{
    display:grid;gap:2px;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    margin:0;padding:0;background:var(--bmp-line);
  }
  /* Two and three up are the compositions that read; four thin columns of
     business photography is a contact sheet, not a page. */
  .bmp-visband[data-bmp-count="1"]{grid-template-columns:1fr}
  .bmp-visband[data-bmp-count="4"],
  .bmp-visband[data-bmp-count="2"]{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

  .bmp-shot{
    position:relative;display:block;margin:0;overflow:hidden;
    background:var(--bmp-panel);aspect-ratio:4/5;
    text-decoration:none;color:var(--bmp-white);
  }
  .bmp-shot-wide{grid-column:1/-1;aspect-ratio:16/9}
  .bmp-visband[data-bmp-count="1"] .bmp-shot{aspect-ratio:16/9}

  .bmp-shot img,.bmp-shot-vid{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  /* The video sits on top of the still and simply replaces it once it plays.
     Both are the same frame, so there is nothing to see in the handover. */
  .bmp-shot-vid{z-index:1}

  /* Only a tile you can follow reacts to the pointer. A tile that merely
     loops is not offering anything to click. */
  a.bmp-shot img,a.bmp-shot .bmp-shot-vid{transition:transform .6s var(--bmp-ease)}
  a.bmp-shot:hover img,a.bmp-shot:hover .bmp-shot-vid{transform:scale(1.03)}

  .bmp-shot-play{
    position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;
    width:56px;height:56px;display:grid;place-items:center;
    background:rgba(8,8,10,.5);border-radius:50%;backdrop-filter:blur(2px);
    transition:background .25s,scale .25s var(--bmp-ease);
  }
  .bmp-shot-play svg{width:34px;height:34px}
  a.bmp-shot:hover .bmp-shot-play{background:rgba(8,8,10,.72);scale:1.06}

  .bmp-shot-cap{
    position:absolute;z-index:3;left:0;right:0;bottom:0;
    padding:52px 20px 16px;
    font-family:var(--bmp-display);font-weight:700;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bmp-white);
    background:linear-gradient(180deg,transparent,rgba(8,8,10,.86));
  }

/* ── The homepage image hero ──────────────────────────────────────
   Only rendered once a hero visual exists; until then front-page.php
   keeps drawing the radar field instead.

   The headline used to sit on the photograph, under a scrim. Lloyd asked
   for the picture to be left alone — "just the writing on the hero image
   to be relocated" — so the two are now stacked: a clean full-bleed band
   of photography, and the words underneath it on the black ground. No
   scrim, no text-shadow, nothing over the frame at all.
   ───────────────────────────────────────────────────────────────── */

  .bmp-imghero{background:var(--bmp-ink);position:relative}

  /* The ident is released from the field the same way the inner pages'
     topbar releases it: it flows above the photograph instead of lying
     over it. It keeps its own gutters here because, unlike the topbar,
     it is not wrapped. */
  .bmp-imghero .bmp-ident{
    position:static;z-index:auto;pointer-events:auto;
    padding:22px var(--bmp-gut);
    border-bottom:1px solid var(--bmp-line);
  }

  /* The band is sized, not aspect-ratioed: a 3:2 photograph run edge to
     edge on a wide screen would be over 900px tall and push every word off
     the fold. A fixed run of height with object-fit cover keeps the crop
     the same shape at every width. */
  .bmp-imghero-pic{
    position:relative;width:100%;overflow:hidden;
    height:clamp(320px,48vh,560px);background:var(--bmp-panel);
  }
  .bmp-imghero-pic img,.bmp-imghero-pic video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 50%;display:block;
  }
  /* The video replaces the still once it plays; same frame, so the
     handover is invisible. */
  .bmp-imghero-pic .bmp-shot-vid{z-index:1}

  .bmp-imghero .bmp-wrap{
    padding-top:clamp(40px,5.5vw,76px);
    padding-bottom:clamp(48px,7vw,96px);
    container-type:inline-size;
  }

  /* Same three-line rule as the radar hero: sized against the container so
     the longest line fills the measure and never breaks. */
  .bmp-imghero h1{
    font-family:var(--bmp-display);font-weight:800;
    font-size:min(9.2cqi,92px);line-height:.98;letter-spacing:.01em;
    text-transform:uppercase;margin:0 0 18px;color:var(--bmp-white);
  }
  .bmp-imghero h1 span{display:block;white-space:nowrap}
  .bmp-imghero h1 .bmp-lit{color:var(--bmp-gold-1)}
  .bmp-imghero .bmp-lede{max-width:44ch;margin:0 0 28px;color:var(--bmp-white);opacity:.92}

/* ── The image hero on a phone ────────────────────────────────────
   The subject of a street photograph is its lower half, so the crop
   moves down, and the headline takes the width the old on-image
   setting was leaving on the table (the longest line fits at 10.2cqi).
   ───────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .bmp-imghero .bmp-ident{flex-direction:column;gap:14px}
  .bmp-js .bmp-imghero .bmp-ident{flex-direction:row;align-items:center;gap:16px}
  .bmp-imghero-pic{height:clamp(240px,38vh,340px)}
  .bmp-imghero-pic img,.bmp-imghero-pic video{object-position:50% 68%}
  .bmp-imghero .bmp-wrap{padding-top:clamp(32px,6vw,48px)}
  .bmp-imghero h1{font-size:min(10.2cqi,92px)}
}

@media (prefers-reduced-motion:reduce){
  a.bmp-shot img,a.bmp-shot .bmp-shot-vid,.bmp-shot-play{transition:none}
  a.bmp-shot:hover img,a.bmp-shot:hover .bmp-shot-vid{transform:none}
}