/* ==========================================================================
   Cities page — page-specific styles
   Uses the same design tokens defined in style.css
   (--marigold, --ink, --paper, --charcoal, --line, --radius-lg,
   --shadow-soft, --shadow-strong, --font-display, --font-mono,
   --font-body, --gutter, --maxw, --fast, --slow, --ease, --ease-2)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* SCROLL REVEAL — shared animation classes                               */
/* ---------------------------------------------------------------------- */

.reveal-left,
.reveal-right,
.reveal-up {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-2),
    transform 0.9s var(--ease-2);
  will-change: transform, opacity;
}

.reveal-left {
  transform: translateX(-56px);
}

.reveal-right {
  transform: translateX(56px);
}

.reveal-up {
  transform: translateY(32px);
}

.reveal-left.is-inview,
.reveal-right.is-inview,
.reveal-up.is-inview {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right,
  .reveal-up {
    transition: opacity 0.4s ease;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* INTRO / HERO                                                           */
/* ---------------------------------------------------------------------- */

.cities-hero {
  height: 100vh;
  padding-top: 150px;
}

.cities-hero .eyebrow i {
  margin-right: 8px;
  color: var(--marigold-2, var(--marigold));
}

.cities-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 14px;
  margin-bottom: 18px;
}

/* =========================================================
   CITIES HERO
========================================================= */

.cities-hero {
  position: relative;
  min-height: 100vh;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
    url("../images/cities/cities-hero.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  overflow: hidden;
}

/* Make sure content stays above the dark overlay */
.cities-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.cities-hero .section-head {
  max-width: 850px;
  margin: 0 auto;
}

/* Eyebrow */
.cities-hero .eyebrow {
  color: #d6a23a;
  margin-bottom: 14px;
}

.cities-hero .eyebrow i {
  margin-right: 7px;
}

/* Heading */
.cities-hero h1 {
  color: #fff;
  margin-bottom: 18px;
}

/* Description */
.cities-hero .section-head > p:last-child {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;

  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
}

/* Mobile */
@media (max-width: 768px) {
  .cities-hero {
    min-height: 380px;
    padding: 80px 0;
    background-position: center;
  }

  .cities-hero h1 {
    font-size: 36px;
  }

  .cities-hero .section-head > p:last-child {
    font-size: 15px;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .cities-hero {
    min-height: 100vh;
    padding: 70px 0;
  }

  .cities-hero h1 {
    font-size: 30px;
  }
}

/* ---------------------------------------------------------------------- */
/* CITY SHOWCASE — alternating rows                                       */
/* ---------------------------------------------------------------------- */

.city-showcase {
  padding-top: 60px;
}

.city-row {
  margin-bottom: 130px;
}

.city-row:last-child {
  margin-bottom: 0;
}

/* Small professional numbering label above each row */
.city-row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-family: var(--font-mono);
}

.city-row-index {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--marigold-2, var(--marigold));
  letter-spacing: 0.02em;
}

.city-row-total {
  font-size: 0.72rem;
  color: var(--charcoal-60);
}

.city-row-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  max-width: 90px;
}

.city-row-name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-60);
}

.city-row-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.city-row.is-reverse .city-row-body {
  direction: rtl;
}

.city-row.is-reverse .city-row-body > * {
  direction: ltr;
}

/* ---- Media (image) side ---- */
.city-media {
  position: relative;
}

.city-media .ph-image {
  border-radius: var(--radius-lg);
  aspect-ratio: 5/4;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}

.city-media .ph-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-2);
}

.city-media:hover .ph-image img {
  transform: scale(1.06);
}

.city-tag {
  position: absolute;
  top: -18px;
  left: 24px;
  z-index: 2;
  background: var(--marigold);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  box-shadow: var(--shadow-soft);
}

/* Placeholder look when no client image is added yet */
.ph-image.ph-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--paper-2) 0%, var(--paper) 100%);
  border: 1px dashed var(--line);
}

.ph-image.ph-empty::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--charcoal-60);
  padding: 0 16px;
  text-align: center;
  word-break: break-all;
}

/* ---- Copy (text) side ---- */
.city-copy .eyebrow i {
  margin-right: 8px;
  color: var(--marigold-2, var(--marigold));
}

.city-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-top: 10px;
  margin-bottom: 16px;
}

.city-copy p {
  color: var(--charcoal-60);
  margin-bottom: 22px;
}

.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.city-pill {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--charcoal);
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.city-pill:hover {
  background: var(--marigold);
  border-color: var(--marigold);
  color: #fff;
  transform: translateY(-2px);
}

.city-copy .btn i {
  margin-left: 8px;
  font-size: 0.85rem;
  transition: transform var(--fast) var(--ease);
}

