/* Endless Stays - property photo gallery
   Upload to /wp-content/uploads/property-gallery/es-gallery.css
   Enqueued in the head by the [property_photo_gallery] snippet.

   This file does NOT restate the gallery layout. The bulk of the gallery CSS
   already lives in the Elementor Custom CSS of the shortcode widget in Theme
   Builder template 4805 (.elementor-element-bccd528), compiled into
   /wp-content/uploads/elementor/css/post-4805.css. That file stays untouched.

   What is here: the Endless Stays brand tokens (the template still declares
   the Stay Awhile set on :root, gold #B89535), the styling for the new Back
   control, and one fix for the photo counter.

   Every selector repeats the id as #pg-wrap#pg-wrap. That is deliberate: it
   doubles the specificity so these rules beat the template ones no matter
   which stylesheet the browser loads first. Do not "clean it up" to a single
   id, or the load order starts deciding who wins. */


/* ---- Brand tokens ------------------------------------------------------ */
/* Values measured on the live property page: Deep Plum text, Velvet Plum
   accent, the page's own #F7F6F2 surface and #EAE7E0 dividers, Montserrat
   for UI and Fraunces for display. All of them already load site wide. */
#pg-wrap#pg-wrap {
  --pg-accent: #622D7F;
  --pg-accent-deep: #2D1547;
  --pg-text: #2D1547;
  --pg-text-secondary: #5A5A6E;
  --pg-border: #E9E6E0;
  --pg-border-light: #EAE7E0;
  --pg-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pg-display: "Fraunces", Georgia, serif;
  --pg-transition: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ---- The page's warm off-white instead of the generic one -------------- */
#pg-wrap#pg-wrap .pg-lightbox {
  background: rgba(247, 246, 242, 0.98) !important;
}
#pg-wrap#pg-wrap .pg-lightbox-header {
  background: rgba(247, 246, 242, 0.96) !important;
  border-bottom: 1px solid var(--pg-border-light) !important;
  gap: 16px;
}


/* ---- Show all photos pill ---------------------------------------------- */
#pg-wrap#pg-wrap .pg-gallery-btn {
  border-radius: 100px !important;
  border-color: var(--pg-border) !important;
  font-family: var(--pg-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pg-text) !important;
}
#pg-wrap#pg-wrap .pg-gallery-btn:hover {
  border-color: var(--pg-accent) !important;
  color: var(--pg-accent) !important;
}


/* ---- Back to all photos ------------------------------------------------ */
/* The template sets .pg-lightbox-title to display:none !important, so the
   back control has to be its own element. The snippet prints it with an
   inline display:none and the JS flips it to inline-flex. The Elementor kit
   paints every button orange (and another colour on focus), hence the
   !important on background, border and colour, hover and focus included. */
#pg-wrap#pg-wrap .pg-lightbox-back {
  align-items: center;
  gap: 6px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  font-family: var(--pg-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pg-text) !important;
  box-shadow: none !important;
}
#pg-wrap#pg-wrap .pg-lightbox-back:hover,
#pg-wrap#pg-wrap .pg-lightbox-back:focus {
  color: var(--pg-accent) !important;
  background: none !important;
}
#pg-wrap#pg-wrap .pg-lightbox-back svg {
  flex-shrink: 0;
}


/* ---- Focus rings on every control -------------------------------------- */
#pg-wrap#pg-wrap .pg-gallery-btn:focus-visible,
#pg-wrap#pg-wrap .pg-mobile-showall:focus-visible,
#pg-wrap#pg-wrap .pg-lightbox-back:focus-visible,
#pg-wrap#pg-wrap .pg-lightbox-close:focus-visible,
#pg-wrap#pg-wrap .pg-lightbox-nav:focus-visible {
  outline: 2px solid #622D7F !important;
  outline-offset: 2px !important;
}


/* ---- The enlarged photo is draggable ----------------------------------- */
/* No text selection or native image drag while panning. */
#pg-wrap#pg-wrap .pg-lightbox-single-img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}


/* ---- Inherited defect: the photo counter ------------------------------- */
/* "11 / 34" sits at bottom:24px, which on a tall photo lands behind the
   image and is never seen. Same dark pill as the mobile carousel counter. */
#pg-wrap#pg-wrap .pg-lightbox-counter {
  z-index: 5;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF !important;
  font-family: var(--pg-sans) !important;
  font-size: 0.72rem !important;
  padding: 5px 12px;
  border-radius: 100px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* ---- Mobile ------------------------------------------------------------ */
/* The dark nav glyph vanishes over photos, and the arrows sit on the image
   itself rather than beside it. */
@media (max-width: 640px) {
  #pg-wrap#pg-wrap .pg-lightbox .pg-lightbox-single .pg-lightbox-nav {
    color: #FFFFFF !important;
    background: rgba(0, 0, 0, 0.35) !important;
  }
  #pg-wrap#pg-wrap .pg-lightbox-prev { left: 10px; }
  #pg-wrap#pg-wrap .pg-lightbox-next { right: 10px; }
  #pg-wrap#pg-wrap .pg-lightbox-back { font-size: 0.66rem !important; }
}