/* Keep territorial-page headings within their reading column when text is enlarged. */
@media screen and (min-width: 641px) {
  body[data-local-area] main .section-heading,
  body[data-page-detail="italia"] main .section-heading {
    container: local-section-width / inline-size;
  }

  @container local-section-width (max-width: 48rem) {
    body[data-local-area] main .section-heading > *,
    body[data-page-detail="italia"] main .section-heading > * {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
      min-width: 0;
      max-width: 100%;
    }

    body[data-local-area] main .section-heading h2,
    body[data-page-detail="italia"] main .section-heading h2 {
      max-width: 100%;
      font-size: min(clamp(2.55rem, 5vw, 4.8rem), 13cqi);
    }
  }
}

/* Larger text can reduce the regional list to one column before a name overflows. */
@media screen and (min-width: 421px) and (max-width: 640px) {
  body[data-page-detail="italia"] .italy-region-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc(7.5rem + 6px), calc((100% - 8px) / 2))), 1fr));
  }
}

/* Keep the full place name visible on narrow phones with enlarged text.
   The viewport cap leaves the standard reading size unchanged. */
@media screen and (max-width: 350px) {
  body[data-page-detail="italia"] .city-guide-card[href="realizzazione-siti-web-franciacorta.html"] strong {
    font-size: min(clamp(1.4rem, 2.2vw, 1.8rem), 13vw);
  }
}

/* Regional project introductions need a full row when enlarged text outgrows
   the narrow desktop column, even on a wide monitor. */
@container regional-projects-width (max-width: 68rem) {
  body[data-page-detail="italia"] .city-regions .region-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reclaim nested card gutters on the narrowest phones so complete place names
   and enlarged copy can use the available width without splitting words. */
@media screen and (max-width: 319px) {
  body[data-page-detail="italia"] .city-guides-hub {
    padding-inline: 6px;
  }

  body[data-page-detail="italia"] .city-guide-card {
    padding-inline: 5px;
  }

  body[data-page-detail="italia"] .city-guide-cta {
    padding-inline: 12px;
  }

  body[data-page-detail="italia"] .tourism-card {
    padding-inline: 10px;
  }

  body[data-page-detail="italia"] .city-regions .region-card {
    padding-inline: 6px;
  }

  body[data-page-detail="italia"] .region-card .eyebrow {
    gap: 8px;
  }
}