/* ============================================================
   jaco.css — page styles for the static bilingual Jacó Beach
   pages (/en/jaco-beach/ and /es/playa-jaco/).
   Loads after colors_and_type.css + crmaps.css and reuses their
   tokens (--cr-*, --fg-*, --paper-2) and shared nav/footer/btn.
   ============================================================ */

@keyframes jbFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* ── Hero ──────────────────────────────────────────────────── */
.jb-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(35,170,224,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(2,83,145,0.85) 0%, transparent 65%),
    linear-gradient(170deg, #084b88 0%, #0061b4 50%, #023a6a 100%);
}
.jb-hero__inner{
  position: relative;
  z-index: 2;
  /* 1800px content width — same hero standard as the other guides */
  max-width: 1800px;
  margin: 0 auto;
  padding: 130px clamp(28px, 5vw, 80px) 96px;
}
.jb-hero__head{ margin-bottom: 48px; }
/* Two-column layout under the header:
   left = scroll map + closing paragraphs + CTAs, right = intro + diorama */
.jb-hero__grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-areas:
    "map  right"
    "more right";
  column-gap: clamp(56px, 6vw, 96px);
  row-gap: 44px;
  align-items: start;
}
/* Right column stretches over both rows; the diorama is pushed to the
   bottom so it lines up with the CTA buttons of the left column. */
.jb-hero__right{
  grid-area: right;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.jb-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 11px/1 'Roboto';
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cr-yellow);
  margin-bottom: 20px;
}
.jb-hero__kicker::before{
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.jb-hero h1{
  font: 800 clamp(38px, 4.6vw, 64px)/1.02 'Roboto Condensed', 'Roboto', sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,20,40,0.25);
}
.jb-hero h1 em{ color: var(--cr-yellow); font-style: normal; }
.jb-hero__sub{
  font: 500 18px/1.3 'Roboto';
  color: rgba(255,255,255,0.88);
  margin: 0 0 26px;
  letter-spacing: 0.01em;
}
.jb-hero__intro{ grid-area: intro; }
.jb-hero__more{ grid-area: more; }
.jb-hero__intro p,
.jb-hero__more p{
  font: 400 16px/1.65 'Roboto';
  color: rgba(255,255,255,0.78);
  margin: 0 0 18px;
}
.jb-hero__intro p.jb-hero__lede{ color: rgba(255,255,255,0.92); }
.jb-hero__cta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
/* No background card: the scroll artwork floats free and the shadow
   follows its silhouette (the webp has real alpha). */
.jb-hero__map-frame{ grid-area: map; position: relative; }
.jb-hero__map-frame > img:not(.jb-hero__logo){
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0,10,25,0.45));
}
.jb-hero__map-frame > img.jb-hero__logo{
  position: absolute;
  /* over the illustrated area, near the left scroll roll */
  bottom: 22%;
  left: 15%;
  width: clamp(110px, 18%, 170px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
  animation: jbFloat 5s ease-in-out infinite;
}
.jb-hero__beach{ grid-area: beach; margin-top: auto; padding-top: 44px; }
.jb-hero__beach img{
  display: block;
  width: min(675px, 100%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 22px 34px rgba(0,10,25,0.45));
  animation: jbFloat 5s ease-in-out infinite;
}

/* ── Section header (shared by map + faq) ─────────────────── */
.jb-section{ padding: 96px clamp(24px, 5vw, 64px); }
.jb-section__inner{ max-width: var(--container); margin: 0 auto; }
.jb-head{ max-width: 74ch; margin: 0 0 36px; }
.jb-head--center{ text-align: center; max-width: 640px; margin: 0 auto 40px; }
.jb-head--center .kicker{ justify-content: center; }
.jb-head h2{
  font: 800 clamp(30px, 3.6vw, 46px)/1.05 'Roboto Condensed', 'Roboto', sans-serif;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0 0 14px;
}
.jb-head h2 em{ color: var(--cr-orange); font-style: normal; }
.jb-head p{
  font: 300 clamp(16px, 1.2vw, 18px)/1.5 'Roboto';
  color: var(--fg-4);
  margin: 0;
}

/* ── Interactive map (embedded web-app MapScreen, locked to PJ) ── */
.jb-map{ background: var(--paper-2); }
.jb-map__viewer{
  position: relative;
  width: 100%;
  /* Same pattern as the home visor (.visor-embed): the container keeps the
     map's own aspect ratio (Jaco.dzi 10630×7087), so the initial fit covers
     the whole viewer with no letterboxing. */
  aspect-ratio: 10630 / 7087;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,38,78,0.16);
  background: #0a1f33;
}
#tamarindoMapRoot,
.jb-viewer-stage{ position: absolute; inset: 0; }

/* Overrides of the web-app chrome inside the embed:
   the map is locked to Jacó and the page has its own language toggle. */
.jb-map__viewer .map-selector-wrap{ display: none; }
.jb-map__viewer .map-topchrome .app-lang-toggle{ display: none; }
.jb-map__viewer .map-slothy-peek{ display: none; }
.jb-map__viewer .map-bottom-fab{ display: none; }
/* Category button top-right, styled like the home visor's filter button;
   its dropdown opens leftwards (right:0) so it stays inside the frame. */
