/* ============================================================
   FDA PHOTO SYSTEM — duotone treatment layer
   First Down Academy · drop-in stylesheet, zero dependencies
   ------------------------------------------------------------
   Usage:
     <figure class="fda-photo fda-photo--scrim">
       <img src="..." alt="...">
       <svg class="fda-photo__overlay">...</svg>   (optional)
     </figure>
   Any photo dropped in renders in brand navy duotone.
   ============================================================ */

:root {
  --fda-navy: #020f1e;
  --fda-navy-2: #0a1f36;
  --fda-lime: #C1FF22;
}

/* ---- Core duotone frame ------------------------------------ */
.fda-photo {
  position: relative;
  overflow: hidden;
  background: var(--fda-navy);
  isolation: isolate; /* keep blend modes contained */
}

.fda-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.92);
  mix-blend-mode: luminosity; /* shadows inherit the navy beneath */
}

/* Subtle warm-navy tint pass so blacks read navy, not gray */
.fda-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(10, 31, 54, 0.28) 0%,
    rgba(2, 15, 30, 0.18) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- Variants ---------------------------------------------- */

/* Bottom scrim for text sitting on the photo */
.fda-photo--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(2, 15, 30, 0) 35%,
    rgba(2, 15, 30, 0.72) 100%);
  pointer-events: none;
}

/* Full-bleed hero: darker overall so headline type owns the frame */
.fda-photo--hero > img {
  filter: grayscale(1) contrast(1.18) brightness(0.72);
}
.fda-photo--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 20% 15%,
      rgba(2, 15, 30, 0.05) 0%,
      rgba(2, 15, 30, 0.62) 70%,
      rgba(2, 15, 30, 0.88) 100%);
  pointer-events: none;
}

/* Faint lime energy wash — use sparingly (one per viewport max) */
.fda-photo--charge::before {
  background:
    radial-gradient(90% 70% at 78% 22%,
      rgba(193, 255, 34, 0.14) 0%,
      rgba(193, 255, 34, 0) 55%),
    linear-gradient(180deg,
      rgba(10, 31, 54, 0.28) 0%,
      rgba(2, 15, 30, 0.18) 100%);
  mix-blend-mode: screen;
}

/* Card strip — fixed ratio band for level cards */
.fda-photo--strip {
  aspect-ratio: 16 / 7;
}

/* Portrait block for split (player / coach) sections */
.fda-photo--portrait {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
}

/* ---- Overlay slot (route lines, stat chips, chalk marks) ---- */
.fda-photo__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Caption chip pinned inside the frame */
.fda-photo__tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  font-family: "JetBrains Mono", "Barlow", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fda-lime);
  background: rgba(2, 15, 30, 0.72);
  border: 1px solid rgba(193, 255, 34, 0.35);
  border-radius: 999px;
  padding: 5px 11px;
  backdrop-filter: blur(4px);
}

/* ---- Ambient texture utilities ------------------------------ */

/* Chalk X's & O's — section background texture */
.fda-chalk {
  position: relative;
}
.fda-chalk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23C1FF22' stroke-width='2'%3E%3Cpath d='M22 22l16 16M38 22L22 38'/%3E%3Ccircle cx='110' cy='42' r='9'/%3E%3Cpath d='M62 96l16 16M78 96l-16 16'/%3E%3Ccircle cx='132' cy='122' r='9'/%3E%3Cpath d='M20 130c14-10 30-4 42 4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.fda-chalk > * { position: relative; z-index: 1; }

/* Yard-line hash divider */
.fda-hash {
  height: 14px;
  background-image: repeating-linear-gradient(90deg,
    rgba(193, 255, 34, 0.35) 0 2px,
    transparent 2px 26px);
  background-position: center;
  background-size: 100% 8px;
  background-repeat: no-repeat;
  border: 0;
  margin: 0;
}

/* ---- Motion & fallbacks ------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fda-photo > img {
    transition: transform 0.6s ease;
  }
  a:hover .fda-photo > img,
  .fda-photo:hover > img {
    transform: scale(1.035);
  }
}

/* Older browsers without blend-mode support: plain dark photo */
@supports not (mix-blend-mode: luminosity) {
  .fda-photo > img {
    filter: grayscale(0.4) brightness(0.75) sepia(0.25) hue-rotate(175deg) saturate(2.2);
  }
}