/* Lake Effect - feature tiles
   Ink-first micro-tile grid. No JS, no build step, no framework.
   Drop this file in, load the three fonts, paste the markup from
   feature-cards.html. Everything below is scoped under .lf- prefixes. */

/* ---- Tokens ---------------------------------------------------------- */

.lf-features {
  --lf-cream: #f5f1e6;
  --lf-ink: #15161a;
  --lf-page: #dfdbce;
  --lf-emerald: #10b981; /* fills, ink-ground accent text */
  --lf-emerald-ink: #0a7355; /* accent text on cream - passes contrast */
  --lf-gold: #c08a1e;
  --lf-red: #e0233d;
  --lf-blue: #2f6fed;

  --lf-muted-on-cream: #6b6759;
  --lf-faint-on-cream: #9a9689;
  --lf-muted-on-ink: #a6a398;
  --lf-faint-on-ink: #6f6c63;
  --lf-body-on-ink: #e6e2d6;

  --lf-hair-on-cream: rgba(21, 22, 26, 0.14);
  --lf-hair-strong-on-cream: rgba(21, 22, 26, 0.164);
  --lf-hair-on-ink: rgba(245, 241, 230, 0.12);
  --lf-track-on-cream: rgba(21, 22, 26, 0.164);
  --lf-track-on-ink: rgba(245, 241, 230, 0.12);

  --lf-display: 'Space Grotesk', system-ui, sans-serif;
  --lf-body: Inter, system-ui, sans-serif;
  --lf-mono: 'JetBrains Mono', ui-monospace, monospace;

  --lf-tile-radius: 16px;
  --lf-tile-pad: 22px;
  --lf-tile-min: 236px;
}

/* ---- Section --------------------------------------------------------- */

.lf-features {
  background: var(--lf-page);
  padding: 72px 0;
  font-family: var(--lf-body);
}

/* Same box model as .wrap in styles.css (max-width + padding baked into
   one box, border-box) so this section's left/right edges line up with
   the hero, "what's inside", and leagues-teaser sections above/below it. */
.lf-features__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.lf-features__head {
  max-width: 620px;
  margin-bottom: 40px;
}

.lf-kicker {
  font: 700 10.5px var(--lf-mono);
  letter-spacing: 0.14em;
  color: var(--lf-emerald-ink);
  text-transform: uppercase;
}

.lf-features__title {
  margin: 16px 0 0;
  font: 600 clamp(28px, 4vw, 40px)/1.1 var(--lf-display);
  color: var(--lf-ink);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.lf-features__sub {
  margin: 14px 0 0;
  font: 400 16px/1.6 var(--lf-body);
  color: var(--lf-muted-on-cream);
  text-wrap: pretty;
}

/* ---- Grid ------------------------------------------------------------ */
/* auto-fill + minmax is the whole responsive story: 4 across on a wide
   page, 3 on a laptop, 2 on a tablet, 1 on a phone. No media queries. */

.lf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lf-tile-min), 1fr));
  gap: 16px;
}

/* ---- Tile ------------------------------------------------------------ */
/* min-height, never height - copy must be free to push the tile taller. */

