/* BANNER-02 / 0.1.9: one continuous background with live HTML above it.
   No split card, no inner photo frame, no database/template reset. */
body.dj-modular .dj-section-banner {
  position:relative; isolation:isolate; display:flex; align-items:center;
  box-sizing:border-box; width:100%; max-width:100%; min-width:0; min-height:300px; aspect-ratio:3 / 1;
  margin:0 0 20px; padding:0; border:0; border-radius:var(--dj-radius-card,16px); overflow:hidden;
  background:var(--dj-color-warm,#F7F5F0); color:var(--dj-color-body,#4D514B);
}
body.dj-modular .dj-section-banner__copy {
  position:relative; z-index:2; box-sizing:border-box; min-width:0;
  width:55%; padding:28px 32px; overflow-wrap:anywhere;
}
/* Transparent veil keeps one scene visible; it is not a second solid card. */
body.dj-modular .dj-section-banner--illustrated::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(247,245,240,.91) 0%,rgba(247,245,240,.72) 43%,rgba(247,245,240,.14) 60%,transparent 68%);
}
body.dj-modular .dj-section-banner__figure {
  position:absolute; inset:0; z-index:0; margin:0; min-width:0;
}
body.dj-modular .dj-section-banner__figure picture {
  display:block; position:absolute; inset:0; width:100%; height:100%;
}
body.dj-modular .dj-section-banner__figure img {
  display:block; width:100%; height:100%; max-width:none; margin:0;
  object-fit:cover; object-position:50% 50%; border:0; border-radius:0;
}
/* Unknown/old format cannot magically become a panorama. Preserve it uncropped.
   The editor shows the mismatch; replacing the file with a 3:1 frame enables cover. */
body.dj-modular .dj-section-banner--compat-desktop .dj-section-banner__figure img {
  object-fit:contain; object-position:right center;
}
body.dj-modular .dj-section-banner__breadcrumb {
  margin:0 0 14px; color:var(--dj-color-muted,#686D63); font:400 12px/1.6 Arial,sans-serif;
}
body.dj-modular .dj-section-banner__breadcrumb a { color:inherit; text-decoration:none; }
body.dj-modular .dj-section-banner__breadcrumb a:hover { text-decoration:underline; }
body.dj-modular .dj-section-banner h1 {
  margin:0 0 16px; padding:0; color:var(--dj-color-ink,#2D302C);
  font:400 44px/1.13 Georgia,"Times New Roman",serif; letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
body.dj-modular .dj-section-banner .ldc-total {
  display:inline-block; white-space:nowrap; vertical-align:baseline; margin-left:4px;
  color:var(--dj-color-muted,#686D63); font:400 .56em/1.2 Arial,sans-serif; letter-spacing:0;
}
body.dj-modular .dj-section-banner__intro,
body.dj-modular .dj-section-banner__intro p {
  color:var(--dj-color-body,#4D514B); font:400 16px/1.65 Arial,sans-serif;
  margin:0 0 8px; overflow-wrap:anywhere;
}
body.dj-modular .dj-section-banner__intro p:last-child { margin-bottom:0; }
body.dj-modular .dj-section-banner__accent {
  display:flex; align-items:center; gap:10px; margin:18px 0 0;
  color:var(--dj-color-accent,#78684F); font:400 13px/1.5 Arial,sans-serif;
  letter-spacing:.07em; overflow-wrap:anywhere;
}
body.dj-modular .dj-section-banner__accent::before {
  content:""; display:block; width:28px; flex:0 0 28px; border-top:1px solid currentColor;
}
body.dj-modular .dj-section-banner--text {
  display:block; aspect-ratio:auto; min-height:0; background:transparent;
}
body.dj-modular .dj-section-banner--text .dj-section-banner__copy { width:100%; padding:20px 0; }
@media (min-width:781px) and (max-width:1100px) {
  body.dj-modular .dj-section-banner__copy { padding:24px; }
  body.dj-modular .dj-section-banner h1 { font-size:36px; }
  body.dj-modular .dj-section-banner__intro,
  body.dj-modular .dj-section-banner__intro p { line-height:1.55; }
}
@media (max-width:780px) {
  body.dj-modular .dj-section-banner { align-items:flex-start; aspect-ratio:auto; min-height:clamp(440px,75vw,585px); }
  body.dj-modular .dj-section-banner__copy { width:100%; padding:22px 20px 180px; }
  body.dj-modular .dj-section-banner h1 { font-size:32px; line-height:1.14; margin-bottom:12px; }
  body.dj-modular .dj-section-banner__breadcrumb { margin-bottom:10px; }
  body.dj-modular .dj-section-banner__intro,
  body.dj-modular .dj-section-banner__intro p { font-size:15px; line-height:1.5; }
  body.dj-modular .dj-section-banner__accent { margin-top:12px; font-size:12px; letter-spacing:.055em; }
  body.dj-modular .dj-section-banner--illustrated::after {
    background:linear-gradient(180deg,rgba(247,245,240,.94) 0%,rgba(247,245,240,.83) 44%,rgba(247,245,240,.12) 65%,transparent 74%);
  }
  body.dj-modular .dj-section-banner__figure img { object-fit:cover; object-position:50% 100%; }
  body.dj-modular .dj-section-banner--compat-mobile .dj-section-banner__figure img {
    position:absolute; bottom:0; height:190px; object-fit:contain; object-position:center bottom;
  }
  body.dj-modular .dj-section-banner--compat-mobile { min-height:0; }
  body.dj-modular .dj-section-banner--compat-mobile .dj-section-banner__copy { padding-bottom:210px; }
  body.dj-modular .dj-section-banner--text { min-height:0; }
  body.dj-modular .dj-section-banner--text .dj-section-banner__copy { padding:16px 0; }
}
@media (max-width:360px) { body.dj-modular .dj-section-banner h1 { font-size:30px; } }
/* Long editorial copy is not cropped/line-clamped. Reserve a separate lower
   portion of the continuous surface instead of hiding a sculpture behind prose. */
body.dj-modular .dj-section-banner--long-copy { aspect-ratio:auto; }
body.dj-modular .dj-section-banner--long-copy .dj-section-banner__figure img { object-fit:contain; }
@media (max-width:780px) {
  body.dj-modular .dj-section-banner--long-copy .dj-section-banner__copy { width:100%; padding:22px 20px 220px; }
  body.dj-modular .dj-section-banner--long-copy .dj-section-banner__figure img {
    position:absolute; bottom:0; height:200px; object-fit:contain; object-position:center bottom;
  }
  body.dj-modular .dj-section-banner--long-copy::after {
    background:linear-gradient(180deg,rgba(247,245,240,.98) 0%,rgba(247,245,240,.94) 60%,transparent 90%);
  }
}
@media print { body.dj-modular .dj-section-banner { break-inside:avoid; } }

/* MOBILE-08: explicit per-section overlay, no desktop override. The image is never faded. */
@media (max-width:780px) {
  body.dj-modular .dj-section-banner--illustrated.dj-section-banner--custom-veil::after {
    bottom:auto; height:var(--dj-mobile-veil-height,74%);
    opacity:var(--dj-mobile-veil-opacity,.94);
    background:linear-gradient(180deg,rgba(247,245,240,1) 0%,rgba(247,245,240,.883) 59.46%,rgba(247,245,240,.128) 87.84%,rgba(247,245,240,0) 100%);
  }
}