/* itbuilder/featured-case-study */

{#
  Sept 2026 fix (see module.html header comment): this now sources from a
  blog post, not a "case_studies" HubDB row, so two rules tied only to
  fields a blog post doesn't have were removed — .featured-case-study__logo
  (client_logo image) and .featured-case-study__tag--pillar (the
  multi-value pillar_tags loop; the single derived category tag now reuses
  the plain .featured-case-study__tag instead) — along with
  .featured-case-study__quote cite (no contact_name/contact_role on a blog
  post). .featured-case-study__quote itself is untouched: it now wraps
  post.post_summary instead of a literal quote field, same pull-quote look.
#}

{% set primary_color = theme.global_colors.primary.color %}

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

/* Single (quote-led) variant: the layout wrapper is just the card itself,
   centred, no photo. */

.featured-case-study__layout {
  margin: 0 auto;
  max-width: 800px;
}

.featured-case-study__card {
  background: #fff;
  border-radius: 0;
  box-shadow: var(--shadow-md);
  padding: var(--space-5, 32px) var(--space-6, 48px);
}

.featured-case-study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 16px);
}

.featured-case-study__tag {
  background: rgba(25, 39, 50, 0.06);
  border-radius: var(--radius-pill, 999px);
  font-size: 14px;
  padding: 2px var(--space-2, 8px);
}

.featured-case-study__headline {
  font-size: 24px;
  font-weight: 700;
}

/* Sept 2026 fix (ITBuilder_OutcomePillarTemplate_D01.pdf "Case study"
   section): the mockup's pull-quote is large italic accent-coloured text —
   this used to only tint the border-left and leave the quote text itself
   at the default body colour. blockquote already inherits the sitewide
   editorial-serif font-family (theme-overrides.css §"Editorial serif"),
   so only the italic style + text colour + size need adding here. */

.featured-case-study__quote {
  border-left: 3px solid var(--color-pillar-current, );
  color: var(--color-pillar-current, );
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.4;
  margin: var(--space-4, 24px) 0;
  padding-left: var(--space-4, 24px);
}

.featured-case-study__link {
  background-color: var(--color-pillar-current, );
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  padding: 10px 20px;
  text-decoration: none;
  transition: filter var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.featured-case-study__link:hover,
.featured-case-study__link:focus-visible {
  filter: brightness(0.85);
  text-decoration: none;
}

/* 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).

   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 (.featured-case-study__link) is inline-block, not flex, so the
   arrow span itself needed its own blockifying display value. */

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

.featured-case-study__link:hover .featured-case-study__arrow,
.featured-case-study__link:focus-visible .featured-case-study__arrow {
  transform: translateX(3px);
}

.featured-case-study__empty {
  color: rgba(25, 39, 50, 0.5);
  font-style: italic;
  text-align: center;
}

/* Side-by-side variant: real photo in one column, the white card in the
   other — see module.html header comment for why the photo element only
   renders in this variant. */

.featured-case-study--side-by-side .featured-case-study__layout {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  max-width: 1000px;
}

.featured-case-study--side-by-side .featured-case-study__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.featured-case-study--side-by-side .featured-case-study__media {
  min-height: 240px;
  overflow: hidden;
  position: relative;
}

.featured-case-study__photo {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .featured-case-study--side-by-side .featured-case-study__layout {
    grid-template-columns: 1fr 1fr;
  }
}