/*
 * Opening Scene — approved wide cinematic hero.
 *
 * The image is a stage, not a content column. Keep the heading, description,
 * links, and market sign as editable HTML on top of one cover-fit image.
 * Layout decisions for descendants use this block's own width.
 *
 * @since 0.12.2
 */
.vn2.vn2-scene-banner {
  --vn-opening-ink:#061621;
  --vn-opening-cream:#fff7eb;
  --vn-opening-gold:#ffda8c;
  position:relative;
  isolation:isolate;
  container:opening-scene / inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
  align-items:center;
  align-content:center;
  box-sizing:border-box;
  width:min(100%,var(--wp--style--global--content-size,48rem));
  max-width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  aspect-ratio:2.84;
  margin-inline:auto;
  margin-block:0;
  padding:0;
  border:1px solid #42605d;
  outline:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  background-color:var(--vn-opening-ink);
  background-image:none;
}

/* Keep the scene in a dedicated, full-bleed layer above the block background.
   The separate shade and editable controls then sit over this layer. */
.vn2.vn2-scene-banner::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:var(--vn2-scene-image,url('../images/masters/moonlit-cabin-hero-snes.png'));
  background-repeat:no-repeat;
  background-size:var(--vn2-media-fit,cover);
  background-position:var(--vn2-focal-x,54%) var(--vn2-focal-y,50%);
  image-rendering:pixelated;
}

.vn2.vn2-scene-banner--campfire::before {
  background-image:var(--vn2-scene-image,url('../images/masters/field-campfire-lake.webp'));
}

/*
 * Respect WordPress's three native block alignments rather than forcing
 * Default, Wide, and Full to occupy the same entire page width.
 *
 * @since 0.12.3
 */
.vn2.vn2-scene-banner.alignwide {
  width:min(100%,var(--wp--style--global--wide-size,80rem));
  max-width:100%;
}

.vn2.vn2-scene-banner.alignfull {
  width:100%;
  max-width:none;
  margin-inline:0;
}

/*
 * Gutenberg Columns provide a narrower canvas independently of viewport
 * width. Let their Opening Scenes grow to fit copy, links and the menu;
 * a fixed panoramic ratio otherwise truncates half/third/quarter cards.
 */
.wp-block-column > .vn2.vn2-scene-banner {
  width:100%;
  max-width:none;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  align-content:start;
  grid-template-rows:auto auto;
  margin:0;
}

/* The editor can replace the backdrop with an uploaded image without
   changing the HTML structure or baking a second scene into the copy. */
.vn2.vn2-scene-banner .vn2-scene-banner__art {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
}
/* When Gutenberg displays user-selected media, the bundled default image
   must not show through transparent pixels or contain-fit margins. */
.vn2.vn2-scene-banner:has(> .vn2-scene-banner__art.vn2-artwork--custom) {
  background-image:none;
}
.vn2.vn2-scene-banner:has(> .vn2-scene-banner__art.vn2-artwork--custom)::before {
  display:none;
}

.vn2.vn2-scene-banner .vn2-scene-banner__art > img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:var(--vn2-media-fit,cover);
  object-position:var(--vn2-focal-x,50%) var(--vn2-focal-y,50%);
}

.vn2.vn2-scene-banner .vn2-scene-banner__shade {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:var(--vn2-art-shade,1);
  background:
    linear-gradient(90deg,rgba(2,11,18,.92) 0%,rgba(2,11,18,.77) 25%,rgba(2,11,18,.34) 49%,transparent 75%),
    linear-gradient(0deg,rgba(2,11,18,.27),transparent 36%);
}

.vn2.vn2-scene-banner .vn2-scene-banner__content {
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(.65rem,1.7cqw,1.45rem);
  box-sizing:border-box;
  width:47%;
  max-width:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:clamp(1.3rem,4.5cqw,4rem) clamp(1.3rem,5.65cqw,5.25rem);
  padding-bottom:calc(clamp(1.3rem,4.5cqw,4rem) + var(--vn2-chapter-space,0rem));
  background:transparent;
}

