/* ==========================================================================
   Case Study Hero component sheet
   Shared grid/table styles live in sheet.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant card wrappers — background/page fill, full border, 16px radius
   -------------------------------------------------------------------------- */
.hero-variant-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Case study hero — card atom
   background/card, border/default, radius/medium
   Desktop/tablet: horizontal. Mobile: vertical.
   -------------------------------------------------------------------------- */
.case-study-hero {
  display: flex;
  border-radius: var(--radius-md);
  background: var(--background-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  pointer-events: none;
}

.case-study-hero--desktop {
  flex-direction: row;
  width: 100%;
  min-height: 360px;
}

.case-study-hero--tablet {
  flex-direction: row;
  width: 100%;
  min-height: 300px;
}

.case-study-hero--mobile {
  flex-direction: column;
  width: 343px;
}

/* --------------------------------------------------------------------------
   Media panel — image placeholder
   -------------------------------------------------------------------------- */
.case-study-hero__media {
  flex-shrink: 0;
  background: var(--background-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-study-hero--desktop .case-study-hero__media {
  width: 50%;
  aspect-ratio: 4 / 3;
}

.case-study-hero--tablet .case-study-hero__media {
  width: 50%;
  aspect-ratio: 4 / 3;
}

.case-study-hero--mobile .case-study-hero__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Media block — fill the media panel, no standalone border/radius
   -------------------------------------------------------------------------- */
.case-study-hero__media .media-block {
  width: 100%;
  align-self: stretch;
  margin: 0;
}

.case-study-hero__media .media-block__image {
  flex: 1;
  width: 100%;
  aspect-ratio: unset;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Copy panel
   -------------------------------------------------------------------------- */
.case-study-hero__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.case-study-hero--desktop .case-study-hero__copy {
  padding: 32px var(--spacing-md);
  gap: var(--spacing-sm);
}

.case-study-hero--tablet .case-study-hero__copy,
.case-study-hero--mobile .case-study-hero__copy {
  padding: var(--spacing-md) var(--spacing-sm);
  gap: var(--spacing-sm);
}

.case-study-hero--mobile .case-study-hero__copy {
  gap: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Hero copy — top block (title + outcome)
   -------------------------------------------------------------------------- */
.case-study-hero__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.case-study-hero__title {
  margin: 0;
  font-family: var(--type-family-semibold), system-ui, sans-serif;
  font-weight: 400;
  line-height: var(--type-heading-lg-line-height);
  color: var(--text-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.case-study-hero--desktop .case-study-hero__title {
  font-size: var(--type-heading-lg-size);
}

.case-study-hero--tablet .case-study-hero__title,
.case-study-hero--mobile .case-study-hero__title {
  font-size: var(--type-heading-lg-size);
  line-height: var(--type-heading-lg-line-height);
}

.case-study-hero__outcome {
  margin: 0;
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Bottom — role / meta line
   -------------------------------------------------------------------------- */
.case-study-hero__bottom {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
}

.case-study-hero__role {
  margin: 0;
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--text-info);
}

/* --------------------------------------------------------------------------
   Responsive — collapse desktop hero to vertical at ≤992px (sidebar present)
   then at ≤768px regardless of modifier class
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .case-study-hero--desktop {
    flex-direction: column;
    min-height: unset;
  }

  .case-study-hero--desktop .case-study-hero__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .case-study-hero--desktop .case-study-hero__copy {
    padding: var(--spacing-md) var(--spacing-sm);
    gap: var(--spacing-md);
  }

  .case-study-hero--desktop .case-study-hero__title {
    font-size: var(--type-heading-lg-size);
    line-height: var(--type-heading-lg-line-height);
  }
}

@media (max-width: 768px) {
  .case-study-hero--desktop,
  .case-study-hero--tablet {
    flex-direction: column;
    width: auto;
    min-height: unset;
  }

  .case-study-hero--desktop .case-study-hero__media,
  .case-study-hero--tablet .case-study-hero__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .case-study-hero--desktop .case-study-hero__copy,
  .case-study-hero--tablet .case-study-hero__copy {
    padding: var(--spacing-md) var(--spacing-sm);
    gap: var(--spacing-md);
  }

  .case-study-hero--desktop .case-study-hero__title {
    font-size: var(--type-heading-lg-size);
  }
}