.element-one-glance {
  --one-glance-element-radius: var(--radius-3xl);
  --one-glance-element-padding-y: var(--padding-xs);
  --one-glance-element-padding-x: var(--padding-3xs);
  --one-glance-element-gap: var(--gap-xl);
  --one-glance-height: 204px;

  /* override container width so the slider is exactly 264px wide (264px + 2 * 16px padding = 296px) */
  --container-width-sm: 296px;

  .one-glance-box {
    width: var(--size-72);
    margin: 0 auto;
    background-color: var(--background-secondary);
    border-radius: var(--one-glance-element-radius);
    padding: var(--one-glance-element-padding-y)
      var(--one-glance-element-padding-x);
  }

  @media (min-width: 768px) {
    .one-glance-box {
      width: inherit;
      margin: 0;
    }
    
    --one-glance-element-radius: var(--radius-4xl);
    --one-glance-element-padding-y: var(--padding-xl);
    --one-glance-element-padding-x: var(--padding-md);
  }

  /* Normal variant: desktop grid */
  @media (min-width: 1280px) {
    --one-glance-height: 252px;

    .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--one-glance-element-gap);
      transform: none !important;
      height: auto !important;
      flex-wrap: nowrap;
    }

    .swiper-slide {
      display: block;
      width: auto !important;
      height: 100% !important;
      margin: 0 !important;
    }

    .swiper-navigation-controls {
      display: none;
    }
  }
}

/* Inline variant */
.element-one-glance--inline {
  /* Desktop: 3x3 grid, no swiper */
  @media (min-width: 1280px) {
    .swiper-wrapper {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

.one-glance-header {
  color: var(--text-secondary-inverse);
  margin-bottom: var(--gap-lg);
}

.one-glance {
  --one-glance-font-size: var(--font-size-sm);
  --one-glance-radius: var(--radius-2xl);
  --one-glance-gap: var(--gap-md);

  --one-glance-padding-y: var(--padding-sm);
  --one-glance-padding-x: var(--padding-sm);

  --title-line-clamp: 2;
  --description-line-clamp: 4; 

  @media (min-width: 768px) {
    --one-glance-font-size: var(--font-size-medium);
    --one-glance-radius: var(--radius-4xl);
    --one-glance-padding-y: var(--padding-sm);
    --one-glance-padding-x: var(--padding-sm);
  }

  @media (min-width: 1280px) {
    --one-glance-padding-x: var(--padding-md);
    --description-line-clamp: 5; 
  }

  background-color: var(--element-bg);
  color: var(--element-text);
  border-radius: var(--one-glance-radius);
  display: flex;
  flex-direction: column;

  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: var(--one-glance-font-size);

  height: var(--one-glance-height);
  padding: var(--one-glance-padding-y) var(--one-glance-padding-x);
  gap: var(--one-glance-gap);
  text-decoration: none;

  .one-glance-icon {
    display: flex;
    justify-content: center;

    svg {
      width: var(--size-20);
      height: var(--size-20);
    }
  }

  &:has(.one-glance-icon) {
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .one-glance-content {
    flex: 1;
  }

  .one-glance-title {
    display: block;
    margin-bottom: var(--gap-sm);
    
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-bold);

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--title-line-clamp);
  }

  .one-glance-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--description-line-clamp);
  }
}

/* Inline card: horizontal layout with icon on left, no title */
.one-glance--inline {
  flex-direction: row;
  align-items: center;
  min-height: auto;

  margin-bottom: var(--padding-xs);

  @media (min-width: 1280px) {
    margin-bottom: 0;
  }

  &:has(.one-glance-icon) {
    align-items: center;
    text-align: left;
    justify-content: flex-start;
  }

  .one-glance-icon {
    flex-shrink: 0;
  }
}

/* inline cards */
.one-glance--inline {
  --description-line-clamp: 3;
  --one-glance-height: 116px;

  @media (min-width: 1280px) {
    --description-line-clamp: 3;
    --one-glance-height: 128px;
  }
}

/*card width icons, different padding*/
.one-glance--with-icon {
  --one-glance-padding-y: var(--padding-xs);
  --one-glance-padding-x: var(--padding-xs);
  
  --description-line-clamp: 3;
  --one-glance-height: 240px;
  
  &.one-glance--inline {
    --description-line-clamp: 4;
    --one-glance-height: 116px;
  }

  @media (min-width: 1280px) {
    --one-glance-padding-y: var(--padding-sm);
    --one-glance-padding-x: var(--padding-sm);

    --description-line-clamp: 2;
    --one-glance-height: 252px;

    &.one-glance--inline {
      --description-line-clamp: 3;
      --one-glance-height: 128px;
    }
  }
}