/* Phones-only City composition. Coral and sky are decorative fields, never
   product-status colors. Classic remains untouched. */

.phones-city-decoration {
  display: none;
}

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

:root[data-style="city"] .phones-page .phones-hero {
  background: var(--city-phones-sky);
  color: var(--city-phones-accent-ink);
  isolation: isolate;
  overflow: clip;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  padding-top: clamp(2.5rem, 5vw, 5rem);
  position: relative;
}

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

:root[data-style="city"] .phones-page .phones-hero > div {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(7rem, 14vw, 11rem);
  position: relative;
  z-index: 2;
}

:root[data-style="city"] .phones-page .phones-hero h1 {
  color: var(--city-phones-accent-ink);
  font-size: clamp(3.25rem, 7vw, 6rem);
  letter-spacing: -.035em;
  line-height: .94;
  max-width: 10ch;
  text-wrap: balance;
}

:root[data-style="city"] .phones-page .phones-city-decoration {
  background: var(--color-tertiary);
  border: var(--fp-outline-width) solid var(--city-phones-accent-ink);
  border-radius: 50%;
  display: block;
  height: clamp(9.375rem, 22vw, 20rem);
  pointer-events: none;
  position: absolute;
  right: clamp(-6.875rem, -7vw, -2.5rem);
  top: clamp(-8.125rem, -9vw, -3.75rem);
  user-select: none;
  width: clamp(9.375rem, 22vw, 20rem);
  z-index: -1;
}

:root[data-style="city"] .phones-page .phones-hero-count {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--city-phones-accent-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--city-phones-accent-ink) 22%, transparent);
  color: var(--color-on-surface);
  padding: .625rem .875rem;
  rotate: 1.5deg;
  width: fit-content;
}

:root[data-style="city"] .phones-page .phones-filter-bar {
  background: var(--color-surface);
  border-block: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: none;
}

:root[data-style="city"] .phones-page .phones-filter-trigger {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--fp-ink) 20%, transparent);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

:root[data-style="city"] .phones-page .phones-filter-trigger[data-active="true"] {
  background: var(--color-tertiary);
  color: var(--city-phones-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  :root[data-style="city"] .phones-page .phones-filter-trigger:hover,
  :root[data-style="city"] .phones-page .phones-filter-trigger:focus-visible {
    box-shadow: 3px 4px 0 color-mix(in srgb, var(--fp-ink) 24%, transparent);
    transform: translate(-1px, -1px);
  }
}

:root[data-style="city"] .phones-page .phones-filter-trigger[aria-expanded="true"] {
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--fp-ink) 20%, transparent);
  transform: translate(1px, 1px);
}

:root[data-style="city"] .phones-page .phones-filter-menu {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--fp-ink) 24%, transparent);
}

:root[data-style="city"] .phones-page .phones-filter-menu button {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--fp-ink) 16%, transparent);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:root[data-style="city"] .phones-page .phones-filter-menu button:hover,
:root[data-style="city"] .phones-page .phones-filter-menu button:focus-visible {
  background: color-mix(in srgb, var(--city-phones-sky) 16%, var(--color-surface));
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--fp-ink) 22%, transparent);
  transform: translate(-1px, -1px);
}

:root[data-style="city"] .phones-page .phones-filter-menu button[aria-selected="true"],
:root[data-style="city"] .phones-page .phones-filter-menu button[aria-pressed="true"] {
  background: var(--color-tertiary);
  color: var(--city-phones-accent-ink);
}

:root[data-style="city"] .phones-page #fap-more-title::after {
  background: var(--city-phones-coral);
  border: var(--fp-outline-width) solid var(--fp-ink);
  content: "";
  display: inline-block;
  height: 12px;
  margin-left: .75rem;
  rotate: 5deg;
  width: 12px;
}

:root[data-style="city"] .phones-page .phones-more-filter-group + .phones-more-filter-group {
  border-top: var(--fp-outline-width) solid color-mix(in srgb, var(--fp-ink) 28%, transparent);
}

:root[data-style="city"] .phones-page .phones-more-filter-option {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--fp-ink) 17%, transparent);
  transform: none;
}

:root[data-style="city"] .phones-page .phones-more-filter-option:hover,
:root[data-style="city"] .phones-page .phones-more-filter-option:focus-visible {
  background: color-mix(in srgb, var(--city-phones-sky) 12%, var(--color-surface));
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--fp-ink) 23%, transparent);
  transform: translate(-1px, -1px);
}

