/* ======================
   INTRO / JUMBOTRON BOX
   ====================== */

/* Generic intro box style (used inside hero overlay) */
.intro-box {
  position: relative;
  width: 100%;
  max-width: 420px;                               /* base size on desktop */
  padding: 20px 22px 20px;
  border-radius: 22px;
  background: var(--intro-box-bg, rgba(255,255,255,0.2));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* soft gradient accent in the corner */
.intro-box::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.35),
    transparent 55%
  );
  opacity: 0.75;
  pointer-events: none;
}

/* Pill container (logo + location) */
.hero-intro-overlay .intro-pill {
  display: flex;
  flex-direction: column;       /* logo on top, text below */
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 190px;

  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pill-bg);
  backdrop-filter: blur(4px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pill-text);
  opacity: 0.9;
}

/* Logo size inside pill */
.hero-intro-overlay .intro-logo {
  display: block;
  max-height: 36px;
  width: auto;
}

/* "Licanray · Chile 🇨🇱" under the logo */
.hero-intro-overlay .intro-location {
  font-size: 0.85rem;
  line-height: 1.2;
}

/* main title */
.intro-title {
  position: relative;
  margin: 4px 0 6px;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.2;
  color: var(--intro-title);
}

/* subtitle */
.intro-subtitle {
  position: relative;
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--intro-subtitle);
}

