/**
 * acf-cta — interface.pen (acf-cta-claim / acf-location-cta).
 * Exact mirror of acf-testimonial-highlight (inverted columns): cyan title left, shape content right.
 * Photo at 20% opacity lives only on __title-wrap (blue side), not the chevron panel.
 * Gutter: stacked ≤1199px full-bleed + mobile block pad; row ≥1200px photo full-bleed, text aligned to site grid.
 * Row split: 60% cyan / 40% white (chevron side 10% narrower than 50/50).
 * Chevron: left edge of __content-wrap at ≥1270px; off 1200–1269px. Stacked ≤1199px.
 */

.acf-cta.alignfull,
.acf-cta.alignwide {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.acf-cta {
  position: relative;
  overflow: hidden;
  padding: 0;
  font-family: "Frutiger", var(--font-family-base);
  color: var(--color-light);
  background-color: var(--color-brand-cyan);
  /* Row column widths (desktop) — white panel 10% narrower than even split. */
  --acf-cta-title-ratio: 60%;
  --acf-cta-content-ratio: 40%;
  /*
   * Match .container-wide + --block-pad-inline blocks (e.g. acf-services-grid).
   * Wide viewports: inset = (100vw - container-wide) / 2; narrow: --block-pad-inline.
   */
  --acf-cta-grid-inset: max(
    var(--block-pad-inline),
    calc((100vw - var(--container-wide)) / 2)
  );
}

.acf-cta__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0;
}

.acf-cta__title-wrap,
.acf-cta__content-wrap {
  box-sizing: border-box;
  padding-block: var(--block-pad-block);
  padding-inline: 0;
}

.acf-cta__title-wrap {
  position: relative;
  flex: none;
  width: 100%;
  background-color: var(--color-brand-cyan);
}

/* 20% support photo — blue side only (interface.pen). */
.acf-cta__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
}

.acf-cta__bg-image picture,
.acf-cta__bg-image img,
.acf-cta__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.acf-cta__title {
  position: relative;
  z-index: 1;
}

.acf-cta__title-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--block-content-gap);
  width: 100%;
  max-width: 34.25rem;
}

.acf-cta__eyebrow {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-normal);
  color: var(--color-light);
}

.acf-cta__title-intro {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: var(--line-height-normal);
  color: var(--color-light);
  max-width: 29.875rem;
}

.acf-cta__title-intro p {
  margin: 0 0 1em;
  color: inherit;
}

.acf-cta__title-intro p:last-child {
  margin-bottom: 0;
}

.acf-cta__content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--block-content-gap);
  flex: none;
  width: 100%;
  max-width: none;
  background-color: var(--color-brand-shape);
}

/* —— Mobile / tablet stacked (no chevron) —— */
@media (max-width: 1199px) {
  .acf-cta {
    background-color: var(--color-brand-cyan);
    background-image: none;
    /* Same values as :root mobile tokens (tokens.css ≤768). */
    --block-pad-inline: 1.5rem;
    --block-pad-block: 2rem;
    --block-content-gap: 1.25rem;
  }

  .acf-cta__container {
    max-width: none;
    padding-inline: 0;
  }

  .acf-cta__title-wrap,
  .acf-cta__content-wrap {
    padding-inline: var(--block-pad-inline);
  }

  .acf-cta__content-wrap {
    clip-path: none;
  }

  .acf-cta h2.acf-cta__title,
  .entry-content .acf-cta h2.acf-cta__title,
  .wp-block-post-content .acf-cta h2.acf-cta__title,
  .editor-styles-wrapper .acf-cta h2.acf-cta__title {
    max-width: none;
    /* Size from tokens.css mobile --font-size-3xl (H2 32px). */
  }
}

/* —— Desktop: 60/40 row (chevron added at ≥1270px) —— */
@media (min-width: 1200px) {
  /*
   * No section linear-gradient — it paints over the chevron at the column seam.
   * Column backgrounds handle cyan (left) and shape (right) instead.
   */
  .acf-cta {
    background-image: none;
  }

  .acf-cta__container {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    max-width: none;
    padding-inline: 0;
  }

  /* Left column: photo full-bleed; heading inset matches container-wide grid. */
  .acf-cta__title-wrap {
    display: flex;
    align-items: center;
    flex: 0 0 var(--acf-cta-title-ratio);
    width: var(--acf-cta-title-ratio);
    padding-inline: var(--acf-cta-grid-inset) 0;
    background-color: var(--color-brand-cyan);
    clip-path: none;
  }

  /* Right column: straight join until viewport is wide enough for chevron. */
  .acf-cta__content-wrap {
    flex: 0 0 var(--acf-cta-content-ratio);
    width: var(--acf-cta-content-ratio);
    min-width: 0;
    margin-left: 0;
    padding-inline: var(--block-pad-inline) var(--acf-cta-grid-inset);
    clip-path: none;
  }
}

