/*
 * Featured Case Studies — Figma 331:5090 (shell + land tokens only).
 * Card UI: global .tec-case-study-card + scss/components/_tec-case-study-card.scss
 * Land / bleed: tec-land-section, tec-swiper-bleed → _tec-land-section-patterns.scss
 */

.home-featured-case-studies {
  --home-fcs-card-width: 28rem; /* 448px */
  --tec-slide-width: min(100%, var(--home-fcs-card-width));
  --tec-csc-media-bg: var(--wp--preset--color--black-100);
  --tec-focus-ring: var(--wp--preset--color--black-950);
  --tec-focus-offset: 0.25rem;
}

html[data-tec-theme="dark"] .home-featured-case-studies {
  --tec-csc-media-bg: var(--wp--preset--color--black-800);
  --tec-focus-ring: var(--wp--preset--color--white);
}

/*
 * Static dark surface: Background = Always dark in the editor.
 * Sets the same land CSS variables that the scroll-based JS toggle would
 * apply via html[data-tec-theme="dark"], but without needing a scroll event.
 * Applied when surface === 'dark' (no js-tec-land-trigger on this instance).
 */
.home-featured-case-studies--static-dark {
  --tec-land-bg: var(--wp--preset--color--black-950);
  --tec-land-text: var(--wp--preset--color--white);
  --tec-land-border: rgba(255, 255, 255, 0.15);
  --tec-csc-media-bg: var(--wp--preset--color--black-800);
  --tec-focus-ring: var(--wp--preset--color--white);
  --tec-focus-offset: 0.25rem;
  /* Direct properties — don't rely solely on CSS variable cascade. */
  background-color: var(--wp--preset--color--black-950);
  color: var(--wp--preset--color--white);
  /* No transition — dark is always applied, no state change to animate. */
  transition: none;
}

.home-featured-case-studies--static-dark .tec-section-header__title,
.home-featured-case-studies--static-dark .tec-section-header__description {
  color: var(--wp--preset--color--white);
  transition: none;
}

.home-featured-case-studies__slider-outer {
  display: flex;
  align-items: flex-start;
  width: 100%;
}