/* call-to-action button */
.intro-cta {
  position: relative;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: var(--intro-cta-bg, #0f766e);
  color: var(--buchsiejetztknopf);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.intro-cta:hover {
  background: var(--intro-cta-bg-hover, #115e59);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}

.intro-cta:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(0,0,0,0.22);
}


/* ==========================================
   INTRO OVERLAY ON HERO SLIDE 1
   ========================================== */

.hero-intro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;        /* bottom */
  justify-content: flex-start;  /* left */
  padding: 0 24px 26px;
  z-index: 3;                   /* above image/video, below lightbox */
  pointer-events: none;         /* only the box handles clicks */
}

/* Make the box itself clickable + define scale origin */
.hero-intro-overlay .intro-box {
  pointer-events: auto;
  transform-origin: left bottom;   /* we’ll shrink from this corner */
}

/* Desktop: scale 1 (13" Mac fullscreen, same width family as other sections) */
@media (min-width: 1025px) {
  .hero-intro-overlay .intro-box {
    transform: scale(1);
  }
}

/* Step down on smaller screens */
@media (max-width: 1024px) {
  .hero-intro-overlay .intro-box {
    transform: scale(0.9);
  }
}

@media (max-width: 768px) {
  .hero-intro-overlay .intro-box {
    transform: scale(0.7);
  }
}

@media (max-width: 600px) {
  .hero-intro-overlay .intro-box {
    transform: scale(0.5);
  }
}








/* =========================
   HERO CAROUSEL – LAYOUT
   ========================= */

/* Outer wrapper: centered, grows slowly */
.hero-carousel {
  max-width: 1000px; /* grows slower than viewport */
  width: 100%;
  margin:24px auto 20px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Viewport: defines the aspect ratio + clipping */
.hero-carousel-viewport {
  position: relative;          /* parent for absolute children */
  width: 100%;
  aspect-ratio: 16 / 9;        /* landscape */
  max-height: 800px;           /* safety cap if you ever increase width */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;         /* 0 if you don't want rounding */
}

/* Track just fills the viewport */
.hero-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Default (mobile / tablet) – keep it tight */
.hero-intro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 24px 26px;   /* left / right / bottom for smaller screens */
  z-index: 3;
  pointer-events: none;
}

/* Bigger desktops: give the intro box more breathing room */
@media (min-width: 800px) {
  .hero-intro-overlay {
    padding: 0 70px 70px;  /* top 0, left/right 70, bottom 70 */
  }
}



/* =========================
   HERO SLIDES – STACKED
   ========================= */

/* All slides are stacked on top of each other */
.hero-slide {
  position: absolute;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Only active slide is visible & clickable */
.hero-slide.active,
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide img,
.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* =========================
   HERO CAROUSEL – ARROWS
   ========================= */

.hero-control {
  position: absolute;
  top: 50%;
  transform: translateY(-55%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  background: var(--arrow-circle-br);
  box-shadow: 0 4px 10px rgba(0,0,0,.20);
  opacity: 0.9;                 /* <-- stays 0.9 */
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  font-weight: 700;
  color: var(--arrow-normal);

  z-index: 2;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.hero-control-prev { left: 7px; }
.hero-control-next { right: 7px; }

/* Hover style for the arrow itself AND when the click-zone is hovered */
.hero-control:hover,
.hero-click-zone-left:hover ~ .hero-control-prev,
.hero-click-zone-right:hover ~ .hero-control-next {
  transform: translateY(-50%) scale(1.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  color: var(--arrow-on-hover);
  opacity: 0.9;  /* keep same opacity on hover */
}

/* =========================
   HERO CLICK ZONES
   ========================= */

.hero-click-zone-left,
.hero-click-zone-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;              /* clickable width on each side */
  cursor: pointer;
  z-index: 1;              /* below arrows, above image */
}

/* left side */
.hero-click-zone-left {
  left: 0;
}

/* right side */
.hero-click-zone-right {
  right: 0;
}




/* =========================
   HERO CAROUSEL – INDICATORS
   ========================= */

.hero-indicators {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 24px;

  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 1;
}

.hero-indicator {
  position: relative;
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  border: 0;
  background: var(--indicator-not-active);
  cursor: pointer;
  padding: 0;
}

/* active base bar */
.hero-indicator.is-active {
  background: var(--indicator-not-active);
}

/* progress bar */
.hero-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--indicator-loading);
  border-radius: inherit;
}

/* animated while autoplay is running */
.hero-indicator.is-progress::before {
  width: 100%;
  transition: width var(--hero-progress-duration, 4.5s) linear;
}

/* manual click state */
.hero-indicator.is-manual {
  background: var(--indicator-active);
}

.hero-indicator.is-manual::before {
  transition: none;
  width: 0;
}

@media (max-width: 980.98px) {
  .hero-indicators {
    padding: 0 32px;
  }
}


/* =========================
   THREE IMAGE GRID – OVERVIEW
   ========================= */

.three-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* always 3 columns */
  gap: 15px;                              /* spacing between boxes */
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 10px;                        /* small mobile padding */
}

.three-image-grid .img-box {
  width: 100%;
  aspect-ratio: 4 / 3;                    /* same shape for all images */
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.three-image-grid .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* uniform cropping */
  display: block;
  cursor: zoom-in;                        /* for lightbox */
}

/* =========================
   BOTTOM IMAGE ROW (2 IMAGES)
   ========================= */

/* Base: behave similar to three-image-grid, but with 2 columns */
.image-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* always 2 columns */
  gap: 15px;                                         /* same gap as three-image-grid */
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 10px;                                   /* same side padding as grid */
}

.image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;                               /* same ratio as three-image-grid */
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;                                   /* for lightbox */
}

/* BASE: overlay + text */
.text-overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0,0,0,0.5);
  color: var(--index-box2-txt);
  padding: 15px;
  border-radius: 8px;
  max-width: 60%;
  box-sizing: border-box;
}

/* Make title + paragraph scale with viewport width */
.text-overlay h3 {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.35rem);  /* scales down on smaller screens */
  line-height: 1.2;
}

.text-overlay p {
  margin: 0;
  font-size: clamp(0.8rem, 1.1vw, 1rem);   /* also scales smoothly */
  line-height: 1.5;
}

/* --- RESPONSIVE, KEEP 2 COLUMNS BUT SHRINK EVERYTHING --- */
@media (max-width: 900px) {
  .image-row {
    gap: 12px;
  }

  .text-overlay {
    transform: scale(0.9);
    transform-origin: bottom right;
  }
}

@media (max-width: 600px) {
  .image-row {
    max-width: 100%;
    gap: 8px;
  }

  .image-box {
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }

  .text-overlay {
    transform: scale(0.8);
    transform-origin: bottom right;
    max-width: 100%;
    padding: 10px;
  }
}



/* ==========================================
   LIGHTBOX – BASE LAYOUT (ALL GALLERIES)
   ========================================== */

