/* =============================================================================
   1891 Arena — flagship (two-sport) marketing surfaces
   ============================================================================
   Shared styles for the refreshed home hero, the pickleball + bowling hubs,
   the "One workbench" strip, and the three-siblings cross-link strip.

   Loaded AFTER sports.css so it can override accents per surface.
   ============================================================================= */

:root[data-project="arena"] {
  /* Two-sport accent slots. Pickleball reads teal (warm); bowling reads
     amber (the existing scoreboard bloom — same hue, deliberately). */
  --sport-pickleball:       #0FB5A8;
  --sport-pickleball-soft:  #d6f3f0;
  --sport-pickleball-ink:   #086a62;
  --sport-bowling:          #E89B3C;
  --sport-bowling-soft:     #fbe7c8;
  --sport-bowling-ink:      #8c5310;
}

/* ── Choose-your-sport split (home hero adjunct) ───────────────────── */

.choose-sport {
  padding-block: clamp(var(--c-space-6), 5vw, var(--c-space-8));
}
.choose-sport__lead {
  text-align: center;
  margin-bottom: var(--c-space-6);
}
.choose-sport__lead h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: var(--c-space-2) 0 var(--c-space-3);
}
.choose-sport__lead p {
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin-inline: auto;
}
.choose-sport__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-5);
}
@media (min-width: 760px) {
  .choose-sport__split { grid-template-columns: 1fr 1fr; }
}

.sport-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--c-space-5), 3vw, var(--c-space-7));
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms ease,
              border-color 200ms ease;
  min-height: 320px;
}
.sport-tile::before {
  /* Watercolor wash */
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(closest-side, var(--tile-wash, rgba(15,181,168,0.22)) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.sport-tile::after {
  /* Soft bottom wash, anchors the illustration */
  content: "";
  position: absolute;
  inset: auto -10% -25% -10%;
  height: 55%;
  background: radial-gradient(closest-side, var(--tile-wash-soft, rgba(15,181,168,0.10)) 0%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.sport-tile > * { position: relative; z-index: 1; }

.sport-tile:hover,
.sport-tile:focus-visible {
  transform: scale(1.025);
  box-shadow: 0 28px 60px -28px rgba(20, 12, 6, 0.30);
  outline: none;
}

.sport-tile--pickleball {
  --tile-wash: rgba(15, 181, 168, 0.22);
  --tile-wash-soft: rgba(15, 181, 168, 0.10);
  border-color: rgba(15, 181, 168, 0.45);
}
.sport-tile--pickleball:hover { border-color: var(--sport-pickleball); }
.sport-tile--bowling {
  --tile-wash: rgba(232, 155, 60, 0.24);
  --tile-wash-soft: rgba(232, 155, 60, 0.12);
  border-color: rgba(232, 155, 60, 0.45);
}
.sport-tile--bowling:hover { border-color: var(--sport-bowling); }

.sport-tile__eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--sport-pickleball-ink);
  margin-bottom: var(--c-space-3);
}
.sport-tile--bowling .sport-tile__eyebrow { color: var(--sport-bowling-ink); }

.sport-tile__title {
  margin: 0 0 var(--c-space-3);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.06;
  color: var(--c-ink);
}
.sport-tile__invite {
  margin: 0 0 var(--c-space-5);
  color: var(--c-ink-soft);
  max-width: 36ch;
  font-size: 1.02rem;
}
.sport-tile__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sport-pickleball-ink);
  transition: gap 200ms ease;
}
.sport-tile--bowling .sport-tile__cta { color: var(--sport-bowling-ink); }
.sport-tile:hover .sport-tile__cta { gap: 14px; }

.sport-tile__illo {
  margin: var(--c-space-3) 0 var(--c-space-4);
  width: 100%;
  max-width: 220px;
  height: 140px;
}
.sport-tile__illo svg { width: 100%; height: 100%; }

/* Breathing animation on illustrations */
@keyframes breathe-tile {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.breathe {
  transform-origin: center;
  animation: breathe-tile 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; }
  .sport-tile { transition: border-color 200ms ease; }
  .sport-tile:hover { transform: none; }
}

