/* Photo explanations share LIFA's type hierarchy. Register before editorial
   layers so legacy paragraph and frame rules cannot flatten this hierarchy. */
@layer lifa-image-captions {
  :root {
    --lifa-caption-ink: var(--lifa-color-primary, #0F1E36);
    --lifa-caption-copy: #43536a;
    --lifa-caption-rule: var(--lifa-color-accent, #EED47D);
    --lifa-caption-space: clamp(18px, 1.8vw, 24px);
  }

  /* Supporting photographs: complete scene, then a clearly attached caption. */
  main :is(.compact-visual-brief__figure, .value-evidence__media,
    .tool-decision-media, .article-inline-image.image-frame):has(> figcaption) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  main .compact-visual-brief__figure {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  main :is(.compact-visual-brief__figure, .value-evidence__media,
    .tool-decision-media, .article-inline-image.image-frame) > figcaption {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    align-content: start !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: var(--lifa-caption-space) !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 2px solid var(--lifa-caption-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    transform: none !important;
  }

  /* Caption prose is independent of the surrounding section's reading size. */
  main figcaption,
  main figcaption > :is(p, span, small),
  main :is(.media-card:has(> :is(img, picture)) > div, .process-feature-content) > p {
    color: var(--lifa-caption-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-body, 'Open Sans', Arial, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-wrap: pretty;
  }

  main figcaption > :is(p, span, small),
  main :is(.media-card:has(> :is(img, picture)) > div, .process-feature-content) > p {
    display: block !important;
    min-width: 0 !important;
    max-width: 68ch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  main .compact-visual-brief__figure > figcaption > span:first-child,
  main :is(.media-card:has(> :is(img, picture)) > div, .process-feature-content) > :is(h3, h4),
  main .founder-portrait-card > figcaption > strong {
    display: block !important;
    color: var(--lifa-caption-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-display, 'Prata', Georgia, serif) !important;
    font-size: clamp(20px, 1.5vw, 23px) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: -.015em !important;
    text-transform: none !important;
    text-wrap: pretty;
    margin: 0 !important;
  }

  /* Short evidence categories stay distinct from their longer explanations. */
  main :is(.value-evidence__media, .tool-decision-media,
    .article-inline-image.image-frame, .founder-portrait-card) > figcaption > span:first-child {
    color: var(--lifa-color-support, #245B5A) !important;
    font-family: var(--font-ui, 'Montserrat', Arial, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    width: auto !important;
    text-align: left !important;
  }

  /* Open image/text panels retain their individual layouts and destinations. */
  main :is(.media-card, .process-feature-card):has(> :is(img, picture)):has(> div) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  main :is(.media-card:has(> :is(img, picture)) > div, .process-feature-content) {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 2px solid var(--lifa-caption-rule) !important;
  }

  main .process-feature-card > .process-feature-content {
    padding: var(--lifa-caption-space) !important;
    background: #fff !important;
  }

  main .process-feature-content > :is(.process-feature-tag, .eyebrow),
  main .media-card:has(> :is(img, picture)) > div > :is(.eyebrow, .card-link) {
    color: var(--lifa-caption-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-ui, 'Montserrat', Arial, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
  }

  main .media-card:has(> :is(img, picture)) > div > .card-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: start !important;
    column-gap: 8px !important;
    font-size: 14px !important;
  }

  main .media-card:has(> :is(img, picture)) > div > .card-link::after {
    position: static !important;
  }

  /* Explanatory cutouts belong to the page, including their reading line. */
  main figure[class]:has(img[data-visual-role="conceptual-illustration"]) > figcaption,
  main .guide-concept-visual > figcaption,
  main .search-decision-figure > figcaption {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  main .founder-portrait-card > figcaption {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: var(--lifa-caption-space) !important;
    background: #fff !important;
    border-top: 2px solid var(--lifa-caption-rule) !important;
  }
  main .founder-portrait-card > figcaption > :is(span, strong, small) {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  main .section-dark .media-card:has(> :is(img, picture)) > div > :is(h3, h4) {
    color: #fff !important;
  }
  main .section-dark .media-card:has(> :is(img, picture)) > div > p {
    color: #e3e8ee !important;
  }
}