.pairLightbox {
  position: fixed;
  inset: 0;                               /* full screen */
  display: none;                          /* JS will add .is-open */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);        /* dark backdrop */
  z-index: 9999;
}

.pairLightbox.is-open {
  display: flex;
}

/* backdrop area (click to close) */
.pairLightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;                /* main dark is on .pairLightbox */
}

/* white “card” in the center */
.pairLightbox-dialog {
  position: relative;
  width: min(800px, 95vw);                /* similar to old design */
  height: min(720px, 80vh);
  background: var(--lightbox-br, #ffffff);
  border-radius: 22px;
  padding: 32px 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;                      /* so close button can sit outside */
}

/* Small desktops / small laptops: make the dialog a bit smaller */
@media (max-width: 500px) {
  .pairLightbox-dialog {
    width: min(700px, 90vw);   /* narrower than 800px */
    height: min(620px, 75vh);  /* a bit less tall */
    padding: 26px 40px;        /* slightly tighter padding */
  }

  /* optional: slightly smaller click zones so everything feels lighter */
  .pairLightbox-click-zone {
    top: 130px;
    bottom: 130px;
  }
}


/* ==========================================
   MEDIA INSIDE LIGHTBOX (IMAGE / VIDEO)
   ========================================== */

.pairLightbox-image,
.pairLightbox-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;                    /* show whole image/video */
  border-radius: 16px;
  background: transparent;
  display: none;                          /* JS shows the one in use */
}

/* only hero video needs a black frame */
.heroLightbox .pairLightbox-video {
  background: #000;
}

/* ==========================================
   CLOSE BUTTON
   ========================================== */

.pairLightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--close-botton-border, #f44336);
  background: var(--close-botton-box, #ffffff);
  color: var(--close-botton, #f44336);
  font-size: 22px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

/* ==========================================
   ARROWS (LEFT / RIGHT)
   ========================================== */

.pairLightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--arrow-circle-br, #ffffff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  font-weight: 700;
  color: var(--arrow-normal, #444);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
  z-index: 3;
}

.pairLightbox-arrow-prev { left: 18px; }
.pairLightbox-arrow-next { right: 18px; }

.pairLightbox-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--arrow-on-hover, #000);
}

/* ==========================================
   LIGHTBOX CLICK ZONES – BIG AREAS LEFT/RIGHT
   ========================================== */

.pairLightbox-click-zone {
  position: absolute;
  top: 150px;
  bottom: 150px;
  width: 35%;
  cursor: pointer;
  z-index: 2;           /* below arrows (z=3), above media */
  background: transparent;
}

.pairLightbox-click-zone-left  { left: 0; }
.pairLightbox-click-zone-right { right: 0; }

/* Hover mirror: if the zone is hovered, animate the corresponding arrow */
.pairLightbox-arrow:hover,
.pairLightbox-click-zone-left:hover  ~ .pairLightbox-arrow-prev,
.pairLightbox-click-zone-right:hover ~ .pairLightbox-arrow-next {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--arrow-on-hover, #000);
}

/* Phones: make click-zones smaller so they don't cover video controls */
@media (max-width: 600px) {
  .heroLightbox .pairLightbox-click-zone {
    top: 80px;     /* start lower */
    bottom: 90px;  /* leave a free strip at the bottom for controls */
    width: 30%;    /* a bit narrower on the sides */
  }
}


/* ==========================================
   LIGHTBOX INDICATORS – BAR STYLE + PROGRESS
   ========================================== */

.pairLightbox-indicators {
  position: absolute;
  left: 60px;              /* match dialog horizontal padding */
  right: 60px;
  bottom: 16px;
  display: flex;
  justify-content: center; /* center the row */
  gap: 6px;
  margin: 0;
  padding: 0;
  z-index: 3;
}

/* base bar */
.pairLightbox-indicator {
  position: relative;
  display: block;
  width: 50px;
  height: 4px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--indicator-not-active);   /* always grey as base */
  cursor: pointer;
}

/* active slide: just a bit longer, still grey */
.pairLightbox-indicator.is-active {
  width: 80px;
  background: var(--indicator-not-active);   /* <-- important: stay NOT active */
}

