/* =========================================================
   PARADISE ESCAPE
   GALLERY PAGE — RICH PHOTO-FIRST REVISION
========================================================= */

.pe-gallery-page,
.pe-gallery-page *,
.pe-gallery-page *::before,
.pe-gallery-page *::after{
  box-sizing:border-box;
}

.pe-gallery-page{
  --pe-black:#111210;
  --pe-card:#191A17;
  --pe-card-2:#20211D;
  --pe-gold:#B79A62;
  --pe-gold-dark:#9E8352;
  --pe-gold-soft:#CDB886;
  --pe-ivory:#F4F0E7;
  --pe-muted:#B9B4AA;
  --pe-line:rgba(183,154,98,.24);

  width:100%;
  max-width:100%;
  margin:0;
  padding:0 0 30px;
  overflow:hidden;
  background:var(--pe-black);
  color:var(--pe-ivory);
}

.pe-gallery-page h1,
.pe-gallery-page h2,
.pe-gallery-page h3{
  margin:0;
  color:var(--pe-ivory);
  font-family:"Marcellus",Georgia,serif;
  font-weight:400;
}

.pe-gallery-page p,
.pe-gallery-page a,
.pe-gallery-page span,
.pe-gallery-page button{
  font-family:"Alone Kaium","Open Sans",sans-serif;
}

.pe-gallery-page p{
  margin:0;
  color:var(--pe-muted);
  font-size:17px;
  line-height:1.58;
}

.pe-gallery-kicker{
  margin:0 0 13px!important;
  color:var(--pe-gold-soft)!important;
  font-size:11px!important;
  line-height:1.3!important;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
}


/* =========================================================
   TEXT LINKS / BUTTONS
========================================================= */

.pe-gallery-text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  margin-top:20px;
  color:var(--pe-gold-soft)!important;
  font-size:15px;
  font-weight:500;
  text-decoration:none!important;
}

.pe-gallery-text-link:hover{
  color:var(--pe-ivory)!important;
}

.pe-gallery-section-action{
  display:flex;
  justify-content:flex-end;
}


/* =========================================================
   HERO
========================================================= */

.pe-gallery-hero{
  position:relative;
  min-height:520px;
  margin:0 0 82px;
  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(17,18,16,.94) 0%,
      rgba(17,18,16,.63) 47%,
      rgba(17,18,16,.14) 84%
    ),
    var(--pe-gallery-hero-image);

  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;

  border:1px solid var(--pe-line);
  border-radius:22px;
}

.pe-gallery-hero-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:61%;
  max-width:660px;
  min-height:520px;
  padding:46px;
}

.pe-gallery-hero h1{
  font-size:clamp(52px,5.4vw,74px);
  line-height:1;
  letter-spacing:-.025em;
}

.pe-gallery-hero-content > p:not(.pe-gallery-kicker){
  max-width:555px;
  margin-top:19px;
  color:rgba(244,240,231,.88);
}


/* =========================================================
   COMMON SECTION
========================================================= */

.pe-gallery-section{
  max-width:1160px;
  margin:0 auto 82px;
  padding:0 40px;
}

.pe-gallery-heading{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
  gap:50px;
  align-items:end;
  margin-bottom:28px;
}

.pe-gallery-heading h2{
  font-size:clamp(40px,4.35vw,58px);
  line-height:1.02;
}

.pe-gallery-heading > p{
  max-width:430px;
  justify-self:end;
}


/* =========================================================
   IMAGE FOUNDATION
========================================================= */

.pe-gallery-image{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--pe-card);
  border:1px solid var(--pe-line);
  border-radius:16px;
  cursor:pointer;
  text-align:left;
  appearance:none;
}

.pe-gallery-bg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transform:scale(1);
  transition:transform 650ms cubic-bezier(.2,.75,.25,1);
}

.pe-gallery-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(17,18,16,0) 43%,
      rgba(17,18,16,.82) 100%
    );
  pointer-events:none;
}

