/* ===== Widget Management: customer stories, layout "spotlight" =====
   Showcase on a large static background picture (like "a look ahead" on the Overview page): heading, counter,
   arrows and customer logos on the left, a deck of story cards on the right. A card shows the story picture in
   normal size with the customer's logo, the quote, its author and the story.
   Uses the theme's tokens (--c-brand, --spacing-*, --radius-*) and its .slider_buttons. */

section.wm-spotlight {
  position: relative;
  overflow: hidden;
  margin-top: var(--spacing-xxxl);
  margin-bottom: 0;
  padding: 160px 0;
  color: #fff;
  background: #2f2f2f var(--wm-spotlight-bg, url("/wp-content/uploads/2025/11/production.webp")) center / cover no-repeat;
}
section.wm-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 21, 21, 0.82) 0%, rgba(21, 21, 21, 0.6) 45%, rgba(21, 21, 21, 0.45) 100%);
}
.wm-spotlight .content_container { position: relative; z-index: 1; }
.wm-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--spacing-xl);
  align-items: center;
}

/* Left: heading and navigation */
.wm-spotlight .section_name {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}
.wm-spotlight-intro .title {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xxl);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}
.wm-spotlight-intro p {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.wm-spotlight-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
.wm-spotlight-nav .slider_buttons { margin: 0; }
.wm-spotlight-count {
  font-size: var(--font-size-lg);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.wm-spotlight-current { color: #fff; }
.wm-spotlight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--spacing-lg);
}
.wm-spotlight-tab {
  display: block;
  width: 96px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  opacity: 0.55;
  box-shadow: 0 0 0 0 var(--c-brand);
  transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.wm-spotlight-tab img { display: block; width: 100%; height: 100%; padding: 4px 8px; object-fit: contain; transform: scale(1.2); }
.wm-spotlight-tab:hover { opacity: 0.85; }
.wm-spotlight-tab.is-active { opacity: 1; background: #fff; box-shadow: 0 0 0 3px var(--c-brand); }
.wm-spotlight-tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Right: the deck. All cards share one cell, so switching never makes the page jump; two faint cards behind the
   open one hint at the other stories. */
.wm-spotlight-deck {
  position: relative;
  display: grid;
}
/* The script fixes the deck to the height of the tallest story with its text folded (measured without
   transitions). An unfolded story scrolls inside its card, so the section never changes its height. */
.wm-spotlight-deck[style*="height"] .wm-spotlight-card { height: 100%; min-height: 0; }
.wm-spotlight.is-measuring *,
.wm-spotlight.is-measuring *::before,
.wm-spotlight.is-measuring *::after { transition: none !important; }
.wm-spotlight-deck::before,
.wm-spotlight-deck::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
  transform: translate(18px, -18px) scale(0.97);
}
.wm-spotlight-deck::after {
  background: rgba(255, 255, 255, 0.07);
  transform: translate(36px, -36px) scale(0.94);
}
.wm-spotlight-card {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.6s;
}
.wm-spotlight-card.is-leaving { transform: translateX(-40px); }
.wm-spotlight-card.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.1s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s, visibility 0s;
}
.wm-spotlight-photo { position: relative; min-height: 100%; }
.wm-spotlight-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wm-spotlight-logo {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 200px;
  height: 86px;
  padding: 6px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* The whole logo always shows; the files carry white space around the mark, so the picture is allowed to grow
   into the padding */
.wm-spotlight-logo img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.35); }
.wm-spotlight-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: var(--spacing-xl) var(--spacing-lg) 36px;
}
.wm-spotlight-mark {
  font-size: 54px;
  line-height: 0.6;
  color: var(--c-brand);
}
.wm-spotlight-body blockquote {
  margin: var(--spacing-md) 0 0;
  font-size: clamp(22px, 1.75vw, 30px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--c-text);
}
.wm-spotlight-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
}
.wm-spotlight-author::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-brand);
}
.wm-spotlight-name { font-weight: 500; }
.wm-spotlight-role { color: var(--c-muted); }
.wm-spotlight-story {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--c-border);
}
.wm-spotlight-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gray-200) transparent;
}
.wm-spotlight-toggle { flex: none; }
/* Unfolded: the full story takes the place of the quote and scrolls inside the card if it is longer */
.wm-spotlight-card.is-open .wm-spotlight-mark,
.wm-spotlight-card.is-open .wm-spotlight-body > blockquote,
.wm-spotlight-card.is-open .wm-spotlight-author { display: none; }
.wm-spotlight-card.is-open .wm-spotlight-story { margin-top: 0; padding-top: 0; border-top: 0; }
.wm-spotlight-card.is-open .wm-spotlight-scroll { animation: wmStoryIn 0.5s ease both; }
@keyframes wmStoryIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wm-spotlight-title {
  font-size: var(--font-size-lg);
  line-height: 1.35;
  font-weight: 400;
}
.wm-spotlight-text,
.wm-spotlight-more-inner {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
}
.wm-spotlight-text p,
.wm-spotlight-more-inner p { margin: 10px 0 0; }
.wm-spotlight-text p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wm-spotlight-card.is-open .wm-spotlight-text p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.wm-spotlight-card strong { font-weight: 500; }

