@layer components {
  .nh-certs {
    container-type: inline-size;
    container-name: nh-certs;
  }

  /* Two certs (ISO 9001 + ISO 22000) since FSC/ISCC+ are hidden — keep them
     centred rather than stranded in a wide 4-up grid. Widen back to repeat(4,…)
     when the green certs return. */
  .nh-certs__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
    margin-top: var(--space-3xl);
    max-width: 64rem;
    margin-inline: auto;
  }

  .nh-certs__item {
    display: block;
    text-align: center;
    padding: var(--space-l) var(--space-s);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-l);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  /* Each card links to its certificate PDF — interactive, so it lifts on hover. */
  .nh-certs__item:hover {
    transform: translateY(-3px);
  }

  .nh-certs__item:focus-visible {
    outline: 2px solid var(--success);
    outline-offset: 3px;
  }

  .nh-certs__item:hover .nh-certs__icon-wrap {
    background: var(--success);
  }

  .nh-certs__item:hover .nh-certs__icon-wrap .icon {
    color: var(--text-body);
  }

  /* "Zertifikat ansehen (PDF)" affordance at the card foot. */
  .nh-certs__doc {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-top: var(--space-m);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--success);
  }

  .nh-certs__doc .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .nh-certs__item:hover .nh-certs__doc {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Circular icon wrapper — success-tinted disc, fills on hover */
  .nh-certs__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: var(--radius-full);
    background: var(--success-10);
    margin-bottom: var(--space-m);
    transition: background var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
  }

  .nh-certs__icon-wrap .icon {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--success);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .nh-certs__name {
    font-size: var(--text-ml);
    font-weight: var(--weight-semibold);
    color: var(--text-title);
    margin-bottom: var(--space-3xs);
  }

  .nh-certs__full {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: var(--space-s);
  }

  .nh-certs__desc {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: 1.6;
  }

  /* (max-width 968/768 repeat(3)/repeat(2) rules dropped — base is already a
     centred 2-up while FSC/ISCC+ are hidden. Restore them with repeat(4,…).) */

  @container nh-certs (max-width: 480px) {
    .nh-certs__grid { grid-template-columns: 1fr; }
    .nh-certs__item { padding: var(--space-l) var(--space-m); }
    .nh-certs__icon-wrap { width: 4rem; height: 4rem; }
    .nh-certs__icon-wrap .icon { width: 1.8rem; height: 1.8rem; }
  }
}