/* itbuilder/case-study-carousel */

{#
  module.css only supports a very limited subset of HubL (module_asset_url()
  only — no theme.* access), so the {% set %} calls this file used to have
  here never actually resolved. Fixed colours now come from the
  --theme-*-color custom properties published in theme-overrides.css's :root
  (which does have full theme.* access) instead of interpolating theme
  values directly in this file.
#}

.case-study-carousel {
  padding: var(--space-8, 80px) 0;
}

.case-study-carousel__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.case-study-carousel__controls {
  display: flex;
  gap: var(--space-2, 8px);
}

.case-study-carousel__prev,
.case-study-carousel__next {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(25, 39, 50, 0.15);
  border-radius: var(--radius-pill, 999px);
  color: var(--theme-primary-color, #192732);
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-transform: none;
  width: 40px;
}

.case-study-carousel__prev:hover,
.case-study-carousel__next:hover,
.case-study-carousel__prev:focus-visible,
.case-study-carousel__next:focus-visible {
  background: rgba(25, 39, 50, 0.06);
}

.case-study-carousel__prev:disabled,
.case-study-carousel__next:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.case-study-carousel__track {
  display: flex;
  gap: var(--space-4, 24px);
  margin-top: var(--space-5, 32px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.case-study-carousel__track:focus-visible {
  outline: 2px solid var(--color-pillar-current, currentColor);
  outline-offset: 4px;
}

/* Mockup (ITBuilder_HomePage_D03.pdf) card: full-width photo, then a dark
   navy strip (green sector eyebrow + white client name), then a white body
   with the outcome headline and a solid-green "Read more" button. */

.case-study-carousel__slide {
  background: #fff;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm);
  flex: 0 0 320px;
  overflow: hidden;
  scroll-snap-align: start;
}

.case-study-carousel__image {
  aspect-ratio: 3 / 2;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.case-study-carousel__strip {
  background-color: var(--theme-primary-color);
  padding: var(--space-4, 24px) var(--space-4, 24px) var(--space-3, 16px);
  text-align: center;
}

.case-study-carousel__tag {
  color: var(--theme-visibility-color);
  font-size: 14px;
  font-weight: 600;
}

.case-study-carousel__client {
  color: #fff;
  font-weight: 700;
  margin-top: var(--space-1, 4px);
}

.case-study-carousel__body {
  padding: var(--space-4, 24px);
  text-align: center;
}

.case-study-carousel__headline {
  color: var(--theme-primary-color);
}

/* Sept 2026 fix: squared the corners off (was var(--radius-sm, 4px)) to
   match the sitewide no-radius button convention — same fix as
   hero-photographic__secondary and cta-closer__secondary. */

.case-study-carousel__link {
  background-color: var(--theme-visibility-color);
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  margin-top: var(--space-3, 16px);
  padding: 10px 20px;
  text-decoration: none;
  transition: filter var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.case-study-carousel__link:hover,
.case-study-carousel__link:focus-visible {
  filter: brightness(0.85);
}

/* Sept 2026: evened up with capability-grid.module's "How X shows up"
   arrow-nudge treatment for consistency across every arrow-suffixed CTA
   in the theme (see that module's own comment). Scoped to __link only —
   __prev/__next above render their own arrow as plain text, not this
   arrow-span pattern, and are carousel controls rather than a CTA link.

   Sept 2026 fix: needed display: inline-block on the arrow itself —
   transform is a no-op on a plain inline element; capability-grid's own
   arrow only nudges because its parent (.capability-grid__title) is a
   flex container, which blockifies it automatically. This arrow's
   parent isn't flex, so it needed its own blockifying display value. */

.case-study-carousel__arrow {
  display: inline-block;
  transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.case-study-carousel__link:hover .case-study-carousel__arrow,
.case-study-carousel__link:focus-visible .case-study-carousel__arrow {
  transform: translateX(3px);
}

/* Oct 2026: "fit" mode (cards_per_view setting). Card width is derived from
   the number of cards to show, so exactly that many fill the track with no
   partial card peeking out, and the scrollbar is hidden (the prev/next
   buttons do the paging). Steps down on narrower screens. Slides are flex
   columns so every card is the same height whatever the title length: the
   navy strip absorbs the difference, the white body keeps one height. */

.case-study-carousel--fit-3 { --cards-per-view: 3; }
.case-study-carousel--fit-4 { --cards-per-view: 4; }
.case-study-carousel--fit-5 { --cards-per-view: 5; }

@media (max-width: 1100px) {
  .case-study-carousel--fit-4,
  .case-study-carousel--fit-5 { --cards-per-view: 3; }
}

@media (max-width: 800px) {
  .case-study-carousel--fit { --cards-per-view: 2; }
}

@media (max-width: 520px) {
  .case-study-carousel--fit { --cards-per-view: 1; }
}

.case-study-carousel--fit .case-study-carousel__track {
  -ms-overflow-style: none;
  padding: var(--space-1, 4px) 0 var(--space-2, 8px);
  scrollbar-width: none;
}

.case-study-carousel--fit .case-study-carousel__track::-webkit-scrollbar {
  display: none;
}

.case-study-carousel--fit .case-study-carousel__slide {
  display: flex;
  flex: 0 0 calc((100% - (var(--cards-per-view, 4) - 1) * var(--space-4, 24px)) / var(--cards-per-view, 4));
  flex-direction: column;
}

.case-study-carousel--fit .case-study-carousel__strip {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.case-study-carousel--fit .case-study-carousel__body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
}

.case-study-carousel--fit .case-study-carousel__headline {
  min-height: 4lh;
}

.case-study-carousel--fit .case-study-carousel__link {
  align-self: center;
}

/* Oct 2026 fix: the Insights page's Featured series sits in a dark navy
   .pillar-section--dark band, and the heading was inheriting the theme's
   dark heading colour, so it rendered navy-on-navy and looked missing.
   theme-overrides.css only recolours .pillar-section__heading inside that
   band, not this module's own heading class, so flip it here. */

.pillar-section--dark .case-study-carousel__heading {
  color: #fff;
}