/* Shared service cards (live .bt-content-section25-card, ANIMATIONS #10). Used by /services and the homepage. */
@layer components {
  .service-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
  }
  @media (width <= 62rem) { .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width <= 30rem) { .service-cards { grid-template-columns: minmax(0, 1fr); } }

  .service-card {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    row-gap: var(--space-xs);
    min-block-size: 30rem;
    padding: var(--space-s);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text-light);
  }
  @media (width <= 30rem) { .service-card { min-block-size: 12.5rem; } }
  .service-card::before,
  .service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: 0.4s ease-in;
  }
  .service-card::before { background: rgb(0 0 0 / 0.4); }
  .service-card::after { background: linear-gradient(340deg, var(--primary-trans-60) 1%, transparent 30%, transparent 100%); }

  .service-card__title { position: static; font-size: var(--h4); color: var(--text-light); }
  .service-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
  .service-card__title a:focus-visible { outline: none; }
  .service-card:has(a:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 2px; }

  .service-card__text {
    color: var(--text-light-muted);
    opacity: 0;
    transform: translateY(1rem);
    transition: 0.4s;
  }
  .service-card__img { position: absolute; inset: 0; z-index: -2; transition: transform 0.7s; }
  .service-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .service-card__icon {
    flex: none;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-start: auto;
    margin-inline-start: auto;
    color: var(--primary);
    opacity: 0;
    transition: 0.4s;
  }

  .service-card:focus-within .service-card__text { opacity: 1; transform: none; }
  .service-card:focus-within .service-card__icon { opacity: 1; }
  .service-card:focus-within::before { background: rgb(22 21 30 / 0.9); }
  .service-card:focus-within::after { opacity: 0; }
  @media (hover: hover) {
    .service-card:hover .service-card__text { opacity: 1; transform: none; }
    .service-card:hover .service-card__icon { opacity: 1; }
    .service-card:hover .service-card__img { transform: scale(1.1); }
    .service-card:hover::before { background: rgb(22 21 30 / 0.9); }
    .service-card:hover::after { opacity: 0; }
  }
}