/*
 * Shared qualification landing surface.
 *
 * Rendered by /shared/qualification-landing.mjs. Subject-agnostic: every option,
 * label and background is supplied by the caller. Nothing here hardcodes a
 * subject or a qualification list.
 *
 * Contrast basis (measured against the real background JPEGs, not an assumed
 * flat colour) is recorded in public/shared/backgrounds/CREDITS.md. The scrim
 * alpha below is the value those measurements were taken at - lowering it
 * invalidates the WCAG AA evidence.
 */

.qualification-landing {
  --ql-scrim-top: rgba(4, 8, 16, 0.78);
  --ql-scrim-bottom: rgba(4, 8, 16, 0.86);
  --ql-tile-base: rgba(8, 13, 22, 0.62);
  --ql-tile-tint-strong: 0.38;
  --ql-tile-tint-soft: 0.16;
  --ql-ink: #ffffff;
  --ql-ink-muted: rgba(255, 255, 255, 0.84);
  --ql-focus: #ffffff;
  --ql-motion: 160ms;

  position: relative;
  z-index: 0;
  display: flex;
  min-height: min(100vh, 46rem);
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
  overflow: hidden;
  background-color: #04080f;
  color: var(--ql-ink);
  isolation: isolate;
}

.qualification-landing__image,
.qualification-landing__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qualification-landing__image {
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.qualification-landing__scrim {
  z-index: -1;
  background: linear-gradient(180deg, var(--ql-scrim-top) 0%, var(--ql-scrim-bottom) 100%);
}

.qualification-landing__content {
  width: min(64rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.qualification-landing__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--ql-ink-muted);
  font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qualification-landing__heading {
  margin: 0;
  color: var(--ql-ink);
  font-size: clamp(1.75rem, 6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

.qualification-landing__intro {
  max-width: 46ch;
  margin: 0.75rem auto 0;
  color: var(--ql-ink-muted);
  font-size: clamp(0.95rem, 2.6vw, 1.125rem);
  line-height: 1.6;
}

.qualification-landing__status:empty {
  display: none;
}

.qualification-landing__status:not(:empty) {
  max-width: 46ch;
  margin: 1rem auto 0;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.75rem;
  background: rgba(6, 11, 20, 0.72);
  color: var(--ql-ink);
  font-weight: 600;
}

.qualification-landing__status[data-tone='error']:not(:empty) {
  border-color: rgba(255, 173, 173, 0.72);
}

.qualification-landing__choices {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.qualification-landing__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: clamp(0.75rem, 2vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
}

.qualification-landing__item {
  display: flex;
  min-width: 0;
}

/* Tiles are real <button> / <a> elements in DOM order. */
.qualification-tile {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 5.5rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.9rem, 2.5vw, 1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.58); /* 3.24:1 vs tile interior - WCAG 1.4.11 non-text */
  border-radius: 1rem;
  background:
    linear-gradient(
      155deg,
      rgba(var(--ql-tile-rgb, 148 163 184) / var(--ql-tile-tint-strong)),
      rgba(var(--ql-tile-rgb, 148 163 184) / var(--ql-tile-tint-soft)) 55%
    ),
    var(--ql-tile-base);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 26px rgba(2, 5, 10, 0.42);
  color: var(--ql-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--ql-motion) ease-out,
    border-color var(--ql-motion) ease-out,
    box-shadow var(--ql-motion) ease-out;
}

.qualification-tile__label {
  display: block;
  color: var(--ql-ink);
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.qualification-tile__meta {
  display: block;
  margin-top: 0.35rem;
  color: var(--ql-ink-muted);
  font-size: clamp(0.82rem, 2.2vw, 0.95rem);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.qualification-tile:hover:not([aria-disabled='true']) {
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

/* Focus ring survives the glass: white ring plus a dark halo so it reads on
   every tile hue and on any underlying image region. */
.qualification-tile:focus-visible {
  outline: 3px solid var(--ql-focus);
  outline-offset: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 7px rgba(3, 7, 14, 0.92);
}

.qualification-tile[aria-disabled='true'] {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.72;
}

/* Hue rotation. Colour is never the only signal - every tile carries its own
   text label, and the caller may override with option.hue. */
.qualification-tile[data-hue='1'] { --ql-tile-rgb: 56 189 248; }
.qualification-tile[data-hue='2'] { --ql-tile-rgb: 167 139 250; }
.qualification-tile[data-hue='3'] { --ql-tile-rgb: 52 211 153; }
.qualification-tile[data-hue='4'] { --ql-tile-rgb: 251 146 60; }
.qualification-tile[data-hue='5'] { --ql-tile-rgb: 244 114 182; }
.qualification-tile[data-hue='6'] { --ql-tile-rgb: 250 204 21; }
.qualification-tile[data-hue='7'] { --ql-tile-rgb: 96 165 250; }
.qualification-tile[data-hue='8'] { --ql-tile-rgb: 45 212 191; }

@media (max-width: 22.5rem) {
  .qualification-landing {
    padding-inline: 0.75rem;
  }

  .qualification-landing__list {
    grid-template-columns: 1fr;
  }
}

/* Matches the existing repository treatment in public/leaderboard/leaderboard.css. */
@media (prefers-reduced-transparency: reduce) {
  .qualification-landing__scrim {
    background: rgba(4, 8, 16, 0.94);
  }

  .qualification-tile {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      linear-gradient(155deg, rgba(var(--ql-tile-rgb, 148 163 184) / 0.38), rgba(var(--ql-tile-rgb, 148 163 184) / 0.16) 55%),
      #080d16;
  }

  .qualification-landing__status:not(:empty) {
    background: #060b14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qualification-tile {
    transition: none;
  }

  .qualification-tile:hover:not([aria-disabled='true']) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .qualification-tile {
    border: 2px solid ButtonBorder;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: ButtonFace;
    color: ButtonText;
  }

  .qualification-tile__label,
  .qualification-tile__meta {
    color: ButtonText;
  }

  .qualification-tile:focus-visible {
    outline: 3px solid Highlight;
  }
}