:root[data-style="city"] .phones-page .phones-more-filter-option[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-tertiary) 24%, var(--color-surface));
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--color-tertiary) 55%, var(--fp-ink));
}

:root[data-style="city"] .phones-page .phones-more-filters-footer {
  border-top: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: none;
}

:root[data-style="city"] .phones-page .phones-results {
  background: var(--city-phones-leaf-field);
  padding-bottom: clamp(4rem, 7vw, 6rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

:root[data-style="city"] .phones-page .phones-results > div > p:first-child {
  color: var(--color-on-surface);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

:root[data-style="city"] .phones-page .phones-browse-card {
  color: inherit;
}

:root[data-style="city"] .phones-page .phones-browse-card-media {
  background: color-mix(in srgb, var(--city-phones-sky) 14%, var(--color-photo-plate, var(--c-photo-plate)));
}

:root[data-style="city"] .phones-page .phones-browse-card:nth-child(3n + 2) .phones-browse-card-media {
  background: color-mix(in srgb, var(--color-tertiary) 12%, var(--color-photo-plate, var(--c-photo-plate)));
}

:root[data-style="city"] .phones-page .phones-browse-card:nth-child(3n) .phones-browse-card-media {
  background: color-mix(in srgb, var(--city-phones-coral) 10%, var(--color-photo-plate, var(--c-photo-plate)));
}

:root[data-style="city"] .phones-page .phones-state {
  background: var(--city-phones-leaf-field);
  display: grid;
  min-height: 20rem;
  place-items: center;
}

:root[data-style="city"] .phones-page .phones-empty-mark {
  background: var(--color-tertiary);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--fp-ink) 20%, transparent);
  color: var(--city-phones-accent-ink);
  rotate: -3deg;
}

:root[data-style="city"] .phones-page .phones-cta {
  background: var(--city-phones-coral);
  color: var(--city-phones-accent-ink);
  margin-top: 0;
  overflow: hidden;
  padding-block: clamp(4rem, 7vw, 6rem);
}

:root[data-style="city"] .phones-page .phones-cta::after {
  display: none;
}

:root[data-style="city"] .phones-page .phones-cta > div {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--fp-ink) 26%, transparent);
  max-width: 34rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  rotate: -1deg;
  z-index: 2;
}

:root[data-style="city"] .phones-page .phones-cta h2,
:root[data-style="city"] .phones-page .phones-cta p {
  color: var(--color-on-surface);
}

@media (max-width: 767.98px) {
  :root[data-style="city"] .phones-page .phones-hero {
    padding-bottom: 3.5rem;
    padding-top: 2.5rem;
  }

  :root[data-style="city"] .phones-page .phones-hero > div {
    align-items: flex-start;
  }

  :root[data-style="city"] .phones-page .phones-hero h1 {
    font-size: clamp(3rem, 17vw, 4.25rem);
  }

  :root[data-style="city"] .phones-page .phones-city-decoration {
    display: block;
    height: 9rem;
    right: -5rem;
    top: -5.5rem;
    width: 9rem;
  }

  :root[data-style="city"] .phones-page .phones-hero-count,
  :root[data-style="city"] .phones-page .phones-cta > div {
    rotate: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  :root[data-style="city"] .phones-page .phones-city-decoration,
  :root[data-style="city"] .phones-page .phones-hero::after,
  :root[data-style="city"] .phones-page .phones-hero-count,
  :root[data-style="city"] .phones-page .phones-empty-mark,
  :root[data-style="city"] .phones-page .phones-cta > div {
    rotate: none;
    transition: none;
    transform: none;
  }

  :root[data-style="city"] .phones-page .phones-filter-trigger,
  :root[data-style="city"] .phones-page .phones-filter-menu button,
  :root[data-style="city"] .phones-page .phones-more-filter-option {
    transition: none;
  }

  :root[data-style="city"] .phones-page .phones-filter-menu button:hover,
  :root[data-style="city"] .phones-page .phones-filter-menu button:focus-visible,
  :root[data-style="city"] .phones-page .phones-more-filter-option:hover,
  :root[data-style="city"] .phones-page .phones-more-filter-option:focus-visible {
    transform: none;
  }
}