/* ===========================================
   UI REGION MAG — Magazine footer module
   Clean + scalable
   Scope: body.ui-scope only
   =========================================== */

body.ui-scope .ui-regionmag{ margin: 64px 0 0; }

body.ui-scope .ui-regionmag__page{
}

/* ===========================================
   Banner (flag left, title/strap right)
   =========================================== */

body.ui-scope .ui-regionmag__banner{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0;
}

body.ui-scope .ui-regionmag__bannerLeft{
  display: grid;
  gap: 10px;
  align-content: start;
}

body.ui-scope .ui-regionmag__bannerKicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.82;
}

body.ui-scope .ui-regionmag__bannerFlag{
  width: 150px;
  height: auto;
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

body.ui-scope .ui-regionmag__bannerRight{
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

body.ui-scope .ui-regionmag__bannerTitle{
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.96);
}

body.ui-scope .ui-regionmag__bannerStrap{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  max-width: 80ch;
}

@media (max-width: 700px){
  body.ui-scope .ui-regionmag__banner{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.ui-scope .ui-regionmag__bannerFlag{ width: 160px; }
}

/* ===========================================
   Main two-column grid
   =========================================== */

body.ui-scope .ui-regionmag__grid{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

body.ui-scope .ui-regionmag__left{
  display: grid;
  gap: 14px;
}

/* ===========================================
   Maps (PNG 1000x1000) — consistent tiles
   =========================================== */

body.ui-scope .ui-regionmag__maps{ margin: 0; }

body.ui-scope .ui-regionmag__mapsGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

body.ui-scope .ui-regionmag__mapItem{
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  min-width: 0;
}

body.ui-scope .ui-regionmag__mapItem img{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;

  object-fit: cover;
  object-position: center;

  display: block;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}

body.ui-scope .ui-regionmag__mapLabel{
  margin: 0;
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.80;
}

body.ui-scope .ui-regionmag__mapsCaption{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
}

/* ===========================================
   Photo strip
   =========================================== */

body.ui-scope .ui-regionmag__strip{ margin: 0; }

body.ui-scope .ui-regionmag__stripGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

body.ui-scope .ui-regionmag__stripGrid img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}

body.ui-scope .ui-regionmag__stripCaption{
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}

/* ===========================================
   Right column sections
   =========================================== */

body.ui-scope .ui-regionmag__right{
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.12);
}

body.ui-scope .ui-regionmag__section{
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

body.ui-scope .ui-regionmag__section:last-of-type{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.ui-scope .ui-regionmag__h{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* Facts DL rows */
body.ui-scope .ui-regionmag__dl{
  margin: 0;
  display: grid;
  gap: 9px;
}

body.ui-scope .ui-regionmag__row{
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}

body.ui-scope .ui-regionmag__row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

body.ui-scope .ui-regionmag__row dt{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.75;
}

body.ui-scope .ui-regionmag__row dd{
  margin: 0;
  font-size: 15px;
  opacity: 0.95;
}

/* Right column bullets */
body.ui-scope .ui-regionmag__bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.6;
}

body.ui-scope .ui-regionmag__bullets li{ margin: 0 0 9px; }
body.ui-scope .ui-regionmag__bullets li:last-child{ margin-bottom: 0; }

/* Pull quote */
body.ui-scope .ui-regionmag__pull{
  margin: 14px 0 0;
  padding: 0 0 0 12px;
  border-left: 3px solid rgba(255,255,255,.40);
}

body.ui-scope .ui-regionmag__pull p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.90);
}

/* ===========================================
   Provinces — full-width, auto-stretch
   HTML expectation:
   <section class="ui-regionmag__provincesWide">
     <h3 class="ui-regionmag__h">Provinces</h3>
     <div class="ui-regionmag__provincesGrid">
       <div class="ui-regionmag__province">...</div>
     </div>
   </section>
   =========================================== */

body.ui-scope .ui-regionmag__provincesWide{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}

body.ui-scope .ui-regionmag__provincesGrid{
  display: grid;
  gap: 12px;

  /* auto-fit stretches provinces across the width based on count/space */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Province “card” blocks */
body.ui-scope .ui-regionmag__province{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

body.ui-scope .ui-regionmag__provinceName{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body.ui-scope .ui-regionmag__provinceMeta{
  margin: 0 0 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,.82);
}

/* Details */
body.ui-scope .ui-regionmag__provinceDetails{
  margin-top: 2px;
}

body.ui-scope .ui-regionmag__provinceDetails summary{
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  opacity: 0.95;
}

body.ui-scope .ui-regionmag__provinceDetails summary::-webkit-details-marker{ display: none; }

body.ui-scope .ui-regionmag__provinceDetails summary::after{
  content: " ▾";
  opacity: 0.70;
}

body.ui-scope .ui-regionmag__provinceDetails[open] summary::after{
  content: " ▴";
}

/* Comuni — no bullets; columns only when space allows */
body.ui-scope .ui-regionmag__comuni{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;

  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.84);

  column-count: 1;
  column-gap: 18px;
}

body.ui-scope .ui-regionmag__comuni li{
  margin: 0 0 4px;
  break-inside: avoid;
}

/* Allow 2 columns inside a province card when viewport is wide enough */
@media (min-width: 1000px){
  body.ui-scope .ui-regionmag__comuni{ column-count: 2; }
}
body.ui-scope .ui-regionmag__provincesIntro{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.84);
  max-width: 90ch;
}

/* ===========================================
   Responsive
   =========================================== */

@media (max-width: 1100px){
  body.ui-scope .ui-regionmag__grid{
    grid-template-columns: 1fr;
  }

  body.ui-scope .ui-regionmag__right{
    border-left: 0;
    padding-left: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  body.ui-scope .ui-regionmag__mapsGrid{
    grid-template-columns: 1fr;
  }

  body.ui-scope .ui-regionmag__stripGrid{
    grid-template-columns: 1fr;
  }

  body.ui-scope .ui-regionmag__stripGrid img{
    height: 240px;
  }
}

/* Subtle hover */
@media (hover:hover){
  body.ui-scope .ui-regionmag__page{
    transition: box-shadow .18s ease, border-color .18s ease;
  }
  body.ui-scope .ui-regionmag__page:hover{
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 34px 90px rgba(2,6,23,.55);
  }
}
/* Right column promo/shop image: keep it readable (don’t let it shrink) */
body.ui-scope .ui-regionmag__right a img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
/* ===========================================
   Fix: remove stray short line above "Regional Dossier"
   (caused by an inherited decorative rule inside RegionMag)
   =========================================== */

/* ===========================================
   Fix stray short line WITHOUT breaking the panel border
   =========================================== */

/* Always kill decorative pseudo elements on the panel box */
body.ui-scope .ui-regionmag__page::before,
body.ui-scope .ui-regionmag__page::after{
  content: none !important;
  display: none !important;
}

/* Restore the intended border + shadow cleanly */
body.ui-scope .ui-regionmag__page{
  border: 1px solid rgba(255,255,255,.14) !important;

  /* your intended shadow (no inset highlight) */
  box-shadow: 0 24px 70px rgba(2,6,23,.45) !important;

  /* keep the intended background */
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important;

  /* IMPORTANT: remove only the things that cause the short line */
  outline: 0 !important;
  background-image: none !important; /* prevents a stray stripe image */
}

/* If some other stylesheet adds an inset top highlight via box-shadow,
   this ensures we do NOT keep any inset components */
body.ui-scope .ui-regionmag__page{
  box-shadow: 0 24px 70px rgba(2,6,23,.45) !important; /* reassert */
}