/* =========================
   REGION PAGE (MATCH MOCK)
   ========================= */

.region-page{
  background: transparent;
  color: rgba(0,0,0,0.82);
}

/* Force left alignment regardless of theme defaults */
.region-page *{
  text-align: left;
}

/* -------------------------
   HERO
   ------------------------- */
.region-hero{
  position: relative;
  overflow: hidden;

  background-image: var(--hero-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* ✅ prevents the “wide & short = zoomed” effect */
  min-height: clamp(520px, 62vh, 720px);
  padding: clamp(84px, 9vh, 120px) 0 clamp(70px, 8vh, 110px);
}


/* gentle fade into paper band */
.region-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 120px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(245,244,240,0.55) 45%,
    rgba(245,244,240,0.92) 100%
  );
  pointer-events:none;
}

.region-hero__inner{
  position: relative;
  z-index: 1;
  max-width: 1100px;
}

/* Typography similar to mock */
.region-title{
  margin: 0;
  font-size: clamp(44px, 5.4vw, 74px * var(--font-scale));
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.region-subtitle{
  margin: 10px 0 18px;
  font-size: clamp(18px, 2.4vw, 28px * var(--font-scale));
  opacity: 0.85;
}

.region-intro{
  max-width: 560px;
  margin: 0;
  line-height: 1.55;
  opacity: 0.78;
}

/* -------------------------
   PAPER BAND + ICONS
   ------------------------- */
.region-band{
  position: relative;
  padding: 26px 0 34px;
  margin-top: -18px;
  background: var(--paper-bg) repeat;
  background-size: 600px auto;
  background-position: center top;
}

/* icons are centered in the mock */
.region-icons{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  justify-items: center;
  align-items: start;
  text-align: center;
}

.region-icon{
  text-align: center;
}

.region-icon__circle{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(255,255,255,0.55);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.region-icon__circle img{
  width: 120%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%; /* pushes focus slightly down */
  transform: scale(1.35);      /* <- key: zoom in */
}



.region-icon p{
  margin: 0;
  line-height: 1.25;
  opacity: 0.9;
  text-align: center;
}

/* -------------------------
   PAPER SEAM DIVIDER (mock)
   ------------------------- */
.region-seam{
  position: relative;
  height: 22px;
  background: var(--paper-bg) repeat;
  background-size: 600px auto;
  background-position: center top;
  overflow: hidden;
}

/* thin line */
.region-seam::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  height: 1px;
  background: rgba(0,0,0,0.14);
  opacity: 0.55;
}

/* soft crease */
.region-seam::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.06) 45%,
    rgba(0,0,0,0.00) 100%
  );
  opacity: 0.22;
}

/* -------------------------
   FACTS (paper + haze right)
   ------------------------- */
/* FACTS: paper base everywhere + mountain overlay only on the right */
.region-facts{
  position: relative;
  overflow: hidden;
  padding: 42px 0 46px;

  /* ✅ PAPER is the actual background now */
  background: var(--paper-bg) repeat;
  background-size: 600px auto;
  background-position: center top;
}

/* ✅ Mountain overlay (right side only) WITHOUT white wash */
.region-facts::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: var(--haze-bg) no-repeat right center;
  /* keep your choice: no background-size line, or set cover below */
  background-size: cover; /* <- this also helps avoid a visible edge */

  opacity: 0.95;

  /* 1) Fade overlay into the left side (your existing goal)
     2) Fade overlay at top/bottom slightly
     3) Fade overlay at the far right so the image never "cuts" */
  -webkit-mask-image:
    linear-gradient(to left,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 35%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0) 72%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 14%,
      rgba(0,0,0,1) 86%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(to left,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 100%
    );

  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to left,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 35%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0) 72%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 14%,
      rgba(0,0,0,1) 86%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(to left,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 100%
    );
  mask-composite: intersect;
}

/* Keep content above overlay */
.region-facts .container{
  position: relative;
  z-index: 1;
  max-width: 1100px;
}

/* Optional: if text still needs help, add a PAPER-preserving veil behind text area */
.region-facts .container::before{
  content:"";
  position:absolute;
  inset: -16px -24px -16px -24px; /* slightly wider than text */
  pointer-events:none;

  /* This is NOT solid white; it's a gentle tint that still shows paper */
  background: linear-gradient(to right,
    rgba(245,244,240,0.55) 0%,
    rgba(245,244,240,0.25) 55%,
    rgba(245,244,240,0.00) 100%
  );
  z-index: -1;
}

/* -------------------------
   ABOUT + MAP (same paper bg)
   ------------------------- */
.region-about{
  position: relative;
  overflow: hidden;
  padding: 44px 0 60px;

  /* IMPORTANT: no background here anymore */
  background: none !important;
}

/* 1) Paper base layer */
.region-about::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: var(--paper-bg) repeat;
  background-size: 600px auto;
  background-position: center top;

  z-index: 0;
}

