/* EVE × ZEEKR combined landing (light theme) — sections unique to this page.
   Shared layout (header, hero, steps, partners, CTA, form, footer, modal)
   comes from landing.css; the page runs with data-theme="light" permanently. */

/* ---------- full-width model switcher (model zone) ---------- */

.p-bigswitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eve-space-4);
  /* pins to the top of the viewport while the model zone is on screen */
  position: sticky;
  top: var(--eve-space-2);
  z-index: var(--eve-z-sticky);
  border-radius: var(--eve-radius-3xl);
  transition: padding var(--eve-duration-normal) var(--eve-ease-out),
              gap var(--eve-duration-normal) var(--eve-ease-out),
              background-color var(--eve-duration-normal) var(--eve-ease-out),
              box-shadow var(--eve-duration-normal) var(--eve-ease-out);
}
/* stuck: compact glass bar, ~2.5x shorter, model can be switched mid-section */
.p-bigswitch.is-stuck {
  gap: var(--eve-space-2);
  padding: var(--eve-space-2);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--eve-shadow-md);
}
.p-bigswitch.is-stuck .p-bigswitch__btn {
  gap: 0;
  padding: var(--eve-space-2) var(--eve-space-4);
  border-radius: var(--eve-radius-2xl);
}
.p-bigswitch.is-stuck .p-bigswitch__name { font-size: 20px; line-height: 28px; }
.p-bigswitch.is-stuck .p-bigswitch__tag { max-height: 0; opacity: 0; }
@media (max-width: 700px) { .p-bigswitch:not(.is-stuck) { grid-template-columns: 1fr; } }
.p-bigswitch__btn {
  display: flex;
  flex-direction: column;
  gap: var(--eve-space-1);
  padding: var(--eve-space-6) var(--eve-space-8);
  border-radius: var(--eve-radius-2xl);
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--eve-border-subtle);
  transition: padding var(--eve-duration-normal) var(--eve-ease-out),
              gap var(--eve-duration-normal) var(--eve-ease-out),
              background-color var(--eve-duration-fast) var(--eve-ease-out),
              box-shadow var(--eve-duration-fast) var(--eve-ease-out);
}
.p-bigswitch__btn:hover { box-shadow: inset 0 0 0 1px var(--eve-border-default); }
.p-bigswitch__btn[data-active] {
  background: var(--eve-color-white);
  box-shadow: var(--eve-shadow-md);
}
.p-bigswitch__name {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: var(--eve-text-primary);
  transition: font-size var(--eve-duration-normal) var(--eve-ease-out),
              line-height var(--eve-duration-normal) var(--eve-ease-out);
}
.p-bigswitch__tag {
  font-size: 16px;
  line-height: 24px;
  color: var(--eve-text-tertiary);
  max-height: 24px;
  overflow: hidden;
  transition: max-height var(--eve-duration-normal) var(--eve-ease-out),
              opacity var(--eve-duration-normal) var(--eve-ease-out);
}

/* glance inside the model zone */
.p-glance { margin-block: var(--eve-space-16); }
@media (max-width: 768px) { .p-glance { margin-block: var(--eve-space-10); } }

/* details block inside the model zone */
.p-details { margin-top: var(--eve-space-16); }
.p-details__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: var(--eve-space-6);
}
@media (max-width: 768px) {
  .p-details { margin-top: var(--eve-space-10); }
  .p-details__title { font-size: 24px; line-height: 32px; }
}

/* ---------- hero: model switcher + breadcrumbs ---------- */

.p-hero__crumbs {
  display: flex;
  gap: var(--eve-space-4);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--eve-color-white);
}
.p-hero__crumbs span { color: rgba(255, 255, 255, 0.5); }
.p-hero__crumbs .sep { color: rgba(255, 255, 255, 0.35); }

.p-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eve-space-6);
  width: 100%;
  flex-wrap: wrap;
}

/* segmented control on dark photo, spec §4.5 (dark variant: #303030 glass) */
.p-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--eve-radius-3xl);
  background: rgba(48, 48, 48, 0.72);
  backdrop-filter: blur(20px) saturate(1.4); /* [system] approx of Figma GLASS */
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.p-switch__btn {
  height: 44px;
  padding: 10px var(--eve-space-4);
  border-radius: var(--eve-radius-xl);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  transition: background-color var(--eve-duration-fast) var(--eve-ease-out),
              color var(--eve-duration-fast) var(--eve-ease-out);
}
.p-switch__btn:hover { color: var(--eve-color-white); }
.p-switch__btn[data-active] { background: var(--eve-color-white); color: var(--eve-color-gray-975); }

.p-hero__badge { text-transform: none; }

/* ---------- at a glance ---------- */

.p-glance__lead {
  font-size: 20px;
  line-height: 28px;
  color: var(--eve-text-secondary);
  max-width: 900px;
  margin-bottom: var(--eve-space-10);
}
.p-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--eve-space-6);
}
@media (max-width: 1000px) { .p-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .p-stats { grid-template-columns: 1fr; } }
.p-stat {
  padding: var(--eve-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--eve-space-2);
}
.p-stat__value {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  color: var(--eve-text-primary);
}
.p-stat__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--eve-text-secondary);
}

/* ---------- details accordion ---------- */

