/* Cartes ——————————————————————— */
.card {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);
  container: image-card / inline-size;
  corner-shape: squircle;
  overflow: hidden;

  & > .container-child {
    border-radius: var(--radius-md);
    height: calc(100% - var(--space-16));
    margin: var(--space-8);
    padding: var(--space-12);
  }

  & > .container-child__gradient {  
    background: 
    linear-gradient(
      to top right,
      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
      transparent 25%
    ),
    linear-gradient(180deg, var(--color-clear-bg) 0%, var(--color-surface-lighter) 100%);
  }

  & > .container-child__grid {
    display: grid;
    grid-template-areas:
      "title"
      "image"
      "content";
  }

  & > .container-child__bg {
    background-color: var(--color-surface-lighter);
  }

  & .card__title {
    font-family: var(--ff-headings);
    font-weight: 500;
    font-size: 0.875rem;
    grid-area: title;
    letter-spacing: 0.05rem;
    line-height: 1.15;
    margin-block-end: 0;
    text-transform: uppercase;
    z-index: 2;
  }

  /*&:not(.card-featured) .card__title {
    margin-block-end: 0;
  }*/

  & > h2,
  & > h3,
  & > ul,
  & > .container-child > .card__content-frame {
    margin-inline: var(--space-20);
  }

  & .card-image {
    aspect-ratio: 8 / 3;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-20);
    width: 100%;

    & img {
      object-fit: cover;
      object-position: 50% 10%;
      width: 100%;
    }
  }

  & .card__title {
    margin-block-end: var(--space-20);
  }
  
  &.card-featured {

    p {
      margin-block-start: 0;
    }

    & .container-child {
      grid-template-rows: auto 1fr auto;
      margin: var(--space-8);
    }

    .btn-full-width {
      margin-block-end: 0;
      margin-inline: 0;
      width: 100%;
    }
  }
  
  &.flash-archive {
    & img {
      width: 60%;
    }
  }
  
  .card__content-frame {
    > * {
      flex-grow: 0;
    }
  }

  & > .nested-cards__container {
    margin-inline: var(--space-8);
    margin-block-end: var(--space-8);
  }

  & ul {
    list-style-position: inside;
  }

  h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-block: var(--space-8);
  }

  p {
    margin-block: var(--space-16);
    text-wrap: pretty;
  }

  @container image-card (width > 40ch) {
    
    & .container-child {
      grid-template-areas:
        "title title"
        "image content";
      grid-template-columns: auto 1fr;
      column-gap: var(--space-20);

      & .card__title {
        grid-area: title;
      }

      & .card-image {
        aspect-ratio: auto;
        border: none;
        grid-area: image;
        height: 200px;
        margin-block-start: 0;
        place-content: center;
        max-width: 260px;

        & img {
          aspect-ratio: auto;
          height: 100%;
          object-fit: contain;
          width: auto;
        }
      }

      & > .card__content-frame {
        align-self: start;
        grid-area: content;
        margin-inline: 0;
        max-width: 50ch;
        z-index: 3;

        > * {
          flex-grow: 0;
        }
      }
      
      & > .btn-frame {
        grid-area: btn;
      }

      & p {
        align-content: start;
        flex: 1;
        margin-block-start: 0;
      }

      & .btn__default {
        align-self: flex-start;
        left: -2px;
        margin-block: var(--space-24) var(--space-16);
        position: relative;
        white-space: nowrap;
      }
    }

    &:not(.card-featured) .container-child .card__title {
      margin-block-end: var(--space-20);
    }
  }
}

.card-featured.search {
  .container-child {
    background: top 12px right 12px / 40% no-repeat url("../../img/loupe.svg"),
      linear-gradient(var(--color-accent-light), aliceblue, white);
    background-size: contain;
    border-radius: var(--radius-md);
  }
}

.card-featured.question {
  .container-child {
    background: top 12px right 20px / 40% no-repeat url("../../img/question-icon.svg"),
    linear-gradient(white, aliceblue, var(--color-accent-light));
    background-size: contain;
    border-radius: var(--radius-md);
  }
}

/* Variante : mise en avant IA (pleine largeur) */
.card-featured.ai-search {
  .container-child {
    background: top 12px right 12px / 30% no-repeat url("../../img/ai-icon.svg"),
      linear-gradient(var(--color-accent-light), aliceblue, white);
    background-size: contain;
    border-radius: var(--radius-md);
  }

  .card__title {
    align-items: start;
    display: flex;
    gap: var(--space-12);
    max-width: 60ch;
    text-wrap: balance;
    width: auto;
  }

  .btn-frame {

    .btn__primary {
      letter-spacing: 0.05rem;
      text-transform: uppercase;
    }

    .ai-search__disclaimer {
      margin-block-start: var(--space-12);
    }
  }

  .ai-search__disclaimer {
    color: var(--color-body-dimmed-text);
    font-size: var(--fs-smallest);
    margin-block: 0;
    max-width: 65ch;
  }
}

/* Variante : mise en avant */
.card-featured {
  background: var(--color-clear-bg);
  display: flex;
  flex-direction: column;

  & > .container-child {
    flex: 1;
  }

  .card__title {
    font-size: var(--fs-heading-1);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    margin-block-end: var(--space-20);
    /*width: 14ch;  */
  }
  
  .container-child {
    .card-image {
      place-self: top center;
      width: 100%;
    }
  }

  p {
    line-height: 1.4;
    max-width: 44ch;
  }

  &.question p {
    max-width: 90ch;
  }

  /* Image à droite */
  @container image-card (width > 40ch) {
    & .container-child {
      border-radius: var(--radius-md);
      grid-template-areas:
        "title"
        "content"
        "btn";
      grid-template-columns: 1fr;
    }
  }
}

/* Variante : Flash */
.flash {
  & > .card__title {
    margin-block-start: var(--space-20);
  }

  p {
    font-size: var(--font-size-400);
    font-weight: 300;
    margin-block: var(--space-16);
    max-width: 100%;
  }
}

/* Variante : Info Cridon */

.info-cridon {
  ul {
    align-self: end;
    margin-block-end: 0;
    padding-inline-start: 0;

    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-block-end: 0;
  }

  li {
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-border);
    list-style: none;
    margin-block-end: var(--space-8);
    padding: var(--space-8) var(--space-12);

    grid-column: span 1;
    margin-block-end: 0;
    max-width: 100%;
    transition: transform 0.15s ease;
  }

  & li:hover,
  & li:focus-within {
    transform: translateY(-2px);
  }

  .card__title {
    margin-block-start: 0;
  }

  a {
    display: block;
    text-decoration: none;
  }

  a:hover {
    color: var(--color-primary);
  }

  a h3 {
    font-weight: 500;
    margin-block-start: 0;
    text-decoration: underline;
  }

  a:hover h3 {
    color: var(--color-accent);
  }
}