.pe-gallery-image:hover .pe-gallery-bg{
  transform:scale(1.035);
}

.pe-gallery-caption{
  position:absolute;
  z-index:2;
  right:18px;
  bottom:17px;
  left:18px;
  display:block;
}

.pe-gallery-caption small{
  display:block;
  margin-bottom:5px;
  color:var(--pe-gold-soft);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.pe-gallery-caption strong{
  display:block;
  color:var(--pe-ivory);
  font-family:"Marcellus",Georgia,serif;
  font-size:22px;
  line-height:1.08;
  font-weight:400;
}


/* =========================================================
   WATER / COTTAGE MOSAICS
========================================================= */

.pe-gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:250px;
  gap:14px;
}

.pe-gallery-mosaic .pe-gallery-feature{
  grid-column:span 2;
  grid-row:span 2;
}

.pe-gallery-mosaic .pe-gallery-wide{
  grid-column:span 2;
}

.pe-gallery-mosaic .pe-gallery-tall{
  grid-row:span 2;
}

.pe-gallery-mosaic-cottages{
  grid-auto-rows:235px;
}


/* =========================================================
   DESKTOP GALLERY GRID BALANCE — SURGICAL FIX ONLY
   Keeps existing images, lightbox, typography, mobile layout,
   hero, spacing, and all other gallery sections unchanged.
========================================================= */

@media (min-width:768px){

  /* WATERFRONT & OUTDOORS */
  .pe-gallery-mosaic-water .pe-gallery-image:nth-child(6){
    grid-column:1 / -1;
  }

  /* COTTAGES & ACCOMMODATIONS */
  .pe-gallery-mosaic-cottages{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .pe-gallery-mosaic-cottages .pe-gallery-image:nth-child(1),
  .pe-gallery-mosaic-cottages .pe-gallery-image:nth-child(2),
  .pe-gallery-mosaic-cottages .pe-gallery-image:nth-child(3){
    grid-column:span 2;
  }

  .pe-gallery-mosaic-cottages .pe-gallery-image:nth-child(4){
    grid-column:span 4;
  }

  .pe-gallery-mosaic-cottages .pe-gallery-image:nth-child(5),
  .pe-gallery-mosaic-cottages .pe-gallery-image:nth-child(6){
    grid-column:span 3;
  }

  /* WHAT IT FEELS LIKE TO BE HERE */
  .pe-gallery-lifestyle-grid .pe-gallery-image:nth-child(4){
    grid-column:1 / -1;
  }

}

/* =========================================================
   AMENITIES STRIP
========================================================= */

.pe-gallery-strip-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}

.pe-gallery-strip-grid .pe-gallery-image{
  min-height:310px;
  grid-column:span 4;
}

.pe-gallery-strip-grid .pe-gallery-image:nth-child(4),
.pe-gallery-strip-grid .pe-gallery-image:nth-child(5){
  grid-column:span 6;
  min-height:340px;
}


/* =========================================================
   LIFESTYLE
========================================================= */

.pe-gallery-lifestyle-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:300px;
  gap:14px;
}

.pe-gallery-lifestyle-feature{
  grid-row:span 2;
}

.pe-gallery-lifestyle-grid .pe-gallery-wide{
  grid-column:span 2;
}


/* =========================================================
   MARINA
========================================================= */

.pe-gallery-marina-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:255px;
  gap:14px;
}

.pe-gallery-marina-feature{
  grid-column:span 2;
  grid-row:span 2;
}

.pe-gallery-marina-grid .pe-gallery-wide{
  grid-column:span 2;
}


/* =========================================================
   FINAL CTA
========================================================= */

.pe-gallery-final{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
  gap:58px;
  align-items:center;
  max-width:1080px;
  margin:0 auto 46px;
  padding:42px;
  background:var(--pe-card);
  border:1px solid var(--pe-line);
  border-radius:20px;
}

