/* ============================================================
   Musef - one band per feature on the home page.

   Printed after the feature card grid by inc/msf-features.php. Photo and
   copy side by side, swapping sides down the run, with every other band
   shaded so the six read as separate things rather than one long list.
   ============================================================ */

.msf-fx{
  background:var(--paper, #FFFFFF);
  border-top:1px solid var(--line, var(--msf-line, #ECE3D1));
  padding:clamp(40px, 5vw, 68px) 20px;
}
.msf-fx--shade{ background:var(--cream, #FBF6EC); }

.msf-fx__inner{
  width:100%; max-width:var(--wrap, 1180px); margin:0 auto;
  display:grid; gap:clamp(22px, 4vw, 52px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:880px){
  .msf-fx__inner{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  /* Odd bands put the photo on the right. The copy keeps its place in the
     document, so the reading order never changes - only the columns do. */
  .msf-fx--flip .msf-fx__shot{ order:2; }
  .msf-fx--flip .msf-fx__copy{ order:1; }
}

/* A stage of one shape for every band, whatever shape the picture is.
   A 16:9 screen capture and a tall room photo both sit inside it without
   being cropped, and the six bands end up the same height instead of one
   towering over the copy beside it. */
.msf-fx__shot{
  margin:0 auto;
  max-width:540px; width:100%;
  aspect-ratio:4 / 3;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line, var(--msf-line, #ECE3D1));
  border-radius:var(--radius, 16px);
  background:var(--cream, #FBF6EC);
  overflow:hidden; line-height:0;
}
.msf-fx--shade .msf-fx__shot{ background:var(--paper, #FFFFFF); }
.msf-fx__img{
  display:block;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
}

.msf-fx__copy{ max-width:34em; }

.msf-fx__eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-deep, var(--msf-accent, #D8511C));
}

.msf-fx__mark{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:var(--orange-deep, var(--msf-accent, #D8511C));
  background:rgba(216, 81, 28, .08);
  background:color-mix(in srgb, var(--orange-deep, #D8511C) 8%, transparent);
}
.msf-fx__mark svg{ width:19px; height:19px; display:block; }

.msf-fx__title{
  margin:0 0 12px;
  font-family:var(--font-serif, var(--msf-font, sans-serif));
  font-size:clamp(1.45rem, 3vw, 2.15rem); font-weight:700; line-height:1.25;
  color:var(--ink, var(--msf-ink, #211A14));
}

.msf-fx__lead{
  margin:0 0 10px;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:1.02rem; line-height:1.7;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
}

.msf-fx__more{
  margin:0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.92rem; line-height:1.65;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
  opacity:.88;
}

@media (max-width:600px){
  .msf-fx__mark{ width:34px; height:34px; }
  .msf-fx__mark svg{ width:17px; height:17px; }
  .msf-fx__lead{ font-size:.98rem; }
}