/* =========================================================================
   Mobile sliders (recette, "petits écrans")
   On phones, card rows scroll sideways instead of stacking. The row runs to
   the screen edges, snaps card by card, and the next card peeks in so the
   visitor sees there is more. "Two" rows show two cards at once; the others
   show one card and a peek.
   ========================================================================= */
@media (max-width: 720px) {
  /* The rows. */
  .card-grid--grid .card-grid__items,
  .card-grid--split .card-grid__items,
  .card-grid--tiles:not(.card-grid--duo) .card-grid__items,
  .spotlight,
  .features--icons .features__items,
  .features--cards .features__items,
  .article__related-items,
  .features--media .features__items:not([data-scroller-track]),
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .block-ref__content .views-element-container > div {
    --slide: 82%;
    display: flex;
    gap: 12px;
    margin: -16px calc(-1 * var(--gutter)) -32px;
    padding: 16px var(--gutter) 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .card-grid--grid .card-grid__items::-webkit-scrollbar,
  .card-grid--split .card-grid__items::-webkit-scrollbar,
  .card-grid--tiles:not(.card-grid--duo) .card-grid__items::-webkit-scrollbar,
  .spotlight::-webkit-scrollbar,
  .features--icons .features__items::-webkit-scrollbar,
  .features--cards .features__items::-webkit-scrollbar,
  .article__related-items::-webkit-scrollbar,
  .features--media .features__items:not([data-scroller-track])::-webkit-scrollbar,
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .block-ref__content .views-element-container > div::-webkit-scrollbar { display: none; }

  /* Two cards in view. */
  .features--icons .features__items,
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .block-ref__content .views-element-container > div {
    --slide: calc((100% - 12px) / 2);
  }

  /* The cards: Drupal wraps each paragraph in a div, inside the field's
     display: contents wrapper. */
  .card-grid--grid .card-grid__items > * > *,
  .card-grid--split .card-grid__items > * > *,
  .card-grid--tiles:not(.card-grid--duo) .card-grid__items > * > *,
  .spotlight__feature,
  .spotlight__rest > *,
  .features--icons .features__items > * > *,
  .features--cards .features__items > * > *,
  .article__related-items > *,
  .features--media .features__items:not([data-scroller-track]) > * > *,
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .views-row {
    flex: 0 0 var(--slide);
    min-width: 0;
    scroll-snap-align: start;
  }
  .card-grid--grid .card-grid__items .card,
  .card-grid--split .card-grid__items .card,
  .card-grid--tiles:not(.card-grid--duo) .card-grid__items .card,
  .features--icons .feature { height: 100%; }

  /* Spotlight: the side column's cards join the row and stretch to the
     featured one's height. */
  .spotlight__rest { display: contents; }
  /* A little shorter than on tablets (480px), so the row fits the screen. */
  .spotlight__feature .card { height: 100%; min-height: 420px; }
  /* The side cards are row items themselves: an auto height lets the row
     stretch them (a percentage height would block it). */
  .spotlight__rest .card { height: auto; }

  /* Two-up cards are half a phone wide: less padding, smaller titles. */
  .features--icons .feature { padding: 28px 14px 24px; }
  .features--icons .feature__media { width: 104px; height: 104px; margin-bottom: 20px; }
  .features--icons .feature__media img { width: 54px; height: 54px; }
  .features--icons .feature__title { font-size: 1rem; }
  .features--icons .feature__text { font-size: 0.8rem; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__body,
  .block-ref:has(.views-exposed-form) .teaser__body { padding: 18px 14px; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__title,
  .block-ref:has(.views-exposed-form) .teaser__title { margin: 10px 0; font-size: 1rem; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__text,
  .block-ref:has(.views-exposed-form) .teaser__text { font-size: 0.8rem; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__date,
  .block-ref:has(.views-exposed-form) .teaser__date { font-size: 0.72rem; }

  /* News listing (Actualités): two articles a row instead of a slider. */
  .block-ref:has(.views-exposed-form) .block-ref__content .views-element-container > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Crop cards (home "Solutions par culture" and /solutions-par-culture).
   Portrait cards with a compact panel from tablets down (landscape tiles
   leave the text no room); two cards in view on small screens, one card and
   a peek on phones (480px and below). */
@media (min-width: 481px) and (max-width: 900px) {
  .card-grid--grid .card-grid__items .card__media,
  .card-grid--split .card-grid__items .card__media { aspect-ratio: 384 / 487; }
  .card-grid--grid .card__body,
  .card-grid--split .card__body { inset: 6%; padding: 16px 10px; border-radius: 26px; }
  .card-grid--grid .card__title,
  .card-grid--split .card__title { margin-bottom: 8px; font-size: 1.05rem; line-height: 1.25; }
  .card-grid--grid .card__text,
  .card-grid--split .card__text { font-size: 0.78rem; line-height: 1.35; }
  .card-grid--grid .card__link,
  .card-grid--split .card__link { margin-top: 14px; font-size: 0.82rem; }
}
@media (min-width: 481px) and (max-width: 720px) {
  .card-grid--grid .card-grid__items,
  .card-grid--split .card-grid__items { --slide: calc((100% - 12px) / 2); }
}
@media (max-width: 480px) {
  /* One card in view: portrait, so the panel's text fits inside it. */
  .card-grid--grid .card-grid__items .card__media,
  .card-grid--split .card-grid__items .card__media { aspect-ratio: 384 / 487; }
}
/* Extra-small screens: button labels stay on one line. */
@media (max-width: 480px) {
  .card-grid--grid .card__link,
  .card-grid--split .card__link { gap: 8px; font-size: 0.9rem; white-space: nowrap; }
}
@media (max-width: 400px) {
  .spotlight__feature .card__link { padding: 12px 22px; font-size: 0.9rem; white-space: nowrap; }
  .spotlight__feature .card__text { font-size: 0.95rem; line-height: 1.5; }
}
@media (max-width: 340px) {
  .card-grid--grid .card__body,
  .card-grid--split .card__body { inset: 6%; padding: 16px 12px; }
  .card-grid--grid .card__title,
  .card-grid--split .card__title { margin-bottom: 8px; font-size: 1.15rem; line-height: 1.25; }
  .card-grid--grid .card__text,
  .card-grid--split .card__text { font-size: 0.85rem; }
  .card-grid--grid .card__link,
  .card-grid--split .card__link { margin-top: 16px; font-size: 0.8rem; }
}

/* Icon cards (Mobile L and below): one card in view, at full text size. */
@media (max-width: 480px) {
  .features--icons .features__items { --slide: 82%; }
  .features--icons .feature { padding: 32px 22px 28px; }
  .features--icons .feature__media { width: 120px; height: 120px; margin-bottom: 24px; }
  .features--icons .feature__media img { width: 62px; height: 62px; }
  .features--icons .feature__title { font-size: 1.15rem; }
  .features--icons .feature__text { font-size: 0.875rem; }
}

/* News cards (Mobile L and below): one card in view, at full text size. */
@media (max-width: 480px) {
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .block-ref__content .views-element-container > div { --slide: 82%; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__body { padding: 22px 20px; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__title { margin: 12px 0; font-size: 1.1rem; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__text { font-size: 0.875rem; }
  .block-ref:has(.teaser--news):not(:has(.views-exposed-form)) .teaser__date { font-size: 0.78rem; }
}

/* Photo cards on a panel (À propos "Notre présence et nos engagements"),
   as the home page's photo rows: two cards in view on small screens, one
   and a peek on phones, and a gentler leaf on the smaller photos. */
@media (max-width: 720px) {
  .features--cards .features__items { --slide: calc((100% - 12px) / 2); }
  .features--cards .feature { height: 100%; padding: 16px; }
  .features--cards .feature__media { border-radius: 0 64px 0 64px; }
  .features--cards .feature__body { padding: 18px 4px 0; }
  .features--cards .feature__link { padding-top: 20px; }
}
@media (max-width: 480px) {
  .features--cards .features__items { --slide: 82%; }
}

/* Tile rows (product categories, stories, news tiles) and related articles:
   two cards in view on small screens, as the home page rows; one and a peek
   on phones (480px and below). */
@media (min-width: 481px) and (max-width: 720px) {
  .card-grid--tiles:not(.card-grid--duo) .card-grid__items,
  .article__related-items { --slide: calc((100% - 12px) / 2); }
  .article__related .teaser__body { padding: 18px 14px; }
  .article__related .teaser__title { margin: 10px 0; font-size: 1rem; }
  .article__related .teaser__text { font-size: 0.8rem; }
  .article__related .teaser__date { font-size: 0.72rem; }
  /* Half-width tiles: the hover description stays short enough to clear
     the link (two lines on product tiles, three on stories). */
  .card-grid--tiles .card__text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .card-grid--tiles:not(.card-grid--stories) .card__text { -webkit-line-clamp: 2; }
}
@media (max-width: 480px) {
  /* News listing (Actualités, xs): one article per row, at full size. */
  .block-ref:has(.views-exposed-form) .block-ref__content .views-element-container > div { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .block-ref:has(.views-exposed-form) .teaser__body { padding: 22px 20px; }
  .block-ref:has(.views-exposed-form) .teaser__title { margin: 12px 0; font-size: 1.15rem; }
  .block-ref:has(.views-exposed-form) .teaser__text { font-size: 0.9rem; }
  .block-ref:has(.views-exposed-form) .teaser__date { font-size: 0.78rem; }
}