/**
 * #teasers-region + #call-to-action-region — the two-part teaser layout (with
 * full-bleed 250vh white side panels and image hover-zoom) and the green pill
 * CTA card used by menu_type detail pages and key_features term canonical pages
 * (/en/features/write-online, /en/menus/food-menus, …). Self-scoped via #id, so
 * inert on pages without these elements; attached site-wide via .info.yml.
 *
 * Relocated from css/teasers-region.css; de-minified (kept FLAT in source order
 * — the double ::before/::after pattern is cascade-sensitive) and tokenized
 * (#212121 → --color-gray-900, #60d8ac → --color-teal-300; #fff + the teal rgba
 * shadow kept literal). Legacy 601/993/1201/768 breakpoints preserved verbatim.
 * The `.animated` reveal is driven by animation-on-scroll.js (shared with the
 * deep-dive block) — left intact.
 *
 * Unlayered — targets Drupal field-group descendants without utility classes.
 */

/* ── #teasers-region ─────────────────────────────────────────────────────── */
#teasers-region {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
  background: #fff;
}
@media only screen and (min-width: 601px)  { #teasers-region { width: 85%; } }
@media only screen and (min-width: 993px)  { #teasers-region { width: 80%; } }
@media only screen and (min-width: 1201px) { #teasers-region { width: 70%; } }

#teasers-region::before,
#teasers-region::after {
  display: table;
  content: " ";
}
#teasers-region::after {
  clear: both;
}

/* Full-bleed white side panels (250vh) behind the teaser content. */
#teasers-region::before,
#teasers-region::after {
  z-index: -1;
  position: absolute;
  top: 0;
  width: 100%;
  height: 250vh;
  background-color: #fff;
  content: "";
}
#teasers-region::before { left: -5vw; width: 5vw; }
@media only screen and (min-width: 601px)  { #teasers-region::before { left: -7.5vw; width: 7.5vw; } }
@media only screen and (min-width: 993px)  { #teasers-region::before { left: -10vw; width: 10vw; } }
@media only screen and (min-width: 1201px) { #teasers-region::before { left: -15vw; width: 15vw; } }
#teasers-region::after { right: -5vw; width: 5vw; }
@media only screen and (min-width: 601px)  { #teasers-region::after { right: -7.5vw; width: 7.5vw; } }
@media only screen and (min-width: 993px)  { #teasers-region::after { right: -10vw; width: 10vw; } }
@media only screen and (min-width: 1201px) { #teasers-region::after { right: -15vw; width: 15vw; } }

#teasers-region #teaser-first-part {
  display: flex;
  flex-direction: column-reverse;
}
#teasers-region #teaser-first-part .teaser-first-part-right .field--type-image { display: none; }
#teasers-region #teaser-second-part .teaser-second-part-left .field--type-image { display: none; }

#teasers-region [class*="-title"] {
  margin-top: 20px;
  margin-bottom: 70px;
  color: var(--color-gray-900);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
#teasers-region [class*="-description"] {
  margin-bottom: 10px;
  color: var(--color-gray-900);
  font-weight: 400;
  line-height: 20px;
}

#teasers-region .field--type-image .field--item {
  display: flex;
  width: 100%;
  overflow: hidden;
}
#teasers-region .field--type-image .field--item img {
  margin: 0 auto;
  transition: 1s linear;
}
#teasers-region .field--type-image .field--item:hover img {
  transform: scale3d(1.2, 1.2, 1.2);
  transform-style: preserve-3d;
  transition: 1s linear;
}

@media screen and (min-width: 768px) {
  #teasers-region #teaser-first-part {
    flex-direction: row;
    margin: 50px 0 100px;
  }
  #teasers-region #teaser-first-part .teaser-first-part-left { width: 50%; }
  #teasers-region #teaser-first-part .teaser-first-part-right { width: 50%; }
  #teasers-region #teaser-first-part .teaser-first-part-right .field--type-image { display: block; }
  #teasers-region #teaser-first-part [class*="-title"] { margin: 70px 0 20px 30px; }
  #teasers-region #teaser-first-part [class*="-description"] { margin: 0 0 20px 30px; }

  #teasers-region #teaser-second-part {
    display: flex;
    margin: 100px 0 50px;
  }
  #teasers-region #teaser-second-part .teaser-second-part-left { width: 85%; }
  #teasers-region #teaser-second-part .teaser-second-part-left .field--type-image { display: block; }
  #teasers-region #teaser-second-part .teaser-second-part-left .field--type-image .field--items { display: flex; }
  #teasers-region #teaser-second-part .teaser-second-part-right { width: 42%; }
  #teasers-region #teaser-second-part [class*="-title"] { margin: 70px 30px 20px 0; }
  #teasers-region #teaser-second-part [class*="-description"] { margin: 0 30px 20px 0; }
}

/* ── #call-to-action-region ──────────────────────────────────────────────── */
#call-to-action-region {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0;
  text-align: center;
}
@media only screen and (min-width: 601px)  { #call-to-action-region { width: 85%; } }
@media only screen and (min-width: 993px)  { #call-to-action-region { width: 80%; } }
@media only screen and (min-width: 1201px) { #call-to-action-region { width: 70%; } }
#call-to-action-region::before,
#call-to-action-region::after {
  display: table;
  content: " ";
}
#call-to-action-region::after {
  clear: both;
}
@media screen and (min-width: 768px) {
  #call-to-action-region { padding: 50px 0 100px; }
}

#call-to-action-region .field--name-field-call-to-action-title {
  margin-bottom: 20px;
  color: var(--color-gray-900);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
#call-to-action-region .field--name-field-call-to-action-description {
  margin-bottom: 20px;
  color: var(--color-gray-900);
  font-weight: 400;
  line-height: 20px;
}
#call-to-action-region .field--name-field-call-to-action-link {
  background: var(--color-teal-300);
  box-shadow: 0 0 0 5px rgba(96, 216, 172, 0.4);
  text-align: center;
  transition: 0.3s linear;
}
#call-to-action-region .field--name-field-call-to-action-link:hover {
  box-shadow: none;
  transition: 0.3s linear;
}
#call-to-action-region .field--name-field-call-to-action-link .field--name-field-banner-button-link {
  margin: 0;
}
#call-to-action-region .field--name-field-call-to-action-link a {
  display: block;
  min-width: 255px;
  padding: 15px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 15px;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}

/* Scroll-triggered reveal — `.animated` is toggled by animation-on-scroll.js
   (shared with the deep-dive block; do not decouple). fadeIn keyframe lives in
   chrome.css. */
#call-to-action-region.animated .field--name-field-call-to-action-link {
  -webkit-animation: 1s fadeIn linear;
  animation: 1s fadeIn linear;
}
#call-to-action-region:not(.animated) .field--name-field-call-to-action-link {
  opacity: 0;
}