/* The rest of the story unfolds */
.wm-spotlight-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}
.wm-spotlight-more > .wm-spotlight-more-inner { overflow: hidden; }
.wm-spotlight-card.is-open .wm-spotlight-more { grid-template-rows: 1fr; }
.wm-spotlight-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-md);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
}
.wm-spotlight-toggle i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-gray-100);
  border: 1px solid var(--c-border);
  transition: transform 0.35s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wm-spotlight-toggle:hover i,
.wm-spotlight-card.is-open .wm-spotlight-toggle i { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.wm-spotlight-card.is-open .wm-spotlight-toggle i { transform: rotate(45deg); }

/* First paint: the opening story is set without any transition */
.wm-spotlight.is-instant *,
.wm-spotlight.is-instant *::before,
.wm-spotlight.is-instant *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wm-spotlight-card,
  .wm-spotlight-more { transition: none; transform: none; }
}

/* Tablet: heading above the deck */
@media (max-width: 1200px) {
  .wm-spotlight-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
  .wm-spotlight-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-lg); align-items: end; }
  .wm-spotlight-intro > :not(.wm-spotlight-nav) { grid-column: 1; }
  .wm-spotlight-nav { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .wm-spotlight-tabs { margin-top: var(--spacing-md); }
  .wm-spotlight-deck::before { transform: translate(12px, -12px) scale(0.97); }
  .wm-spotlight-deck::after { transform: translate(24px, -24px) scale(0.94); }
}
@media (max-width: 1000px) {
  .wm-spotlight-intro .title { font-size: var(--font-size-xl); }
}

/* Phone: picture on top of the card, navigation under the heading */
@media (max-width: 768px) {
  section.wm-spotlight { padding: var(--spacing-xl) 0; margin-top: var(--spacing-xl); }
  .wm-spotlight-intro { display: block; }
  .wm-spotlight-nav { margin-top: var(--spacing-md); justify-content: space-between; }
  .wm-spotlight-tab { width: 80px; height: 48px; }
  .wm-spotlight-deck::before,
  .wm-spotlight-deck::after { display: none; }
  .wm-spotlight-card { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-md); }
  .wm-spotlight-photo { aspect-ratio: 16 / 10; min-height: 0; }
  .wm-spotlight-logo { width: 150px; height: 64px; left: 12px; bottom: 12px; }
  .wm-spotlight-body { padding: var(--spacing-md); }
  .wm-spotlight-mark { font-size: 42px; }
}

/* Reveal when the section scrolls into view (wm-frontend.js adds .wm-reveal, then .is-revealed): the heading
   lines rise one after another, the deck slides in from the right and the cards behind it fan out, the logos pop
   in. Without script nothing is hidden. */
