/*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*/
/*
 * Linked-image slider (Figma 4230:21381), CType "cardslider". Whole card is the link.
 * Hover/focus: image zooms slightly, hex button fills white.
 * Nav buttons: prev/next, Swiper marks the unusable one .swiper-button-disabled.
 */
@layer organisms {
  .cardslider {
    display: grid;
    gap: var(--grid-gutter-default);
  }
  @media (min-width: 992px) {
    .cardslider:has(.cardslider__intro):not(.-introTop) {
      grid-template-columns: minmax(0, 437fr) minmax(0, 939fr);
    }
  }
  .cardslider.-introTop {
    row-gap: var(--section-gap);
  }
  .cardslider__text > :last-child {
    margin-bottom: 0;
  }
  .cardslider__intro header :is(h1, h2, h3, h4, h5, h6, .subline) {
    text-align: left;
  }
  .cardslider__slider {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
  }
  .cardslider__list {
    position: relative;
    width: 100%;
    overflow: visible;
    clip-path: inset(0 -100vw 0 0);
  }
  .cardslider__list .swiper-slide {
    container-type: inline-size;
  }
  .cardslider__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--button-gap-s);
    box-sizing: border-box;
    aspect-ratio: 457/575;
    padding: var(--padding-l);
    border-radius: var(--border-radius-default);
    background: var(--color-primary-orange);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
  }
  .cardslider__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(38, 36, 35, 0) 24.5%, rgba(38, 36, 35, 0.95) 81.2%);
  }
  .cardslider__card:hover, .cardslider__card:focus-visible {
    color: #fff;
  }
  .cardslider__card:hover .cardslider__image, .cardslider__card:focus-visible .cardslider__image {
    transform: scale(1.08);
  }
  .cardslider__card:hover .cardslider__button, .cardslider__card:focus-visible .cardslider__button {
    --hex-fill: #fff;
    --hex-stroke: #fff;
    --hex-color: var(--color-primary-orange);
  }
  .cardslider__card picture {
    position: absolute;
    inset: 0;
  }
  .cardslider__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease-out;
  }
  .cardslider__title {
    position: relative;
    z-index: 2;
    flex: 1;
    font-size: var(--font-size-h3);
    font-weight: 900;
    line-height: 1.2;
  }
  @container (max-width: 25rem) {
    .cardslider__card {
      padding: var(--padding-m);
    }
    .cardslider__title {
      font-size: 1.75rem;
    }
  }
  @container (max-width: 18.75rem) {
    .cardslider__card {
      padding: var(--padding-s);
    }
    .cardslider__title {
      font-size: 1.5rem;
    }
  }
  .cardslider__button {
    --hex-fill: transparent;
    --hex-color: #fff;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: none;
    width: 3.375rem;
    height: 3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hex-color);
    cursor: pointer;
  }
  .cardslider__button > * {
    grid-area: 1/1;
  }
  .cardslider__button .icon-arrow-up-right {
    font-size: 1.8rem;
    line-height: 1;
  }
  .cardslider__button .cardslider__hex {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: var(--hex-fill);
    stroke: var(--hex-stroke, var(--hex-color));
    stroke-width: 2;
  }
  .cardslider__nav {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  .cardslider__nav .cardslider__button {
    --hex-color: var(--color-primary-orange);
  }
  .cardslider__nav .cardslider__button:hover {
    --hex-fill: var(--color-primary-orange);
    --hex-color: #fff;
  }
  .cardslider__nav .cardslider__button:disabled, .cardslider__nav .cardslider__button.swiper-button-disabled {
    --hex-fill: transparent;
    --hex-color: var(--shade-grey-250);
    cursor: default;
  }
}