/* ============================================================
   condizionatore.css — /pronto-intervento-condizionatore/ and its
   city pages. Loaded after global.css and prezzi.css.

   Only what global.css and prezzi.css do not provide. Tokens,
   .btn, .container, header and footer are never redefined here.

   The CITY PAGE section below is copied from elettricista.css (the
   parts bin model: two service files never load together, so the
   same class names cannot collide). City pages here are built to
   look like /intervento-elettricista/elettricista-milano/.
============================================================ */


/* HERO H1 — takes global.css's hero size and capitals like every other
   service page (owner request). One physical limit: "CONDIZIONATORE" is
   ~9.9em wide and a word cannot wrap, so at the global size it spills
   out of the copy column and into the photo between 980px (hero goes
   two-up) and ~1250px. min() caps the size at 4.4vw only in that band;
   at 1280px it is 56px against the global 57.6px, and above ~1310px the
   global size applies untouched. Below 980px the hero is one column and
   the word already fits. */
@media (min-width:980px){
  .hero.hero--split h1{ font-size:min(clamp(2.1rem,1.4rem + 3vw,3.6rem),4.4vw); }
}


/* ------------------------------------------------------------
   HUB — "PRONTO INTERVENTO CONDIZIONATORE 24 ORE": space between
   the paragraph and the CHIAMA SUBITO button that follows it.
------------------------------------------------------------ */
#condizionatore-24-ore .about__content + p{ margin-top:var(--space-m); }


/* ============================================================
   CITY PAGE — copied from elettricista.css
============================================================ */

/* Section headings: green, a step down from global.css's h2. */
.section-title {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  font-weight: 800;
  color: var(--green-900);
  letter-spacing: -0.01em;
}

.section-title--center { text-align: center; }


/* Hero trust list two-up on a phone (see elettricista.css). */
@media (max-width: 560px) {
  .hero--city .hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .hero--city .hero__trust li { font-size: 0.82rem; gap: 8px; }

  .hero--city .hero__trust svg { width: 17px; height: 17px; }
}


/* ------------------------------------------------------------
   PROSE BANDS
------------------------------------------------------------ */
.city-prose { background: var(--paper-000); }

.city-prose__col { max-width: none; }

/* Round icon badge floated into the copy. */
.city-prose__icon {
  float: left;
  shape-outside: circle(50%);
  margin: 2px 20px 12px 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-prose__col p {
  margin: 0 0 var(--space-s);
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink-700);
  text-align: left;
}

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

.city-prose__col strong { color: var(--green-900); }

.city-prose__col a {
  color: var(--green-500);
  font-weight: 700;
  text-decoration: underline;
}

.city-prose__col a:hover { color: var(--green-700); }

.city-prose__col a.btn { text-decoration: none; }

.city-prose__col a.btn--primary,
.city-prose__col a.btn--primary:hover { color: var(--paper-000); }

/* Sub-headings inside running copy (a second <h3> mid-column). */
.city-prose h3,
.city-prose h4 {
  margin: 0 0 var(--space-s);
}

.city-prose__col p + h3 { margin-top: var(--space-l); }


/* Callout — the orange call line. */
.city-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-s) !important;
  padding: var(--space-s) var(--space-m);
  background: var(--amber-050);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-200);
}

.city-prose__col .city-callout__tel {
  color: var(--amber-600);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  text-decoration: none;
  line-height: 1.2;
}

.city-prose__col .city-callout__tel:hover { text-decoration: underline; }


/* Split prose — copy left, photo right, from 992px up. */
.city-prose__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.city-prose--split .city-prose__col { max-width: none; }

.city-prose__media { min-width: 0; }

.city-prose__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
}

@media (max-width: 991px) {
  .city-prose__media { max-width: 520px; margin-inline: auto; }
}

@media (min-width: 992px) {
  .city-prose--split .city-prose__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .city-prose--split .section-title {
    font-size: clamp(1.25rem, 0.7rem + 0.95vw, 1.75rem);
    line-height: 1.2;
  }
}


/* ------------------------------------------------------------
   WHY / SERVICES PANEL — tinted band: title + intro, an orange
   call strip, then a white panel with the keyword chips.
------------------------------------------------------------ */
.city-why { background: var(--green-050); }

.city-why__head {
  max-width: var(--max-w);
  margin: 0 0 var(--space-xl);
  text-align: left;
}

.city-why__title {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.375rem);
  font-weight: 800;
  color: var(--green-900);
  letter-spacing: -0.01em;
}

