/*
 * Split banner (plan-banner-bnr, plan-banner-reverse-bnr): the top of a plan page. The plan's green banner art
 * fills one side, and the other side holds the eyebrow, the plan's name as the page's largest text, the tagline,
 * a line about the plan and two buttons.
 *
 * - banner-bnr: the art on the left (Foundation, Partnership).
 * - banner-reverse-bnr: the art on the right (Growth, Executive).
 * - banner-bnr-teal: a teal "Book a call" button and white name (Growth).
 * - banner-bnr-white: a white "Book a call" button and white name (Partnership).
 * - banner-bnr-photo: a photo instead of plan art (Bespoke). The photo is cropped from its centre with no fade, the
 *   words keep to the left of their half, and the first button is teal.
 *
 * Each page's background is the colour of its own art where the art meets the words, and the art's inner edge fades
 * into it, so the two read as one picture with no line between them.
 *
 * On tablets and phones the art covers the words like a curtain. As the visitor scrolls, the art slides up and
 * away, uncovering the words pinned beneath it. Visitors who ask for less motion get the words alone.
 *
 * The name is sized to the space beside the art, so a long name such as "Partnership" never runs into it.
 */

.wp-block-group.plan-pattern.plan-pattern--banner-bnr {
  --plan-banner-background: #124c48;
  --plan-banner-name: #f4f3ee;
  --plan-banner-primary: #f4f3ee;
  --plan-banner-primary-text: #0d3d39;
  --plan-banner-outline: #f4f3ee;

  display: flex;
  align-items: stretch;
  min-height: 560px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: var(--plan-banner-background);
  color: var(--white);
}

.wp-block-group.plan-pattern.plan-pattern--banner-reverse-bnr {
  --plan-banner-background: #114f4c;
}

.wp-block-group.plan-pattern.plan-pattern--banner-bnr-teal {
  --plan-banner-background: #12504f;
  --plan-banner-name: var(--white);
  --plan-banner-primary: var(--teal);
  --plan-banner-outline: var(--white);
}

.wp-block-group.plan-pattern.plan-pattern--banner-bnr-white {
  --plan-banner-background: #094e4b;
  --plan-banner-name: var(--white);
  --plan-banner-primary: var(--white);
  --plan-banner-outline: var(--white);
}

.wp-block-group.plan-pattern.plan-pattern--banner-bnr-photo {
  --plan-banner-background: #0d3d39;
  --plan-banner-name: var(--white);
  --plan-banner-primary: var(--teal);
  --plan-banner-outline: var(--white);

  min-height: 480px;
}

/* WordPress's own wrappers step aside, so the art and the words sit side by side */

.plan-pattern--banner-bnr .wp-block-group__inner-container {
  display: contents;
}

/* The art: fills its half, cropped from the side nearest the words */

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-art {
  position: relative;
  flex: 1 1 420px;
  min-height: 300px;
  overflow: hidden;
}

/* The art's inner edge fades into the background, so no line shows where the art ends */

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 72%, var(--plan-banner-background));
  content: "";
  pointer-events: none;
}

.plan-pattern--banner-reverse-bnr .plan-pattern__banner-bnr-art::after {
  background: linear-gradient(to left, transparent 72%, var(--plan-banner-background));
}

/*
 * Wider screens: the art stays close to square, cropped tight on its subject as in the wireframes, instead of
 * widening to show the empty side of the picture.
 */

