/* ==========================================================================
   privileges: grid of privilege categories (photo cards).
   Computer: the card shows the name; on hover (or keyboard focus) the
   "Learn more" button slides in. Phone and tablet (no hover): the button
   is always visible.
   Cards are built from js/data/privileges.en.js by js/modules/privileges.js
   ========================================================================== */

.privileges {
  padding-block: var(--section-pad);
  background-color: var(--bg-page);
}

.privileges__title {
  max-width: 16ch;
}

.privileges__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.privileges__card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--bg-darker);
  color: var(--text-on-dark);
  isolation: isolate;
}

.privileges__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}

/* dark veil: the light texts must stay readable on bright photos */
.privileges__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 28, 30, 0.6), rgba(0, 28, 30, 0) 60%),
    rgba(0, 28, 30, 0.5);
  transition: background-color 600ms var(--ease-out);
}

.privileges__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1.5rem var(--gutter);
  text-align: center;
}

.privileges__index {
  color: var(--color-ivory);
  opacity: 0.75;
}

.privileges__name {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-ivory);
}

/* the button: a grid row that opens from 0 to its full height */
.privileges__more {
  display: grid;
  grid-template-rows: 1fr;
}

.privileges__more-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  min-height: 0;
  overflow: hidden;
}

.privileges__link {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem; /* room for the focus outline */
}

/* the button sits on a photo: a bit lower than the default */
.privileges__link .button__label {
  min-height: 2.75rem;
}

@media (min-width: 600px) {
  .privileges__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privileges__card {
    aspect-ratio: 4 / 5;
  }
}

/* six categories: two rows of three */
@media (min-width: 1100px) {
  .privileges__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .privileges__card {
    aspect-ratio: 5 / 4;
  }
}

/* Mouse: the button appears on hover or keyboard focus */
@media (hover: hover) and (pointer: fine) {
  .privileges__more {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
      grid-template-rows 600ms var(--ease-out),
      opacity 400ms var(--ease-out),
      transform 600ms var(--ease-out);
  }

  .privileges__card:hover .privileges__more,
  .privileges__card:focus-within .privileges__more {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    transition-delay: 0s, 120ms, 0s;
  }

  .privileges__card:hover .privileges__image,
  .privileges__card:focus-within .privileges__image {
    transform: scale(1.08);
  }

  .privileges__card:hover::after,
  .privileges__card:focus-within::after {
    background-color: rgba(0, 28, 30, 0.66);
  }
}

@media (prefers-reduced-motion: reduce) {
  .privileges__image,
  .privileges__card::after,
  .privileges__more {
    transition: none;
  }
}