/* ============================================================================
   Bridge Co — product accent
   ----------------------------------------------------------------------------
   Everything structural comes from base.css. This file only re-points the
   accent group, which is the whole contract for a product page: the layout,
   type scale and rhythm stay Nauvis, and the colour becomes the app's.

   The values are lifted verbatim from BridgeCo/Views/Theme.swift, converted
   from its 0–1 floats. They are the app's real colours, not an approximation
   of a screenshot:

     feltRaise   (0.09, 0.28, 0.25) → #174740
     feltSunken  (0.04, 0.16, 0.15) → #0A2926
     gold        (0.93, 0.74, 0.36) → #EDBD5C
     goldDeep    (0.74, 0.54, 0.22) → #BD8A38
     cream       (0.95, 0.92, 0.84) → #F2EBD6
     ink         (0.16, 0.12, 0.05) → #291F0D

   If the in-app theme ever changes, this block is the one place to follow it.
   ========================================================================= */

.product-bridge-co {
  --felt:       #174740;
  --felt-deep:  #0A2926;
  --gold:       #EDBD5C;
  --gold-deep:  #BD8A38;
  --cream:      #F2EBD6;
  --game-ink:   #291F0D;

  --row-accent: var(--gold);
}

/* --- hero ----------------------------------------------------------------- */

/* Felt, lit from above — the same pooled-light treatment the app's own
   tableBackground() applies behind every screen. */
.game-hero {
  background:
    radial-gradient(90ch 50ch at 50% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--felt) 0%, var(--felt-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: 20px;
  padding: clamp(2rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3rem);
  margin-block: clamp(1rem, 4vh, 2.5rem) clamp(3rem, 8vh, 4.5rem);
}

.game-hero__icon {
  width: clamp(88px, 14vw, 132px);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  flex: none;
}

.game-hero__title {
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  font-weight: 700;
  font-stretch: 116%;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 0.5rem;
}

.game-hero__kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.875rem;
}

.game-hero__lede {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  max-width: 44ch;
  margin: 0 0 1.75rem;
  text-wrap: pretty;
}

/* --- App Store button ----------------------------------------------------- */

.appstore {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gold);
  color: var(--game-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--gold-deep);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.appstore:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--gold) 28%, transparent);
}

/* Pending state — the listing isn't live yet. Rendered as a plain, obviously
   inert chip rather than a disabled-looking gold button, so nobody taps it
   expecting the App Store. Flip ONE attribute in the HTML when it ships. */
.appstore[aria-disabled="true"] {
  background: transparent;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent);
  cursor: default;
  pointer-events: none;
  font-weight: 500;
}

/* --- feature grid --------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block: 1.25rem clamp(3.5rem, 9vh, 5rem);
}

.feature {
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.feature__no {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 0.875rem;
}

.feature h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.feature p { margin: 0; color: var(--text-dim); font-size: 0.9375rem; }

/* --- screenshots ---------------------------------------------------------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-block: 1.25rem clamp(3.5rem, 9vh, 5rem);
}

.shot figure { margin: 0; }

.shot img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  background: var(--felt-deep);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.shot figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.875rem;
}

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 640px) {
  /* The icon stops sharing a row with the title — at 390px a 132px icon beside
     a 2.25rem headline leaves the headline about eight characters wide. */
  .game-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .game-hero__icon { width: 88px; }
}