.pe-gallery-final h2{
  font-size:clamp(40px,4.3vw,56px);
  line-height:1.02;
}

.pe-gallery-final-right{
  max-width:430px;
  justify-self:end;
}

.pe-gallery-actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin-top:21px;
}

.pe-gallery-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:47px;
  padding:0 21px;
  border-radius:8px;
  font-size:15px;
  font-weight:500;
  text-decoration:none!important;
}

.pe-gallery-btn-primary{
  background:var(--pe-gold);
  border:1px solid var(--pe-gold);
  color:var(--pe-black)!important;
}

.pe-gallery-btn-primary:hover{
  background:var(--pe-gold-dark);
  border-color:var(--pe-gold-dark);
  color:var(--pe-black)!important;
}

.pe-gallery-btn-outline{
  background:transparent;
  border:1px solid rgba(244,240,231,.38);
  color:var(--pe-ivory)!important;
}

.pe-gallery-btn-outline:hover{
  background:rgba(244,240,231,.06);
  color:var(--pe-ivory)!important;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.pe-gallery-lightbox{
  position:fixed;
  z-index:99999;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:38px 84px;
  background:rgba(9,10,9,.96);
  opacity:0;
  visibility:hidden;
  transition:opacity 220ms ease,visibility 220ms ease;
}

.pe-gallery-lightbox.is-open{
  opacity:1;
  visibility:visible;
}

.pe-gallery-lightbox-inner{
  max-width:1200px;
  max-height:90vh;
  text-align:center;
  transform:scale(.97);
  transition:transform 250ms ease;
}

.pe-gallery-lightbox.is-open .pe-gallery-lightbox-inner{
  transform:scale(1);
}

.pe-gallery-lightbox-inner img{
  display:block;
  max-width:100%;
  max-height:80vh;
  margin:0 auto;
  border-radius:12px;
}

.pe-gallery-lightbox-inner p{
  margin-top:14px;
  color:var(--pe-ivory);
  font-size:15px;
}

.pe-gallery-lightbox-close,
.pe-gallery-lightbox-nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:rgba(17,18,16,.45);
  border:1px solid rgba(244,240,231,.34);
  color:var(--pe-ivory);
  cursor:pointer;
}

.pe-gallery-lightbox-close{
  top:22px;
  right:26px;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:30px;
  line-height:1;
}

.pe-gallery-lightbox-nav{
  top:50%;
  width:48px;
  height:64px;
  margin-top:-32px;
  border-radius:10px;
  font-size:38px;
  line-height:1;
}

.pe-gallery-lightbox-prev{
  left:22px;
}

.pe-gallery-lightbox-next{
  right:22px;
}

