/* Attractions carousel. Simple, static, single-declaration rules
   (box-sizing reset, body background/margin, #attractions padding,
   .attraction_title padding) are Tailwind utility classes directly on
   the elements instead, since they didn't need a named rule.
   Everything below either depends on CSS custom properties, media
   queries, pseudo-classes, or multi-step transitions that read far
   better as real CSS than as arbitrary-value Tailwind soup. */

#attractions .glow-a {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: -10%;
    height: 520px;
    width: 820px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: rgba(32, 48, 156, .4);
    filter: blur(110px);
}

#attractions .glow-b {
    pointer-events: none;
    position: absolute;
    bottom: -15%;
    right: -10%;
    height: 380px;
    width: 380px;
    border-radius: 9999px;
    background: rgba(15, 23, 74, .6);
    filter: blur(100px);
}

/* Wrapper around [data-track] + .caption-overlay. z-index: 0 here
   (combined with position: relative) forces this element to
   establish its own stacking context, so the image cards' z-index:10
   and the overlay's z-index only ever compete against each other
   *inside this box* — never against unrelated z-indexes elsewhere on
   the page, and never able to let the image win by accident. */
#attractions .attraction-visual {
    position: relative;
    z-index: 0;
}

/* Track: full-bleed, no left/right padding at all. Arrows are pinned
     here at a fixed offset from center that only changes at breakpoints
     — never mid-swipe — so they never appear to move while dragging.
     Sizes below are fixed px (not rem) so they match the design specs
     exactly and don't inflate with any inherited root font-size. */
#attractions [data-track] {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* crop anything that bleeds past the edge, no scrollbar */
    /* Height is locked per breakpoint (below) to the tallest card — the
   center card. Cards transition width/height on every swap; without a
   fixed row height that transition ripples into the section's total
   height and reads as a bounce. Locking it here stops that outright. */
    height: 250px;
    /* = center width 200px @ 4:5 */
    --half-center: 100px;
    /* half the center card's width, this breakpoint */
    --arrow-gap: .5rem;
    /* how far outside the center card's edge the arrow sits */
}

#attractions [data-cards] {
    display: flex;
    align-items: center;
    /* space-between (not center) pins the outermost visible card flush to
   the row's true left/right edge — zero side space — and turns any
   leftover width into the gaps between cards automatically, at any
   viewport size. `gap` below is just a floor so cards never touch on
   very narrow screens. */
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}

#attractions .attraction-card {
    display: none;
    flex-shrink: 0;
    margin: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
    transition: width .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1), opacity .75s ease;
}

#attractions .attraction-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

#attractions .attraction-card.is-center {
    display: block;
    width: 200px;
    aspect-ratio: 4 / 5;
    z-index: 10;
}

/* All non-center cards (near + far) share one width so every side
   image is the same size — only opacity/rotation set them apart. */
#attractions .attraction-card.is-near-left,
#attractions .attraction-card.is-near-right,
#attractions .attraction-card.is-far-left,
#attractions .attraction-card.is-far-right {
    display: block;
    width: 130px;
    aspect-ratio: 4 / 5;
}

#attractions .attraction-card.is-near-left,
#attractions .attraction-card.is-near-right {
    opacity: .6;
    /* second image out from center: 60% */
}

#attractions .attraction-card.is-near-left {
    transform: rotate(-4deg);
}

#attractions .attraction-card.is-near-right {
    transform: rotate(4deg);
}

#attractions .attraction-card.is-far-left,
#attractions .attraction-card.is-far-right {
    opacity: .1;
    /* third image out from center: 10% */
}

#attractions .attraction-card.is-far-left {
    transform: translateY(2.25rem) rotate(-8deg);
}

#attractions .attraction-card.is-far-right {
    transform: translateY(2.25rem) rotate(8deg);
}

#attractions .attraction-card.is-hidden {
    display: none;
}

/* Caption content lives inside each card as real markup (not data-*
   attributes) so it's readable/editable in the DOM and by CMS tooling.
   It's visually hidden — the visible caption below is populated from it.
   flex+gap, not each class's own margin, controls the spacing between
   tag/title/desc — keeps it consistent no matter what margins
   title_16-600 / title-32-600 / title-16 carry. */
#attractions .attraction-content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

#attractions .attraction-dots {
    display: none;
}

