/* ==========================================================================
   PAGE: City
   ========================================================================== */

/* ----- CityContent1: intro + local snapshot card ----- */
.city-intro {
  padding-block: var(--section-space);

  .city-intro-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
  }

  h1 {
    font-size: clamp(2rem, 3.8vw, 3rem);
  }

  .city-intro-lead {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--secondary-color);
  }

  .city-intro-main p:not(.city-intro-lead) {
    color: var(--text-muted);
  }

  .city-snapshot {
    position: sticky;
    top: 140px;
    padding: 32px 28px;
    background: var(--primary-color);
    border-radius: var(--radius-lg);

    h2 {
      font-size: 1.4rem;
    }

    p {
      color: color-mix(in srgb, var(--secondary-color) 85%, transparent);
    }

    .link-arrow {
      color: var(--secondary-color);
    }
  }

  .city-snapshot-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    font-size: 1.4rem;
    color: var(--primary-color);
    background: var(--secondary-color);
    border-radius: 50%;
  }
}

/* ----- CityContent2: photo + copy ----- */
.city-feature {
  padding-block: var(--section-space);
  background: white;

  .city-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
  }

  .city-feature-media {
    margin: 0;

    img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radius-lg);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 88%);
    }
  }

  h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  }

  .city-feature-copy p {
    color: var(--text-muted);
  }
}

/* ----- CityContent3: two panels ----- */
.city-panels {
  padding-block: var(--section-space);

  .city-panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .city-panel {
    padding: clamp(28px, 4vw, 44px);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);

    h2 {
      font-size: 1.6rem;
    }

    p {
      color: var(--text-muted);
    }
  }

  .city-panel--accent {
    color: var(--text-on-dark);
    background: var(--secondary-color);
    border-color: var(--secondary-color);

    p,
    li {
      color: var(--text-on-dark-muted);
    }

    .check-list li {
      border-color: var(--border-on-dark);

      &::before {
        color: var(--primary-color);
      }
    }
  }
}

/* ----- CityContent4: decision path with steps ----- */
.city-steps {
  padding-block: var(--section-space);
  background: var(--surface-alt);

  .city-steps-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
  }

  h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  }

  .city-steps-copy p {
    color: var(--text-muted);
  }
}

/* ----- CityMap: full-width map with a card ----- */
.city-map {
  position: relative;
  min-height: 460px;

  .city-map-frame {
    position: absolute;
    inset: 0;

    iframe {
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(0.3);
    }
  }

  .city-map-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 460px;
    pointer-events: none;
  }

  .city-map-card {
    max-width: 440px;
    padding: 32px;
    background: white;
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--primary-color);
    box-shadow: var(--shadow);
    pointer-events: auto;

    h2 {
      font-size: 1.5rem;
    }

    p {
      color: var(--text-muted);
    }
  }
}

@media (max-width: 900px) {
  .city-intro .city-intro-grid,
  .city-feature .city-feature-grid,
  .city-panels .city-panels-grid,
  .city-steps .city-steps-grid {
    grid-template-columns: 1fr;
  }

  .city-intro .city-snapshot {
    position: static;
  }

  .city-map {
    min-height: 0;

    .city-map-frame {
      position: relative;
      height: 300px;
    }

    .city-map-inner {
      min-height: 0;
      padding-block: 24px;
    }
  }
}