.city-why__intro {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.city-why__intro strong { color: var(--green-900); }

.city-why__close {
  margin: 0 0 var(--space-xl);
  padding: var(--space-m) clamp(20px, 3vw, 32px);
  background: var(--amber-050);
  border-left: 4px solid var(--amber-500);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: 1.01rem;
  line-height: 1.7;
  color: var(--ink-700);
}

.city-why__close strong { color: var(--green-900); }

.city-why__close a {
  color: var(--amber-600);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.city-why__close a:hover { color: var(--amber-500); }

.city-why__panel {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 44px);
}

.city-why__subhead {
  margin: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.6rem);
  font-weight: 800;
  color: var(--green-900);
  line-height: 1.25;
}

.city-why__lead {
  margin: 0 0 var(--space-m);
  font-size: 1.01rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 72ch;
}

.city-why__lead strong { color: var(--green-900); }

.city-why__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}

@media (min-width: 760px)  { .city-why__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .city-why__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.city-why__chips li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: 10px 14px;
  background: var(--green-100);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-s);
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--green-900);
}

.city-why__chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--amber-500);
  flex-shrink: 0;
}

/* Condizionatore addition: the call button under the chips. */
.city-why__cta { margin: var(--space-m) 0 0; }

@media (max-width: 560px) {
  .city-why__panel   { padding: 20px 18px; }
  .city-why__chips li { padding: 10px 12px; font-size: 0.78rem; }
  .city-why__cta .btn { width: 100%; justify-content: center; }
}


/* ------------------------------------------------------------
   SERVICE CARDS — heading + paragraph cards, centred.
   Condizionatore change: the card titles are <h3> on the old
   Milano page, so the h4 rule covers h3 too.
------------------------------------------------------------ */
.city-services { background: var(--paper-000); }

.city-services__head { margin-bottom: var(--space-l); }

.city-svc-grid {
  --col-min: 300px;
  --gap: clamp(20px, 2.4vw, 32px);
  --cols-max: 3;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      max(min(var(--col-min), 100%),
          (100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),
      1fr
    )
  );
}

.city-svc-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 32px);
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s cubic-bezier(.2,.7,.3,1),
              border-color .22s ease;
}

.city-svc-card:hover,
.city-svc-card:focus-within {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-pop);
}

.city-svc-card :is(h3, h4) {
  margin: 0 0 var(--space-xs);
  text-align: center;
  color: var(--green-900);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.3;
  letter-spacing: 0;
}

.city-svc-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-700);
  text-align: center;
}

/* Two paragraphs in one card (riparazione-condizionatore-reggio-emilia).
   From elettricista.css. */
.city-svc-card p + p { margin-top: var(--space-xs); }

.city-svc-card p strong { color: var(--green-900); }

.city-svc-card p a {
  color: var(--green-500);
  font-weight: 700;
  text-decoration: underline;
}

.city-svc-card p a:hover { color: var(--green-700); }


/* ------------------------------------------------------------
   CLOSING BAND — dark, two columns (as elettricista-rovigo), one
   shared button underneath.
------------------------------------------------------------ */
.closing {
  background: var(--green-900);
  padding-block: clamp(56px, 7vw, 72px);
}

.closing-inner {
  width: min(100% - (var(--gutter) * 2), 760px);
  margin-inline: auto;
  text-align: center;
}

.closing-inner--2up {
  width: min(100% - (var(--gutter) * 2), var(--max-w));
}

.closing p {
  margin: 0 0 var(--space-l);
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--green-100);
}

.closing__cols {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-l);
  text-align: left;
}

