/* Preview: the article photo-hero rules from rc-photo.css, applied to state hubs. */
/* RideClaim.co article photo heroes (2026-10-29).
   The state's featured photo sits behind the hero text, tinted in the page's own
   hero/base color, and fades into the page background at the bottom. */
:root body.rc-state .rc-hero.rc-hero--photo {
  --rc-tint: var(--t-hero-bg);
  --rc-tint-strength: 80%;
  --rc-fade-to: var(--t-bg);
  min-height: min(72vh, 680px);
  min-height: min(72svh, 680px);
}
.rc-hero--photo > .rc-hero__photo {
  position: absolute; inset: 0; z-index: -2;
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 42%;
}
.rc-hero--photo > .rc-hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 58%, color-mix(in srgb, var(--rc-fade-to) 70%, transparent) 84%, var(--rc-fade-to) 100%),
    color-mix(in srgb, var(--rc-tint) var(--rc-tint-strength), transparent);
}

/* A, Broadsheet: hero-color band over the photo; the hairline rule goes, the fade replaces it. */
:is(:root[data-rc-template="A"], :root:not([data-rc-template])) body.rc-state .rc-hero.rc-hero--photo { --rc-tint-strength: 82%; }
:is(:root[data-rc-template="A"], :root:not([data-rc-template])) body.rc-state .rc-hero.rc-hero--photo::after { display: none; }

/* B, Night Map: keep the rounded panel, grid and glow; the panel melts into the page at the bottom. */
:root[data-rc-template="B"] body.rc-state .rc-hero.rc-hero--photo { --rc-tint-strength: 88%; border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
:root[data-rc-template="B"] .rc-hero--photo > .rc-hero__veil {
  background:
    linear-gradient(to bottom, transparent 0%, transparent 58%, color-mix(in srgb, var(--rc-fade-to) 70%, transparent) 84%, var(--rc-fade-to) 100%),
    radial-gradient(ellipse 90% 75% at 0% 0%, color-mix(in srgb, var(--rc-tint) 92%, transparent) 0%, color-mix(in srgb, var(--rc-tint) 60%, transparent) 55%, transparent 85%),
    radial-gradient(ellipse 60% 70% at 62% 48%, var(--t-glow), transparent 70%),
    linear-gradient(var(--t-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--t-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    color-mix(in srgb, var(--rc-tint) var(--rc-tint-strength), transparent);
}

/* C, Trip Record: the state color floods the ground, so the tint is the page color itself. */
:root[data-rc-template="C"] body.rc-state .rc-hero.rc-hero--photo { --rc-tint: var(--t-bg); --rc-tint-strength: 80%; align-content: start; }

@media (max-width: 900px) {
  :root body.rc-state .rc-hero.rc-hero--photo { min-height: min(52vh, 460px); min-height: min(52svh, 460px); }
  .rc-hero--photo > .rc-hero__photo { object-position: 50% 35%; }
  :root[data-rc-template="B"] body.rc-state .rc-hero.rc-hero--photo { --rc-tint-strength: 91%; }
  :root[data-rc-template="B"] .rc-hero--photo > .rc-hero__veil {
    background:
      linear-gradient(to bottom, transparent 0%, transparent 58%, color-mix(in srgb, var(--rc-fade-to) 70%, transparent) 84%, var(--rc-fade-to) 100%),
      linear-gradient(to bottom, color-mix(in srgb, var(--rc-tint) 96%, transparent) 0, color-mix(in srgb, var(--rc-tint) 96%, transparent) 110px, transparent 200px),
      linear-gradient(var(--t-grid) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, var(--t-grid) 1px, transparent 1px) 0 0 / 44px 44px,
      color-mix(in srgb, var(--rc-tint) var(--rc-tint-strength), transparent);
  }
}


/* Preview: lighter tint on state hubs so the photo reads. */
:root:root body.rc-state .rc-hero.rc-hero--photo { --rc-tint-strength: 66%; }