/* ── One Workbench strip (shared across landings) ──────────────────── */

.workbench {
  padding-block: clamp(var(--c-space-7), 6vw, var(--c-space-8));
  background: var(--c-paper-warm);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.workbench__lead {
  text-align: center;
  margin-bottom: var(--c-space-6);
}
.workbench__lead .eyebrow { color: var(--1891-arena-accent); }
.workbench__lead h2 {
  margin: var(--c-space-2) auto var(--c-space-2);
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
}
.workbench__lead p {
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin-inline: auto;
}
.workbench__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-4);
}
@media (min-width: 600px) { .workbench__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .workbench__grid { grid-template-columns: repeat(3, 1fr); } }

.workbench-tile {
  padding: var(--c-space-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 220ms ease,
              border-color 200ms ease;
}
.workbench-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(20, 12, 6, 0.22);
  border-color: var(--1891-arena-bloom);
}
.workbench-tile__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--c-space-3);
  color: var(--1891-arena-accent);
}
.workbench-tile__icon svg { width: 100%; height: 100%; }
.workbench-tile h3 {
  margin: 0 0 var(--c-space-2);
  font-size: 1.08rem;
}
.workbench-tile p {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

@keyframes breathe-slow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.workbench-tile__icon .breathe-slow {
  transform-origin: center;
  animation: breathe-slow 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .workbench-tile__icon .breathe-slow { animation: none; }
  .workbench-tile:hover { transform: none; }
}

/* ── Three-steps "How it works" cards (home page) ─────────────────── */

.three-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-4);
  margin-top: var(--c-space-5);
  counter-reset: step;
}
@media (min-width: 720px) {
  .three-steps { grid-template-columns: repeat(3, 1fr); gap: var(--c-space-4); }
}

.three-steps .step {
  position: relative;
  padding: var(--c-space-6) var(--c-space-5) var(--c-space-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 220ms ease,
              border-color 200ms ease;
}
.three-steps .step:hover {
  border-color: var(--1891-arena-bloom, var(--c-bloom));
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(20, 12, 6, 0.22);
}
.three-steps .step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.three-steps .step h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.25;
}
.three-steps .step p {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}
.three-steps .step p a {
  font-weight: 600;
  white-space: nowrap;
}

/* Subtle connector line between cards on wide screens. */
@media (min-width: 980px) {
  .three-steps .step + .step::before {
    content: "";
    position: absolute;
    top: calc(var(--c-space-6) + 22px);
    left: calc(var(--c-space-4) * -1);
    width: var(--c-space-4);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-line) 30%, var(--c-line) 70%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .three-steps .step:hover { transform: none; box-shadow: none; }
}

/* ── Three-siblings cross-link strip ───────────────────────────────── */

.siblings {
  padding-block: clamp(var(--c-space-7), 5vw, var(--c-space-8));
}
.siblings__lead {
  text-align: center;
  margin-bottom: var(--c-space-5);
}
.siblings__lead .eyebrow { color: var(--c-fog); }
.siblings__lead h2 {
  margin: 0 auto;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  max-width: 26ch;
}
.siblings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-4);
}
@media (min-width: 700px) { .siblings__grid { grid-template-columns: repeat(3, 1fr); } }

.sibling-card {
  display: block;
  padding: var(--c-space-5);
  border-radius: 14px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  text-decoration: none;
  color: inherit;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 220ms ease,
              border-color 200ms ease;
}
.sibling-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(20, 12, 6, 0.22);
  border-color: var(--1891-arena-bloom);
}
.sibling-card__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-fog);
  margin-bottom: var(--c-space-2);
}
.sibling-card h3 {
  margin: 0 0 var(--c-space-2);
  font-size: 1.15rem;
}
.sibling-card p {
  margin: 0 0 var(--c-space-3);
  color: var(--c-ink-soft);
  font-size: 0.95rem;
}
.sibling-card__cta {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--1891-arena-accent);
}