@media (min-width: 768px) {
  .closing__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Condizionatore change: each column holds two short paragraphs,
   so they sit close together rather than --space-l apart. */
.closing__cols p { margin-bottom: var(--space-2xs); }

.closing__cols p:last-child { margin-bottom: 0; }

.closing__lead {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  color: var(--paper-000) !important;
  text-align: center;
}

.closing__cols p:not(.closing__lead) { text-align: center; }

/* Closing heading at h3 (riparazione-condizionatore-parma: its
   closing heading is an <h3> on the old page). From elettricista.css. */
.closing h3 {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  color: var(--paper-000);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Closing heading at h4 (riparazione-condizionatore-chieti: its
   closing heading is an <h4> on the old page). From elettricista.css. */
.closing h4 {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 800;
  color: var(--paper-000);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* A cut-out product image above the closing heading (Chieti's fan). */
.closing__img { margin: 0 auto var(--space-s); }

@media (max-width: 480px) {
  .closing .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-chieti
============================================================ */

/* Why-band title set on a <p> (the old page's "ALTRI SERVIZI…" line
   is a paragraph, not a heading), so it needs the display face that
   an <h3> would inherit. */
.city-why__title { font-family: var(--font-display); }

/* Four cards two-up rather than 3 + 1. From elettricista.css. */
.city-svc-grid--2up { --cols-max: 2; }

/* Round icon above a card title. From elettricista.css. */
.city-svc-card__media {
  display: grid;
  place-items: center;
  width: clamp(76px, 11vw, 96px);
  height: clamp(76px, 11vw, 96px);
  margin: 0 auto var(--space-s);
  border-radius: 50%;
  background: var(--green-100);
  transition: background .22s ease;
}

.city-svc-card:hover .city-svc-card__media { background: var(--amber-050); }

.city-svc-card__media img {
  width: clamp(42px, 6vw, 54px);
  height: clamp(42px, 6vw, 54px);
  object-fit: contain;
}

/* Cut-out (transparent PNG) in the split's photo column: shown at
   its own size, centred, with no photo frame — .city-prose__img's
   100% width would upscale a 250px file and blur it. */
.city-prose__img--cutout {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-pescara
============================================================ */

/* Card title set on a <p>: Pescara's MANUTENZIONE / RIPARAZIONE /
   INSTALLAZIONE are bold paragraphs on the old page, not headings
   (hard rule 9). Same look as the h3/h4 card title. From
   elettricista.css. */
.city-svc-card__title {
  margin: 0 0 var(--space-xs) !important;
  text-align: center;
  color: var(--green-900);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem) !important;
  font-weight: 700;
  line-height: 1.3;
}

/* Bold paragraph used as a sub-title inside running copy (not a
   heading on the old page, so it stays a <p>). */
.city-prose__col p.city-prose__subhead {
  margin: var(--space-l) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.3;
}

.city-prose__col p.city-prose__subhead:first-child { margin-top: 0; }

/* A short bullet list inside the copy column — global.css resets
   list-style, so the marker is drawn here (dash, as elsewhere). */
.city-prose__col ul {
  margin: 0 0 var(--space-s);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.city-prose__col ul li {
  display: flex;
  gap: var(--space-2xs);
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.city-prose__col ul li::before {
  content: "\2013";
  color: var(--amber-500);
  font-weight: 700;
  flex-shrink: 0;
}


/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-montesilvano
============================================================ */

/* ATTIVITÀ STEPS — tinted band: numbered step cards on the left,
   a white text panel on the right. The numbers come from a CSS
   counter because the old page's numbers came from an <ol> too
   (no digits in its text). */
.city-steps { background: var(--green-050); }

.city-steps__grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .city-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.city-steps__title {
  margin: 0 0 var(--space-m);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-900);
}

.city-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-s);
}

.city-step {
  --step-pad: clamp(18px, 2.4vw, 24px);
  counter-increment: step;
  position: relative;
  padding: var(--step-pad) var(--step-pad) var(--step-pad) calc(var(--step-pad) + 56px);
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-700);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s cubic-bezier(.2,.7,.3,1);
}

.city-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.city-step::before {
  content: counter(step);
  position: absolute;
  left: var(--step-pad);
  top: var(--step-pad);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--paper-000);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.city-step strong {
  display: block;
  margin-bottom: var(--space-3xs);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--green-900);
}

.city-steps__panel {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-top: 4px solid var(--amber-500);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 40px);
}

.city-steps__panel h3 {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-900);
}

.city-steps__panel p {
  margin: 0;
  font-size: 1.01rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.city-steps__panel a {
  color: var(--amber-600);
  font-weight: 700;
  text-decoration: underline;
}

.city-steps__panel a:hover { color: var(--amber-500); }

@media (prefers-reduced-motion: reduce) {
  .city-step { transition: none; }
  .city-step:hover { transform: none; }
}

/* PROBLEMS + WHY US — dark band, centred intro, two white cards:
   the problems we fix (orange "!" badges) and the reasons to choose
   us (green tick badges). */
.city-issues {
  background: linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 100%);
  color: var(--paper-000);
}

.city-issues__intro {
  max-width: 72ch;
  margin: 0 auto var(--space-xl);
  text-align: center;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--green-100);
}

.city-issues__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .city-issues__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.city-issues__card {
  background: var(--paper-000);
  border-top: 4px solid var(--amber-500);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  padding: clamp(24px, 3.5vw, 40px);
  color: var(--ink-700);
}

.city-issues__card--check { border-top-color: var(--green-500); }

