/**
 * BFDs: the banner across the top of the home page. Three parts in a row:
 * the BFD panel (stays put; holds the count and arrows; as wide as its
 * one-line tagline), the picture and the show's details (these two slide).
 * It sits on the page background, inside a hairline border.
 */
.mia-home .home-bfds { display:grid; grid-template-columns:max-content minmax(0, 1fr); margin:0 0 2.2rem; }

/* The BFD panel: a block of ink with the word set big, like a sticker. */
.mia-home .bfd-mark { display:flex; flex-direction:column; padding:1.25rem 1.2rem 1.1rem;
  background:#1b1f24; color:#fdfaf3; border-radius:4px 0 0 4px; }
[data-bs-theme="dark"] .mia-home .bfd-mark { background:#3fd2c7; color:#111417; }
.mia-home .bfd-word { margin:0; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:900;
  font-size:clamp(4rem, 8vw, 6.6rem); line-height:.84; letter-spacing:-.05em;
  /* The B's built-in left space (~.07em at this weight); pulls it flush
     with the tagline below. */
  margin-left:-.062em; }
.mia-home .bfd-word span { color:#3fd2c7; font-size:.55em; letter-spacing:0; margin-left:.06em; }
[data-bs-theme="dark"] .mia-home .bfd-word span { color:#111417; opacity:.55; }
.mia-home .bfd-sub { margin:.75rem 0 0; font-family:var(--mono); font-size:.64rem; line-height:1.5;
  letter-spacing:.18em; text-transform:uppercase; opacity:.78; white-space:nowrap; }
.mia-home .bfd-nav { display:flex; align-items:center; justify-content:center; gap:.55rem; margin-top:auto; padding-top:1rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; }
.mia-home .bfd-btn { width:2rem; height:2rem; padding:0 0 .12rem; border:1px solid currentColor; border-radius:50%;
  background:none; color:inherit; font-size:1.15rem; line-height:1; opacity:.8; cursor:pointer; }
.mia-home .bfd-btn:hover, .mia-home .bfd-btn:focus-visible { opacity:1; background:rgba(127,127,127,.18); }
.mia-home .bfd-edit { margin-top:.7rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:inherit; opacity:.7; }
.mia-home .bfd-edit:hover { opacity:1; }

/* A slide: the picture, then the details. */
.mia-home .bfd-slides { min-width:0; border:1px solid var(--hair); border-left:0; border-radius:0 4px 4px 0;
  overflow:hidden; background:var(--panel); }
.mia-home .bfd { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); height:19rem; }

/* Any picture shape fits: the whole picture over a soft, blurred copy of
   itself, so a tall flyer is never cropped. */
.mia-home .bfd-pic { position:relative; display:block; overflow:hidden; background:var(--hair); }
.mia-home .bfd-blur { position:absolute; inset:-1.5rem; width:calc(100% + 3rem); height:calc(100% + 3rem);
  object-fit:cover; filter:blur(18px); opacity:.5; }
.mia-home .bfd-img { position:relative; display:block; width:100%; height:100%; object-fit:contain; }
.mia-home .bfd-pic .bfd-poster { position:absolute; inset:0; aspect-ratio:auto; height:auto; }

.mia-home .bfd-body { display:flex; flex-direction:column; justify-content:center; gap:.3rem; min-width:0;
  padding:1.3rem 1.6rem; }
.mia-home .bfd-type { margin:0; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc-ink); }
.mia-home .bfd-title { margin:0; font-family:var(--disp); font-weight:700; font-size:clamp(1.45rem, 2.3vw, 2.1rem);
  line-height:1.1; }
.mia-home .bfd-title a { color:var(--ink); text-decoration:none; }
.mia-home .bfd-title a:hover { color:var(--acc-ink); }
.mia-home .bfd-artists { margin:0; font-family:var(--serif); font-style:italic; color:var(--soft); }
.mia-home .bfd-when { margin:.35rem 0 0; }
.mia-home .bfd-dates { margin:0; font-family:var(--mono); font-size:.72rem; color:var(--mut); }
.mia-home .bfd-where { margin:.3rem 0 0; line-height:1.35; }
.mia-home .bfd-where strong { display:block; color:var(--ink); font-weight:600; }
.mia-home .bfd-where span { display:block; color:var(--mut); font-size:.92rem; }
.mia-home .bfd-go { align-self:flex-start; margin-top:.55rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc-ink); text-decoration:none; }
.mia-home .bfd-go:hover { text-decoration:underline; }

/* Narrow screens: the BFD panel becomes a strip on top, then the picture,
   then the details. */
@media (max-width: 991.98px) {
  .mia-home .home-bfds { grid-template-columns:minmax(0, 1fr); }
  .mia-home .bfd-mark { flex-direction:row; flex-wrap:wrap; align-items:center; gap:.2rem .8rem;
    padding:.7rem 1rem; border-radius:4px 4px 0 0; }
  .mia-home .bfd-word { font-size:2.4rem; }
  .mia-home .bfd-sub { margin:0; flex:1 1 8rem; white-space:normal; }
  .mia-home .bfd-nav { margin:0 0 0 auto; padding:0; }
  .mia-home .bfd-edit { margin:0; flex-basis:100%; }
  .mia-home .bfd-slides { border-left:1px solid var(--hair); border-top:0; border-radius:0 0 4px 4px; }
  .mia-home .bfd { grid-template-columns:minmax(0, 1fr); height:auto; }
  .mia-home .bfd-pic { aspect-ratio:16 / 10; }
  .mia-home .bfd-img { position:absolute; inset:0; }
  .mia-home .bfd-body { padding:1rem 1.1rem 1.2rem; }
}