/* ============================================================
   LE HAUS — REGION DETAIL (/RegionDetail.aspx?region=...)
   ------------------------------------------------------------
   Page-only rules for the region template ("Destinations -
   Region template final 2.0" mockup). Loads after common.css —
   see /website/FrontEnd/STYLE-GUIDE.md. The hero itself is the
   shared Header.ascx markup (common.css .hero rules), fed with
   this region's own content — see RegionDetail.aspx.cs.
   ============================================================ */

.hero{min-height:var(--hero-height,80vh);}

/* ===== A Richer Perspective (split image/text) ===== */

/* ===== Explore the <Region> (destination grid) ===== */
.explore-region-section{background:var(--cream-2);}
.explore-region-head{--sh-margin:40px;}
.explore-region-head h2{
  line-height:1.25;
  margin-top:12px;
}
.explore-region-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.explore-region-grid .dest-card{
  aspect-ratio:270/300;
  height:auto;
}
.explore-region-grid .dest-card .dc-name{font-size:15px;}
.explore-region-grid .dest-card .dc-row{font-size:15px;}

@media (max-width:1100px){
  .explore-region-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:500px){
  .hero{min-height:auto;}
  .explore-region-grid{grid-template-columns:1fr;}
}

/* ===== Turn inspiration into a stay (photo-left / text-right banner) =====
   Reuses .story's split layout (common.css) — same markup, image div
   first then text div so the photo lands in the left column and the
   copy in the right one, the opposite order to "A Richer Perspective"
   above. Photo runs wider than the text column, and its right edge
   feathers into the page's white background via a blurred, fading
   strip — matches the region template mockup, distinct from the dark
   full-bleed .media-banner used directly below it.

   The blur is a second copy of the same photo (.story-img-blur, same
   background-image as .story-img-bg, set inline in the markup),
   cropped to the right portion by its own box (not a mask — kept
   deliberately simple/widely-supported) and blurred with `filter`.
   Deliberately NOT `backdrop-filter`: it only samples what's already
   painted behind it and is far more prone to GPU-compositing
   glitches at this size/blur radius than a plain `filter`. A white
   gradient on top finishes the fade from blurred photo to solid
   white.

   The three zones are proportions of the whole banner: 50% clear
   photo, 10% blurred transition, 40% white text panel. The banner's
   own columns are 60/40 (photo column/text column) so the 10%-of-
   banner blur zone is 10/60 = 16.667% of the photo column's own
   width — that's what .story-img-blur and .story-img::after size
   themselves to, positioned flush against the photo column's right
   edge (i.e. the boundary with the text column). */
.stay-banner{grid-template-columns:60% minmax(0,40%);}
.stay-banner .story-text{justify-content:center;min-width:0;}
.stay-banner .story-text .hero-actions{flex-wrap:wrap;}
.stay-banner .story-img{overflow:hidden;}
.stay-banner .story-img-blur{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:16.667%;
  background-size:cover;
  background-position:center right;
  filter:blur(30px);
  /* Forces this layer onto its own GPU compositing layer — without it,
     some browsers fail to repaint the sharp .story-img-bg underneath
     once a blurred sibling shares the same overflow:hidden parent. */
  transform:translateZ(0);
  will-change:filter;
}
.stay-banner .story-img::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:16.667%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 40%, var(--cream) 100%);
  pointer-events:none;
}

@media (max-width:900px){
  .stay-banner{grid-template-columns:1fr;}
  .stay-banner .story-img{min-height:300px;}
  .stay-banner .story-text{padding:50px 32px;}
}

/* ===== A global perspective (closing banner) =====
   common.css caps .media-banner-text at 460px, which is narrow
   enough that "Extraordinary people." / "Extraordinary places."
   each wrap onto 2 lines (4 total) at desktop widths. Widen it here
   so each phrase fits on its own single line, matching the mockup's
   2-line heading. */
.global-perspective-banner .media-banner-text{max-width:640px;}