.vn2.vn2-scene-banner .vn2-scene-banner__brand {
  display:flex;
  align-items:flex-start;
  gap:.5em;
  width:25ch;
  max-width:100%;
  margin:0 0 clamp(.1rem,.45cqw,.4rem);
  color:var(--vn-opening-gold);
  font:800 clamp(.63rem,1.04cqw,.95rem)/1.55 ui-monospace,monospace;
  letter-spacing:.19em;
  text-transform:uppercase;
  white-space:normal;
  text-shadow:0 2px 8px #01080eb8;
}

.vn2.vn2-scene-banner .vn2-scene-banner__brand::before {
  content:"▸";
  display:block;
  flex:none;
  width:auto;
  height:auto;
  margin-top:.1em;
  background:none;
  color:var(--vn-opening-gold);
  font:.85em/1.5 ui-monospace,monospace;
}

.vn2.vn2-scene-banner h2 {
  width:100%;
  max-width:100%;
  margin:0;
  color:var(--vn-opening-cream)!important;
  font:700 clamp(2rem,4.05cqw,4.15rem)/1.01 Georgia,"Times New Roman",serif!important;
  letter-spacing:-.047em!important;
  overflow-wrap:anywhere;
  word-break:normal;
  text-wrap:balance;
  text-shadow:0 3px 18px #010911a8;
}

.vn2.vn2-scene-banner .vn2-copy {
  width:100%;
  max-width:40ch;
  margin:clamp(.1rem,.3cqw,.3rem) 0 0;
  color:#f0eee4;
  font:500 clamp(.78rem,1.24cqw,1.08rem)/1.58 ui-monospace,monospace;
  letter-spacing:.02em;
  text-shadow:0 2px 9px #010811b5;
}

.vn2.vn2-scene-banner .vn2-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(.55rem,1.35cqw,1.1rem);
  width:auto;
  max-width:100%;
  margin:clamp(.15rem,.45cqw,.4rem) 0 0;
  padding:0;
}

.vn2.vn2-scene-banner .vn2-actions .vn2-button {
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  gap:.65em;
  min-height:clamp(2.05rem,3.75cqw,3.15rem);
  width:auto;
  margin:0;
  padding:clamp(.55rem,.8cqw,.85rem) clamp(.85rem,1.65cqw,1.5rem);
  border-radius:2px;
  box-shadow:none;
  font:700 clamp(.73rem,1.11cqw,1.03rem)/1.15 ui-sans-serif,system-ui,sans-serif;
  text-decoration:none;
  white-space:nowrap;
}

.vn2.vn2-scene-banner .vn2-actions .vn2-button--gold {
  border:1px solid #e9b964;
  background:#ffdd9b;
  color:#0b1520!important;
}
.vn2.vn2-scene-banner .vn2-actions .vn2-button--quiet {
  border:1px solid #e4d3b0;
  background:#071923ad;
  color:#fff6e7!important;
}
.vn2.vn2-scene-banner .vn2-actions .vn2-button:focus-visible,
.vn2.vn2-scene-banner .vn2-scene-banner__sign a:focus-visible {
  outline:2px solid #fff5c9;
  outline-offset:3px;
}