.wm-spotlight.wm-reveal .wm-spotlight-intro > *,
.wm-spotlight.wm-reveal .wm-spotlight-tab {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wm-spotlight.wm-reveal .wm-spotlight-deck {
  opacity: 0;
  transform: translateX(80px) rotate(1.5deg);
  transition: opacity 0.8s ease 0.25s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
.wm-spotlight.wm-reveal .wm-spotlight-deck::before,
.wm-spotlight.wm-reveal .wm-spotlight-deck::after {
  transform: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s;
}
.wm-spotlight.wm-reveal .wm-spotlight-logo {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.5s ease 1.1s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s;
}
.wm-spotlight.is-revealed .wm-spotlight-intro > *,
.wm-spotlight.is-revealed .wm-spotlight-tab,
.wm-spotlight.is-revealed .wm-spotlight-deck,
.wm-spotlight.is-revealed .wm-spotlight-logo { opacity: 1; transform: none; }
.wm-spotlight.is-revealed .wm-spotlight-deck::before { transform: translate(18px, -18px) scale(0.97); }
.wm-spotlight.is-revealed .wm-spotlight-deck::after { transform: translate(36px, -36px) scale(0.94); }
.wm-spotlight.is-revealed .wm-spotlight-intro > :nth-child(2) { transition-delay: 0.1s; }
.wm-spotlight.is-revealed .wm-spotlight-intro > :nth-child(3) { transition-delay: 0.2s; }
.wm-spotlight.is-revealed .wm-spotlight-intro > :nth-child(4) { transition-delay: 0.3s; }
.wm-spotlight.is-revealed .wm-spotlight-intro > :nth-child(5) { transition-delay: 0.4s; }
.wm-spotlight.is-revealed .wm-spotlight-tab:nth-child(1) { transition-delay: 0.5s; }
.wm-spotlight.is-revealed .wm-spotlight-tab:nth-child(2) { transition-delay: 0.6s; }
.wm-spotlight.is-revealed .wm-spotlight-tab:nth-child(3) { transition-delay: 0.7s; }
.wm-spotlight.is-revealed .wm-spotlight-tab:nth-child(n+4) { transition-delay: 0.8s; }
/* After the reveal the tabs react quickly again */
.wm-spotlight.is-settled .wm-spotlight-tab { transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; transition-delay: 0s; }
@media (max-width: 1200px) {
  .wm-spotlight.is-revealed .wm-spotlight-deck::before { transform: translate(12px, -12px) scale(0.97); }
  .wm-spotlight.is-revealed .wm-spotlight-deck::after { transform: translate(24px, -24px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .wm-spotlight.wm-reveal .wm-spotlight-intro > *,
  .wm-spotlight.wm-reveal .wm-spotlight-tab,
  .wm-spotlight.wm-reveal .wm-spotlight-deck,
  .wm-spotlight.wm-reveal .wm-spotlight-logo { opacity: 1; transform: none; transition: none; }
}

/* ===== Customer quote in a hero (layout "quote") =====
   Card in the place of the video widget on the business process pages and with the same light ring around it:
   logo, quote and author on the left, the story picture on the right. On hover the card darkens and a button
   "Read their story" appears. One quote shows, picked in wm-frontend.js. The entrance comes from the page: like
   the video widget, the wrapper carries data-anim="fade-right" data-delay="1". */
.wm-heroquote { display: grid; width: 100%; max-width: 700px; margin-left: auto; padding: 15px; }
.wm-heroquote-item {
  position: relative;
  grid-area: 1 / 1;
  display: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  margin: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--c-text);
  overflow: hidden;
  box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.2);
}
.wm-heroquote-item.is-active { display: grid; }
.wm-heroquote-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px 34px; }
.wm-heroquote-logo { display: block; width: 140px; height: 56px; }
.wm-heroquote-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; transform: scale(1.8); transform-origin: left center; }
.wm-heroquote-item blockquote {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--c-brand);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text);
}
/* Marked as a quote: typographic quotation marks around the text and a large faint one in the background */
.wm-heroquote-item blockquote::before { content: "\201C"; }
.wm-heroquote-item blockquote::after { content: "\201D"; }
.wm-heroquote-copy { position: relative; isolation: isolate; background: #f4f4f4; overflow: hidden; }
/* A large, faint quotation mark behind the text */
.wm-heroquote-copy::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: 100px;
  left: -39px;
  font-size: 600px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
.wm-heroquote-item figcaption { display: grid; gap: 2px; margin-top: 18px; padding-left: 20px; font-size: var(--font-size-sm); line-height: 1.35; }
.wm-heroquote-name { font-weight: 500; }
.wm-heroquote-role { color: var(--c-muted); }
.wm-heroquote-pic { position: relative; min-height: 320px; overflow: hidden; }
.wm-heroquote-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.wm-heroquote-item:hover .wm-heroquote-pic img { transform: scale(1.08); }

/* Hover: the card darkens slightly, the button rises into the middle */
.wm-heroquote-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(21, 21, 21, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wm-heroquote-overlay .button { transform: translateY(12px); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.wm-heroquote-item:hover .wm-heroquote-overlay,
.wm-heroquote-item:focus-within .wm-heroquote-overlay { opacity: 1; }
.wm-heroquote-item:hover .wm-heroquote-overlay .button,
.wm-heroquote-item:focus-within .wm-heroquote-overlay .button { transform: none; }
@media (hover: none) {
  /* Touch screens: the button sits in the corner of the picture, the card stays bright */
  .wm-heroquote-overlay { inset: auto 14px 14px auto; background: none; opacity: 1; }
  .wm-heroquote-overlay .button { transform: none; }
}
@media (max-width: 1350px) {
  .wm-heroquote-copy { padding: 28px 26px; }
  .wm-heroquote-copy::before { top: 80px; left: -30px; font-size: 480px; }
  .wm-heroquote-pic { min-height: 280px; }
}
@media (max-width: 1000px) {
  .wm-heroquote-copy::before { top: 60px; left: -24px; font-size: 380px; }
}
@media (max-width: 576px) {
  .wm-heroquote-item { grid-template-columns: minmax(0, 1fr); }
  .wm-heroquote-pic { min-height: 200px; }
  .wm-heroquote-copy::before { top: 40px; left: -18px; font-size: 320px; }
}