/* assets/css/components/related-services.css
 * @layer components — Related Services grid + image card
 *
 * The "Related Services" surface (Pencil design): a responsive grid of
 * image cards (photo media zone + title + arrow). Used at the bottom of
 * sub-industry pages and for the sub-industry cards on the parent industry
 * page. Card extends the .card framework (shell, hover lift from card.css);
 * only the media zone + title/arrow row are variant-specific.
 *
 * Desktop: 3-up grid, image-top cards.
 * Mobile (<=40em): compact horizontal rows — square thumb left, title right
 * (wraps gracefully), arrow far right — mirroring the Pencil mobile design.
 */

@layer components {

  .related-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  @media (max-width: 64em) {
    .related-services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40em) {
    .related-services-grid {
      grid-template-columns: 1fr;
      gap: var(--card-gap);
    }
  }

  /* --cards: the parent-industry variant renders inside the narrower content
     column (2-col page layout), so cap at 2 columns to avoid cramped cards. */
  .related-services-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 40em) {
    .related-services-grid--cards {
      grid-template-columns: 1fr;
    }
  }

  /* View-More reveal wrapper — transparent so the card flows in the grid;
     hidden items drop out entirely. */
  .related-services-grid__item {
    display: contents;
  }

  .related-services-grid__item.is-hidden[hidden] {
    display: none;
  }

  /* ── Card ── */
  .card-related-service {
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    color: var(--text-main);
  }

  .card-related-service__media {
    display: block;
    block-size: 10rem;
    overflow: hidden;
    background-color: var(--surface-tinted);
  }

  .card-related-service__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--card-transition);
  }

  @media (hover: hover) {
    .card-related-service:hover .card-related-service__media img {
      transform: scale(1.04);
    }
  }

  /* Placeholder when no image — brand tint so the grid stays uniform. */
  .card-related-service__media--placeholder {
    background-color: var(--primary-ultra-light);
  }

  .card-related-service__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--card-padding-compact);
  }

  .card-related-service__title {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-wrap: balance;
    margin: 0;
  }

  .card-related-service__arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition:
      color     var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-default);
  }

  @media (hover: hover) {
    .card-related-service:hover .card-related-service__title {
      color: var(--primary);
    }
    .card-related-service:hover .card-related-service__arrow {
      color: var(--primary);
      transform: translateX(var(--space-3xs));
    }
  }

  .card-related-service:active .card-related-service__title,
  .card-related-service:active .card-related-service__arrow {
    color: var(--primary);
  }

  /* ── Mobile compact rows ── square thumb left, title right, arrow far right */
  @media (max-width: 40em) {
    .card-related-service {
      flex-direction: row;
      align-items: center;
      gap: var(--space-s);
      padding: var(--space-2xs);
    }

    .card-related-service__media {
      flex-shrink: 0;
      inline-size: 4.5rem;
      block-size: 4.5rem;
      border-radius: var(--radius-s);
    }

    .card-related-service__body {
      flex: 1;
      min-inline-size: 0;
      padding-inline: var(--space-2xs) var(--space-s);
      padding-block: 0;
    }

    .card-related-service__title {
      font-size: var(--text-s);
    }
  }

  /* ── View More button ── mirrors the investor doc-list control. */
  .related-services__view-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    inline-size: fit-content;
    margin-block-start: var(--container-gap);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-m);
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--primary);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  @media (hover: hover) {
    .related-services__view-more:hover {
      background: var(--primary-ultra-light);
      border-color: var(--primary-light);
    }
  }

  .related-services__view-more:active {
    background: var(--primary-ultra-light);
  }

  .related-services__view-more:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .related-services__view-more-icon {
    flex-shrink: 0;
    color: currentColor;
  }

}