/* ── Sport-hub specific framing (pickleball / bowling /index.html) ─── */

.hub-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--c-space-7), 7vw, var(--c-space-9));
  border-bottom: 1px solid var(--c-line);
}
.hub-hero--pickleball {
  background:
    radial-gradient(50rem 22rem at 90% -10%, rgba(15,181,168,0.18), transparent 60%),
    linear-gradient(180deg, var(--c-paper-warm) 0%, var(--c-paper) 100%);
}
.hub-hero--bowling {
  background:
    radial-gradient(50rem 22rem at 90% -10%, rgba(232,155,60,0.20), transparent 60%),
    linear-gradient(180deg, var(--c-paper-warm) 0%, var(--c-paper) 100%);
}
.hub-hero--soccer {
  background:
    radial-gradient(50rem 22rem at 90% -10%, rgba(34,139,84,0.18), transparent 60%),
    linear-gradient(180deg, var(--c-paper-warm) 0%, var(--c-paper) 100%);
}
.hub-hero--football {
  background:
    radial-gradient(50rem 22rem at 90% -10%, rgba(176,48,48,0.20), transparent 60%),
    linear-gradient(180deg, var(--c-paper-warm) 0%, var(--c-paper) 100%);
}
.hub-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .hub-hero__inner { grid-template-columns: 1.2fr 1fr; }
}
.hub-hero h1 {
  margin: var(--c-space-2) 0 var(--c-space-3);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.02;
}
.hub-hero__lede {
  font-size: 1.12rem;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin-bottom: var(--c-space-5);
}
.hub-hero__illo {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
.hub-hero__illo svg { width: 100%; height: auto; }

/* ── Interactive demo frame (watercolor border) ────────────────────── */

.demo-court {
  position: relative;
  padding: clamp(var(--c-space-4), 3vw, var(--c-space-6));
  border-radius: 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 60px -32px rgba(20, 12, 6, 0.30);
  overflow: hidden;
}
.demo-court::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: radial-gradient(
    closest-side at 0% 0%, var(--frame-wash-a, rgba(15,181,168,0.40)) 0%, transparent 60%
  ), radial-gradient(
    closest-side at 100% 100%, var(--frame-wash-b, rgba(232,155,60,0.30)) 0%, transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.demo-court--pickleball { --frame-wash-a: rgba(15,181,168,0.45); --frame-wash-b: rgba(15,181,168,0.20); }
.demo-court--bowling    { --frame-wash-a: rgba(232,155,60,0.45); --frame-wash-b: rgba(232,155,60,0.18); }

/* ── Pickleball scoreboard ─────────────────────────────────────────── */

.score-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c-space-3);
  margin-bottom: var(--c-space-4);
}
.score-side {
  padding: var(--c-space-5);
  border-radius: 16px;
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  text-align: center;
  transition: transform 220ms ease, border-color 200ms ease;
}
.score-side--serving {
  border-color: var(--sport-pickleball);
  background: linear-gradient(180deg, var(--sport-pickleball-soft) 0%, var(--c-paper) 80%);
}
.score-side__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-fog);
  font-weight: 700;
}
.score-side__name {
  font-size: 1.05rem;
  margin: var(--c-space-2) 0;
  font-weight: 700;
}
.score-num {
  font-family: var(--c-font-mono);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--c-ink);
}
.score-side__server {
  margin-top: var(--c-space-2);
  font-size: 0.8rem;
  color: var(--sport-pickleball-ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.score-side--bowling .score-side__server { color: var(--sport-bowling-ink); }

@keyframes score-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
.score-num.score-num--pulse { animation: score-pulse 380ms cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce) {
  .score-num.score-num--pulse { animation: none; }
}

.score-controls {
  display: flex;
  gap: var(--c-space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.score-meta {
  text-align: center;
  margin-bottom: var(--c-space-3);
  font-family: var(--c-font-mono);
  font-size: 0.85rem;
  color: var(--c-ink-soft);
}
.score-meta strong { color: var(--c-ink); }
.score-banner {
  margin-top: var(--c-space-3);
  padding: var(--c-space-3);
  border-radius: 10px;
  background: var(--sport-pickleball-soft);
  color: var(--sport-pickleball-ink);
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  display: none;
}
.score-banner.is-shown { display: block; }

/* ── Bowling scoresheet ────────────────────────────────────────────── */

.frame-sheet {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-bottom: var(--c-space-4);
  font-family: var(--c-font-mono);
}
.frame-sheet .frame {
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 6px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.frame-sheet .frame:hover { transform: translateY(-1px); border-color: var(--sport-bowling); }
.frame-sheet .frame[data-active="true"] {
  background: var(--sport-bowling-soft);
  border-color: var(--sport-bowling);
  box-shadow: 0 0 0 2px rgba(232,155,60,0.25);
}
.frame__num {
  font-size: 9px;
  color: var(--c-fog);
  letter-spacing: 0.1em;
  text-align: center;
}
.frame__balls {
  display: flex;
  gap: 2px;
  align-items: stretch;
  justify-content: flex-end;
}
.frame__ball {
  flex: 1;
  min-height: 22px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-paper);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-ink);
}
.frame__total {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  min-height: 18px;
}
.frame--tenth .frame__balls { gap: 3px; }
.frame--tenth .frame__ball { font-size: 0.78rem; }

@media (max-width: 720px) {
  .frame-sheet { grid-template-columns: repeat(5, 1fr); }
  .frame-sheet .frame:nth-child(n+6) { grid-column: auto; }
}

.pin-pad {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: var(--c-space-3) 0;
}
.pin-pad button {
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 999px;
  font-family: var(--c-font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 42px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.pin-pad button:hover:not(:disabled) {
  background: var(--sport-bowling);
  color: var(--c-paper);
  transform: translateY(-1px);
}
.pin-pad button:disabled { opacity: 0.4; cursor: not-allowed; }
.pin-pad__hint {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  margin-bottom: 4px;
}

/* ── Format-grid (small "formats supported" pill grid) ─────────────── */

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--c-space-3);
  margin-top: var(--c-space-4);
}
.format-card {
  padding: var(--c-space-4);
  border-radius: 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  transition: border-color 200ms ease, transform 200ms ease;
}
.format-card:hover { transform: translateY(-2px); border-color: var(--1891-arena-bloom); }
.format-card__name {
  font-weight: 700;
  margin-bottom: var(--c-space-1);
}
.format-card__desc {
  color: var(--c-ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ── Tenant callout (the "first tenant" strip) ─────────────────────── */

.tenant-callout {
  padding: var(--c-space-6);
  border-radius: 18px;
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-4);
  align-items: center;
}
@media (min-width: 720px) {
  .tenant-callout { grid-template-columns: 1fr auto; }
}
.tenant-callout__eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--1891-arena-accent);
  margin-bottom: var(--c-space-2);
}
.tenant-callout h3 {
  margin: 0 0 var(--c-space-2);
  font-size: 1.3rem;
}
.tenant-callout p {
  margin: 0;
  color: var(--c-ink-soft);
  max-width: 52ch;
}

/* ── Bracket mini SVG container ────────────────────────────────────── */

.mini-bracket {
  margin: var(--c-space-4) 0 0;
  padding: var(--c-space-4);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
}
.mini-bracket svg { width: 100%; height: auto; max-width: 540px; margin-inline: auto; display: block; }
.mini-bracket__caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-fog);
  margin-top: var(--c-space-2);
}

/* ── See-also strip ────────────────────────────────────────────────── */

.see-also {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-3);
  margin-top: var(--c-space-5);
}
@media (min-width: 720px) { .see-also { grid-template-columns: repeat(3, 1fr); } }
.see-also a {
  display: block;
  padding: var(--c-space-4);
  border-radius: 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}
.see-also a:hover { transform: translateY(-2px); border-color: var(--1891-arena-bloom); }
.see-also strong { display: block; margin-bottom: 4px; }
.see-also span { color: var(--c-ink-soft); font-size: 0.9rem; }