/**
 * @file
 * Section: Texte + Liste icônes
 * Mobile-first responsive design
 */

/* Section uses .section-padding utility class from _utility.css */

.s-text-icon-list {
  width: 100%;
}

.s-text-icon-list__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}

@media all and (min-width: 769px) {

.s-text-icon-list__container {
    flex-direction: row;
    gap: 2.5rem
}
  }

/* Align variants */

.s-text-icon-list--align-top .s-text-icon-list__container {
  align-items: flex-start;
}

.s-text-icon-list--align-bottom .s-text-icon-list__container {
  align-items: flex-end;
}

/* Layout variants - apply only on desktop */

@media all and (min-width: 769px) {

.s-text-icon-list--text-right .s-text-icon-list__container {
    flex-direction: row-reverse
}
  }

.s-text-icon-list--left-none .s-text-icon-list__container {
  justify-content: center;
}

.s-text-icon-list--left-none .s-text-icon-list__content {
  display: none;
}

/* Image right layout - list on left, image on right */

@media all and (min-width: 769px) {

.s-text-icon-list--left-image_right .s-text-icon-list__container {
    flex-direction: row
}
  }

/* Background variants */

.s-text-icon-list--bg-white {
  background: #fff;
}

.s-text-icon-list--bg-gray {
  background: #f8f9fa;
}

.s-text-icon-list--bg-gradient {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

/* ==========================================================================
   Left content (text or image)
   ========================================================================== */

.s-text-icon-list__content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 1.875rem;
}

@media all and (min-width: 769px) {

.s-text-icon-list__content {
    flex: 1 1 0;
    width: auto
}
  }

.s-text-icon-list__image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

@media all and (min-width: 1025px) {

.s-text-icon-list__image {
    aspect-ratio: auto
}
  }

/* Title uses .section-title utility class from _utility.css */

/* Description - Figma: 18px, weight 400, line-height 24px */

.s-text-icon-list__description {
  align-self: stretch;
  margin: 0;
  word-wrap: break-word;
  color: #313243;
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5rem;
}

/* Highlight - Figma: 18px, weight 700, line-height 24px */

.s-text-icon-list__highlight {
  align-self: stretch;
  margin: 0;
  word-wrap: break-word;
  color: #313243;
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
}

/* CTA Button */

.s-text-icon-list__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: #fff;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-size: 1rem;
  font-weight: 500;
}

.s-text-icon-list__cta:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.75rem rgb(102 126 234 / 0.4);
}

/* ==========================================================================
   Right content (items list)
   ========================================================================== */

.s-text-icon-list__list {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 0.9375rem;
}

@media all and (min-width: 769px) {

.s-text-icon-list__list {
    gap: 1.875rem;
    flex: 1 1 0;
    width: auto
}
  }

.s-text-icon-list__list p {
    margin: 0;
  }

/* Items container - no gap between items themselves */

.s-text-icon-list__items-container {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Single item - Figma: padding 20px, border-left 1px #D9DCE3 */

.s-text-icon-list__item {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  padding: 1.25rem;
  border-left: 0.0625rem solid #d9dce3;
  gap: 0.625rem;
}

/* Icon container - Figma: 20x20px */

.s-text-icon-list__item-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #313243;
}

.s-text-icon-list__item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.s-text-icon-list__item-text {
  word-wrap: break-word;
  color: #313243;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
}

/* Title + description format: **Title** : Description */

.s-text-icon-list__item-title {
  color: #313243;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375rem;
}

.s-text-icon-list__item-desc {
  color: #313243;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;
}

/* ==========================================================================
   Item style variation: icon box (no border, dark icon background)
   ========================================================================== */

.s-text-icon-list--item-icon-box .s-text-icon-list__list {
  gap: 1.875rem;
}

.s-text-icon-list--item-icon-box .s-text-icon-list__items-container {
  gap: 1.875rem;
}

.s-text-icon-list--item-icon-box .s-text-icon-list__item {
  min-width: 18.75rem;
  padding: 0;
  border-left: none;
}

.s-text-icon-list--item-icon-box .s-text-icon-list__item-icon {
  width: auto;
  height: auto;
  padding: 0.9375rem;
  border-radius: 0.625rem;
  background: #313243;
}

.s-text-icon-list--item-icon-box .s-text-icon-list__item-icon svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}

.s-text-icon-list--item-icon-box .s-text-icon-list__item-icon path {
  fill: white;
}

/* Text styles for icon_box - use 18px medium */

.s-text-icon-list--item-icon-box .s-text-icon-list__item-text,
.s-text-icon-list--item-icon-box .s-text-icon-list__item-title,
.s-text-icon-list--item-icon-box .s-text-icon-list__item-desc {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

/* ==========================================================================
   Responsive - Now handled via mobile-first approach above with @db
   ========================================================================== */

/* Stacked layout variant */

.s-text-icon-list--left-stacked .s-text-icon-list__container {
  display: block;
}

.s-text-icon-list__stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: flex-start;
  gap: 1.875rem;
}

.s-text-icon-list__stacked .section-title {
  align-self: stretch;
}

.s-text-icon-list__stacked .s-text-icon-list__description {
  align-self: stretch;
}

.s-text-icon-list__stacked .s-text-icon-list__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: flex-start;
}

.s-text-icon-list__stacked .s-text-icon-list__highlight {
  align-self: stretch;
}

/* Title positioning styles */

.s-text-icon-list__title-wrapper--full {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto 0.9375rem;
  padding: 0 1.5rem;
  text-align: center;
}

@media all and (min-width: 769px) {

.s-text-icon-list__title-wrapper--full {
    margin-bottom: 2.5rem
}
  }

.s-text-icon-list__title-wrapper--full .section-title {
  margin: 0;
  text-align: center;
}

/* Hide title in wrong positions based on setting */

.s-text-icon-list--title-full .s-text-icon-list__content .section-title,
.s-text-icon-list--title-full .s-text-icon-list__list .section-title {
  display: none;
}

/* Hide title in list column when title-left, EXCEPT for image_right layout where list is on left */

.s-text-icon-list--title-left .s-text-icon-list__list .section-title {
  display: none;
}

.s-text-icon-list--title-left.s-text-icon-list--left-image_right .s-text-icon-list__list .section-title {
  display: block;
}

.s-text-icon-list--title-left .s-text-icon-list__title-wrapper--full {
  display: none;
}

.s-text-icon-list--title-right .s-text-icon-list__content .section-title,
.s-text-icon-list--title-right .s-text-icon-list__title-wrapper--full {
  display: none;
}

/* Keep the title at the same visual height as content when on the right */

.s-text-icon-list--title-right .s-text-icon-list__list {
  display: flex;
  flex-direction: column;
}

.s-text-icon-list--title-right .s-text-icon-list__list .section-title {
  flex-shrink: 0;
}