.city-page { display: grid; gap: 40px; }
.city-hero,
.city-links,
.city-food,
.city-time,
.city-note { width: min(100%, var(--section-width)); margin: 0 auto; }

.city-hero {
  min-height: 470px;
  display: flex;
  align-items: flex-start;
  padding: 48px 58px;
  overflow: hidden;
  border-radius: 42px;
  box-shadow: var(--shadow-xl);
  color: var(--white);
  background-image:
    linear-gradient(90deg, rgba(4,17,31,.62) 0%, rgba(4,17,31,.28) 54%, rgba(4,17,31,.08) 100%),
    linear-gradient(180deg, rgba(4,17,31,.03), rgba(4,17,31,.16)),
    url("assets/images/vivi-pesaro.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.city-hero__content { max-width: 900px; }
.city-hero h1 { margin: 8px 0 0; font-size: clamp(4rem, 7vw, 6.4rem); line-height: .95; letter-spacing: -.045em; }
.city-hero p:last-child { max-width: 720px; margin: 22px 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55; color: rgba(251,253,255,.94); }

.city-section {
  padding: 42px 40px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.city-section__heading { max-width: none; margin-bottom: 26px; }
.city-section__heading--branded { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.city-section__heading-copy { max-width: 860px; }
.city-section__heading .section-event-logo { flex: 0 0 auto; width: clamp(150px, 18vw, 245px); max-height: 92px; object-fit: contain; }
.city-section__heading h2 { margin: 0; color: var(--navy-940); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.035em; }
.city-section__heading p:last-child { margin: 14px 0 0; color: var(--muted); line-height: 1.65; }

.city-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.city-resource-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 28px;
  border-radius: 24px;
  color: var(--white);
  background: linear-gradient(145deg, var(--navy-980), var(--navy-820));
  box-shadow: 0 18px 40px rgba(4,17,31,.12);
}
.city-resource-card--nature { background: linear-gradient(145deg, #153e3b, #24695f); }
.city-resource-card small { color: var(--sand-300); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.city-resource-card h3 { margin: 16px 0 10px; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.05; }
.city-resource-card p { margin: 0 0 24px; color: rgba(255,255,255,.84); line-height: 1.55; }
.city-resource-card a { margin-top: auto; align-self: flex-start; font-weight: 900; letter-spacing: .04em; }
.city-resource-card a:hover,.city-resource-card a:focus-visible { text-decoration: underline; }

.food-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.food-group { padding: 22px; border: 1px solid rgba(16,34,53,.09); border-radius: 20px; background: rgba(255,255,255,.84); }
.food-group__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: rgba(31,99,135,.09); color: var(--navy-820); font-size: 1.25rem; }
.food-group h3 { margin: 0 0 14px; color: var(--navy-900); font-size: 1.15rem; }
.food-group ul { margin: 0; padding: 0; list-style: none; }
.food-group li + li { margin-top: 10px; }
.food-group a { color: var(--navy-820); font-weight: 800; }
.food-group a:hover,.food-group a:focus-visible { text-decoration: underline; }
.food-group span { display: block; margin-top: 2px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.food-disclaimer { margin: 18px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.city-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.city-time-card { padding: 24px; border-radius: 22px; background: rgba(31,99,135,.07); }
.city-time-card small { color: var(--sand-500); font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.city-time-card h3 { margin: 9px 0 8px; color: var(--navy-900); font-size: 1.35rem; }
.city-time-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.city-time-card a { display: inline-block; margin-top: 14px; color: var(--navy-820); font-weight: 800; }

.city-note { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 34px; border-radius: 28px; color: var(--white); background: linear-gradient(135deg, var(--navy-980), var(--navy-820)); }
.city-note h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 3rem); }
.city-note p { margin: 0; color: rgba(255,255,255,.82); }
.city-note__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }

@media (max-width: 980px) {
  .food-groups { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .city-time-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .city-hero { min-height: 420px; padding: 34px 28px; }
  .city-hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .city-resource-grid { grid-template-columns: 1fr; }
  .city-note { align-items: flex-start; flex-direction: column; }
  .city-section__heading--branded { flex-direction: column; }
  .city-section__heading .section-event-logo { align-self: flex-end; width: min(210px, 58vw); }
}
@media (max-width: 560px) {
  .city-section { padding: 28px 20px; }
  .food-groups { grid-template-columns: 1fr; }
}