/* جلسة — Category poster card (4:5 contract).
   Implements JALSA_CATEGORY_POSTER master spec §12 card behavior:
   the poster art is a 4:5 image (title, dots baked in-image are NOT re-added
   here); the website overlays the progress percentage at the top-inline-start
   corner and prints the category title as text below the art.
   Rounded corners + card frame are applied here in CSS, never in the image. */
:root {
  --catcard-radius: 20px;
  --catcard-surface: #17243A;
  --catcard-night: #0C1322;
  --catcard-border: rgba(255, 255, 255, .09);
  --catcard-text: #F3F7FC;
  --catcard-dim: #9DAEC6;
  --catcard-dot-red: #E83D3E;
  --catcard-dot-blue: #1DB0E6;
  --catcard-dot-yellow: #FBCF3E;
}

.cat-poster-card {
  --accent: #D05531;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--catcard-radius);
  border: 1px solid var(--catcard-border);
  background: var(--catcard-surface);
  overflow: hidden;
  text-align: center;
  transition: transform .16s cubic-bezier(.34, 1.4, .64, 1), border-color .18s, box-shadow .18s;
}
.cat-poster-card:hover,
.cat-poster-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 16px 34px rgba(6, 10, 20, .45);
  outline: none;
}

/* 4:5 poster art — exact aspect ratio from the generation contract. Until the
   real 4:5 artwork is generated, the accent colour carries the card so the
   grid still reads as a finished poster wall rather than empty tiles. */
.cat-poster-art {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(115% 65% at 50% 0%, rgba(255, 255, 255, .16), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 58%, transparent) 0%, transparent 62%),
    var(--catcard-night);
  overflow: hidden;
}
.cat-poster-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Progress overlay — top inline-start corner (visually top-left in the
   contract mock). This is a website overlay, never part of the image. */
.cat-poster-progress {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  min-width: 42px;
  padding: 4px 9px;
  border-radius: 999px;
  font: 700 12.5px/1 'Rubik', 'Tajawal', sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(5, 8, 22, .58);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  letter-spacing: .01em;
}
.cat-poster-progress[data-complete="true"] {
  background: color-mix(in srgb, var(--accent) 72%, #050816);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Placeholder shown until the real 4:5 poster is generated. Carries the same
   three Jalsa signature dots the finished poster will bake in, so cards read
   as one family even while artwork is pending. */
.cat-poster-art.is-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 24px);
  opacity: .4;
}
.cat-poster-dots {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.cat-poster-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cat-poster-dots span:nth-child(1) { background: var(--catcard-dot-red); }
.cat-poster-dots span:nth-child(2) { background: var(--catcard-dot-blue); }
.cat-poster-dots span:nth-child(3) { background: var(--catcard-dot-yellow); }

.cat-poster-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(44px, 9vw, 72px);
  opacity: .9;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .4));
}

/* Category title — website text below the art (contract §12). */
.cat-poster-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cat-poster-name {
  margin: 0;
  font: 800 15px/1.3 'Tajawal', sans-serif;
  color: var(--catcard-text);
}
.cat-poster-group {
  margin: 0;
  font: 600 11.5px/1.3 'Tajawal', sans-serif;
  color: var(--catcard-dim);
  letter-spacing: .02em;
}

/* Selection state for the Challenge Arena picker. */
.cat-poster-card[aria-pressed="true"],
.cat-poster-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 16px 34px rgba(6, 10, 20, .45);
}
.cat-poster-check {
  position: absolute;
  bottom: calc(100% - 4px);
  inset-inline-end: 10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.cat-poster-card[aria-pressed="true"] .cat-poster-check,
.cat-poster-card.is-selected .cat-poster-check { display: grid; }

@media (prefers-reduced-motion: reduce) {
  .cat-poster-card { transition: none; }
}