/* ==========================================================================
   "Full service. AI amplified." band (front page)
   ==========================================================================
   Full-bleed background — image or Bunny film — with the heading top-left and
   the copy plus the button on the right.

   GEOMETRY ONLY. The heading/intro pair is the text widget at its defaults and
   the button is the .btn component, so no font-size, line-height or tracking
   is set anywhere in this file. The grid exists for one reason: to put the
   button in the same column as the copy above it. */

.ai-section {
  position: relative;
  isolation: isolate;          /* keeps the background behind this section only */
  /* overflow stays: the iframe is over-sized to COVER the band, so the excess
     has to be clipped. No radius though — this is a full-bleed band with no
     max-width and no margin, so rounding it just put curved corners on the
     film against the page behind it (Kajsa 2026-10-06). */
  overflow: hidden;
}

/* ── Background ──────────────────────────────────────────────────────── */
.ai-section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ai-section__img,
.ai-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The Bunny player is 16:9; cover the band by scaling it from the centre the
   same way the hero card does, so no letterboxing shows at any ratio. */
.ai-section__embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ai-section__embed iframe,
.ai-section__embed video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 177.78vh;   /* 16/9 of the height */
  min-height: 56.25vw;   /* 9/16 of the width  */
  transform: translate(-50%, -50%);
  border: 0;
}

/* ── Content ─────────────────────────────────────────────────────────
   Same 4-column grid as the widget's own, so the button lands under the copy. */
.ai-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 32px;
  padding-bottom: 0;   /* .container's own bottom padding would double up */
}
.ai-section__grid > .text-grid {
  grid-column: 1 / -1;
  --tw-pad-bottom: 0;
}
.ai-section__cta { grid-column: 3 / span 2; }

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ai-section__grid { row-gap: 24px; }
}

/* ── Mobile ──────────────────────────────────────────────────────
   The widget already stacks full width here, so the button follows it. */
@media (max-width: 767px) {
  .ai-section__grid { row-gap: 20px; }
  .ai-section__cta { grid-column: 1 / -1; }
}