/* Layout 2 — Excursions Progress Carousel.
   Reset & custom-properties scoped to .hero so the plugin never
   touches the surrounding theme. */
.hero{
  --teal:#1790AC;          /* hero background          */
  --teal-deep:#137b94;     /* shadows                  */
  --yellow:#E9E70F;        /* Discover button          */
  --ink:#13333c;           /* button text              */
  --white:#ffffff;
  --container:1200px;
  --pad:clamp(20px,5vw,72px);
}

.hero, .hero *{box-sizing:border-box}
.hero *{margin:0;padding:0}

/* ---------- full-bleed teal stage ---------- */
.hero{
  position:relative;
  width:100%;
  background:#159AB9;
  overflow:hidden;
}

/* ---------- contained content ---------- */
.hero__container{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:0px;
  min-height:min(640px,90vh);
  display:grid;
  grid-template-columns:1fr 0.92fr;
  grid-template-rows:1fr auto;
  column-gap:clamp(24px,4vw,56px);
  align-items:stretch;
}

/* ---------- persistent section title (overlaps the image) ---------- */
.hero__eyebrow{
  position:absolute;
  top:clamp(26px,3.6vw,46px);
  z-index:6;
  pointer-events:none;
  font-family:Fontspring, Verdana, Arial, sans-serif;
  font-weight:700;
  font-size:90px;
  line-height:1.02;
  letter-spacing:.5px;
  text-shadow:0 2px 22px rgba(0,38,52,.32);
  color:#fff;
}

/* ---------- left column (panels) ---------- */
.hero__left{
  grid-column:1;
  grid-row:1;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:340px;
}

/* text panels */
.hero__panels{position:relative;z-index:2}
.panel{
  position:absolute;
  inset:auto auto 0 0;
  width:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease, visibility .55s;
}
.panel.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  transform:none;
}
.panel__title{
  font-size:60px;
  font-weight:700;
  line-height:1.05;
  margin-bottom:14px;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.panel__cities {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  /* max-width: 42ch; */
  opacity: 1;
  margin-bottom: 22px;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.panel__btn {
  display: inline-block;
  background: #E4E623;
  color: #159AB9;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .2px;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 0px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.panel__btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.45);
}

.hero__container::before {
	content: '';
	position: absolute;
	background-image: url(/wp-content/uploads/2026/06/Mask-group1.png);
	width: 374px;
	height: 257px;
	top: 24%;
}

/* staggered entrance for the active panel */
.panel.is-active .panel__title{animation:btps-rise .6s .05s both}
.panel.is-active .panel__cities{animation:btps-rise .6s .15s both}
.panel.is-active .panel__btn{animation:btps-rise .6s .25s both}
@keyframes btps-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- right column (image) ---------- */
.hero__media{
  grid-column:2;
  grid-row:1;
  position:relative;
  min-height:700px;
}
.media{
  position:absolute;
  inset:0;
  border-radius:2px;
  overflow:hidden;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .8s ease, transform 1.1s ease;
}
.media.is-active{opacity:1;transform:none}
.media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- single progress-line navigation ---------- */
.hero__nav{
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:center;
  width:min(260px,58%);
  margin-top:32px;
}
.track{
  position:relative;
  width:100%;
  height:3px;
  border:0;
  padding:0;
  border-radius:3px;
  background:rgba(255,255,255,.32);
  cursor:pointer;
}
.track:hover{background:rgba(255,255,255,.45)}
.track__fill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0;
  border-radius:3px;
  background:#fff;
}

/* ---------- responsive ---------- */
@media (min-width: 861px) and (max-width:1140px) {
.hero__eyebrow {
	font-size: 61px;
}
.panel__title {
	font-size: 40px;
}
}


@media (max-width:860px){
  .hero__container{
    grid-template-columns:1fr;
    grid-template-rows:none;
    row-gap:24px;
    min-height:0;
    padding-top:30px;
  }
.hero__eyebrow {
	position: static;
	width: auto;
	z-index: auto;
	pointer-events: auto;
	text-shadow: none;
	grid-row: 1;
	margin-bottom: 4px;
	max-width: 16ch;
	font-size: 39px;
	margin: 0 auto;
	text-align:center;
}
  .hero__media{grid-column:1;grid-row:2;min-height:600px}
  .hero__left{grid-column:1;grid-row:3;min-height:0}
.hero__nav {
	grid-column: 1;
	grid-row: 4;
	width: min(260px,72%);
	margin-top: 22px;
	margin: 12px auto;
}
  .panel{position:relative;display:none}
  .panel.is-active{display:block}
	.hero__panels {
	text-align: center;
}
.panel__title {
	font-size: 30px;
}
}