@media (min-width: 768px) {
    /* Keep the active card centered even when the CMS has fewer than five items. */
    #attractions [data-cards] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) calc(2 * var(--half-center)) repeat(2, minmax(0, 1fr));
        justify-items: center;
    }

    #attractions .attraction-card { grid-row: 1; }
    #attractions .attraction-card.is-far-left { grid-column: 1; }
    #attractions .attraction-card.is-near-left { grid-column: 2; }
    #attractions .attraction-card.is-center { grid-column: 3; width: calc(2 * var(--half-center)); }
    #attractions .attraction-card.is-near-right { grid-column: 4; }
    #attractions .attraction-card.is-far-right { grid-column: 5; }

    #attractions [data-track] {
        height: 370px;
        --half-center: 148px;
    }
}

@media (min-width: 1280px) {
    #attractions [data-track] {
        /* center image height per design: 475px */
        height: 475px;
        --half-center: 190px;
    }

    #attractions .attraction-card.is-center {
        /* 380 x 475 = 4:5 */
        width: 380px;
    }

    #attractions .attraction-card.is-near-left,
    #attractions .attraction-card.is-near-right,
    #attractions .attraction-card.is-far-left,
    #attractions .attraction-card.is-far-right {
        width: 250px;
    }
}

/* Arrows: fixed at 50% ± half-center, offset outward by --arrow-gap.
   Purely CSS-driven from the custom properties above, so nothing about
   their position ever recalculates on next()/prev() — they stay locked
   to the center of the track through every swipe. */
#attractions [data-prev],
#attractions [data-next] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #CBFF00;
    color: #0F174A;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .6);
}

#attractions [data-prev] {
    transform: translate(calc(-100% - var(--half-center) - var(--arrow-gap)), -50%);
}

#attractions [data-next] {
    transform: translate(calc(var(--half-center) + var(--arrow-gap)), -50%);
}

#attractions [data-prev]:hover,
#attractions [data-next]:hover {
    transform-origin: center;
    filter: brightness(1.05);
}

/* Overlay piece: tag + title only. Static box on desktop/tablet
   (see base rules below); switched to absolute, pinned to the
   bottom of the image, only on mobile. */
#attractions .caption-overlay {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin: 3rem auto 0;
    text-align: center;
    padding: 0 1.5rem;
}

#attractions .caption-overlay [data-caption-tag] {
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: rgba(255, 255, 255, .85);
    transition: opacity .2s ease;
}

#attractions .caption-overlay [data-caption-title] {
    margin: .75rem 0 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #CBFF00;
    transition: opacity .2s ease;
}

/* Description-only piece: always flows normally below the image. */
#attractions .caption {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin: 1rem auto 0;
    text-align: center;
    padding: 0 1.5rem;
}

#attractions .caption [data-caption-desc] {
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
    transition: opacity .2s ease;
}

@media (max-width: 767px) {
    #attractions .title-60 {
        text-align: left;
        padding: 0 1.5rem 1.5rem;
        font-size: 38px;
    }

    #attractions [data-track] {
        height: auto;
        padding: 0 1.5rem;
    }

    #attractions [data-cards] {
        justify-content: center;
    }

    #attractions .attraction-card.is-center {
        width: 100%;
    }

    #attractions .attraction-card.is-near-left,
    #attractions .attraction-card.is-near-right,
    #attractions .attraction-card.is-far-left,
    #attractions .attraction-card.is-far-right {
        display: none;
    }

    #attractions [data-prev],
    #attractions [data-next] {
        display: none;
    }

    /* Overlay is pinned exactly to the bottom edge of the image.
       left/right match [data-track]'s own 1.5rem side padding, so the
       overlay's box is exactly as wide as the image — never wider.
       Its own padding (with box-sizing: border-box) adds breathing
       room around the text without pushing past that width.
       z-index: 20 beats the center card's z-index: 10 — both compete
       only within the stacking context .attraction-visual establishes
       above — so the text now renders on top of the image instead of
       being hidden underneath it. */
    #attractions .caption-overlay {
        position: absolute;
        left: 1.5rem;
        right: 1.5rem;
        bottom: 0;
        margin: 0;
        padding: 1.25rem 1rem 1rem;
        box-sizing: border-box;
        text-align: left;
        z-index: 20;
        pointer-events: none;
    }

    #attractions .caption-overlay::before {
        content: "";
        position: absolute;
        inset: -3rem 0 0 0;
        background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 100%);
        z-index: -1;
        border-radius: 0 0 1.25rem 1.25rem;
    }

    #attractions .caption-overlay [data-caption-tag] {
        text-transform: none;
        letter-spacing: normal;
        font-size: .85rem;
    }

    #attractions .caption-overlay [data-caption-title] {
        font-size: 1.375rem;
    }

    /* Description sits below the image with clear separation from it. */
    #attractions .caption {
        max-width: none;
        margin: 1.75rem 0 0;
        text-align: left;
        padding: 0 1.5rem;
    }

    #attractions .caption [data-caption-desc] {
        font-size: .9rem;
    }

    #attractions .attraction-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        margin-top: 1.5rem;
    }

    #attractions .attraction-dot {
        width: .5rem;
        height: .5rem;
        border-radius: 9999px;
        background: rgba(255, 255, 255, .25);
        border: none;
        padding: 0;
        cursor: pointer;
    }

    #attractions .attraction-dot.is-active {
        background: #CBFF00;
    }
}