.pe-gallery-lightbox-close:hover,
.pe-gallery-lightbox-nav:hover{
  border-color:var(--pe-gold-soft);
  color:var(--pe-gold-soft);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

  .pe-gallery-section{
    padding-right:28px;
    padding-left:28px;
  }

  .pe-gallery-heading{
    gap:30px;
  }

  .pe-gallery-mosaic,
  .pe-gallery-marina-grid{
    grid-auto-rows:220px;
  }

  .pe-gallery-strip-grid .pe-gallery-image{
    grid-column:span 6;
  }

  .pe-gallery-strip-grid .pe-gallery-image:nth-child(5){
    grid-column:span 12;
  }

  .pe-gallery-final{
    margin-right:28px;
    margin-left:28px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .pe-gallery-page p{
    font-size:16px;
    line-height:1.56;
  }

  .pe-gallery-hero{
    width:calc(100% - 32px);
    min-height:520px;
    margin:0 16px 62px;

    background:
      linear-gradient(
        180deg,
        rgba(17,18,16,.08) 0%,
        rgba(17,18,16,.18) 32%,
        rgba(17,18,16,.55) 61%,
        rgba(17,18,16,.96) 100%
      ),
      var(--pe-gallery-hero-image);

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    border-radius:18px;
  }

  .pe-gallery-hero-content{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    display:block;
    width:100%;
    max-width:none;
    min-height:0;
    padding:24px 21px 25px;
  }

  .pe-gallery-hero h1{
    font-size:38px;
    line-height:1.02;
  }

  .pe-gallery-hero-content > p:not(.pe-gallery-kicker){
    max-width:none;
    margin-top:14px;
    color:rgba(244,240,231,.92);
    font-size:15px;
  }

  .pe-gallery-section{
    width:100%;
    margin-bottom:62px;
    padding:0 16px;
  }

  .pe-gallery-heading{
    display:block;
    margin-bottom:21px;
  }

  .pe-gallery-heading h2{
    font-size:35px;
  }

  .pe-gallery-heading > p{
    max-width:none;
    margin-top:13px;
  }

  .pe-gallery-mosaic,
  .pe-gallery-strip-grid,
  .pe-gallery-lifestyle-grid,
  .pe-gallery-marina-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:180px;
    gap:10px;
  }

  .pe-gallery-mosaic .pe-gallery-feature,
  .pe-gallery-mosaic .pe-gallery-wide,
  .pe-gallery-mosaic .pe-gallery-tall,
  .pe-gallery-marina-feature,
  .pe-gallery-marina-grid .pe-gallery-wide,
  .pe-gallery-lifestyle-feature,
  .pe-gallery-lifestyle-grid .pe-gallery-wide,
  .pe-gallery-strip-grid .pe-gallery-image,
  .pe-gallery-strip-grid .pe-gallery-image:nth-child(4),
  .pe-gallery-strip-grid .pe-gallery-image:nth-child(5){
    grid-column:span 1;
    grid-row:span 1;
    min-height:0;
  }

  .pe-gallery-mosaic .pe-gallery-feature,
  .pe-gallery-marina-feature,
  .pe-gallery-lifestyle-feature{
    grid-column:1 / -1;
    grid-row:span 2;
  }

  .pe-gallery-mosaic .pe-gallery-wide,
  .pe-gallery-marina-grid .pe-gallery-wide,
  .pe-gallery-lifestyle-grid .pe-gallery-wide{
    grid-column:1 / -1;
  }

  .pe-gallery-caption{
    right:12px;
    bottom:12px;
    left:12px;
  }

  .pe-gallery-caption small{
    font-size:8px;
  }

  .pe-gallery-caption strong{
    font-size:18px;
  }

  .pe-gallery-section-action{
    justify-content:flex-start;
  }

  .pe-gallery-final{
    display:block;
    margin:0 16px 38px;
    padding:27px 22px;
    border-radius:17px;
  }

  .pe-gallery-final h2{
    font-size:35px;
  }

  .pe-gallery-final-right{
    max-width:none;
    margin-top:18px;
  }

  .pe-gallery-actions{
    flex-direction:column;
    margin-top:19px;
  }

  .pe-gallery-btn{
    width:100%;
    min-height:49px;
  }

  .pe-gallery-lightbox{
    padding:58px 16px 70px;
  }

  .pe-gallery-lightbox-close{
    top:12px;
    right:12px;
    width:42px;
    height:42px;
  }

  .pe-gallery-lightbox-nav{
    top:auto;
    bottom:14px;
    width:48px;
    height:46px;
    margin:0;
  }

  .pe-gallery-lightbox-prev{
    left:calc(50% - 58px);
  }

  .pe-gallery-lightbox-next{
    right:calc(50% - 58px);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .pe-gallery-hero{
    min-height:500px;
  }

  .pe-gallery-hero-content{
    padding:22px 19px 23px;
  }

  .pe-gallery-hero h1{
    font-size:36px;
  }

  .pe-gallery-heading h2,
  .pe-gallery-final h2{
    font-size:33px;
  }

  .pe-gallery-mosaic,
  .pe-gallery-strip-grid,
  .pe-gallery-lifestyle-grid,
  .pe-gallery-marina-grid{
    grid-auto-rows:165px;
  }

}