.jb-map__viewer .map-topchrome{ justify-content: flex-end; }
.jb-map__viewer .map-cats-wrap .map-iconbtn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,97,180,0.9);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
}
.jb-map__viewer .map-cats-wrap .map-iconbtn:hover{ background: rgba(0,97,180,1); }
.jb-map__viewer .map-cats-wrap .map-iconbtn svg{ width: 20px; height: 20px; }
.jb-map__viewer .map-cats-dropdown{
  width: 260px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

/* Usage instructions strip under the map — same as home's .regions-actions */
.jb-map__actions{
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
}
.jb-map__actions img{
  width: min(390px, 100%);
  height: auto;
  display: block;
}
@media (max-width: 767px){
  .jb-map__actions{ display: none; }
}
/* Side panel: phone-sized even on wide desktop containers */
.jb-map__viewer .hp-panel{ width: min(430px, 94%); }
.jb-map__viewer .hp-scroll{
  padding-bottom: 24px;
  /* touch: keep panel scrolling from chaining into the page */
  overscroll-behavior: contain;
}

/* app.css (web-app) sets html/body touch-action for its own full-screen
   context — restore normal page behaviour here. */
html, body{ touch-action: auto; }

/* ── Photo gallery (coverflow carousel, hero-blue section) ── */
.jb-gallery{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(35,170,224,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(2,83,145,0.85) 0%, transparent 65%),
    linear-gradient(170deg, #084b88 0%, #0061b4 50%, #023a6a 100%);
}
.jb-head--light h2{ color: #fff; }
.jb-head--light h2 em{ color: var(--cr-yellow); }
.jb-head--light p{ color: rgba(255,255,255,0.82); }

.jb-carousel{ margin-top: 10px; }
.jb-carousel__stage{
  position: relative;
  height: 560px;
  /* no clipping: card shadows fall naturally past the stage (the page
     already has body{overflow-x:hidden}, so side cards can't cause
     horizontal scroll) */
  overflow: visible;
  touch-action: pan-y;
}
.jb-carousel__card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(400px, 68vw);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,10,25,0.45);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.5);
  transition: transform 620ms cubic-bezier(.22,.88,.22,1), opacity 620ms ease, filter 620ms ease;
  cursor: pointer;
  will-change: transform;
}
.jb-carousel__card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.jb-carousel__nav{
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.jb-carousel__btn{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #fff;
  background: transparent;
  display: grid;
  place-items: center;
  transition: background 0.15s, transform 0.15s;
}
.jb-carousel__btn:hover{ background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.jb-carousel__btn svg{ width: 20px; height: 20px; }
.jb-gallery__credit{
  display: block;
  text-align: right;
  margin-top: 20px;
  font: 400 12px/1 'Roboto';
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.jb-gallery__credit:hover{ color: #fff; }
@media (max-width: 600px){
  .jb-carousel__stage{ height: 420px; }
  .jb-carousel__nav{ margin-top: 22px; }
}

/* ── FAQ accordion ────────────────────────────────────────── */
.jb-faq{ background: #fff; }
.jb-faq__list{
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq-item{
  background: #fff;
  border: 1px solid rgba(48,65,72,0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-item.is-open{
  border-color: rgba(0,97,180,0.35);
  box-shadow: 0 6px 16px rgba(15,112,180,0.08);
}
.faq-item__btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font: 800 16px/1.35 'Roboto';
  color: var(--fg-1);
  text-align: left;
}
.faq-item__ico{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,97,180,0.1);
  color: var(--cr-blue);
  transition: transform 260ms cubic-bezier(.22,.88,.22,1), background 140ms ease, color 140ms ease;
}
.faq-item.is-open .faq-item__ico{
  background: var(--cr-blue);
  color: #fff;
  transform: rotate(45deg);
}
.faq-item__body{
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(.22,.88,.22,1);
}
.faq-item.is-open .faq-item__body{ max-height: 1500px; }
.faq-item__body p{
  margin: 0;
  padding: 0 24px 22px;
  font: 400 15px/1.6 'Roboto';
  color: var(--fg-4);
  max-width: 66ch;
}

/* ── Closing band (lives at the end of the FAQ section) ───── */
.jb-closing__band{
  margin-top: 64px;
  padding: 56px clamp(28px, 5vw, 64px);
  border-radius: 24px;
  background: linear-gradient(170deg, #084b88 0%, #0061b4 50%, #023a6a 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.jb-closing__band p{
  position: relative;
  margin: 0 auto;
  max-width: 64ch;
  font: 500 clamp(18px, 1.7vw, 24px)/1.5 'Roboto Condensed', 'Roboto', sans-serif;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.005em;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 920px){
  .jb-hero__inner{ padding-top: 110px; }
  .jb-hero__grid{
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "map" "more" "beach";
    row-gap: 48px;
  }
  /* the wrapper dissolves so intro/beach take their stacked areas */
  .jb-hero__right{ display: contents; }
  .jb-hero__beach{ margin-top: 0; padding-top: 0; }
  .jb-hero__map-frame{ max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px){
  .jb-section{ padding: 64px 20px; }
  .jb-hero__inner{ padding: 96px 20px 64px; }
  .faq-item__btn{ padding: 16px 18px; font-size: 15px; }
  .faq-item__body p{ padding: 0 18px 18px; }
  .jb-closing__band{ margin-top: 44px; }
}