/* Experiences — simple scroll-snap card carousel. Cards are plain
   flex children in a horizontally-scrolling track; arrows/dots just
   move the scroll position, so it works with no layout math like the
   Attractions carousel needs. */
#experiences {
    position: relative;
    background: transparent;
}

#experiences .exp-track-wrap {
    position: relative;
    box-sizing: content-box;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 1279px) {
    #experiences .exp-track-wrap {
        box-sizing: border-box;
        padding-left: 2rem;
    }
}

#experiences {
    /* Card width per breakpoint, kept in sync with .exp-card's own
       width below. Used to cap the track so exactly 6 cards fit with
       no partial 7th card peeking in on wide viewports. */
    --exp-card-w: 160px;
    --exp-pad: 2rem;
}

#experiences [data-exp-track] {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0;
    scroll-padding: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* hide native scrollbar across browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#experiences [data-exp-track]:active {
    cursor: grabbing;
}

#experiences [data-exp-track]::-webkit-scrollbar {
    display: none;
}

#experiences .exp-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc(100vw - 152px);
    border-radius: 1.25rem;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

#experiences .exp-card-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
}

#experiences .exp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

#experiences .exp-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem .25rem 0;
    background: transparent;
}

#experiences .exp-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
}

#experiences .exp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#experiences .exp-meta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#experiences .exp-meta-text .exp-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#experiences .exp-meta-text .exp-sublabel {
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#experiences [data-exp-prev],
#experiences [data-exp-next] {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
    backdrop-filter: blur(4px);
}

#experiences [data-exp-prev] {
    left: -.25rem;
}

#experiences [data-exp-next] {
    right: -.25rem;
}

#experiences [data-exp-prev]:hover,
#experiences [data-exp-next]:hover {
    background: rgba(255, 255, 255, .18);
}

.page-top-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 700px;
     background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 9, 41, 0.58) 74%,
      #000929 84%,
      #000929 100%
    ),
    url("/template/images/BG.png");
    background-size: cover, cover;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
    z-index: -1;
    pointer-events: none;
}
@media (max-width: 767px) {
    #experiences [data-exp-prev],
    #experiences [data-exp-next] {
        display: none;
    }
}

#experiences .exp-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
}

#experiences .exp-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}

#experiences .exp-dot.is-active {
    background: rgba(255, 255, 255, .9);
    width: 1.5rem;
}

@media (max-width: 767px) {
    #experiences .title-60 {
        text-align: left;
        padding: 0 2rem 1.5rem;
        font-size: 2rem;
    }
    #experiences{
        padding-bottom:70px;
    }
}

@media (min-width: 768px) {
    #experiences {
        --exp-card-w: 220px;
    }

    #experiences .exp-card {
        width: 220px;
    }
}

@media (min-width: 1280px) {
    #experiences {
        --exp-card-w: 260px;
        --exp-pad: 3rem;
    }

    #experiences .exp-card {
        width: 260px;
    }

    #experiences [data-exp-prev] {
        left: .75rem;
    }

    #experiences [data-exp-next] {
        right: .75rem;
    }

    #experiences .exp-track-wrap {
        width: calc((var(--exp-card-w) * 6) + (1.25rem * 5));
        padding: 0 var(--exp-pad);
    }
}

/* ===== Piramida Corners modal (moved out of attraction.html's inline
   <style> block so it lives with the rest of this page's CSS).
   Same open/close pattern as the Job Application / Join Us modals:
   hidden by default, shown only via the .is-open class. */
.corners-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.corners-modal.is-open,
.corners-modal:target {
    display: flex;
}