/* red fill overlay (like hero) */
.pairLightbox-indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--lb-progress, 0%);
  background: var(--indicator-loading);
  border-radius: inherit;
  transition: width 0.15s linear;
}

/* image slides */
.pairLightbox-indicator.is-active:not(.is-video) {
  background: var(--indicator-active);
  width: 80px;
}

/* video slides stay grey; .is-complete makes the whole bar active if you want */
.pairLightbox-indicator.is-video.is-complete {
  background: var(--indicator-active);
}

/* small-screen tweaks */
@media (max-width: 768px) {
  .pairLightbox-indicators {
    left: 32px;
    right: 32px;
    bottom: 12px;
  }
}

@media (max-width: 480px) {
  .pairLightbox-indicators {
    left: 24px;
    right: 24px;
    bottom: 10px;
  }
}
/* Phones: just shrink the whole lightbox card a bit */
@media (max-width: 950px) {
  .pairLightbox-dialog {
    transform: scale(0.85);
    transform-origin: center center;
  }
}
/* Phones: just shrink the whole lightbox card a bit */
@media (max-width: 480px) {
  .pairLightbox-dialog {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

.pairLightbox-indicator.is-video-active {
  width: 80px;   /* longer bar for the video indicator */
}


/* ==========================================
   RESPONSIVE TWEAKS
   ========================================== */

@media (max-width: 768px) {
  .pairLightbox-dialog {
    width: min(95vw, 800px);
    height: min(80vh, 640px);
    padding: 20px 32px 46px;
  }

  .pairLightbox-arrow {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .pairLightbox-indicators {
    left: 32px;
    right: 32px;
    bottom: 12px;
  }

  .pairLightbox-video-toggle {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .pairLightbox-dialog {
    padding: 16px 22px 42px;
  }

  .pairLightbox-indicators {
    left: 24px;
    right: 24px;
    bottom: 10px;
  }
}

/* Magnifier cursor for all lightbox images / videos */
[data-lightbox="image"],
[data-lightbox="video"] {
  cursor: zoom-in;
}



/* Magnifier cursor inside the lower two lightboxes (grid3 + row2) */
.gridLightbox .pairLightbox-image,
.rowLightbox .pairLightbox-image {
  cursor: zoom-in;
}

/* hide cursor ONLY when over the hero lightbox video */
.heroLightbox .pairLightbox-video.cursor-hidden {
  cursor: none;
}


/* =========================
   INDEX – TEXT BOXES
   ========================= */

.section-text-index-1{
  max-width: 1100px;              /* same family as hero + grids */
  width: calc(100% - 20px); 
  margin: 24px auto;              /* vertical spacing */
  padding: 18px 24px;
  border-radius: 18px;
  background: var(--index-box-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  text-align: center;
  box-sizing: border-box;
}
.section-text-index-2 {
  max-width: 1200px;              /* same family as hero + grids */
  width: calc(100% - 20px);  
  margin: 24px auto;              /* vertical spacing */
  padding: 18px 24px;
  border-radius: 18px;
  background: var(--index-box-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  text-align: center;
  box-sizing: border-box;
}

.section-text-index-1 p {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: bold;
  line-height: 1.5;
  color: var(--index-box-txt);
}

.section-text-index-2 p {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: bold;
  line-height: 1.5;
  color: var(--index-box-txt);
}


/* Small screens: same width family as three-image-grid, just softer padding + text */
@media (max-width: 600px) {
  .section-text-index-1,
  .section-text-index-2 {
    max-width: 1200px;   /* keep same container width */
    margin: 22px auto;
    padding: 12px 16px;  /* a bit less padding */
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    transform: none;     /* <— IMPORTANT: no shrink, align with grid */
  }

  .section-text-index-1 p,
  .section-text-index-2 p {
    font-size: 0.95rem;
    line-height: 1.4;
  }
}


@media (max-width: 800px) {
  .hero-carousel {
    margin: 14px auto 16px;
  }

  .section-text-index-1,
  .section-text-index-2 {
    margin: 14px auto;
    padding: 10px 14px;
  }

  .three-image-grid,
  .image-row {
    margin: 16px auto;
  }
}