.lf-tile {
  background: var(--lf-cream);
  border-radius: var(--lf-tile-radius);
  padding: var(--lf-tile-pad);
  min-height: var(--lf-tile-min);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.lf-tile__label {
  font: 700 9.5px var(--lf-mono);
  letter-spacing: 0.14em;
  color: var(--lf-emerald-ink);
  text-transform: uppercase;
}

/* The UI fragment. Grows to fill, centres its content. */
.lf-tile__art {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 14px 0;
  min-width: 0;
}

.lf-tile__art--center {
  justify-content: center;
}
.lf-tile__art--stack {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

.lf-tile__note {
  font: 400 12px/1.45 var(--lf-body);
  color: var(--lf-muted-on-cream);
  text-wrap: pretty;
}

/* Ink variant - space these through the grid, don't group them. */
.lf-tile--ink {
  background: var(--lf-ink);
}
.lf-tile--ink .lf-tile__label {
  color: var(--lf-emerald);
}
.lf-tile--ink .lf-tile__note {
  color: var(--lf-muted-on-ink);
}

/* ---- Jersey badge ---------------------------------------------------- */
/* Two clip-path layers: a shallower outline shape underneath in the
   outline color, the shirt shape on top. The thin ring around the
   neckline is the difference between the two, not a stroke. */

.lf-badge {
  --lf-badge-size: 112px;
  --lf-shirt: var(--lf-cream);
  --lf-accent: var(--lf-emerald);
  --lf-outline: rgba(21, 22, 26, 0.55); /* for light shirts */
  --lf-number: var(--lf-ink);
  --lf-shirt-clip: polygon(0 0, 30% 0, 50% 22%, 70% 0, 100% 0, 100% 100%, 0 100%);
  --lf-outline-clip: polygon(0 0, 33% 0, 50% 18%, 67% 0, 100% 0, 100% 100%, 0 100%);

  position: relative;
  flex: none;
  width: var(--lf-badge-size);
  height: var(--lf-badge-size);
  border-radius: calc(var(--lf-badge-size) * 0.28);
  overflow: hidden;
  background: var(--lf-shirt);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Dark shirts flip the outline ring and the number to cream. */
.lf-badge--dark-shirt {
  --lf-outline: rgba(245, 241, 230, 0.55);
  --lf-number: var(--lf-cream);
}

.lf-badge::before,
.lf-badge::after {
  content: '';
  position: absolute;
  inset: 0;
}

.lf-badge::before {
  background: var(--lf-outline);
  clip-path: var(--lf-outline-clip);
}

.lf-badge::after {
  background: var(--lf-pattern, var(--lf-shirt));
  clip-path: var(--lf-shirt-clip);
}

/* z-index because ::after is the badge's last box and would otherwise
   paint over the number. */
.lf-badge__number {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lf-mono);
  font-weight: 800;
  font-size: calc(var(--lf-badge-size) * 0.38);
  letter-spacing: -0.02em;
  color: var(--lf-number);
}

/* Patterns. Each is one gradient - the stripe scale is size/5. */
.lf-badge--solid {
  --lf-pattern: var(--lf-shirt);
}
.lf-badge--diagonal {
  --lf-pattern: linear-gradient(45deg, var(--lf-shirt) 0 38%, var(--lf-accent) 38% 62%, var(--lf-shirt) 62% 100%);
}
.lf-badge--sleeve {
  --lf-pattern: linear-gradient(90deg, var(--lf-accent) 0 18%, var(--lf-shirt) 18% 82%, var(--lf-accent) 82% 100%);
}
.lf-badge--half {
  --lf-pattern: linear-gradient(90deg, var(--lf-accent) 0 50%, var(--lf-shirt) 50% 100%);
}
.lf-badge--hoops {
  --lf-pattern: linear-gradient(180deg, var(--lf-shirt) 0 36%, var(--lf-accent) 36% 64%, var(--lf-shirt) 64% 100%);
}
.lf-badge--horizontal {
  --lf-pattern: repeating-linear-gradient(
    180deg,
    var(--lf-accent) 0 calc(var(--lf-badge-size) / 5),
    var(--lf-shirt) calc(var(--lf-badge-size) / 5) calc(var(--lf-badge-size) / 2.5)
  );
}
.lf-badge--vertical {
  --lf-pattern: repeating-linear-gradient(
    90deg,
    var(--lf-accent) 0 calc(var(--lf-badge-size) / 5),
    var(--lf-shirt) calc(var(--lf-badge-size) / 5) calc(var(--lf-badge-size) / 2.5)
  );
}

/* ---- Jersey tiles (who's in) ----------------------------------------- */

.lf-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lf-jersey {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 13px var(--lf-mono);
  color: #fff;
  box-sizing: border-box;
}

.lf-jersey--in {
  background: var(--lf-emerald);
}
.lf-jersey--maybe {
  background: var(--lf-gold);
}
.lf-jersey--out {
  background: var(--lf-red);
}

/* No reply is an outline, not a fill - absence reads as absence. */
.lf-jersey--none {
  background: none;
  border: 1.5px solid rgba(245, 241, 230, 0.28);
  color: var(--lf-faint-on-ink);
}

.lf-tile:not(.lf-tile--ink) .lf-jersey--none {
  border-color: rgba(21, 22, 26, 0.22);
  color: var(--lf-faint-on-cream);
}

/* ---- Progress bar ---------------------------------------------------- */

.lf-bar {
  height: 5px;
  border-radius: 100px;
  background: var(--lf-track-on-cream);
  overflow: hidden;
  display: flex;
}

.lf-tile--ink .lf-bar {
  background: var(--lf-track-on-ink);
}

.lf-bar__in {
  background: var(--lf-emerald);
}
.lf-bar__maybe {
  background: var(--lf-gold);
}
.lf-bar__rest {
  background: rgba(21, 22, 26, 0.32);
}

/* ---- Numerics -------------------------------------------------------- */

.lf-amount {
  font: 800 44px var(--lf-mono);
  color: var(--lf-ink);
  letter-spacing: -0.02em;
}

.lf-code {
  font: 800 34px var(--lf-mono);
  color: var(--lf-cream);
  letter-spacing: 0.1em;
}

/* ---- Next up --------------------------------------------------------- */

.lf-when {
  font: 700 10.5px var(--lf-mono);
  letter-spacing: 0.12em;
  color: var(--lf-emerald-ink);
}

.lf-opponent {
  font: 600 22px/1.12 var(--lf-display);
  color: var(--lf-ink);
  letter-spacing: -0.015em;
}

.lf-actions {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}

/* 40px here because these are display-only. A real tappable control in
   this system is 44px minimum. */
.lf-pill {
  flex: 1;
  height: 40px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px var(--lf-body);
  box-sizing: border-box;
}

.lf-pill--primary {
  background: var(--lf-emerald);
  color: #fff;
}

.lf-pill--ghost {
  border: 1.5px solid rgba(21, 22, 26, 0.236);
  font-weight: 600;
  color: var(--lf-muted-on-cream);
}

/* ---- Poll ------------------------------------------------------------ */

.lf-poll__row + .lf-poll__row {
  margin-top: 12px;
}

.lf-poll__top {
  display: flex;
  justify-content: space-between;
  font: 600 12.5px var(--lf-body);
  color: var(--lf-muted-on-cream);
}

.lf-poll__row--lead .lf-poll__top {
  color: var(--lf-ink);
}

.lf-poll__count {
  font-family: var(--lf-mono);
  font-weight: 700;
}

.lf-poll__bar {
  margin-top: 5px;
}

/* ---- Roster rows ----------------------------------------------------- */

.lf-roster {
  width: 100%;
}

.lf-roster__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lf-hair-on-cream);
}

.lf-roster__row:last-child {
  border-bottom: 0;
}
.lf-roster__row--quiet {
  opacity: 0.55;
}

.lf-roster__no {
  width: 22px;
  text-align: right;
  font: 700 13px var(--lf-mono);
}

.lf-roster__name {
  flex: 1;
  min-width: 0;
  font: 600 13.5px var(--lf-body);
  color: var(--lf-ink);
}

.lf-state {
  font: 700 9px var(--lf-mono);
  letter-spacing: 0.12em;
}

.lf-state--in {
  color: var(--lf-emerald-ink);
}
.lf-state--maybe {
  color: var(--lf-gold);
}
.lf-state--out {
  color: var(--lf-red);
}
.lf-state--none {
  color: var(--lf-muted-on-cream);
}

/* ---- Pinned message -------------------------------------------------- */

.lf-pinned {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lf-pinned__icon {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  color: var(--lf-emerald);
  font-variation-settings: 'FILL' 1;
  flex: none;
}

.lf-pinned__text {
  font: 400 14px/1.5 var(--lf-body);
  color: var(--lf-body-on-ink);
}