.corners-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-image: url("/template/images/BG.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* .place-popup-section normally lives as a full-width, full-height block
   inside <main> on the standalone page, so its huge decorative
   .place-popup-shape (which centers itself on the section's own box) has a
   viewport-sized box to center against. Nested here as a flex item of
   .corners-modal, it would otherwise shrink-wrap to the card's size —
   giving the shape a much smaller box to center on and clipping it. Filling
   the modal explicitly restores the same full-size box it gets standalone. */
.corners-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-card {
    display: block;
    cursor: pointer;
}

/* ===== Piramida Corners popup — "larger" size overrides =====
   Folded in from piramida-corners-larger.css. The base popup rules
   (.place-popup-section, .place-popup-card, .place-popup-gallery,
   .place-popup-close, etc.) still live in piramida-popup.css, which
   stays a separate stylesheet since its content wasn't part of this
   merge — these rules only override sizing/spacing on top of it. */

.place-popup-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 725px;
  height: 795px;
  opacity: 1;
  background: radial-gradient(
    175.53% 173.66% at -4.11% -4.11%,
    #22c55e 13.77%,
    #bef264 46.4%,
    rgba(203, 255, 0, 0) 84.99%
  );
  clip-path: polygon(11% 12%, 100% 0%, 93% 77%, 0% 94%);
  transform: translate(-50%, -50%) rotate(180deg);
  transform-origin: center;
  pointer-events: none;
}

.place-popup-card {
  width: min(600px, calc(100vw - 48px));
  height: auto;
  min-height: 520px;
  padding: 22px 24px 20px;
  transform: translate(-13px, 45px);
}

.place-popup-close {
  top: calc(50% - 280px);
  left: calc(50% + 278px);
  z-index: 5;
  display: flex;
}

.registration-close {
  position: absolute;
  top: calc(50% - 280px);
  left: calc(50% + 278px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.registration-close img {
  display: block;
}

.registration-close::before,
.registration-close::after {
  content: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
}

.place-popup-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.place-popup-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.place-popup-header {
  gap: 8px;
  margin-bottom: 14px;
}

.place-popup-logo {
  width: 44px;
  height: 44px;
  font-size: 7px;
}

.place-popup-header :is(h1, h2) {
  font-size: 18px;
}

.place-popup-header p {
  margin-top: 2px;
  font-size: 12px;
}

.place-popup-gallery {
  display: grid;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: 340px;
  aspect-ratio: auto;
  margin-bottom: 16px;
  border-radius: 10px;
}

.place-popup-gallery-frame {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.place-popup-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-gallery-button {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.34);
}

.place-gallery-button-prev {
  left: 14px;
}

.place-gallery-button-next {
  right: 14px;
}

.place-popup-content {
  flex: 0 0 auto;
}

.place-popup-description {
  max-width: none;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 18px;
}

.place-popup-location {
  gap: 5px;
  margin: 0;
  font-size: 14px;
}

.place-popup-location svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 760px) {
  .place-popup-section {
    align-items: flex-start;
    padding: clamp(116px, 17svh, 156px) 21px 96px;
  }

  .place-popup-close {
    top: clamp(138px, calc(17svh + 22px), 178px);
    right: calc(50% - 164px);
    left: auto;
    width: 28px;
    height: 28px;
  }

  .place-popup-close img {
    display: none;
  }

  .registration-close::before,
  .registration-close::after {
    content: "";
  }

  .place-popup-close::before,
  .place-popup-close::after {
    width: 16px;
    height: 2px;
    background: #666666;
  }

  .place-popup-card {
    width: min(100%, 368px);
    max-width: 368px;
    height: auto;
    min-height: 587px;
    padding: 21px 20px 52px;
    border-radius: 32px;
    transform: none;
  }

  .place-popup-header {
    gap: 14px;
    margin-bottom: 26px;
  }

  .place-popup-logo {
    width: 50px;
    height: 50px;
    font-size: 8px;
  }

  .place-popup-header :is(h1, h2) {
    font-size: 20px;
    line-height: 1.05;
  }

  .place-popup-header p {
    margin-top: 5px;
    font-size: 15px;
  }

  .place-popup-gallery {
    flex: 0 0 auto;
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 223;
    margin-bottom: 43px;
    border-radius: 19px;
  }

  .place-gallery-button {
    display: none;
  }

  .place-popup-description {
    display: block;
    overflow: visible;
    margin-bottom: 26px;
    color: #2d2d2d;
    font-size: 15px;
    line-height: 22px;
    text-align: justify;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }

  .place-popup-location {
    gap: 10px;
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
  }

  .place-popup-location svg {
    width: 23px;
    height: 23px;
  }
}

@media (max-width: 420px) {
  .place-popup-card {
    max-width: 368px;
  }

  .place-popup-close {
    right: max(34px, calc(50% - 164px));
  }
}