/* === Global Presence (scrollytelling, centered pin + sticky header) — fully scoped === */

.locations-section {
  /* custom var so we can offset for the WP admin bar */
  --loc-header-top: 0px;
  padding: clamp(2.4rem, 6vw, 4.8rem) 0;
  background: #F8F9FA;
  color: #212529
}

.locations-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 .9rem
}

/* Header — STICKY on desktop, offset by admin bar */
.locations-header {
  text-align: center;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
  position: sticky;
  top: var(--loc-header-top);
  z-index: 20;
  background: #F8F9FA;
  padding-top: .9rem;
  padding-bottom: .7rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.locations-header h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 600;
  margin: 0 0 .45rem
}

.locations-header p {
  font-size: clamp(.92rem, 1.4vw, 1.02rem);
  color: #6C757D;
  max-width: 520px;
  margin: 0 auto
}

/* If the WP admin bar is present, push the sticky header below it */
body.admin-bar .locations-section {
  --loc-header-top: 32px;
}

@media (max-width:782px) {
  body.admin-bar .locations-section {
    --loc-header-top: 46px;
  }
}

/* Wrapper + stage */
.locations-scroll-wrapper {
  height: 200vh;
  position: relative
}

/* Stage initially centered; JS refines exact top in px */
.locations-sticky-container {
  position: sticky;
  top: 50vh;
  height: 60vh;
  transform: translateY(-50%);
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .14);
  transition: transform .3s ease, box-shadow .3s ease;
  background: #0a0f16;
  will-change: transform;
}

.locations-sticky-container:hover {
  transform: translateY(-50%) scale(1.01);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .18)
}

/* Images (lighter Ken Burns) */
.location-image-container {
  position: absolute;
  inset: 0;
  z-index: 1
}

@keyframes kenBurns {
  0% {
    transform: scale(1.06) translate(0, 0)
  }
  100% {
    transform: scale(1.12) translate(-.8%, .8%)
  }
}

.location-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity .8s ease-in-out
}

.location-image.active {
  opacity: 1;
  animation: kenBurns 14s ease-in-out infinite alternate
}

/* Text overlay */
.location-text-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3.2%;
  background: linear-gradient(to right, rgba(10, 15, 22, 0) 25%, rgba(10, 15, 22, .82) 65%)
}

.text-panel {
  position: absolute;
  width: 32%;
  color: #F8F9FA;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.19, 1, .22, 1), transform .55s cubic-bezier(.19, 1, .22, 1)
}

.text-panel.active {
  opacity: 1;
  transform: translateY(0)
}

.text-panel h3 {
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 600;
  margin: 0 0 .45rem
}

.text-panel p {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(248, 249, 250, .86);
  margin: 0
}

/* === UPDATED: SLIDER ARROW STYLES (Mobile Only) === */
.location-arrow {
  display: none;
  /* Hidden by default, shown in media query */
  position: absolute;
  
  /* --- MOVED TO BOTTOM --- */
  top: auto;
  bottom: 1.25rem;
  transform: none; 
  /* --- END MOVE --- */
  
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #212529;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}

.location-arrow:hover:not(:disabled) {
  background: #fff;
  transform: scale(1.08); /* Removed translateY */
}

.location-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.location-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

#loc-arrow-prev {
  left: 1.25rem; /* Adjusted spacing */
}

#loc-arrow-next {
  right: 1.25rem; /* Adjusted spacing */
}


/* === UPDATED: Responsive (Mobile/Tablet) === */
@media (max-width: 992px) {

  /* 1. Disable scrollytelling */
  .locations-scroll-wrapper {
    height: auto
  }

  .locations-sticky-container {
    position: relative;
    top: auto;
    transform: none;
    height: auto;
    
    /* --- UPDATED: WIDER (SHORTER) RATIO FOR TABLET --- */
    aspect-ratio: 16 / 9; 
    min-height: 350px; 
    max-height: 480px; /* Cap height on tablets */
    /* --- END UPDATE --- */
  }

  .locations-sticky-container:hover {
    transform: none;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .14);
  }

  /* 2. Show slider arrows */
  .location-arrow {
    display: flex;
  }

  /* 3. Center text & strengthen gradient */
  .location-text-container {
    background: linear-gradient(to top, rgba(10, 15, 22, 0.9) 0%, rgba(10, 15, 22, 0.7) 50%, transparent 100%);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 1.5rem;
  }

  /* 4. Rework text panels for slider */
  .text-panel {
    position: relative;
    width: 100%;
    max-width: 500px;
    opacity: 1;
    transform: none;
    display: none;
    transition: none;
  }

  .text-panel.active {
    display: block;
  }

  /* 5. Improve text readability on mobile */
  .text-panel h3 {
    font-size: clamp(1.5rem, 5vw, 1.8rem);
    margin-bottom: 0.75rem;
  }

  .text-panel p {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
    line-height: 1.6;
    color: rgba(248, 249, 250, 0.95);
  }
}

@media (max-width: 576px) {
  /* Tweak for small phones */
  .locations-sticky-container {
    /* --- UPDATED: TALLER RATIO FOR NARROW PHONES --- */
    aspect-ratio: 4 / 3;
    min-height: 320px; /* Readjusted min */
    max-height: 60vh;
    /* --- END UPDATE --- */
  }
  
  .location-text-container {
    padding: 2rem 1rem 1rem;
  }
  
  .location-arrow {
    width: 2.5rem;
    height: 2.5rem;
    bottom: .75rem; /* Closer to edge */
  }
  
  #loc-arrow-prev {
    left: .75rem; /* Closer to edge */
  }
  #loc-arrow-next {
    right: .75rem; /* Closer to edge */
  }
}