.p-acc {
  display: flex;
  flex-direction: column;
  gap: var(--eve-space-4);
}
.p-acc__item {
  background: var(--eve-color-gray-100);
  border-radius: var(--eve-radius-3xl);
  overflow: hidden;
}
.p-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eve-space-4);
  width: 100%;
  padding: var(--eve-space-6) var(--eve-space-8);
  text-align: left;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: var(--eve-text-primary);
}
.p-acc__head svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--eve-text-tertiary);
  transition: transform var(--eve-duration-normal) var(--eve-ease-out);
}
.p-acc__item[data-open] .p-acc__head svg { transform: rotate(180deg); }
.p-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--eve-duration-slow) var(--eve-ease-out);
}
.p-acc__item[data-open] .p-acc__panel { grid-template-rows: 1fr; }
.p-acc__inner {
  overflow: hidden;
  min-height: 0;
}
.p-acc__content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--eve-space-8);
  padding: 0 var(--eve-space-8) var(--eve-space-8);
}
@media (max-width: 900px) { .p-acc__content { grid-template-columns: 1fr; } }
.p-acc__img {
  border-radius: var(--eve-radius-2xl);
  overflow: hidden;
  align-self: start;
}
.p-acc__img img { width: 100%; height: auto; }
.p-acc__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eve-space-6) var(--eve-space-8);
}
@media (max-width: 560px) { .p-acc__feats { grid-template-columns: 1fr; } }
.p-acc__feats strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: var(--eve-space-1);
}
.p-acc__feats p {
  font-size: 14px;
  line-height: 20px;
  color: var(--eve-text-secondary);
}

/* accordion content swap animation on model switch */
.p-acc.is-swapping, .p-glance.is-swapping, .p-config.is-swapping { opacity: 0; transition: opacity var(--eve-duration-fast); }
.p-acc, .p-glance, .p-config { transition: opacity var(--eve-duration-normal) var(--eve-ease-out); }

/* ---------- configurator ---------- */

.p-config__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--eve-space-10);
  align-items: center;
  margin-bottom: var(--eve-space-8);
}
@media (max-width: 900px) { .p-config__grid { grid-template-columns: 1fr; } }
.p-config__car { text-align: center; }

/* layered preview: wheel-less body + disk overlay (mirrors evexperts.ae) */
.p-preview {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  aspect-ratio: 1024 / 420;   /* холст перерисованных картинок конфигуратора */
}
.p-preview__body,
.p-preview__disk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* disk thumbnail picker */
.p-disks { display: flex; gap: var(--eve-space-3); }
.p-disk {
  width: 72px;
  height: 72px;
  border-radius: var(--eve-radius-pill);
  position: relative;
  background: var(--eve-color-gray-100);
  padding: 6px;
}
.p-disk img { width: 100%; height: 100%; object-fit: contain; }
.p-disk[data-active]::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--eve-radius-pill);
  border: 2px solid var(--eve-accent);
}
.p-config__price-label {
  font-size: 16px;
  line-height: 24px;
  color: var(--eve-text-tertiary);
}
.p-config__price {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  margin-bottom: var(--eve-space-6);
}
.p-config__actions {
  display: flex;
  flex-direction: column;
  gap: var(--eve-space-3);
  max-width: 420px;
}
.p-config__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eve-space-6);
}
@media (max-width: 900px) { .p-config__options { grid-template-columns: 1fr; } }
.p-option {
  background: var(--eve-color-white);
  border-radius: var(--eve-radius-2xl);
  padding: var(--eve-space-6) var(--eve-space-8);
  box-shadow: var(--eve-shadow-md); /* [system] option cards float on the gray page section */
}
.p-option__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eve-space-4);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: var(--eve-space-4);
}
.p-option__title small {
  font-size: 14px;
  font-weight: 400;
  color: var(--eve-text-tertiary);
}
.p-swatches { display: flex; gap: var(--eve-space-3); }
.p-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--eve-radius-pill);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.12);
}
.p-swatch[data-active]::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--eve-radius-pill);
  border: 2px solid var(--eve-accent);
}
.p-option__value {
  margin-top: var(--eve-space-3);
  font-size: 14px;
  line-height: 20px;
  color: var(--eve-text-secondary);
}

/* segmented control on light (spec §4.5: #E6E6E6 container) */
.p-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--eve-radius-3xl);
  background: var(--eve-color-gray-200);
  max-width: 100%;
  overflow-x: auto;
}
.p-seg__btn {
  height: 44px;
  padding: 10px var(--eve-space-4);
  border-radius: var(--eve-radius-xl);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--eve-color-gray-975);
  white-space: nowrap;
}
.p-seg__btn[data-active] { background: var(--eve-color-white); }

.p-config__note {
  margin-top: var(--eve-space-6);
  font-size: 13px;
  line-height: 20px;
  color: var(--eve-text-tertiary);
  max-width: 640px;
}

/* ---------- sticky floating action bar (spec §6: 401x72 white pill, r120) ---------- */

.p-fab {
  position: fixed;
  left: 50%;
  bottom: var(--eve-space-6);
  transform: translate(-50%, calc(100% + 32px));
  z-index: var(--eve-z-sticky);
  display: flex;
  gap: var(--eve-space-3);
  padding: var(--eve-space-2);
  border-radius: 120px;
  background: var(--eve-color-white);
  box-shadow: 0 4px 24px -8px rgba(17, 17, 17, 0.32);
  transition: transform var(--eve-duration-slow) var(--eve-ease-out);
}
.p-fab[data-visible] { transform: translate(-50%, 0); }
.p-fab .eve-btn { flex: none; }
@media (max-width: 560px) {
  .p-fab { width: calc(100% - 32px); }
  .p-fab .eve-btn { flex: 1; padding-inline: var(--eve-space-3); }
}

@media (max-width: 768px) {
  .p-hero__top { flex-direction: column; align-items: center; gap: var(--eve-space-4); }
  .p-hero__crumbs { font-size: 16px; line-height: 24px; }
  /* long badge text wraps instead of overflowing [system] */
  .p-hero__badge { height: auto; min-height: 40px; white-space: normal; text-align: left; }
}