.vn2.vn2-scene-banner .vn2-scene-banner__sign {
  position:absolute;
  z-index:4;
  right:clamp(.8rem,3.4cqw,3.2rem);
  bottom:calc(clamp(.9rem,3.45cqw,3.2rem) + var(--vn2-chapter-space,0rem));
  display:grid;
  align-content:center;
  gap:clamp(.24rem,.75cqw,.65rem);
  box-sizing:border-box;
  width:clamp(10rem,19cqw,17rem);
  min-width:0;
  margin:0;
  padding:clamp(.85rem,1.35cqw,1.3rem);
  border:4px solid #5b361f;
  border-radius:2px;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,#1b100940 23px 25px,transparent 26px 50px),
    repeating-linear-gradient(93deg,#382417e6 0 12px,#4c301de8 13px 26px,#3e2718e8 27px 39px);
  box-shadow:inset 0 0 0 2px #b88448,inset 0 0 0 5px #27170f,0 5px 0 #1a120d,0 12px 20px #010a12c4;
  transform:none;
}

.vn2.vn2-scene-banner .vn2-scene-banner__sign::before {
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid #c095554a;
  pointer-events:none;
}

.vn2.vn2-scene-banner .vn2-scene-banner__sign-title {
  display:block;
  margin:0 0 .3rem;
  padding:0 0 .45rem;
  border-bottom:1px solid #d5aa70a1;
  color:#ffe2a3;
  text-shadow:0 2px 1px #1b100b;
  font:800 clamp(.59rem,.9cqw,.84rem)/1.25 ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.vn2.vn2-scene-banner .vn2-scene-banner__sign :is(a,.vn2-scene-banner__sign-link) {
  display:flex;
  align-items:center;
  gap:.35em;
  min-height:0;
  margin:0;
  padding:0;
  color:#ffe6b4!important;
  text-shadow:0 1px 2px #180d08;
  font:750 clamp(.62rem,.96cqw,.88rem)/1.4 ui-monospace,monospace;
  letter-spacing:.015em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
}

.vn2.vn2-scene-banner .vn2-scene-banner__sign :is(a,.vn2-scene-banner__sign-link) > span:first-child {
  color:var(--vn-opening-gold);
  flex:none;
}
.vn2.vn2-scene-banner .vn2-scene-banner__sign a:hover {
  color:#fff7d5!important;
}

.vn2.vn2-scene-banner .vn2-scene-banner__chapter {
  position:absolute;
  z-index:5;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  padding:.65rem clamp(1.3rem,5.65cqw,5.25rem);
  border-top:1px solid #e8d6a442;
  background:#04121bd6;
  color:#f9d8a0;
  font:700 clamp(.55rem,.75cqw,.8rem)/1.3 ui-monospace,monospace;
  letter-spacing:.12em;
}
.vn2.vn2-scene-banner--with-chapter {--vn2-chapter-space:2.1rem}

/* At medium and half-column widths, keep the hero readable without relying
   on hardcoded height or forcing its navigation to cover the editable copy. */
@container opening-scene (max-width:760px) {
  .vn2.vn2-scene-banner .vn2-scene-banner__content {
    width:65%;
    padding:clamp(1.2rem,4cqw,2.3rem);
  }
  .vn2.vn2-scene-banner h2 {
    font-size:clamp(2rem,5.6cqw,3.4rem)!important;
  }
  .vn2.vn2-scene-banner .vn2-scene-banner__sign {
    right:clamp(.7rem,2.5cqw,1.2rem);
    bottom:clamp(.7rem,2.5cqw,1.2rem);
    width:clamp(8rem,25cqw,12rem);
  }
}

/* Narrow hero: stack editorial content and sign over the same continuous
   image, preserving the scene and maintaining usable action targets. */
@container opening-scene (max-width:540px) {
  .vn2.vn2-scene-banner .vn2-scene-banner__shade {
    background:linear-gradient(180deg,#061421c9 0%,#061421b8 40%,#0614218c 100%);
  }
  .vn2.vn2-scene-banner .vn2-scene-banner__content {
    width:100%;
    max-width:none;
    padding:clamp(1rem,5cqw,1.5rem);
    gap:clamp(.6rem,2.3cqw,.95rem);
  }
  .vn2.vn2-scene-banner h2 {
    width:100%;
    max-width:16ch;
    font-size:clamp(2.05rem,7.3cqw,3.2rem)!important;
    line-height:1!important;
  }
  .vn2.vn2-scene-banner .vn2-copy {
    max-width:42ch;
    font-size:clamp(.75rem,2.8cqw,.97rem);
  }
  .vn2.vn2-scene-banner .vn2-actions {
    width:100%;
    gap:.6rem;
  }
  .vn2.vn2-scene-banner .vn2-actions .vn2-button {
    flex:0 1 auto;
    min-height:2.65rem;
    font-size:.79rem;
  }
  .vn2.vn2-scene-banner .vn2-scene-banner__sign {
    position:relative;
    inset:auto;
    justify-self:end;
    width:min(18rem,calc(100% - 2rem));
    margin:0 1rem 1.2rem;
    padding:.8rem;
    transform:none;
  }
}

/* Between narrow half columns and quarter columns, keep the copy and
   call-to-action readable while the menu is a distinct row in document flow. */
@container opening-scene (max-width:420px) {
  .vn2.vn2-scene-banner .vn2-scene-banner__content {
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .vn2.vn2-scene-banner .vn2-copy {
    width:100%;
    max-width:38ch;
    font-size:clamp(.78rem,3.25cqw,.97rem);
  }
  .vn2.vn2-scene-banner .vn2-scene-banner__sign {
    width:calc(100% - 2rem);
    justify-self:stretch;
  }
}

/*
 * In 1/3- and 1/4-width cards, a 4-row navigation sign consumed more area
 * than the editorial content. Use two balanced columns where links fit,
 * while preserving the reference's four-row sign in wider compositions.
 */
@container opening-scene (max-width:420px) {
  .vn2.vn2-scene-banner .vn2-scene-banner__sign {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:clamp(.4rem,1.8cqw,.6rem) clamp(.45rem,2cqw,.75rem);
  }

  .vn2.vn2-scene-banner .vn2-scene-banner__sign :is(a,.vn2-scene-banner__sign-link) {
    min-width:0;
    overflow-wrap:anywhere;
    font-size:clamp(.61rem,2.7cqw,.78rem);
    line-height:1.25;
  }
}

@container opening-scene (max-width:230px) {
  .vn2.vn2-scene-banner .vn2-scene-banner__sign {
    grid-template-columns:minmax(0,1fr);
  }
}

@container opening-scene (max-width:320px) {
  .vn2.vn2-scene-banner h2 {
    font-size:clamp(1.7rem,8.5cqw,2.2rem)!important;
  }
  .vn2.vn2-scene-banner .vn2-actions .vn2-button {
    flex:0 1 auto;
    min-height:2.35rem;
    padding:.48rem .65rem;
    font-size:.72rem;
  }
  .vn2.vn2-scene-banner .vn2-scene-banner__sign {
    justify-self:stretch;
    width:calc(100% - 1.5rem);
    margin:0 .75rem 1rem;
  }
}

@container opening-scene (max-width:230px) {
  .vn2.vn2-scene-banner .vn2-actions .vn2-button {
    flex:1 1 100%;
  }
}

/* When the viewport itself is mobile, the composition must not be forced
   into the reference's very wide aspect ratio. */
@media (max-width:760px) {
  .vn2.vn2-scene-banner {
    aspect-ratio:auto;
    min-height:clamp(22rem,78vw,28rem);
  }
  .vn2.vn2-scene-banner::before {
    background-position:var(--vn2-mobile-focal-x,var(--vn2-focal-x,54%)) var(--vn2-mobile-focal-y,var(--vn2-focal-y,50%));
  }
  .vn2.vn2-scene-banner .vn2-scene-banner__art > img {
    object-position:var(--vn2-mobile-focal-x,var(--vn2-focal-x,50%)) var(--vn2-mobile-focal-y,var(--vn2-focal-y,50%));
  }
  /* Stacked native columns use their contents, not a viewport minimum. */
  .wp-block-column > .vn2.vn2-scene-banner {
    min-height:0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .vn2.vn2-scene-banner .vn2-actions .vn2-button {
    transition:none;
  }
}