/* IM S5 Projects Grid (`im-s5-projects-grid`). Loaded via root-widgets.css. */

  /*
   * IM S5 Projects Grid (`im-s5-projects-grid`) — case study cards inside `s5-brand-section` only.
   * (Legacy case studies archive uses `case-study-listings.css` / `case-studies-archive.css`.)
   */
  .s5-projects-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  @media (min-width: 600px) {
    .s5-projects-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
  }
  
  @media (min-width: 1024px) {
    .s5-projects-grid__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }
  }
  
  .s5-projects-grid__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Anchors the stretched read-link below, which makes the whole card clickable. */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--s5-color-white);
    border: 1px solid var(--s5-color-gray-200);
    color: var(--s5-text-primary);
    text-decoration: none;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.08),
      0 0 6px rgba(0, 0, 0, 0.16);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  
  .s5-projects-grid__card:hover {
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.10),
      0 0 8px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
  }
  
  .s5-projects-grid__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--s5-color-gray-200);
  }
  
  .s5-projects-grid__media img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
  
  .s5-projects-grid__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
    flex: 1 1 auto;
  }

  @media (min-width: 768px) {
    .s5-projects-grid__body {
      padding: 32px 28px;
    }
  }

  @media (min-width: 1024px) {
    .s5-projects-grid__body {
      padding: 40px;
    }
  }
  
  .s5-projects-grid__title {
    font-size: clamp(1.125rem, 3.6vw, 1.375rem);
    font-weight: 400;
    line-height: 1.2;
  }

  @media (min-width: 600px) {
    .s5-projects-grid__title {
      font-size: clamp(1.375rem, 3.2vw, 1.625rem);
      line-height: 1.15;
    }
  }
  .s5-projects-grid__read-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    color: var(--s5-color-gray-900);
  }

  /* The card lifts on hover, which reads as clickable — so make the whole card the click target
     rather than just these words. Stretching the existing link keeps it to one anchor, so the card
     is still announced once and reached with a single tab stop. */
  .s5-projects-grid__read-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* With the link stretched, its own focus ring would outline only the words. Put the ring on the
     card so keyboard users see what they are actually activating. */
  .s5-projects-grid__card:has(.s5-projects-grid__read-link:focus-visible) {
    outline: 2px solid var(--s5-focus-ring, currentColor);
    outline-offset: 2px;
  }

  .s5-projects-grid__read-link:focus-visible {
    outline: none;
  }
  
  .s5-projects-grid__read-link i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
  }
  
  .s5-projects-grid__excerpt {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--s5-text-secondary);
  }