/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * Call-to-action box (Figma 3113:27667), CType "cta". Layout = tt_content.layout:
 *   0 glass (wide glass box, centered)   1 image (grey box, image right, glass hexagon)
 *   2 glass + two orange hexagons behind  3 orange glass
 * Layout 1: from desktop-l the image is a background layer right of the hexagon; "::after" is the rotated hexagon
 * (Figma's "glass-white" vector, its path as a filter-free mask: Public/Images/vector-cta-mask.svg) whose edge forms the
 * curve into the image.
 * Up to desktop-l: text on top on a hexagon (54.53deg, anchored below the text), image below it, pulled up behind it.
 */
@layer organisms {
  .cta-wrap {
    position: relative;
  }
  .cta-wrap:has(> .-layout2) {
    max-width: 58.625rem;
    margin-inline: auto;
  }
  .cta {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--padding-xl);
    margin-inline: auto;
    padding: var(--padding-xl);
    overflow: hidden;
    border-radius: var(--border-radius-default);
  }
  .cta > picture {
    order: 1;
    position: relative;
    z-index: -2;
    margin-top: calc(-1 * (var(--padding-xl) + var(--cta-img-pull, 0px)));
  }
  @media (min-width: 1200px) {
    .cta > picture {
      position: absolute;
      inset: 0;
      margin-top: 0;
    }
  }
  .cta.-layout1 {
    --cta-shape-w: 493.5cqw;
    --cta-shape-x: 2.2cqw;
    --cta-shape-bottom: -42cqw;
    --cta-img-pull: 22.9cqw;
    container-type: inline-size;
    background: var(--shade-grey-070);
    text-align: center;
  }
  @media (min-width: 640px) {
    .cta.-layout1 {
      --cta-shape-w: 224.5cqw;
      --cta-shape-x: 46.7cqw;
      --cta-shape-bottom: -28.3cqw;
      --cta-img-pull: 8.7cqw;
    }
  }
  @media (min-width: 1200px) {
    .cta.-layout1 {
      text-align: left;
    }
    .cta.-layout1 > picture {
      inset: 0 0 0 38.75rem;
    }
    .cta.-layout1::after {
      background: var(--shade-grey-070);
      mask-image: url("../../Images/vector-cta-mask.svg");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
      top: 0;
      left: -36.4375rem;
      width: 92.54375rem;
      aspect-ratio: 1480.7/1482.66;
      translate: 0 -54.6%;
      rotate: 15deg;
    }
  }
  .cta.-layout1 .cta__content {
    position: relative;
    align-items: center;
  }
  .cta.-layout1 .cta__content::before {
    background: var(--shade-grey-070);
    mask-image: url("../../Images/vector-cta-mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    bottom: var(--cta-shape-bottom);
    left: var(--cta-shape-x);
    width: var(--cta-shape-w);
    aspect-ratio: 1295.17/1293.41;
    translate: -50% 0;
    rotate: 54.53deg;
  }
  @media (min-width: 1200px) {
    .cta.-layout1 .cta__content::before {
      content: none;
    }
  }
  @media (min-width: 1200px) {
    .cta.-layout1 .cta__content {
      align-items: flex-start;
    }
  }
  .cta.-layout1 .cta__actions {
    flex-direction: column;
    align-items: center;
  }
  @media (min-width: 640px) {
    .cta.-layout1 .cta__actions {
      flex-direction: row;
    }
  }
  @media (min-width: 1200px) {
    .cta.-layout1 .cta__actions {
      justify-content: flex-start;
    }
  }
  .cta:is(.-layout0, .-layout2, .-layout3) {
    align-items: center;
    gap: var(--button-gap-default);
    border: var(--border-default-width, 2px) solid var(--glass-grey-stroke, #f5f5f5);
    background: var(--glass-grey);
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
    text-align: center;
  }
  .cta:is(.-layout0, .-layout2, .-layout3) .cta__content {
    align-items: center;
    gap: var(--button-gap-default);
  }
  .cta:is(.-layout0, .-layout2, .-layout3) .cta__content > header + .cta__text {
    margin-top: calc(var(--text-gap-h2) - var(--button-gap-default));
  }
  .cta:is(.-layout0, .-layout2, .-layout3) .cta__actions {
    justify-content: center;
  }
  .cta.-layout0 .cta__content {
    max-width: 58.625rem;
  }
  .cta:is(.-layout2, .-layout3) {
    max-width: 58.625rem;
  }
  .cta:is(.-layout2, .-layout3) .cta__content {
    max-width: 43rem;
  }
  .cta.-layout3 {
    border-color: var(--color-primary-orange);
    background: var(--glass-orange);
    color: var(--shade-black);
  }
  .cta.-layout3 .cta__content header :is(h1, h2, h3, h4, h5, h6) {
    color: var(--shade-white);
  }
  .cta.-layout3 .cta__text {
    color: var(--shade-black);
  }
  .cta.-layout3 .btn {
    background-color: var(--shade-white);
    color: var(--color-primary-orange);
  }
  .cta.-layout3 .btn:hover {
    background-color: var(--shade-grey-100);
  }
  .cta.-layout3 .btn-hollow {
    border-color: var(--shade-white);
    color: var(--shade-white);
  }
  .cta.-layout3 .btn-hollow:hover {
    border-color: var(--shade-white);
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--shade-white);
  }
  .cta__hex {
    display: none;
  }
  @media (min-width: 992px) {
    .cta__hex {
      position: absolute;
      z-index: 0;
      display: block;
      height: auto;
      pointer-events: none;
      translate: -50% -50%;
      rotate: -24deg;
    }
  }
  .cta__hex--1 {
    top: 36%;
    left: -11%;
    width: 47%;
  }
  .cta__hex--2 {
    top: 76%;
    left: 107%;
    width: 39%;
  }
  .cta__img {
    display: block;
    width: calc(100% + 2 * var(--padding-xl));
    max-width: none;
    height: auto;
    margin: 0 calc(-1 * var(--padding-xl)) calc(-1 * var(--padding-xl));
    object-fit: cover;
  }
  @media (min-width: 1200px) {
    .cta__img {
      width: 100%;
      height: 100%;
      margin: 0;
      object-position: right center;
    }
  }
  .cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--button-gap-s);
  }
  @media (min-width: 1200px) {
    .-layout1 > .cta__content {
      max-width: 39rem;
    }
  }
  .cta__content > header :is(h1, h2, h3, h4, h5, h6),
  .cta__content .cta__text > :last-child {
    margin-bottom: 0;
  }
  .cta__content > header + .cta__text {
    margin-top: calc(var(--text-gap-h2) - var(--button-gap-s));
  }
  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m);
  }
}