.city-issues__title {
  margin: 0 0 var(--space-m);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--green-900);
}

.city-issues__title a {
  color: var(--amber-600);
  text-decoration: underline;
  white-space: nowrap;
}

.city-issues__title a:hover { color: var(--amber-500); }

.city-issues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

.city-issues__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--paper-050);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-m);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-900);
}

.city-issues__list li::before {
  content: "!";
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber-500);
  color: var(--paper-000);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
}

.city-issues__card--check .city-issues__list li::before {
  content: "\2713";
  background: var(--green-500);
}


/* Brand logos — twelve small white-background logos, each on its own
   white tile so the mismatched sizes read as one even row. */
.city-brands { background: var(--paper-000); }

.city-brands__intro {
  max-width: 72ch;
  margin: 0 auto var(--space-l);
  text-align: center;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* Six across on desktop — two even rows of six, as on the old page.
   Three across on a tablet (four even rows), two on a phone. */
.city-brands__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) { .city-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .city-brands__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.city-brands__item {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--space-s);
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-m);
}

.city-brands__item img {
  width: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}


/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-ancona
============================================================ */

/* CALL CARD — replaces the dark .closing band on this page: one
   rounded card, split in two from 768px. Left: dark call panel with
   the button. Right: light amber "24 ore su 24" panel with a clock
   badge. Stacked on a phone, call panel first. */
.city-cta { background: var(--paper-000); }

.city-cta__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

@media (min-width: 768px) {
  .city-cta__card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.city-cta__main,
.city-cta__side {
  padding: clamp(28px, 4.5vw, 56px);
}

.city-cta__main {
  background: linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 100%);
  color: var(--green-100);
}

.city-cta__side {
  position: relative;
  background: var(--amber-050);
  border-top: 4px solid var(--amber-500);
  color: var(--ink-700);
}

@media (min-width: 768px) {
  .city-cta__side {
    border-top: 0;
    border-left: 4px solid var(--amber-500);
  }
}

.city-cta p {
  margin: 0 0 var(--space-xs);
  font-size: 1.03rem;
  line-height: 1.7;
}

.city-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Lecco intro header. Title and call link read as one line: "Pronto Intervento
   Condizionatori Lecco – Chiama 03411716250". The <h2> keeps its own
   text; the dash (decorative, CSS) and the orange call link follow it
   inline at the same size, wrapping as a whole onto the next line
   when the column is narrow. */
.city-intro__head {
  position: relative;
  margin: 0 0 var(--space-m);
  padding-left: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
}

.city-intro__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 5px;
  border-radius: var(--radius-s);
  background: var(--amber-500);
}

.city-prose--split .city-intro__head .section-title.city-intro__title {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.city-intro__call {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.city-intro__call::before {
  content: " \2013  ";
  color: var(--ink-500);
  font-weight: 400;
}

/* Inline (not flex) so a space at the end of a link survives —
   Pescara splits the call over two links, "Chiama " + the number.
   nowrap on the <strong> keeps icon, words and number on one line. */
.city-intro__call strong { font-weight: inherit; white-space: nowrap; }

.city-intro__call a {
  color: var(--amber-600);
  text-decoration: none;
}

.city-intro__call a:hover { color: var(--amber-500); text-decoration: underline; }

.city-intro__call .icon-phone {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.3em;
  vertical-align: -0.08em;
}

/* Torino: a chips list inside a prose band ("I servizi includono:").
   Beats the plain .city-prose__col ul list rules (Pescara): two
   columns, the chip's own dot instead of the dash, chip type size,
   and the paragraph gap below it. */
.city-prose__col ul.city-why__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0 0 var(--space-m);
}

.city-prose__col ul.city-why__chips li {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--green-900);
}

.city-prose__col ul.city-why__chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--amber-500);
}

@media (max-width: 560px) {
  .city-prose__col ul.city-why__chips li { font-size: 0.78rem; }
}

/* Udine's call-card title is an <h3>: same spacing as the <p> title. */
h3.city-cta__title { margin: 0 0 var(--space-xs); }

.city-cta__main .city-cta__title { color: var(--paper-000); }

.city-cta__main strong { color: var(--paper-000); }

.city-cta__side .city-cta__title { color: var(--green-900); }

.city-cta__main .btn { margin-top: var(--space-m); }

.city-cta__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-s);
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--paper-000);
  box-shadow: var(--shadow-card);
}

.city-cta__badge svg { width: 28px; height: 28px; }

@media (max-width: 480px) {
  .city-cta__main .btn { width: 100%; justify-content: center; }
}