.city-copy .btn:hover i {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------- */
/* CLOSING CTA                                                            */
/* ---------------------------------------------------------------------- */

.cities-cta {
  background: var(--ink);
  padding: 84px 0;
  text-align: center;
}

[data-theme="dark"] .cities-cta {
  background: #090f16;
}

.cities-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.cities-cta-inner p {
  color: rgba(255, 255, 255, 0.65);
  margin-top: 14px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.cities-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.cities-cta-actions .btn i {
  margin-right: 8px;
}

/* ---------------------------------------------------------------------- */
/* RESPONSIVE                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .city-row-body,
  .city-row.is-reverse .city-row-body {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 32px;
  }

  .city-row {
    margin-bottom: 90px;
  }

  .cities-hero {
    padding-top: 120px;
  }
}

@media (max-width: 600px) {
  .city-row-label {
    gap: 8px;
  }

  .city-row-line {
    max-width: 40px;
  }

  .city-tag {
    left: 16px;
    top: -14px;
    font-size: 0.62rem;
    padding: 6px 12px;
  }
}

/* =========================================================
   CITIES PAGE - RESPONSIVE & LARGE SCREEN FIXES
   Add this at the END of cities.css
   ========================================================= */

/* ---------------------------------------------------------
   LARGE DESKTOP
   1600px+ screens
   Prevent content from becoming too wide
--------------------------------------------------------- */

@media (min-width: 1400px) {
  .cities-hero .container,
  .city-showcase .container,
  .cities-cta .container {
    max-width: 1240px;
  }

  .cities-hero {
    min-height: 760px;
  }

  .cities-hero .section-head {
    max-width: 900px;
  }

  .city-row-body {
    gap: 80px;
  }

  .city-row {
    margin-bottom: 140px;
  }
}

/* ---------------------------------------------------------
   VERY LARGE SCREENS / 27 INCH
--------------------------------------------------------- */

@media (min-width: 1600px) {
  .cities-hero {
    min-height: 780px;
  }

  .city-showcase {
    padding-top: 90px;
  }

  .city-row-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 90px;
  }

  .city-copy {
    max-width: 560px;
  }

  .city-media .ph-image {
    max-width: 620px;
  }
}

/* ---------------------------------------------------------
   LAPTOP / NORMAL DESKTOP
   1200px - 1399px
--------------------------------------------------------- */

@media (max-width: 1399px) {
  .cities-hero {
    min-height: 680px;
  }

  .cities-hero .section-head {
    max-width: 820px;
  }

  .city-row-body {
    gap: 50px;
  }

  .city-row {
    margin-bottom: 110px;
  }
}

/* ---------------------------------------------------------
   SMALL LAPTOP / LARGE TABLET
   901px - 1100px
--------------------------------------------------------- */

@media (max-width: 1100px) {
  .cities-hero {
    min-height: 620px;
    padding-top: 100px;
  }

  .cities-hero .section-head {
    max-width: 760px;
  }

  .city-row-body {
    gap: 36px;
  }

  .city-copy h2 {
    font-size: clamp(1.55rem, 3vw, 2rem);
  }

  .city-copy p {
    font-size: 0.95rem;
  }

  .city-row {
    margin-bottom: 90px;
  }

  .city-media .ph-image {
    aspect-ratio: 5 / 4;
  }
}

/* ---------------------------------------------------------
   TABLET
   769px - 900px

   Stack city image + content before things become cramped.
--------------------------------------------------------- */

@media (max-width: 900px) {
  .cities-hero {
    min-height: 560px;
    padding: 100px 0 70px;
  }

  .cities-hero .section-head {
    max-width: 700px;
  }

  .cities-hero h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
  }

  .cities-hero .section-head > p:last-child {
    max-width: 650px;
  }

  .city-showcase {
    padding-top: 55px;
  }

  .city-row-body,
  .city-row.is-reverse .city-row-body {
    grid-template-columns: 1fr;
    gap: 34px;
    direction: ltr;
  }

  .city-row.is-reverse .city-row-body > * {
    direction: ltr;
  }

  .city-row {
    margin-bottom: 85px;
  }

  .city-media {
    width: 100%;
  }

  .city-media .ph-image {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }

  .city-copy {
    max-width: 760px;
    margin: 0 auto;
  }

  .city-copy h2 {
    font-size: 2rem;
  }

  .cities-cta {
    padding: 70px 0;
  }
}

/* ---------------------------------------------------------
   MOBILE
   768px and below
--------------------------------------------------------- */

