/* ==========================================================
   CASES — grid of 20 case cards, sits under the hero
   Add this file after style.css:
   <link rel="stylesheet" href="cases.css">
   ========================================================== */

.cases {
  position: relative;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
  color: #eee;
  /* the slightly red, "tough" gradient: near-black base with dark red
     glows bleeding in from the corners */
  background:
    radial-gradient(70% 38% at 100% 100%, rgba(140, 18, 18, 0.32), transparent 70%),
    radial-gradient(60% 30% at 0% 62%,  rgba(110, 14, 14, 0.22), transparent 70%),
    radial-gradient(60% 26% at 100% 18%, rgba(100, 12, 12, 0.16), transparent 70%),
    linear-gradient(180deg, #0c0c0f 0%, #120a0c 55%, #1a0b0c 100%);
}

.cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 32px);
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 640px)  { .cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cases__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Card ---------- */
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #1b1d22;
  border: 1px solid #2c2f36;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.case:hover,
.case:focus-within {
  border-color: #d63a2a;
  box-shadow: 0 0 34px rgba(190, 30, 20, 0.28);
}

.case__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0d0d10;
  overflow: hidden;
}
.case__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__num {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 7px 12px 6px;
  background: rgba(10, 10, 12, 0.88);
  color: #efe6d4;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: 0.22em;
  line-height: 1;
}

.case__body {
  padding: clamp(18px, 4.5vw, 30px) clamp(18px, 5.6vw, 40px) clamp(20px, 5vw, 34px);
}
.case__title {
  margin: 0 0 10px;
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 700;
  font-size: clamp(22px, 6.2vw, 30px);
  line-height: 1.15;
  color: #f1ece1;
}
.case__text {
  margin: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: clamp(15px, 3.9vw, 18px);
  line-height: 1.55;
  color: #9aa1ad;
}
.case__text b { font-weight: 700; color: #ecdfc8; }

@media (min-width: 640px) {
  .case__title { font-size: clamp(19px, 2.3vw, 26px); }
  .case__text  { font-size: clamp(13px, 1.5vw, 16px); }
  .case__body  { padding: 20px 22px 24px; }
  .case__num   { top: 10px; left: 10px; }
}

/* ---------- VIEW button (replaces the UNSOLVED stamp) ---------- */
.view {
  position: absolute;
  right: 12px;
  bottom: 14px;
  z-index: 2;
  padding: 0.62em 1.5em 0.56em;
  background: rgba(10, 10, 12, 0.9);
  border: 3px solid #ff3b2a;
  color: #ff3b2a;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 20px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;              /* balances the trailing letter-spacing */
  text-decoration: none;
  line-height: 1;
  transform: rotate(-4deg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.view:hover,
.view:focus-visible {
  background: #ff3b2a;
  color: #0a0a0c;
  transform: rotate(-4deg) scale(1.06);
  outline: none;
}
@media (min-width: 640px) {
  .view { right: 10px; bottom: 12px; font-size: clamp(12px, 1.3vw, 16px); border-width: 2px; }
}

/* Glitch text: a white ghost copy sits BEHIND the red word, so VIEW
   is always readable. It only appears while .is-glitching is on. */
.view__txt {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.view__txt::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--gx, 0%), var(--gy, 0%));
  clip-path: var(--gclip, none);
}
.view.is-glitching .view__txt::before { opacity: 1; }
.view:hover .view__txt::before,
.view:focus-visible .view__txt::before { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .case, .view { transition: none; }
}

/* ---------- Footer ---------- */
#footer {
  padding: 22px clamp(16px, 4vw, 48px) max(22px, env(safe-area-inset-bottom));
  background: #0a0506;
  border-top: 1px solid #2a1214;
  color: #7d838f;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: clamp(11px, 2.9vw, 13px);
  line-height: 1.6;
  text-align: center;
}