/**
 * Branch Writing — full-bleed grid band behind every dark testimonial card.
 *
 * The page is dark, so a dark testimonial card on it reads as more page: the proof blends
 * into the argument around it. Each dark card now gets a band running the full width of the
 * viewport in a mid grey, ruled with the same grid the page already draws
 * over itself (--bw-canvas-grid-size, 22px / 18px on narrow screens) and locked to the same
 * phase, so the band reads as a stretch of the page's own paper that has been lifted rather
 * than a panel dropped on top. Squares light up under the pointer.
 *
 * Paper-style cards (.bw-testimonial--no-photo) are already light and keep the plain page
 * ground: two light surfaces stacked read as one washed-out block.
 *
 * The band is an absolutely positioned layer behind the card, not a wrapper around it. Its
 * width and its offset from the viewport edge are set by the script, which keeps the breakout
 * honest wherever the mount happens to sit — centred column, nested column, flex child — and
 * never touches the card's own place in the flow.
 *
 * Layer order: field (the band) -> lit squares -> rules -> the card. The rules sit above the
 * lit squares on purpose, so a lit square stays inside its own cell.
 *
 * Built at runtime by js/bw-testimonial-plate.js — index.html carries no band markup, which
 * keeps /testimonial-organizer parsing the same mount tags it always has.
 */

html.bw-sales-page-branch-writing #__next {
  /* Halfway between the page ground (#1c1a22) and a light surface (#c9c5d3): clearly its
     own band, still grey. The rules on it are the page accent, so the grid reads purple. */
  --bw-plate-field: #726f7a;
  --bw-plate-rule: rgba(var(--color-accent-rgb), 0.4);
  /* Squares light in the same purple the headings highlight with, not in white. */
  --bw-plate-lit: rgba(var(--color-accent-rgb), 0.92);
  --bw-plate-shade: rgba(var(--color-accent-rgb), 0.55);
  --bw-plate-pad: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* ---------- The band ---------- */

html.bw-sales-page-branch-writing #__next .bw-testi-plate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--bw-plate-field);
}

/* Squares that light up. Placed and animated from the script; nothing here but the paint. */
html.bw-sales-page-branch-writing #__next .bw-testi-plate__lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

html.bw-sales-page-branch-writing #__next .bw-testi-plate__cell {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* Same size and same phase as the grid #__next::before draws over the whole page, so the
   rules run straight through the band instead of restarting at its edge. */
html.bw-sales-page-branch-writing #__next .bw-testi-plate__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bw-plate-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--bw-plate-rule) 1px, transparent 1px);
  background-size: var(--bw-canvas-grid-size) var(--bw-canvas-grid-size);
  background-position: var(--bw-plate-off-x, 0px) var(--bw-plate-off-y, 0px);
}

/* ---------- The mount that carries a band ---------- */

html.bw-sales-page-branch-writing #__next .bw-youtube-comment-mount.has-bw-plate {
  position: relative;
  padding-top: var(--bw-plate-pad);
  padding-bottom: var(--bw-plate-pad);
}

html.bw-sales-page-branch-writing #__next .bw-youtube-comment-mount.has-bw-plate > .bw-testimonial-db,
html.bw-sales-page-branch-writing #__next .bw-youtube-comment-mount.has-bw-plate > .youtube-comment {
  position: relative;
  z-index: 1;
}

/* Two banded testimonials in a row: close the gap so the two bands read as one stretch of
   lit paper with a card in each half, rather than a dark stripe between two light ones. */
html.bw-sales-page-branch-writing
  #__next
  .bw-youtube-comment-mount.has-bw-plate
  + .bw-youtube-comment-mount.has-bw-plate {
  margin-top: 0 !important;
}

/* ---------- The carousel ---------- */

html.bw-sales-page-branch-writing #__next .bw-testimonial-carousel-band.has-bw-plate {
  position: relative;
  padding-block: var(--bw-plate-pad);
}

html.bw-sales-page-branch-writing #__next .bw-testimonial-carousel-band.has-bw-plate .bw-testimonial-carousel {
  z-index: 1;
}

/* ---------- The cards, once they are on light ground ---------- */

/*
 * Both card families wear a white halo tuned for the dark page. On a light band that halo
 * turns into a smudge, so they swap it for a plain drop shadow and a hairline. Paper cards
 * are excluded: they never get a band, but the carousel can be re-stocked with one from the
 * organizer.
 */
html.bw-sales-page-branch-writing #__next .has-bw-plate .bw-testimonial-db:not(.bw-testimonial--no-photo) {
  border-color: rgba(24, 20, 40, 0.5);
  box-shadow:
    0 16px 32px rgba(24, 20, 40, 0.32),
    0 3px 8px rgba(24, 20, 40, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html.bw-sales-page-branch-writing #__next .has-bw-plate .youtube-comment:not(.bw-testimonial--no-photo),
html.bw-sales-page-branch-writing #__next .has-bw-plate .youtube-comment:not(.bw-testimonial--no-photo):hover {
  border-color: rgba(24, 20, 40, 0.45) !important;
  box-shadow:
    0 16px 32px rgba(24, 20, 40, 0.32),
    0 3px 8px rgba(24, 20, 40, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Print ---------- */

@media print {
  html.bw-sales-page-branch-writing #__next .bw-testi-plate {
    display: none;
  }
}