/* 2) Bottom-left illustration layer (ON TOP of paper) */
.region-about::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* Unzoom: show more of the illustration */
  background: var(--about-ill) no-repeat left bottom;
  background-size: cover; /* <- more scene */
  background-position: 12% 100%; /* shift slightly right if needed */

  opacity: 0.92;
  z-index: 1;

  /* Soft edges: left emphasis + top/bottom fade + gentle overall falloff */
  -webkit-mask-image:
    /* keep stronger on left, fade toward right */
    linear-gradient(to right,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,0.65) 65%,
      rgba(0,0,0,0.18) 80%,
      rgba(0,0,0,0.00) 100%
    ),
    /* fade top and bottom so no hard horizontal edge */
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,1) 14%,
      rgba(0,0,0,1) 86%,
      rgba(0,0,0,0.00) 100%
    ),
    /* soften the whole overlay (no “rectangle” feel) */
    radial-gradient(ellipse at 25% 85%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,0.55) 66%,
      rgba(0,0,0,0.00) 82%
    );

  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,0.65) 65%,
      rgba(0,0,0,0.18) 80%,
      rgba(0,0,0,0.00) 100%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,1) 14%,
      rgba(0,0,0,1) 86%,
      rgba(0,0,0,0.00) 100%
    ),
    radial-gradient(ellipse at 25% 85%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,0.55) 66%,
      rgba(0,0,0,0.00) 82%
    );
  mask-composite: intersect;
}


/* 3) Content always above both */
.region-about .container{
  position: relative;
  z-index: 2;
}

/* Clear accidental backgrounds EXCEPT intentional soft panels */
.region-about .region-split,
.region-about .region-card{
  background: transparent !important;
}




.region-split{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
  max-width: 1100px;
}

.region-map{
  margin: 0;
}

.region-map__link{
  position: relative;
  display: block;
}

.region-map img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
}

.region-map__badge{
  position: absolute;
  top: 10px;
  right: 10px;

  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.10);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.region-map__link:hover img{
  filter: contrast(1.03);
}

.map-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;

  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.15);
  color: #222;

  transition: all .2s ease;
}

.map-btn:hover{
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}


/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 900px){
  .region-hero{ padding: 70px 0 64px; }

  .region-icons{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .region-split{
    grid-template-columns: 1fr;
  }

  .region-facts::after{
    background-size: 100% 100%, 110vw auto;
    background-position: left top, right center;
  }
}

/* -------------------------
   HERO PANEL (unified box)
------------------------- */

.region-hero__panel{
  max-width: 640px;
  padding: 26px 28px 24px;

  /* align visually with About page */
  border-radius: 18px;

  /* spacing from top */
  margin-top: 8px;
}

@media (max-width: 640px){
  .region-hero__panel{
    max-width: 100%;
    padding: 22px 20px;
  }
}

/* -------------------------
   REGION ABOUT PANEL
------------------------- */

.region-about__panel{
  max-width: 520px;
  padding: 26px 28px;

  /* visual parity with About / Mission boxes */
  border-radius: 18px;
  
  align-self: flex-start;   /* prevents grid stretch */
  height: auto;
}

.region-about__panel .region-h2{
  margin-top: 0;
}

@media (max-width: 900px){
  .region-about__panel{
    max-width: 100%;
  }
}

/* Region Page – new main text section */
.region-story__panel{
  max-width: 980px;
  margin: 0 auto;
}

.region-richtext{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,.78);
}

.region-richtext p{
  margin: 0 0 12px;
}
/* Region Page – ensure paper texture shows behind Region Story section */
.region-story{
background: var(--paper-bg) repeat;
    background-size: 600px auto;
    background-position: center top;
}

/* If the section has an overlay/haze by default, keep it subtle */
.region-story::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: rgba(255,255,255,.55); /* light wash like the other sections */
}

.region-story{
  position: relative;
}

/* Make sure the panel stays above the overlay */
.region-story .container{
  position: relative;
  z-index: 1;
}
/* Make region-story look like the other paper+haze sections */
.region-story{
  position: relative;
  overflow: hidden;
  padding: 34px 0;
  background-image: var(--paper-bg);
  background-repeat: repeat;
  background-size: 900px auto;   /* key: paper scale like other sections */
}

/* Haze/mountain wash (same vibe as region-facts) */
.region-story::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: var(--haze-bg);
  background-size: cover;
  background-position: center bottom;
  opacity: .28;                 /* adjust 0.20–0.35 */
  mix-blend-mode: multiply;     /* gives that “printed paper” feel */
}

/* Soft top/bottom fade (the “seam” vibe) */
.region-story::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 22%),
    linear-gradient(0deg, rgba(255,255,255,.80), rgba(255,255,255,0) 24%);
  opacity: .9;
}

.region-story .container{
  position: relative;
  z-index: 1;
}

/* Panel tweaks to match your soft cards */
.region-story__panel{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 26px;
  border-radius: 18px;
}

/* Typography match */
.region-richtext{
  font-size: 16px;
  line-height: 1.85;
}
.region-richtext p{ margin: 0 0 12px; }

@media (max-width: 768px){
  .region-story{ padding: 26px 0; background-size: 700px auto; }
  .region-story__panel{ padding: 18px 16px; }
}