/* Component customized from Jhey https://codepen.io/jh3y/pen/XJWNMOO */

:root {
  --gap: 8px;
  --base: clamp(5rem, 8cqi, 80px);
  --easing: linear(
          0 0%,
          0.1538 4.09%,
          0.2926 8.29%,
          0.4173 12.63%,
          0.5282 17.12%,
          0.6255 21.77%,
          0.7099 26.61%,
          0.782 31.67%,
          0.8425 37%,
          0.8887 42.23%,
          0.9257 47.79%,
          0.9543 53.78%,
          0.9752 60.32%,
          0.9883 67.11%,
          0.9961 75%,
          1 100%
  );
  --speed: 0.7s;
}

.accordion-component.accordion-component--4 > ul {
  grid-template-columns: 10fr 1fr 1fr 1fr;
}

.accordion-component.accordion-component--5 > ul {
  grid-template-columns: 10fr 1fr 1fr 1fr 1fr;
}

.accordion-component.accordion-component--6 > ul {
  grid-template-columns: 10fr 1fr 1fr 1fr 1fr 1fr;
}

.accordion-component.accordion-component--sm > ul {
  height: 500px;
}

.accordion-component.accordion-component--md > ul {
  height: 645px;
}

.accordion-component.accordion-component--lg > ul {
  height: 730px;
}

.accordion-component.accordion-component--xl > ul {
  height: 785px;
}

.accordion-component > ul {
  display: grid;
  container-type: inline-size;
  gap: var(--gap);
  list-style-type: none;
  justify-content: center;
  padding: 0;
  /*height: clamp(300px, 40dvh, 474px);*/
  margin: 0;
  width: calc(
          ((var(--items) - 1) * var(--base)) + ((var(--items) - 1) * var(--gap)) +
          var(--ideal)
  );
  /*width: 950px;*/
  max-width: calc(100% - 4rem);
  transition: grid-template-columns var(--speed) var(--easing);
}

.accordion-component .accordion-item {
  background: light-dark(#fff, #000);
  position: relative;
  overflow: hidden;
  min-width: var(--base);
  border-radius: 8px;
  border: 1px solid color-mix(in hsl, canvas, canvasText 50%);
}

.accordion-component .accordion-item:hover[data-active='false'] {
  border-color: var(--color-bv-turquoise);
  cursor: pointer;
  opacity: 1;

  .accordion-item__vertical-title, i {
    color: var(--color-bv-turquoise);
    opacity: 1;
  }
}

.accordion-component article {
  width: calc(var(--article-width) * 1px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-inline: calc(var(--base) * 0.5 - 9px);
  padding-top: 3rem;
  padding-bottom: 2rem;
  padding-right: 3rem;
  overflow: hidden;

  .accordion-item__vertical-title {
    position: absolute;
    top: 2rem;
    left: calc(var(--base) * 0.36);
    transform-origin: 0 50%;
    writing-mode: vertical-lr;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-bv-text-gray);
    letter-spacing: 1px;
  }

  .accordion-item__content {
    padding-left: 3rem;
    /*font-size: 13px;*/
    /*text-wrap: balance;*/
    /*line-height: 1.4;*/
    color: var(--color-bv-text-gray);
    flex-grow: 1;
    --opacity: 0.8;
    z-index: 1;
  }

  /*a {*/
  /*  position: absolute;*/
  /*  bottom: 1rem;*/
  /*  height: 18px;*/
  /*  line-height: 1;*/
  /*  color: inherit;*/

  /*  &:is(:focus-visible, :hover) {*/
  /*    outline: none;*/
  /*    span {*/
  /*      text-decoration: underline;*/
  /*      text-underline-offset: 4px;*/
  /*    }*/
  /*  }*/

  /*  span {*/
  /*    display: inline-block;*/
  /*    line-height: 18px;*/
  /*    translate: calc(var(--base) * 0.5);*/
  /*    font-weight: 500;*/
  /*  }*/
  /*}*/

  img.accordion-item__background {
    position: absolute;
    pointer-events: none;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask: radial-gradient(100% 100% at 100% 100%, #ffffff73, #0000)
  }
}

/* TRANSITIONS */

.accordion-component .accordion-item :is(.accordion-item__icon, .accordion-item__vertical-title) {
  opacity: 0.6;
  transition: opacity calc(var(--speed) * 1.2) var(--easing);
}

.accordion-component .accordion-item :is(p) {
  opacity: 1;
  transition: opacity calc(var(--speed) * 1.2) var(--easing);
  width: fit-content;
}

.accordion-component .accordion-item img.accordion-item__background {
  filter: grayscale(1) brightness(1.5);
  scale: 1.1;
  transition-property: filter, scale;
  transition-duration: calc(var(--speed) * 1.2);
  transition-timing-function: var(--easing);
}

.accordion-component [data-active='true'] :is(.accordion-item__vertical-title) {
  opacity: 0;
}

.accordion-component [data-active='true'] :is(i) {
  opacity: var(--opacity, 1);
}

.accordion-component [data-active='true'] :is(p) {
  transition-delay: calc(var(--speed) * 0.25);
}

.accordion-component [data-active='true'] img.accordion-item__background {
  filter: grayscale(0) brightness(1);
  scale: 1;
  transition-delay: calc(var(--speed) * 0.25);
}

/* Increase left padding when opening (WIP - might be useful) */
/*.accordion-component [data-active='true'] .accordion-item__content {*/
/*  padding-left: 2rem;*/
/*  transition-delay: calc(var(--speed) * 0.25);*/
/*  transition-timing-function: var(--easing);*/
/*  transition: padding calc(var(--speed) * 1.2) var(--easing);*/
/*}*/