/* =========================================================================
   Referenced blocks (news teasers etc.)
   ========================================================================= */
.block-ref .section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; color: #000; }
.block-ref .section__head-text { max-width: 1030px; }
.block-ref .section__intro { max-width: 930px; color: var(--syn-gray-500); font-size: 1.125rem; line-height: 1.67; }

/* Views wraps rows in .views-element-container > div.js-view-dom-id-*, so the
   grid goes on that inner wrapper. */
.block-ref__content .views-element-container > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}
.block-ref__content .views-row { display: flex; }
.block-ref__content .views-row > .teaser { width: 100%; }

/* On hover the shadow deepens and the photo zooms ~1.16x from its centre
   (Figma Article, 420:3719). */
.teaser {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease;
}
.teaser:hover,
.teaser:focus-within,
.teaser.is-inview { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.teaser__media { position: relative; display: block; aspect-ratio: 373 / 300; overflow: hidden; background: var(--syn-bg-soft); }
.teaser__media img { transition: transform 0.5s ease; }
.teaser:hover .teaser__media img,
.teaser:focus-within .teaser__media img,
.teaser.is-inview .teaser__media img { transform: scale(1.16); }
@media (prefers-reduced-motion: reduce) {
  .teaser,
  .teaser__media img { transition: none; }
}
.teaser__body { display: flex; flex: 1; flex-direction: column; padding: 30px; }
.teaser__date {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 122, 85, 0.9);
}
/* Recette: the news sections' "Actualités" label is not shouted (the dates,
   like every card date, stay in capitals). */
.block-ref:has(.teaser--news) .eyebrow,
.card-grid--news .eyebrow { text-transform: none; letter-spacing: 0.02em; }
.teaser__title {
  margin: 15px 0;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.375;
}
.teaser__title a { color: #101828; }
.teaser__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #6a7282;
  font-size: 0.94rem;
  line-height: 1.625;
}
.teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f9fafb;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: #007a55;
}
/* The 22px sits under the text, so the link keeps its auto margin and
   lines up along the bottom of every card in a row. */
.teaser__text:has(+ .teaser__link) { margin-bottom: 22px; }
.teaser__link .card__arrow { width: 15px; height: 15px; }
.teaser__link:hover { text-decoration: none; }
@media (min-width: 721px) and (max-width: 1280px) {
  /* Recette: three narrow cards a row; the titles a little smaller so they
     wrap less (related events and articles, news and event listings). */
  .teaser__title { font-size: clamp(1.125rem, 1.7vw, 1.3rem); line-height: 1.35; }
}