/* assets/css/components/content-hub.css
 * @layer components — shared archive layout for every editorial CPT.
 *
 * Consumed by: archive.php (Insights), archive-event.php,
 * archive-resource.php, archive-case-study.php, archive-job-opening.php.
 *
 * Structure mirrors the homepage Insights Hub (home.css) but scoped to
 * .content-hub so archive pages don't need to load home.css. The hero
 * container query and per-type polish rules are duplicated here
 * deliberately — each file is the single source of truth for its
 * surface (homepage hub vs. archive hub).
 */

@layer components {

  .content-hub__row-hero {
    display: grid;
    grid-template-columns: 1fr;
    container-type: inline-size;
    container-name: hub-hero;
  }

  @container hub-hero (min-width: 760px) {
    /* Flip any card placed here into horizontal layout. Framework slots
       apply to blog / event / case-study / resource / job uniformly.
       Specificity note: `.card.card-event` rule in page-events.css
       (0,2,0) enforces flex-direction:column globally. We need
       0,3,0+ here so our row-direction wins without !important. Doubling
       the wrapper class gets us there while keeping the selector
       semantically scoped to the hero. */
    .content-hub__row-hero.content-hub__row-hero .card {
      flex-direction: row;
      align-items: stretch;
    }

    .content-hub__row-hero .card > .card__media,
    .content-hub__row-hero .card > .card-event__image,
    .content-hub__row-hero .card > .card-blog__media,
    .content-hub__row-hero .card > .card-case-study__media,
    .content-hub__row-hero .card > .card-resource__cover-image {
      flex: 0 0 40%;
      inline-size: 40%;
      aspect-ratio: auto;
      min-block-size: 100%;
      align-self: stretch;
    }

    .content-hub__row-hero .card-event > .card-event__id-bar {
      flex: 0 0 auto;
    }

    .content-hub__row-hero .card > .card__body,
    .content-hub__row-hero .card > [class*="card-"] > .card__body,
    .content-hub__row-hero .card > .card-event__body,
    .content-hub__row-hero .card > .card-blog__body,
    .content-hub__row-hero .card > .card-case-study__body,
    .content-hub__row-hero .card > .card-resource__body,
    .content-hub__row-hero .card > .card-job__body {
      flex: 1 1 auto;
      min-inline-size: 0;
      padding: var(--space-l) var(--space-xl);
      justify-content: center;
      gap: var(--space-s);
    }

    .content-hub__row-hero .card-event > .card-event__image {
      display: block;
      flex: 0 0 40%;
      inline-size: 40%;
      align-self: stretch;
      order: -1;
      overflow: hidden;
    }

    .content-hub__row-hero .card-event > .card-event__image img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      display: block;
    }

    .content-hub__row-hero .card .card__title,
    .content-hub__row-hero .card .card-event__title {
      font-size: var(--heading-s);
      line-height: var(--leading-tight);
    }

    .content-hub__row-hero .card .card__text,
    .content-hub__row-hero .card .card-event__excerpt {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .content-hub__row-hero .card .card__footer {
      margin-block-start: 0;
    }
  }

  .content-hub__row-medium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--content-gap-wide);
    align-items: stretch;
  }

  .content-hub__row-medium .card {
    --card-padding: var(--card-padding-compact);
    --card-media-aspect-ratio: var(--ratio-landscape);
  }

  .content-hub__row-medium .card .card__body {
    gap: var(--space-xs);
    padding: var(--card-padding);
  }

  .content-hub__row-medium .card .card__text,
  .content-hub__row-medium .card .card-event__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .content-hub__row-medium .card,
  .content-hub__row-rest .card {
    block-size: 100%;
  }

  .content-hub__row-medium .card .card__body,
  .content-hub__row-rest .card .card__body,
  .content-hub__row-medium .card-event__body,
  .content-hub__row-rest .card-event__body {
    flex: 1 1 auto;
  }

  /* Footer pinned to the bottom so the CTA aligns across every card in
     a row even when excerpt length differs. margin-block-start: auto is
     the one exception to the "no margin for rhythm" rule (CLAUDE.md). */
  .content-hub__row-medium .card__footer,
  .content-hub__row-rest .card__footer {
    margin-block-start: auto;
  }

  .content-hub__row-medium .card-event__reps,
  .content-hub__row-medium .card-event__avatar-popover,
  .content-hub__row-medium .card-case-study__representatives,
  .content-hub__row-compact .card-event__reps,
  .content-hub__row-compact .card-event__avatar-popover,
  .content-hub__row-compact .card-case-study__representatives,
  .content-hub__row-rest .card-event__reps,
  .content-hub__row-rest .card-event__avatar-popover,
  .content-hub__row-rest .card-case-study__representatives {
    display: none;
  }

  .content-hub__row-medium .card-event,
  .content-hub__row-rest .card-event {
    flex-direction: column;
  }

  .content-hub__row-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--content-gap);
    align-items: stretch;
  }

  .content-hub__row-compact .card {
    --card-padding: var(--card-padding-compact);
  }

  .content-hub__row-compact .card .card__body {
    gap: var(--space-3xs);
    padding: var(--space-s) var(--space-m);
  }

  .content-hub__row-compact .card .card__media,
  .content-hub__row-compact .card .card-event__image {
    display: none;
  }

  .content-hub__row-compact .card .card__title,
  .content-hub__row-compact .card .card-event__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-m);
    line-height: var(--leading-tight);
  }

  .content-hub__row-compact .card .card__text,
  .content-hub__row-compact .card .card-event__excerpt {
    display: none;
  }

  .content-hub__row-rest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--content-gap-wide);
    align-items: stretch;
  }

  .content-hub__row-rest .card {
    --card-padding: var(--card-padding-compact);
    --card-media-aspect-ratio: var(--ratio-landscape);
  }

  .content-hub__row-rest .card .card__body {
    gap: var(--space-xs);
    padding: var(--card-padding);
  }

  @media (max-width: 64em) {
    .content-hub__row-medium,
    .content-hub__row-rest    { grid-template-columns: repeat(2, 1fr); }
    .content-hub__row-compact { grid-template-columns: 1fr; }
  }

  @media (max-width: 48em) {
    .content-hub__row-medium,
    .content-hub__row-rest,
    .content-hub__row-compact { grid-template-columns: 1fr; }
  }

}