:root{
  --c-flip-card--radius: var(--radius-auto-xl);
  --c-flip-card--padding: var(--spacing-auto-lg);
  --c-flip-card--aspect-ratio: 1/1;
}

[data-component-id="blsi2026:flip_card"] {
  /* @todo Add your styles here. */
}

.c-flip-card{
  display: grid;
  aspect-ratio: var(--c-flip-card--aspect-ratio);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border-radius: var(--c-flip-card--radius);
  overflow: hidden;
  position: relative;


  /* This container is needed to position the front and back side */
  .c-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  &:hover .c-flip-card-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .c-flip-card-front, .c-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .c-flip-card-front {
  }

  /* Style the back side */
  .c-flip-card-back {
    transform: rotateY(180deg);
  }



  &:is(a){
    text-decoration: none;
  }

  & .media{
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    place-content: center;
    padding: var(--c-flip-card--padding);

    & > *{
      z-index: 1;
    }
    &.no-media::after{
      content: attr(data-fallback-text);
      font-size: var(--font-size-h3);
      font-weight: 600;
      z-index: 0;
    }
  }


  & .content{
    text-align: center;
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    place-content: center;
    padding: var(--c-flip-card--padding);
    background-color: oklch( from var(--color-light) l c h / 0.87 );
    /*opacity: 0;*/
    /*transition: opacity 0.3s ease-in-out;*/

    & :is(h2,h3,h4,h5,h6){
      font-size: var(--font-size-h3);
    }
  }

  /*&:hover{*/
  /*  & .content{*/
  /*    opacity: 1;*/
  /*  }*/
  /*}*/

  &.is_lb{
    overflow: unset;
    aspect-ratio: unset;
    & :is(.media,.content){
      grid-area: unset;
    }
  }
}