/* Row layout remains; chevron off when the white panel is too narrow. */
@media (min-width: 1200px) and (max-width: 1269px) {
  .acf-cta__content-wrap {
    position: static;
    z-index: auto;
    padding-left: var(--block-pad-inline);
  }
}

/* Chevron on white __content-wrap — overlaps photo column. */
@media (min-width: 1270px) {
  .acf-cta__content-wrap {
    position: relative;
    z-index: 1;
    flex: 0 0 calc(var(--acf-cta-content-ratio) + var(--block-chevron-tip));
    width: calc(var(--acf-cta-content-ratio) + var(--block-chevron-tip));
    margin-left: calc(-1 * var(--block-chevron-tip));
    padding-block: var(--block-pad-block);
    padding-left: var(--block-chevron-tip);
    padding-right: var(--acf-cta-grid-inset);
    clip-path: polygon(
      var(--block-chevron-tip) 0,
      100% 0,
      100% 100%,
      var(--block-chevron-tip) 100%,
      0 50%
    );
  }

  @supports not (clip-path: polygon(0 0)) {
    .acf-cta__content-wrap {
      clip-path: none;
      margin-left: 0;
      flex: 0 0 var(--acf-cta-content-ratio);
      width: var(--acf-cta-content-ratio);
      padding-left: var(--block-pad-inline);
    }
  }
}

.acf-cta h2.acf-cta__title,
.entry-content .acf-cta h2.acf-cta__title,
.wp-block-post-content .acf-cta h2.acf-cta__title,
.editor-styles-wrapper .acf-cta h2.acf-cta__title {
  margin: 0;
  max-width: 34.25rem;
  font-family: "Frutiger", var(--font-family-base);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-light);
}

.acf-cta__text {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: var(--line-height-normal);
  color: var(--color-brand-slate);
}

.acf-cta__text p {
  margin: 0 0 1em;
  color: inherit;
}

.acf-cta__text p:last-child {
  margin-bottom: 0;
}

.acf-cta__actions {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: var(--block-content-gap);
  margin: 0;
}

/* Call-now content column — interface.pen Group 95 */
.acf-cta--content-call .acf-cta__content-wrap {
  justify-content: center;
}

.acf-cta__call {
  width: 100%;
  max-width: 37.5rem;
}

.acf-cta__call-link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-brand-cyan);
  text-decoration: none;
  transition: filter 0.15s ease;
}

.acf-cta__call-link:hover {
  filter: brightness(0.92);
  color: var(--color-brand-cyan);
}

.acf-cta__call-link:focus-visible {
  outline: 2px solid var(--color-brand-cyan);
  outline-offset: 4px;
}

.acf-cta__call-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.acf-cta__call-icon {
  display: block;
  flex: none;
  line-height: 0;
}

.acf-cta__call-icon .prism-inline-svg,
.acf-cta__call-icon svg {
  display: block;
  width: 1.375rem;
  height: auto;
}

.acf-cta__call-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-normal);
}

.acf-cta__call-number {
  font-family: "Frutiger", var(--font-family-base);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
}

/* Footer bar — interface.pen Group 95 navy band */
.acf-cta__footer-bar {
  background-color: var(--color-brand-navy);
  color: var(--color-light);
}

.acf-cta__footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--block-content-gap);
  width: 100%;
  padding: 1rem var(--block-pad-inline);
}

.acf-cta__footer-text {
  margin: 0;
  flex: 1 1 18rem;
  max-width: 37.5rem;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-normal);
  color: var(--color-light);
  text-align: center;
}

.acf-cta__footer-button {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .acf-cta__footer-bar-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-inline: 4rem;
  }

  .acf-cta__footer-text {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .acf-cta__call-number {
    font-size: var(--font-size-2xl);
  }
}