@media (min-width: 980px) {
  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-art {
    flex: 0 0 clamp(420px, 42%, 680px);
  }
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.plan-pattern--banner-reverse-bnr .plan-pattern__banner-bnr-image img {
  object-position: right center;
}

/* The words: centred down their half */

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-content {
  display: flex;
  flex: 1 1 560px;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  padding: 72px 56px;
  container-type: inline-size;
}

/*
 * On wide screens the words keep to a column beside the art, rather than drifting away from it: on the left of
 * their half when the art is on the left, and on the right of it when the art is on the right.
 */

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-eyebrow,
.plan-pattern--banner-bnr .plan-pattern__banner-bnr-name,
.plan-pattern--banner-bnr .plan-pattern__banner-bnr-tagline,
.plan-pattern--banner-bnr .plan-pattern__banner-bnr-summary,
.plan-pattern--banner-bnr .plan-pattern__banner-bnr-actions {
  width: min(100%, 640px);
}

@media (min-width: 980px) {
  .plan-pattern--banner-reverse-bnr .plan-pattern__banner-bnr-content {
    align-items: flex-end;
  }
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-eyebrow {
  margin: 0;
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The plan's name: the page's largest text, never wider than the space beside the art */

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-name {
  margin: 0;
  color: var(--plan-banner-name);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(48px, 15cqi, 108px);
  font-weight: 400;
  line-height: 0.95;
  text-transform: none;
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-tagline {
  margin: 0;
  color: var(--white);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-summary {
  margin: 0;
  color: var(--teal-light);
  font-size: 17px;
  line-height: 1.55;
}

/* A photo is a picture of its own, not art that runs into the words: no fade, cropped from its centre */

.plan-pattern--banner-bnr-photo .plan-pattern__banner-bnr-art::after {
  display: none;
}

.plan-pattern--banner-bnr-photo .plan-pattern__banner-bnr-image img,
.plan-pattern--banner-bnr-photo.plan-pattern--banner-reverse-bnr .plan-pattern__banner-bnr-image img {
  object-position: center;
}

/* Beside a photo the words keep to the left of their half, and the eyebrow is teal */

.plan-pattern--banner-bnr-photo .plan-pattern__banner-bnr-content {
  align-items: flex-start;
}

.plan-pattern--banner-bnr-photo .plan-pattern__banner-bnr-eyebrow {
  color: var(--teal);
}

/* Buttons: "Book a call" filled, "What's included" outlined */

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-actions .wp-block-button__link {
  display: inline-block;
  padding: 15px 24px;
  border: 1.5px solid var(--plan-banner-primary);
  border-radius: 8px;
  background: var(--plan-banner-primary);
  color: var(--plan-banner-primary-text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-secondary .wp-block-button__link {
  border-color: var(--plan-banner-outline);
  background: transparent;
  color: var(--plan-banner-outline);
}

.plan-pattern--banner-bnr .plan-pattern__banner-bnr-actions .wp-block-button__link:hover,
.plan-pattern--banner-bnr .plan-pattern__banner-bnr-actions .wp-block-button__link:focus-visible {
  background: var(--white);
  color: #0d3d39;
}

/*
 * Tablets and phones: the art is a curtain over the words.
 *
 * The art comes first and fills the screen. The words follow it, held to the bottom of the screen (sticky) and
 * tucked beneath the art, so at first only the art shows. Scrolling moves the art up while the words stay put,
 * uncovering them from the bottom up, until they reach their own place and scroll on with the page.
 */

@media (max-width: 979px) {
  .wp-block-group.plan-pattern.plan-pattern--banner-bnr {
    flex-direction: column;
    min-height: 0;
  }

  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-art {
    position: relative;
    z-index: 1;
    flex: none;
    order: -1;
    height: 100vh;
    height: 100svh;
    min-height: 420px;
    box-shadow: 0 18px 32px rgba(4, 30, 28, 0.45);
  }

  /* A tall curtain shows a narrow slice of the art: keep the slice on the art's own side, where its artwork is */

  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-image img {
    object-position: 22% center;
  }

  .plan-pattern--banner-reverse-bnr .plan-pattern__banner-bnr-image img {
    object-position: 78% center;
  }

  .plan-pattern--banner-bnr-photo .plan-pattern__banner-bnr-image img,
  .plan-pattern--banner-bnr-photo.plan-pattern--banner-reverse-bnr .plan-pattern__banner-bnr-image img {
    object-position: center;
  }

  /* No fade on the curtain: its bottom edge and shadow show it lifting away */

  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-art::after {
    display: none;
  }

  /* A small arrow at the bottom of the curtain, to show there's more beneath */

  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-art::before {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    content: "";
    opacity: 0.8;
    transform: translateX(-50%) rotate(45deg);
  }

  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-content {
    position: sticky;
    bottom: 0;
    z-index: 0;
    flex: none;
    padding: 56px 40px 64px;
    background: var(--plan-banner-background);
  }
}

@media (max-width: 700px) {
  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-content {
    padding: 40px 16px 48px;
  }
}

/* Less motion: no curtain, only the words */

@media (max-width: 979px) and (prefers-reduced-motion: reduce) {
  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-art {
    display: none;
  }

  .plan-pattern--banner-bnr .plan-pattern__banner-bnr-content {
    position: static;
  }
}