/* ==========================================================================
   Outline grid lines
   --------------------------------------------------------------------------
   A reusable frame that extends the outline of a "cell block" into the space
   around it. Used around the CTA banner, feature grids and the voice demo
   block, so it must stay background-free: only lines are painted, never a
   fill, which lets the block sit on any background colour.

   The lines are always cropped by the boundaries of the section that hosts
   them, so they can never overlap a neighbouring section.

   Markup (see src/components/ui/GridLines.astro):

     <div class="card_cta">           <- position: relative cell block
       ...content...
       <div class="grid-lines_wrapper">
         <div class="cta_gradient-line is-top"></div>
         <div class="cta_gradient-line is-bottom"></div>
         <div class="cta_gradient-line is-left"></div>
         <div class="cta_gradient-line is-right"></div>
       </div>
     </div>
   ========================================================================== */

/* Host section. `isolation: isolate` makes it a stacking context, which is what
   lets the wrapper's `z-index: -1` below land immediately after the section's
   background and before every piece of the section's content — so the lines can
   never cover anything. Without the isolation, -1 escapes to the nearest
   ancestor stacking context and the lines disappear behind the section's own
   background instead. `overflow: clip` crops them to the section that owns
   them; `clip` rather than `hidden` so position: sticky descendants keep
   working. Mirrors src/styles/v4/grid-frame.css, which does the same for the
   v4 GridFrame component. */
section:has(.grid-lines_wrapper),
[class*="section_"]:has(.grid-lines_wrapper),
.section_cta_banner {
  isolation: isolate;
  overflow: clip;
}

.grid-lines_wrapper {
  --grid-lines--length: 5rem;
  --grid-lines--width: var(--_size---border--width, 1px);
  /* Behind all section content — see the host rule above. */
  z-index: -1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* No background fill, no border, no radius: lines only.
   The colour is resolved on the line itself, not on an ancestor, so it follows
   the theme of the block the lines belong to. Override --grid-lines--color on
   the wrapper (or any ancestor) to recolour a single instance. */
.cta_gradient-line {
  pointer-events: none;
  position: absolute;
  background-color: transparent;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 0;
}

/* Vertical extensions of the block's side outlines, above and below. */
.cta_gradient-line.is-top,
.cta_gradient-line.is-bottom {
  left: 0;
  width: 100%;
  height: var(--grid-lines--length);
  background-size: var(--grid-lines--width) 100%;
  background-position: left top, right top;
}

.cta_gradient-line.is-top {
  bottom: 100%;
  background-image:
    linear-gradient(to top, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent),
    linear-gradient(to top, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent);
}

.cta_gradient-line.is-bottom {
  top: 100%;
  background-image:
    linear-gradient(to bottom, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent),
    linear-gradient(to bottom, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent);
}

/* Horizontal extensions of the block's top and bottom outlines, left and right. */
.cta_gradient-line.is-left,
.cta_gradient-line.is-right {
  top: 0;
  width: var(--grid-lines--length);
  height: 100%;
  background-size: 100% var(--grid-lines--width);
  background-position: left top, left bottom;
}

.cta_gradient-line.is-left {
  right: 100%;
  background-image:
    linear-gradient(to left, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent),
    linear-gradient(to left, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent);
}

.cta_gradient-line.is-right {
  left: 100%;
  background-image:
    linear-gradient(to right, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent),
    linear-gradient(to right, var(--grid-lines--color, var(--_themes---outline, currentColor)), transparent);
}

/* The cell block itself stays transparent so it reads on any background. */
.card_cta,
.grid-lines_base {
  background-color: transparent;
}