@media (max-width: 768px) {
  .cities-hero {
    min-height: 500px;
    padding: 90px 0 65px;
    background-position: center center;
  }

  .cities-hero .section-head {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .cities-hero .eyebrow {
    font-size: 0.72rem;
  }

  .cities-hero h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.1;
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .cities-hero .section-head > p:last-child {
    font-size: 15px;
    line-height: 1.7;
    max-width: 100%;
  }

  .city-showcase {
    padding-top: 45px;
  }

  .city-row {
    margin-bottom: 70px;
  }

  .city-row-label {
    margin-bottom: 20px;
  }

  .city-row-body,
  .city-row.is-reverse .city-row-body {
    gap: 28px;
  }

  .city-media .ph-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
  }

  .city-tag {
    top: -12px;
    left: 14px;
  }

  .city-copy h2 {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    line-height: 1.2;
    margin-bottom: 14px;
  }

  .city-copy p {
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 18px;
  }

  .city-tags {
    gap: 8px;
    margin-bottom: 22px;
  }

  .city-pill {
    font-size: 0.72rem;
    padding: 6px 11px;
  }

  .cities-cta {
    padding: 60px 0;
  }

  .cities-cta-inner h2 {
    font-size: clamp(1.6rem, 7vw, 2rem);
    line-height: 1.2;
  }

  .cities-cta-inner p {
    font-size: 0.94rem;
    line-height: 1.7;
  }

  .cities-cta-actions {
    gap: 12px;
    margin-top: 26px;
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE
   600px and below
--------------------------------------------------------- */

@media (max-width: 600px) {
  .cities-hero {
    min-height: 460px;
    padding: 80px 0 55px;
  }

  .cities-hero h1 {
    font-size: 32px;
  }

  .cities-hero .section-head > p:last-child {
    font-size: 14px;
    line-height: 1.65;
  }

  .city-showcase {
    padding-top: 40px;
  }

  .city-row {
    margin-bottom: 65px;
  }

  .city-row-label {
    gap: 7px;
    margin-bottom: 18px;
  }

  .city-row-index {
    font-size: 0.85rem;
  }

  .city-row-total,
  .city-row-name {
    font-size: 0.64rem;
  }

  .city-row-line {
    max-width: 35px;
  }

  .city-media .ph-image {
    aspect-ratio: 4 / 3;
  }

  .city-tag {
    top: -11px;
    left: 12px;
    font-size: 0.6rem;
    padding: 6px 11px;
  }

  .city-copy h2 {
    font-size: 1.65rem;
  }

  .city-copy p {
    font-size: 0.9rem;
  }

  .city-pill {
    font-size: 0.68rem;
    padding: 6px 10px;
  }

  .cities-cta {
    padding: 55px 0;
  }

  .cities-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cities-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------
   VERY SMALL PHONES
   480px and below
--------------------------------------------------------- */

@media (max-width: 480px) {
  .cities-hero {
    min-height: 430px;
    padding: 75px 0 50px;
  }

  .cities-hero h1 {
    font-size: 29px;
    line-height: 1.12;
  }

  .cities-hero .eyebrow {
    font-size: 0.66rem;
  }

  .cities-hero .section-head > p:last-child {
    font-size: 13.5px;
  }

  .city-showcase {
    padding-top: 35px;
  }

  .city-row {
    margin-bottom: 58px;
  }

  .city-row-body {
    gap: 24px;
  }

  .city-media .ph-image {
    aspect-ratio: 1 / 0.78;
  }

  .city-copy h2 {
    font-size: 1.5rem;
  }

  .city-copy p {
    font-size: 0.88rem;
  }

  .city-tags {
    gap: 6px;
  }

  .city-pill {
    font-size: 0.64rem;
    padding: 5px 9px;
  }

  .city-tag {
    left: 10px;
  }
}

/* ---------------------------------------------------------
   EXTRA SMALL PHONES
   380px and below
--------------------------------------------------------- */

@media (max-width: 380px) {
  .cities-hero {
    min-height: 410px;
    padding: 70px 0 45px;
  }

  .cities-hero h1 {
    font-size: 26px;
  }

  .cities-hero .section-head > p:last-child {
    font-size: 13px;
  }

  .city-row-label {
    gap: 5px;
  }

  .city-row-line {
    max-width: 25px;
  }

  .city-copy h2 {
    font-size: 1.4rem;
  }

  .city-pill {
    font-size: 0.6rem;
  }
}

/* ---------------------------------------------------------
   TOUCH DEVICES
   Remove hover movement that can feel awkward on phones.
--------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .city-media:hover .ph-image img {
    transform: none;
  }

  .city-pill:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .city-media .ph-image img,
  .city-pill {
    transition: none;
  }

  .city-media:hover .ph-image img {
    transform: none;
  }
}