/**
 * Block type frontend and editor styles definition. They will be enqueued 
 * both in the editor and when viewing the content on the front of the site.
*/

.page-intro {
  position: relative;
  aspect-ratio: 18 / 10;
  overflow: clip;
  border-radius: var(--radius-l);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--color-neutral-20);
  padding: var(--space-2xl);

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-dark);
    opacity: 0.2;
    z-index: 2;
  }

  /* do not darken lottie animation with the overlay */
  &:has(.page-intro__lottie):before {
    content: none;
  }
}

.page-intro .page-intro__video,
.page-intro .page-intro__image,
.page-intro .page-intro__lottie {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-intro .page-intro__image>img,
.page-intro .page-intro__video>video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-intro .page-intro__lottie .lottie-animation {
  width: 100%;
  height: 93%;
}

.page-intro .page-intro__lottie svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-intro__content {
  position: relative;
  z-index: 3;

  & p {
    max-width: 38ch;
  }
}

/* Below 1024px (tablet portrait + mobile): split the hero into a content
   block sitting on the parent page background and a separate media tile
   below it, instead of overlaying the title on the image. Drop the
   container's background, padding and overlay so the title flows on the
   page itself; reorder children so .page-intro__content comes first; give
   the media its own width, aspect-ratio and rounded corners. */

@media (max-width: 1023px) {
  .page-intro {
    aspect-ratio: auto;
    background-color: transparent;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    gap: var(--space-2xl);
    margin-block-start: 48px;
  }

  .page-intro::before {
    content: none;
  }

  .page-intro:has(.page-intro__lottie),
  .page-intro:has(.page-intro__video),
  .page-intro:has(.page-intro__image) {
    justify-content: flex-start;
  }

  .page-intro__content {
    order: 0;
  }

  .page-intro .page-intro__lottie,
  .page-intro .page-intro__video,
  .page-intro .page-intro__image {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    margin-inline: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-l);
    overflow: clip;
  }

  /* The inner content wrapper inside .page-intro__content is built in the
     editor with utilities for the desktop centred-overlay layout
     (text-center, items-center, justify-end). On mobile the title and
     lead need to flow left-aligned at the top, so override those
     utilities locally — higher specificity than the bare Tailwind class
     so no !important needed. */
  .page-intro__content .wp-block-pp-group.text-center,
  .page-intro__content .text-center {
    text-align: left;
  }

  .page-intro__content .wp-block-pp-group.items-center,
  .page-intro__content .items-center {
    align-items: flex-start;
  }

  .page-intro__content .wp-block-pp-group.justify-end,
  .page-intro__content .justify-end {
    justify-content: flex-start;
  }

  /* The editor sets `pb-4xl` (≈96px) on the page-intro__content inner
     group to give the centred overlay text room above the bottom edge.
     On mobile the layout flips and the content sits above the media,
     so 4xl pushes the media too far down. Override to 2xl (32px) for
     a comfortable gap between text and image. */
  .page-intro__content .wp-block-pp-group.pb-4xl {
    padding-bottom: var(--space-2xl);
  }
}

/* ---------- Desktop hero variant: video + offset orange card ----------
   At ≥1024px when the media is a <video>, replace the centred overlay
   layout with the Figma "offset-card" variant:

   - Video: 8 outer-grid columns wide, 3:2 aspect, right-aligned to the
     content container's right edge (col-12 in the outer grid).
   - Card: 5 outer-grid columns wide starting at col-1 of the outer
     grid → overshoots `.page-intro`'s left edge (which sits at col-2)
     by one outer column + one gutter. Card height is intrinsic (driven
     by content), anchored 80px above the video's bottom edge.

   `.page-intro` itself has no fixed height — the in-flow video provides
   the container height, so the card's `bottom: 80px` is always 80px
   from the video's bottom regardless of how tall the card itself is.

   Lottie animations (Solutions-by-Technology pages) and plain image
   variants are unaffected — `:has(.page-intro__video)` won't match
   them. */

