/* SmartRideAI Grid presentation layer.
 * Loaded after the legacy inline rules so this file is the single, reviewable
 * owner of the new discovery deck and event-specific vehicle cards. */

body.sr-grid-page {
  --grid-surface: rgba(7, 13, 20, .96);
  --grid-surface-strong: #071019;
  --grid-ink: #f4f9fc;
  --grid-muted: #9fb1bd;
  --grid-line: rgba(147, 213, 239, .16);
  --grid-signal: #65e8ff;
  --grid-positive: #61efa0;
  --sr-grid-topbar-fallback: 82px;
  padding-top: var(--sr-measured-topbar-clearance, var(--sr-grid-topbar-fallback)) !important;
}

/* The server navigation is compacted by the shared shell at DOMContentLoaded.
 * Keep both the bar and its reserved body clearance deterministic while that
 * one synchronous replacement is taking place. The discovery deck is revealed
 * only after the final bar has held the same height for two frames. */
body.sr-grid-page.sr-grid-topbar-prepaint {
  transition: none !important;
}

body.sr-grid-page.sr-grid-topbar-prepaint .top-nav-panel,
body.sr-grid-page.sr-grid-topbar-prepaint .top-nav-panel :is(.brand-link, .nav-actions) {
  transition: none !important;
}

body.sr-grid-page.sr-grid-topbar-prepaint .app-layout {
  visibility: hidden;
}

.sr-grid-shell-loader {
  display: none;
  position: fixed;
  z-index: 950;
  top: calc(var(--sr-measured-topbar-clearance, var(--sr-grid-topbar-fallback)) + 14px);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(101, 232, 255, .28);
  border-radius: 999px;
  background: rgba(4, 12, 18, .94);
  color: #dff8ff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  font: 850 .58rem/1 'Orbitron', sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  pointer-events: none;
}

body.sr-grid-page.sr-grid-topbar-prepaint .sr-grid-shell-loader {
  display: flex;
}

.sr-grid-shell-loader::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(101, 232, 255, .22);
  border-top-color: #65e8ff;
  border-radius: 50%;
  animation: srGridShellSpin .64s linear infinite;
}

@keyframes srGridShellSpin { to { transform: rotate(1turn); } }

.sr-reg-mark,
.brand-text .sr-reg-mark,
.brand-anim .sr-reg-mark,
.nav-logo .sr-reg-mark,
.logo-text .sr-reg-mark,
.main-title .sr-reg-mark {
  font-size: .46em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 769px) {

  body.sr-grid-page .top-nav-panel {
    min-height: 68px;
  }
}

