/* Retreats — Page-specific styles */

/* ── Hero — Two Photos Side by Side ── */
.retreats-hero-split {
  padding-top: var(--nav-h);
  background: var(--cream, #0A0A0A);
}

.retreats-hero-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
}

.retreats-hero-img {
  overflow: hidden;
}

.retreats-hero-img img {
  width: 100%;
  height: clamp(260px, 38vw, 520px);
  object-fit: cover;
  display: block;
  transition: filter .6s cubic-bezier(.19,1,.22,1);
}

.retreats-hero-img:hover img {
  filter: brightness(1.08);
}

.retreats-hero-text {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 768px) {
  .retreats-hero-photos {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .retreats-hero-img img {
    height: clamp(200px, 50vw, 300px);
  }
}

.cta-block {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta-title {
  font-family: 'Monument Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.cta-text {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.cta-block .btn-pill {
  background: var(--cream, #0A0A0A);
  color: var(--dark);
  border: 1.5px solid var(--dark);
}

.cta-block .btn-pill:hover {
  background: var(--coral);
  color: var(--white);
}

.video-grid {
  max-width: 960px;
  margin: 0 auto;
}

.section-text {
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.8;
  opacity: 0.85;
}

.section-text p {
  margin: 0 0 1rem;
}

.section-text p:last-child {
  margin-bottom: 0;
}

/* ── Hero Description — Compact ── */
.retreats-hero-split .page-hero-desc {
  color: var(--text-body, #A0A0A0);
  opacity: 1;
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  max-width: 100%;
}

/* ── Overview — Reduced Top Spacing ── */
.retreats-overview-section {
  padding-top: clamp(16px, 2vw, 32px);
}

/* ── Overview — Photo with Title to the Right, Text Below ── */
.retreats-overview-split {
  display: block;
  position: relative;
}

.retreats-overview-img {
  overflow: hidden;
  width: 55%;
}

.retreats-overview-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.retreats-overview-content .section-header {
  position: absolute;
  top: clamp(14rem, 28vw, 24rem);
  left: 58%;
  width: 42%;
  z-index: 1;
}

.retreats-overview-content .section-title {
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
}

.retreats-overview-content .section-text {
  max-width: none;
  color: var(--text-body, #A0A0A0);
  opacity: 1;
  column-count: 2;
  column-gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  text-align: justify;
}

.retreats-overview-content .section-text p {
  margin: 0;
  display: inline;
}

@media (max-width: 768px) {
  .retreats-overview-img {
    width: 100%;
  }
  .retreats-overview-img img {
    aspect-ratio: 4/3;
  }
  .retreats-overview-content .section-header {
    position: static;
    width: 100%;
    margin-top: 2rem;
  }
  .retreats-overview-content .section-text {
    column-count: 1;
  }
}

/* ── Videos Section — Less Top Spacing ── */
.retreats-videos-section {
  padding-top: clamp(16px, 2vw, 32px);
}

/* ── Retreat Video Blocks ── */
.retreat-video-block {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.retreat-video-block:last-child {
  margin-bottom: 0;
}

.retreat-video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
}

.retreat-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.retreat-video-info {
  margin-top: 1rem;
}

.retreat-video-title {
  font-family: var(--sans, 'Monument Grotesk', sans-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--coral);
  margin: 0 0 .3rem;
  line-height: 1.3;
}

.retreat-video-subtitle {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-body);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .retreat-video-title {
    font-size: 1.1rem;
  }
}

/* ── Testimonial Grids ── */
.testimonial-grid-vertical {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.testimonial-grid-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1.5vw, 1.5rem);
  margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
}

.testimonial-video {
  width: 100%;
  background: #000;
  overflow: hidden;
}

.testimonial-video video {
  width: 100%;
  display: block;
}

.testimonial-video video::-webkit-media-controls-fullscreen-button {
  display: none;
}

.testimonial-video video::-webkit-media-controls-picture-in-picture-button {
  display: none;
}

@media (max-width: 768px) {
  .testimonial-grid-vertical {
    grid-template-columns: 1fr 1fr;
  }
  .testimonial-grid-horizontal {
    grid-template-columns: 1fr;
  }
}

/* ── Section Headers for Mosaic & Movies ── */
.retreats-mosaic-header {
  padding-bottom: 0;
}

.retreats-movies-header {
  padding-bottom: 0;
}

/* ── Photo Mosaic Gallery ── */
.retreats-mosaic-section {
  background: var(--cream, #0A0A0A);
  padding: 0;
}

.retreats-mosaic {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.retreats-mosaic-item {
  overflow: hidden;
  height: clamp(110px, 12vw, 160px);
  flex-grow: 1;
  min-width: 60px;
}

.retreats-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform .6s cubic-bezier(.19,1,.22,1), filter .6s cubic-bezier(.19,1,.22,1);
}

.retreats-mosaic-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.1) contrast(1.03);
}


@media (max-width: 768px) {
  /* Puzzle mosaic — CSS Grid with repeating pattern */
  .retreats-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: clamp(100px, 22vw, 150px);
    grid-auto-flow: dense;
    gap: 3px;
  }

  .retreats-mosaic-item {
    height: auto;
    flex-grow: unset;
    min-width: unset;
    overflow: hidden;
  }

  .retreats-mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Pattern: every 6 images
     1 = portrait (2 rows)
     2,3 = two landscapes stacked beside portrait
     4 = full-width panoramic
     5,6 = two equal landscapes side by side
  */
  /* Pool aerial (item 1) — full-width hero opener */
  .retreats-mosaic-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 3;
  }

  .retreats-mosaic-item:nth-child(6n+1):not(:nth-child(1)) {
    grid-row: span 2;
  }

  .retreats-mosaic-item:nth-child(6n+4) {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Feature images — river ceremony (#5) & sunset women (#21) */
  .retreats-mosaic-item:nth-child(5),
  .retreats-mosaic-item:nth-child(21) {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Beach girl (item 58) — full-width, taller + show her face */
  .retreats-mosaic-item:nth-child(58) {
    grid-column: span 2;
    grid-row: span 4;
  }
  .retreats-mosaic-item:nth-child(58) img {
    object-position: center 35%;
  }

  /* Laughing girls (item 59, last) — full width closing */
  .retreats-mosaic-item:nth-child(59) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ── Lightbox image styling ── */
.lightbox .lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.lightbox .lightbox-prev,
.lightbox .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .3s;
}

.lightbox .lightbox-prev:hover,
.lightbox .lightbox-next:hover {
  background: var(--coral, #e84c30);
}

.lightbox .lightbox-prev { left: clamp(12px, 2vw, 24px); }
.lightbox .lightbox-next { right: clamp(12px, 2vw, 24px); }