/* Image break — a full-bleed photograph between two runs of copy.
   Notes: docs/component-imgbreak-notes.md */

.imgbreak{
  position:relative;
  height:50vh;
  min-height:300px;
  overflow:hidden;
  background:var(--charcoal);
}
.imgbreak-inner{
  position:absolute;
  inset:-20% 0;
  background-size:cover;
  background-position:center 40%;
  background-attachment:fixed;
}

/* Parallax stops at tablet. */
@media(max-width:1024px){
  .imgbreak-inner{
      background-attachment:scroll;
      inset:0;
  }
}

@media(max-width:768px){
  .imgbreak{height:35vh;min-height:220px}
}

/* ── --context: the whole photograph, plus a caption band ── */
.imgbreak.imgbreak--context{
  height:auto;
  min-height:0;
  background:var(--charcoal);
}

.imgbreak-media{position:relative;line-height:0}
.imgbreak-img{display:block;width:100%;height:auto}
.imgbreak-copy{text-align:center;padding:2.4rem 2rem 2.8rem;line-height:normal}
.imgbreak-line{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,2.3rem);font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1.25;color:#fff}

.imgbreak-line .gold{color:var(--gold)}
.imgbreak-context{font-family:var(--body);font-size:clamp(.8rem,1.1vw,1rem);font-weight:300;letter-spacing:.08em;color:rgba(255,255,255,.78);margin-top:.9rem}

@media(max-width:600px){
  .imgbreak-copy{padding:1.7rem 1.4rem 2rem}
  .imgbreak-line{font-size:1.2rem}
}