@media (max-width: 768px) {
  body.sr-grid-page {
    --sr-grid-topbar-fallback: 158px;
  }
  body.sr-grid-page.sr-topbar-collapsed[data-sr-topbar-entry="collapsed"] {
    --sr-grid-topbar-fallback: 74px;
  }
  html.sr-ios-webkit-shell body.app-client.sr-grid-page.sr-topbar-collapsed[data-sr-topbar-entry="collapsed"],
  html.sr-ios-webkit-shell.sr-standalone-webapp body.sr-grid-page.sr-topbar-collapsed[data-sr-topbar-entry="collapsed"] {
    --sr-grid-topbar-fallback: calc(max(64px, calc(env(safe-area-inset-top, 0px) + 10px)) + 66px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-grid-shell-loader::before { animation: none; }
}

.grid-command-deck {
  position: relative;
  z-index: 30;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--grid-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0, rgba(101, 232, 255, .13), transparent 34%),
    radial-gradient(circle at 94% 110%, rgba(255, 95, 162, .10), transparent 38%),
    linear-gradient(145deg, rgba(8, 18, 27, .97), rgba(3, 7, 12, .985));
  box-shadow: 0 20px 54px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.grid-command-deck::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 24px 0 0 24px;
  background: linear-gradient(180deg, #65e8ff, #2eff81 52%, #ff7ab5);
  box-shadow: 0 0 22px rgba(101, 232, 255, .36);
}

.grid-command-deck.is-preview { grid-template-columns: 1fr; }
.grid-command-deck.is-preview .sr-grid-page-intro { grid-column: 1 / -1; }

.grid-command-deck .sr-grid-page-intro {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.grid-command-deck .sr-grid-page-intro::after { display: none !important; }
.grid-command-deck .sr-grid-page-intro .sr-standard-kicker { margin-bottom: 5px !important; }
.grid-command-deck .sr-grid-page-intro h1 { font-size: clamp(1.42rem, 3.2vw, 2.12rem) !important; }
.grid-command-deck .sr-grid-page-intro p { max-width: 520px !important; color: var(--grid-muted) !important; }

.grid-command-deck .grid-market-strip,
.grid-command-deck .grid-member-search,
.grid-command-deck .desktop-pills-wrapper,
.grid-command-deck .mobile-topic-dropdown {
  margin: 0 !important;
}

.grid-command-deck .grid-market-strip {
  grid-column: 2;
  align-self: stretch;
  border-radius: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.grid-command-deck .grid-member-search { grid-column: 2; }
.grid-command-deck .grid-member-search-shell {
  min-height: 48px;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.grid-command-deck .desktop-pills-wrapper {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 2px;
}

/* Vehicle cards use the event colour as a quiet navigational signal. */
.feed-post.card-vehicle {
  --event-accent: #65e8ff;
  --event-accent-rgb: 101, 232, 255;
  border-color: rgba(var(--event-accent-rgb), .23) !important;
  background:
    radial-gradient(circle at 12% 0, rgba(var(--event-accent-rgb), .10), transparent 31%),
    linear-gradient(180deg, rgba(8, 14, 21, .98), rgba(3, 7, 11, .985)) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  content-visibility: auto;
  contain-intrinsic-size: 680px;
}

.feed-post.card-vehicle::before {
  content: "";
  position: absolute;
  z-index: 12;
  inset: 0 auto 0 0;
  width: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--event-accent), transparent 44%);
  box-shadow: 0 0 20px rgba(var(--event-accent-rgb), .30);
}

.feed-post.card-vehicle::after { display: none !important; }
.feed-post.card-vehicle:focus-within {
  outline: 2px solid rgba(var(--event-accent-rgb), .62);
  outline-offset: 3px;
}

.feed-post.grid-update-story { --event-accent: #ff84bd; --event-accent-rgb: 255, 132, 189; }
.feed-post.grid-update-specs { --event-accent: #65e8ff; --event-accent-rgb: 101, 232, 255; }
.feed-post.grid-update-service,
.feed-post.grid-update-service_added,
.feed-post.grid-update-service_removed { --event-accent: #61efa0; --event-accent-rgb: 97, 239, 160; }
.feed-post.grid-update-modification,
.feed-post.grid-update-modification_added,
.feed-post.grid-update-modification_removed { --event-accent: #f1c40f; --event-accent-rgb: 241, 196, 15; }
.feed-post.grid-update-sound,
.feed-post.grid-update-sound_selected { --event-accent: #b993ff; --event-accent-rgb: 185, 147, 255; }
.feed-post.grid-update-image_removed,
.feed-post.grid-update-video_removed,
.feed-post.grid-update-sound_removed { --event-accent: #ff8c72; --event-accent-rgb: 255, 140, 114; }
.feed-post.grid-update-image_edited { --event-accent: #70d8ff; --event-accent-rgb: 112, 216, 255; }

.feed-post.card-vehicle .post-header {
  position: relative;
  align-items: flex-start;
  padding: 16px 18px;
}

.feed-post.card-vehicle .post-avatar {
  color: var(--event-accent);
  border-color: rgba(var(--event-accent-rgb), .34);
  background: rgba(var(--event-accent-rgb), .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 18px rgba(var(--event-accent-rgb), .08);
}

.feed-post.card-vehicle .post-status-txt {
  color: var(--event-accent);
  letter-spacing: .075em;
}

.grid-event-stage {
  --stage-accent: var(--event-accent, #65e8ff);
  --stage-accent-rgb: var(--event-accent-rgb, 101, 232, 255);
  aspect-ratio: 16 / 9 !important;
  min-height: 286px;
  isolation: isolate;
  display: grid;
  align-items: end;
  background:
    radial-gradient(circle at 78% 16%, rgba(var(--stage-accent-rgb), .23), transparent 35%),
    linear-gradient(140deg, #0a1822, #03070b 72%);
}

.grid-event-context-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .31;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.02);
}

.grid-event-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 7, 11, .96) 0%, rgba(2, 7, 11, .84) 53%, rgba(2, 7, 11, .44) 100%),
    linear-gradient(0deg, rgba(2, 7, 11, .92), transparent 62%);
}

.grid-event-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px;
  border: 1px solid rgba(var(--stage-accent-rgb), .19);
  border-radius: 18px;
  pointer-events: none;
}

.grid-event-content {
  width: min(88%, 590px);
  padding: 30px 34px 28px;
  box-sizing: border-box;
}

.grid-event-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 1px solid rgba(var(--stage-accent-rgb), .38);
  border-radius: 16px;
  color: var(--stage-accent);
  background: rgba(var(--stage-accent-rgb), .10);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), 0 0 24px rgba(var(--stage-accent-rgb), .12);
  font-size: 1.12rem;
}

.grid-event-copy { display: grid; gap: 6px; text-align: left; }
.grid-event-eyebrow {
  color: var(--stage-accent);
  font: 900 .62rem/1.2 var(--font-head, Orbitron), system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.grid-event-copy strong {
  max-width: 520px;
  color: #fff;
  font: 900 clamp(1.14rem, 3vw, 1.72rem)/1.12 var(--font-head, Orbitron), system-ui, sans-serif;
  letter-spacing: -.025em;
}
.grid-event-copy p {
  max-width: 520px;
  margin: 0;
  color: #c7d5de;
  font: 600 .84rem/1.55 var(--font-body, Inter), system-ui, sans-serif;
}

.grid-event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.grid-event-facts span,
.grid-event-context-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(var(--stage-accent-rgb), .22);
  border-radius: 999px;
  background: rgba(3, 9, 14, .72);
  color: #e8f4fa;
  font: 800 .68rem/1.2 var(--font-body, Inter), system-ui, sans-serif;
}
.grid-event-facts span { max-width: 100%; overflow-wrap: anywhere; }
.grid-event-facts i { color: var(--stage-accent); }
.grid-event-context-label {
  position: absolute;
  top: 26px;
  right: 26px;
  color: rgba(235, 245, 250, .72);
  border-color: rgba(255, 255, 255, .13);
  background: rgba(2, 7, 11, .54);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .57rem;
}

.feed-post.card-vehicle .post-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 18px 18px;
}
.feed-post.card-vehicle .specs {
  width: 100%;
  justify-content: center;
}
.feed-post.card-vehicle .specs span {
  text-align: center;
  border-color: rgba(var(--event-accent-rgb), .15);
  background: rgba(var(--event-accent-rgb), .055);
}
.feed-post.card-vehicle .plate { margin-inline: auto; }
.feed-post.card-vehicle .post-actions {
  width: 100%;
  justify-content: center;
}
.feed-post.card-vehicle .post-actions .btn {
  justify-content: center;
  text-align: center;
}
.feed-post.card-vehicle .post-actions .btn.primary {
  background: linear-gradient(135deg, var(--event-accent), rgba(var(--event-accent-rgb), .58));
  border-color: var(--event-accent);
}

html[data-theme="light"] body.sr-grid-page {
  --grid-surface: #f5fafc;
  --grid-surface-strong: #e9f2f6;
  --grid-ink: #102b38;
  --grid-muted: #526b78;
  --grid-line: rgba(24, 91, 126, .18);
}
html[data-theme="light"] .grid-command-deck {
  background:
    radial-gradient(circle at 8% 0, rgba(29, 164, 202, .12), transparent 34%),
    radial-gradient(circle at 94% 110%, rgba(189, 56, 118, .09), transparent 38%),
    linear-gradient(145deg, #f8fcfd, #eaf3f7);
  box-shadow: 0 16px 38px rgba(35, 74, 95, .12), inset 0 1px 0 #fff;
}
html[data-theme="light"] .grid-command-deck .sr-grid-page-intro p { color: #526b78 !important; }
html[data-theme="light"] .feed-post.card-vehicle {
  background: linear-gradient(180deg, #fff, #f3f8fa) !important;
  box-shadow: 0 16px 38px rgba(35, 74, 95, .14), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] .grid-event-stage {
  background: radial-gradient(circle at 78% 16%, rgba(var(--stage-accent-rgb), .20), transparent 35%), linear-gradient(140deg, #eaf4f7, #dce9ee 72%);
}
html[data-theme="light"] .grid-event-context-image { opacity: .22; }
html[data-theme="light"] .grid-event-shade {
  background: linear-gradient(90deg, rgba(241, 248, 250, .97), rgba(241, 248, 250, .88) 55%, rgba(241, 248, 250, .56)), linear-gradient(0deg, rgba(241, 248, 250, .94), transparent 64%);
}
html[data-theme="light"] .grid-event-copy strong { color: #102b38; }
html[data-theme="light"] .grid-event-copy p { color: #385766; }
html[data-theme="light"] .grid-event-facts span { color: #183d4f; background: rgba(255, 255, 255, .72); }
html[data-theme="light"] .grid-event-context-label { color: #395a69; background: rgba(255, 255, 255, .72); border-color: rgba(24, 73, 97, .16); }

@media (max-width: 768px) {
  body.sr-grid-page.app-client .app-layout { margin-top: 0 !important; }
  body.sr-grid-page .main-feed { gap: 12px !important; }
  .grid-command-deck {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    border-radius: 20px;
  }
  .grid-command-deck.is-member { min-block-size: 226px; }
  .grid-command-deck .sr-grid-page-intro {
    min-height: 58px;
    padding: 10px 12px !important;
  }
  .grid-command-deck .sr-grid-page-intro h1 { font-size: clamp(1.18rem, 6vw, 1.48rem) !important; }
  .grid-command-deck .sr-grid-page-intro p {
    margin-top: 3px !important;
    font-size: .7rem !important;
    line-height: 1.3 !important;
  }
  .grid-command-deck .grid-market-strip,
  .grid-command-deck .grid-member-search,
  .grid-command-deck .mobile-topic-dropdown { width: 100%; }
  .grid-command-deck .mobile-topic-dropdown { margin: 0 !important; top: auto !important; }
  .grid-command-deck .mobile-topic-control-row { max-width: none; }
  .grid-command-deck .grid-market-toggle { min-height: 44px; }
  .grid-command-deck .grid-member-search-shell { min-height: 44px; }

  .feed-post.card-vehicle {
    margin-bottom: 8px !important;
    border-radius: 20px !important;
    contain-intrinsic-size: 620px;
  }
  .feed-post.card-vehicle .post-header { padding: 14px; }
  .feed-post.card-vehicle .post-footer { padding: 13px 14px 15px; }
  .grid-event-stage {
    aspect-ratio: 5 / 4 !important;
    min-height: 270px;
  }
  .grid-event-stage::after { inset: 10px; border-radius: 15px; }
  .grid-event-content { width: 100%; padding: 24px 22px 22px; }
  .grid-event-icon { width: 42px; height: 42px; margin-bottom: 12px; border-radius: 14px; }
  .grid-event-copy strong { font-size: clamp(1.02rem, 5vw, 1.32rem); }
  .grid-event-copy p { font-size: .78rem; line-height: 1.48; }
  .grid-event-facts { gap: 6px; margin-top: 12px; }
  .grid-event-facts span { min-height: 28px; padding: 5px 9px; font-size: .63rem; }
  .grid-event-context-label { top: 20px; right: 20px; }
  .feed-post.card-vehicle .post-actions { gap: 7px; }
}

@media (max-width: 390px) {
  .grid-command-deck.is-member { min-block-size: 222px; }
  .grid-event-context-label { display: none; }
  .grid-event-copy p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .grid-event-facts span:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-command-deck *, .feed-post.card-vehicle * { scroll-behavior: auto !important; }
}