/* Phone-detail City field guide. The expressive color fields and print
   construction are route-owned; semantic product colors remain untouched. */

:root[data-style="city"] .phone-detail-page {
  --city-detail-coral: #ef765f;
  --city-detail-sky: #62bce8;
  --city-detail-accent-ink: #20263a;
  --city-detail-leaf-field: color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
  color: var(--color-on-surface);
  min-width: 0;
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero,
:root[data-style="city"] .phone-detail-page .phone-detail-health,
:root[data-style="city"] .phone-detail-page .phone-detail-full-specs,
:root[data-style="city"] .phone-detail-page .phone-detail-hands-on,
:root[data-style="city"] .phone-detail-page .phone-detail-dxomark,
:root[data-style="city"] .phone-detail-page .phone-detail-benchmarks,
:root[data-style="city"] .phone-detail-page .phone-detail-known-issues,
:root[data-style="city"] .phone-detail-page .phone-detail-marketplace,
:root[data-style="city"] .phone-detail-page .phone-detail-similar-phones {
  min-width: 0;
  position: relative;
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero {
  align-items: center;
  background: var(--city-detail-sky);
  border: 0;
  border-bottom: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  overflow: clip;
  padding-block: clamp(2rem, 5vw, 5rem);
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero::after {
  background: var(--city-detail-coral);
  border-block: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  bottom: 0;
  content: "";
  height: 10px;
  left: -2%;
  pointer-events: none;
  position: absolute;
  rotate: -1deg;
  width: 104%;
  z-index: 1;
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero > div {
  position: relative;
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero h1 {
  color: var(--city-detail-accent-ink);
  letter-spacing: -.03em;
  max-width: 12ch;
  text-wrap: balance;
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero-editorial > p {
  color: color-mix(in srgb, var(--city-detail-accent-ink) 78%, transparent);
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero-editorial > div:first-child > span,
:root[data-style="city"] .phone-detail-page .phone-detail-hero-editorial > a {
  color: var(--city-detail-accent-ink);
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero-editorial > div:first-child > a {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero-media {
  background: var(--color-photo-plate, var(--c-photo-plate));
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--city-detail-accent-ink) 28%, transparent);
  display: grid;
  /* Full-width track — without it the implicit auto column shrink-wraps to
     the gallery's max-content (the thumbnail strip), so galleries with few
     thumbs render the image panel as a narrow column. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  place-items: center;
}

:root[data-style="city"] .phone-detail-page .phone-detail-hero-media > div {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

:root[data-style="city"] .phone-detail-page .phone-detail-gallery-main {
  background: var(--color-photo-img-bg, var(--c-photo-img-bg));
  border: 0;
}

:root[data-style="city"] .phone-detail-page .phone-detail-gallery-main > img {
  height: 82%;
  inset: auto;
  left: 50%;
  max-height: 23rem;
  max-width: 30rem;
  /* Blend the baked white JPEG background into the plate, same idiom as
     .photo-img — without it the white box edges show against --c-photo-img-bg
     (most visible in dark mode). */
  mix-blend-mode: var(--c-photo-blend-mode);
  padding: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
}

:root[data-style="city"] .phone-detail-page .phone-detail-gallery-thumb {
  /* Light photo-plate tint, not the theme surface — the multiply-blended JPEG
     inside needs a light backdrop or the product renders as a silhouette. */
  background: var(--c-photo-img-bg);
  border: var(--fp-outline-width) solid var(--fp-ink);
  opacity: .68;
}

:root[data-style="city"] .phone-detail-page .phone-detail-gallery-thumb:hover {
  opacity: .86;
}

:root[data-style="city"] .phone-detail-page .phone-detail-gallery-thumb[aria-current="true"] {
  background: var(--color-tertiary);
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  opacity: 1;
}

:root[data-style="city"] .phone-detail-page .phone-detail-verdict {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--city-detail-accent-ink) 24%, transparent);
  color: var(--color-on-surface);
  position: relative;
}

/* Merged social chip — same print construction as the verdict card it sits
   above, so the pill reads as inked paper on the hero's sky field instead of
   a flat Classic-style tint. */
:root[data-style="city"] .phone-detail-page .phone-detail-social-chip {
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--city-detail-accent-ink) 24%, transparent);
}

:root[data-style="city"] .phone-detail-page .phone-detail-verdict::after {
  background: var(--city-detail-coral);
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  content: "";
  height: 13px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  rotate: 5deg;
  top: 14px;
  width: 13px;
}

:root[data-style="city"] .phone-detail-page .phone-detail-quick-facts {
  background: transparent;
  border: 0;
  overflow: visible;
  padding: .25rem 0;
}

:root[data-style="city"] .phone-detail-page .phone-detail-quick-facts-grid {
  display: grid;
  gap: .75rem;
  min-width: 0;
  width: 100%;
}

:root[data-style="city"] .phone-detail-page .phone-detail-quick-fact {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  border-radius: var(--fp-card-radius);
  color: var(--color-on-surface);
}

:root[data-style="city"] .phone-detail-page .phone-detail-quick-fact:hover,
:root[data-style="city"] .phone-detail-page .phone-detail-quick-fact:focus-visible {
  background: color-mix(in srgb, var(--color-tertiary) 18%, var(--color-surface));
}

:root[data-style="city"] .phone-detail-page :is(
  .phone-detail-full-specs,
  .phone-detail-health,
  .phone-detail-hands-on,
  .phone-detail-dxomark,
  .phone-detail-benchmarks,
  .phone-detail-known-issues,
  .phone-detail-marketplace,
  .phone-detail-similar-phones
) h2 {
  align-items: center;
  display: flex;
  gap: .75rem;
}

:root[data-style="city"] .phone-detail-page :is(
  .phone-detail-full-specs,
  .phone-detail-health,
  .phone-detail-hands-on,
  .phone-detail-dxomark,
  .phone-detail-benchmarks,
  .phone-detail-known-issues,
  .phone-detail-marketplace,
  .phone-detail-similar-phones
) h2::after {
  background: var(--city-detail-coral);
  border: var(--fp-outline-width) solid var(--fp-ink);
  content: "";
  flex: 0 0 12px;
  height: 12px;
  rotate: 5deg;
  width: 12px;
}

:root[data-style="city"] .phone-detail-page .phone-detail-full-specs {
  background: var(--color-surface);
  border: 0;
  margin-top: 0;
  padding-top: clamp(4rem, 7vw, 6rem);
}

:root[data-style="city"] .phone-detail-page .phone-detail-hands-on,
:root[data-style="city"] .phone-detail-page .phone-detail-health,
:root[data-style="city"] .phone-detail-page .phone-detail-dxomark,
:root[data-style="city"] .phone-detail-page .phone-detail-known-issues {
  border-top: var(--fp-outline-width) solid var(--fp-ink);
  margin-top: 0;
}

:root[data-style="city"] .phone-detail-page .phone-detail-benchmarks {
  background: var(--city-detail-coral);
  border-block: var(--fp-outline-width) solid var(--fp-ink);
  color: var(--city-detail-accent-ink);
  margin-top: 0;
}

:root[data-style="city"] .phone-detail-page .phone-detail-benchmarks h2,
:root[data-style="city"] .phone-detail-page .phone-detail-benchmarks > div > div:first-child p {
  color: var(--city-detail-accent-ink);
}

:root[data-style="city"] .phone-detail-page .phone-detail-benchmarks h2::after {
  background: var(--color-tertiary);
  border-color: var(--city-detail-accent-ink);
}

:root[data-style="city"] .phone-detail-page .phone-detail-dxomark-card {
  background: var(--color-surface);
}

:root[data-style="city"] .phone-detail-page .phone-detail-benchmark-card {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--city-detail-accent-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--city-detail-accent-ink) 24%, transparent);
}

:root[data-style="city"] .phone-detail-page .phone-detail-benchmark-card:hover {
  box-shadow: 6px 7px 0 color-mix(in srgb, var(--city-detail-accent-ink) 28%, transparent);
}

:root[data-style="city"] .phone-detail-page .phone-detail-marketplace {
  background: var(--city-detail-leaf-field);
  border: 0;
  margin-top: 0;
  padding: clamp(3.5rem, 7vw, 6rem) 1.5rem;
}

:root[data-style="city"] .phone-detail-page .phone-detail-marketplace > div {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: var(--fp-hard-shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}

:root[data-style="city"] .phone-detail-page .phone-detail-similar-phones {
  background: var(--color-surface-container-low);
  border-top: 10px solid var(--city-detail-sky);
  margin-top: 0;
  padding-top: clamp(3.5rem, 6vw, 5rem);
}

@media (max-width: 1023.98px) {
  :root[data-style="city"] .phone-detail-page .phone-detail-hero-media {
    align-self: start;
    width: 100%;
  }
}

@media (max-width: 759px) {
  :root[data-style="city"] .phone-detail-page .phone-detail-hero {
    padding-top: 1.5rem;
  }

  :root[data-style="city"] .phone-detail-page .phone-detail-marketplace {
    padding-inline: 1rem;
  }

  :root[data-style="city"] .phone-detail-page .phone-detail-marketplace > div {
    padding: 1rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-style="city"] .phone-detail-page {
    --city-detail-coral: #ff8a78;
    --city-detail-sky: #69c7ef;
    --city-detail-accent-ink: #10182a;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style="city"] .phone-detail-page .phone-detail-hero::after,
  :root[data-style="city"] .phone-detail-page .phone-detail-verdict::after,
  :root[data-style="city"] .phone-detail-page h2::after {
    rotate: none;
  }

  :root[data-style="city"] .phone-detail-page .phone-detail-quick-facts-grid,
  :root[data-style="city"] .phone-detail-page .phone-detail-quick-fact,
  :root[data-style="city"] .phone-detail-page .phone-detail-benchmark-card {
    transition: none;
    transform: none;
    translate: none;
  }
}