@media (min-width: 1024px) {
  .page-intro:has(.page-intro__video) {
    aspect-ratio: auto;
    height: auto;
    background-color: transparent;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    display: block;
    position: relative;
  }

  .page-intro:has(.page-intro__video)::before {
    content: none;
  }

  /* Video: 8 outer cols + 7 gutters wide ≈ 80% - 0.2*gutter
     (math: 8 * ((100% - 9g)/10) + 7g = 80% - 7.2g + 7g = 80% - 0.2g).

     Right edge must reach the OUTER wrapper's right edge (not just
     col-12's right edge). `.page-intro` lives in col-2-12 = CSS-grid
     `2 / 12` which spans col-2 through col-11 only — its right edge
     sits at col-11's right (= grid-area-right MINUS one column + one
     grid-gutter from col-12). Additionally, the .wrapper element
     places padding-inline (`--space-gutter-inline`) on each side, so
     the visual "outer right edge" sits one padding step further than
     col-12's right edge.

     Total shift past `.page-intro`'s right edge:
       (1 outer col + 1 grid-gutter)   ← to reach col-12 right
       + 1 gutter-inline                ← to reach wrapper edge
     = (10% + 0.1 * grid-gutter) + gutter-inline

     Negative margin-right pushes the video that distance past the
     container; margin-left auto holds it against the right side.
     aspect-ratio 3/2 sets height from width. */
  .page-intro:has(.page-intro__video) .page-intro__video {
    position: static;
    inset: auto;
    width: calc(80% - 0.2 * var(--space-grid-gutter));
    height: auto;
    aspect-ratio: 3 / 2;
    margin-left: auto;
    margin-right: calc(
      -1 * (10% + 0.1 * var(--space-grid-gutter) + var(--space-gutter-inline))
    );
    border-radius: var(--radius-l);
    overflow: clip;
    z-index: 1;
  }

  /* Orange card: 5 outer cols + 4 gutters wide ≈ 50% - 0.5*gutter.
     Left edge at col-1 of outer grid → -(1 outer col + 1 gutter)
     from `.page-intro`'s left (= col-2 of outer grid). */
  .page-intro:has(.page-intro__video) .page-intro__content {
    position: absolute;
    bottom: 80px;
    left: calc(-1 * (10% + 0.1 * var(--space-grid-gutter)));
    width: calc(50% - 0.5 * var(--space-grid-gutter));
    background-color: var(--color-orange-100);
    color: var(--color-light);
    padding: var(--space-2xl);
    border-radius: var(--radius-l);
    z-index: 4;
  }

  /* Override editor-set utilities (centred overlay layout) — title and
     lead must read left-aligned inside the card. */
  .page-intro:has(.page-intro__video) .page-intro__content .wp-block-pp-group.text-center,
  .page-intro:has(.page-intro__video) .page-intro__content .text-center {
    text-align: left;
  }
  .page-intro:has(.page-intro__video) .page-intro__content .wp-block-pp-group.items-center,
  .page-intro:has(.page-intro__video) .page-intro__content .items-center {
    align-items: flex-start;
  }
  .page-intro:has(.page-intro__video) .page-intro__content .wp-block-pp-group.justify-end,
  .page-intro:has(.page-intro__video) .page-intro__content .justify-end {
    justify-content: flex-start;
  }
  /* Card padding handles spacing — drop the inner pb-4xl. */
  .page-intro:has(.page-intro__video) .page-intro__content .wp-block-pp-group.pb-4xl {
    padding-bottom: 0;
  }

  /* Title scales up to heading-5xl per Figma (56px), regardless of
     which heading-* utility the editor put on it. */
  .page-intro:has(.page-intro__video) .page-intro__content h1,
  .page-intro:has(.page-intro__video) .page-intro__content h2 {
    font-size: var(--size-heading-5xl);
    line-height: var(--leading-flat);
    color: var(--color-light);
  }

  /* Lead/subtitle: body-xl size (22-24px), white, no max-width
     constraint inside the card. */
  .page-intro:has(.page-intro__video) .page-intro__content p {
    font-size: var(--size-body-xl);
    line-height: var(--leading-fine);
    color: var(--color-light);
    max-width: none;
  }
}

/* ---------- Success-story hero: identical "offset orange card" layout as the
   video variant above, but driven by the featured IMAGE instead of a <video>.
   Used by the pp/success-story-hero block (class .page-intro--story). Desktop
   only — below 1024px the shared `.page-intro:has(.page-intro__image)` rules
   already stack the orange card above a rounded media tile. ---------------- */

@media (min-width: 1024px) {
  .page-intro--story:has(.page-intro__image) {
    aspect-ratio: auto;
    height: auto;
    background-color: transparent;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    display: block;
    position: relative;
  }

  .page-intro--story:has(.page-intro__image)::before {
    content: none;
  }

  /* Image: 8 outer cols wide (80% - 0.2*gutter), right edge aligned with the
     inner content container's right edge (= col-12 right = the header/nav
     right edge), NOT the wrapper padding edge. The hero sits in col-2-12
     (spans col-2..col-11), so overshoot only by (1 outer col + 1 grid-gutter)
     to reach col-12 right — drop the extra gutter-inline term that the about
     video hero uses to bleed all the way to the wrapper edge. */
  .page-intro--story .page-intro__image {
    position: static;
    inset: auto;
    width: calc(80% - 0.2 * var(--space-grid-gutter));
    height: auto;
    aspect-ratio: 3 / 2;
    margin-left: auto;
    margin-right: calc(-1 * (10% + 0.1 * var(--space-grid-gutter)));
    border-radius: var(--radius-l);
    overflow: clip;
    z-index: 1;
  }

  .page-intro--story .page-intro__content {
    position: absolute;
    bottom: 80px;
    left: calc(-1 * (10% + 0.1 * var(--space-grid-gutter)));
    width: calc(50% - 0.5 * var(--space-grid-gutter));
    background-color: var(--color-orange-100);
    color: var(--color-light);
    padding: var(--space-2xl);
    border-radius: var(--radius-l);
    z-index: 4;
  }

  .page-intro--story .page-intro__content h1 {
    font-size: var(--size-heading-5xl);
    line-height: var(--leading-flat);
    color: var(--color-light);
  }

  .page-intro--story .page-intro__content .page-intro__client {
    font-size: var(--size-body-xl);
    line-height: var(--leading-fine);
    color: var(--color-light);
    max-width: none;
  }
}

/* ---------- Success-story intro: mobile ordering ----------------------------
   The success-story template wraps the hero (first .layout-grid) and the
   back-button + tags row (second .layout-grid) in a .flow group carrying the
   .success-story-intro hook. On desktop the back-button + tags sit BELOW the
   hero. Below 1024px the customer wants the back-button and tags pulled ABOVE
   the title, so flip the group to a flex column and give the second grid a
   negative order. Flow's adjacency margins are neutralised in favour of a
   single flex `gap` so the spacing stays correct after reordering. ---------- */

@media (max-width: 1023px) {
  .success-story-intro.flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
  }

  .success-story-intro.flow > * + * {
    margin-block-start: 0;
  }

  .success-story-intro > .layout-grid:last-child {
    order: -1;
  }
}