/* Section layout for Current on Center clone. Pairs with tokens.css. */
/* =========================================================================
   PAGE / SECTION LAYOUT
   One block per controlled section. Each block is self-contained and can be
   lifted into sections/*.html. Tokens come from tokens.css.
   ========================================================================= */

/* ---------- SECTION: nav ---------- */
.top-nav-section { background-color: var(--color-top-bar-bg); color:#fff;
  font-family: var(--font-family-buttons); font-weight: var(--font-weight-buttons);
  font-size: 12px; padding: .3rem 0; }
.top-nav-section-wrapper { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding: 0 2.8125vw; }
.specials { display:flex; align-items:center; justify-content:center; text-align:center; text-transform:uppercase; }
.specials a { color:#fff; text-decoration:none; }
.top-nav-ctas { display:none; gap:.5rem; align-items:center; }
.top-nav-ctas__item + .top-nav-ctas__item::before { content:'|'; margin-right:.5rem; }
.top-nav-ctas .menu { list-style:none; margin:0; padding:0; display:flex; gap:1rem; }
.top-nav-ctas p { margin:0; font-size:12px; }
.top-nav-ctas a { color:#fff; text-decoration:none; }
.top-nav-ctas a:hover { text-decoration:underline; }
@media (min-width:768px){ .top-nav-ctas { display:flex; } .top-nav-section-wrapper { justify-content:space-between; } }

.navbar { position: sticky; top:0; z-index: 1000; background-color: var(--color-body-bg); }
.navbar__inner { display:flex; justify-content:space-between; align-items:center; padding: 20px var(--x-gap); gap:1rem; }
.navbar__logo img { max-height:60px; object-fit:contain; display:block; }
.navbar__toggler { position:relative; width:38px; height:38px; background:none; border:0; cursor:pointer; }
.navbar__toggler-icon, .navbar__toggler-icon::before, .navbar__toggler-icon::after { position:absolute; left:50%; width:24px; height:3px; background:#000; transition:all .3s; }
.navbar__toggler-icon { top:50%; transform:translate(-50%,-50%); }
.navbar__toggler-icon::before, .navbar__toggler-icon::after { content:''; transform:translateX(-50%); }
.navbar__toggler-icon::before { top:-8px; } .navbar__toggler-icon::after { top:8px; }
.navbar__click-to-call svg { height:24px; width:38px; fill:#000; }
.navbar__socials { display:none; }
.navbar__socials p { margin:0 0 .25rem; font-size:12px; font-weight:600; }
.navbar__socials .sns { list-style:none; display:flex; gap:5px; margin:0; padding:0; }
.navbar__socials .sns__link { background:var(--color-primary); border-radius:100%; padding:.45rem; display:inline-flex; transition:background-color var(--base-timing); }
.navbar__socials .sns__link:hover { background:var(--color-primary-darker); }
.navbar__socials .sns__link svg { fill:#fff; width:15px; height:15px; }
.navbar__collapse__menu { list-style:none; margin:0; padding:1rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.navbar__collapse__menu .menu__link { text-transform:uppercase; font-weight:600; font-size:15px; color:var(--color-fg); text-decoration:none; transition:color var(--base-timing); }
.navbar__collapse__menu .menu__link:hover, .navbar__collapse__menu .menu__item.current .menu__link { color:var(--color-primary); }
.navbar__buttons { display:none; gap:1rem; }
.navbar__buttons .btn { min-width:7rem; font-size:12px; padding:.6rem 1.4rem; }
.navbar__collapse { display:none; }   /* mobile: hidden until hamburger toggles */
.navbar__collapse--show { display:block; position:absolute; top:100%; left:0; width:100%; background:var(--color-body-bg); z-index:1001; box-shadow:0 12px 24px rgba(0,0,0,.12); padding:1rem 0; }
.navbar__collapse--show .navbar__collapse__menu { align-items:center; }

/* desktop nav grid (matches theme breakpoints) */
@media (min-width:992px){
  .navbar__click-to-call { display:none; }
  .navbar__buttons { display:flex; justify-content:flex-end; }
  .navbar__inner { display:grid; grid-template-areas:'socials logo buttons'; grid-template-columns:1fr 1fr 1fr; align-items:center; }
  .navbar__logo-wrapper { grid-area:logo; display:flex; justify-content:center; }
  .navbar__buttons { grid-area:buttons; }
  .navbar__toggler { grid-area:socials; justify-self:start; }
}
@media (min-width:1200px){
  .navbar__toggler { display:none; }
  .navbar__inner { grid-template-areas:'socials logo buttons' 'socials menu buttons'; grid-template-columns:8rem 1fr 8rem; align-items:flex-end; row-gap:.75rem; }
  .navbar__socials { grid-area:socials; display:block; }
  .navbar__buttons { flex-direction:column; }
  .navbar__collapse { grid-area:menu; display:block; }
  .navbar__collapse__menu { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:0; padding:0; }
  .navbar__collapse__menu .menu__link { padding:6px 6px; display:inline-block; }
  .menu__item.mobile-only { display:none; }
}
@media (min-width:1500px){
  .navbar__collapse__menu { gap:1rem; }
  .navbar__collapse__menu .menu__link { padding:6px 10px; }
}

/* ---------- SECTION: hero ---------- */
.hero { position:relative; display:grid; text-align:center; overflow:hidden; }
.hero__background-color { grid-area:1/1; background-color:var(--color-primary); width:100%; padding-top:clamp(600px,56.25%,833px);
  background-image:url('assets/amenties_0004_TrinFay_Pool_Main02b_v4_1080.webp'); background-size:cover; background-position:center; }
.hero__video { grid-area:1/1; position:relative; width:100%; height:100%; overflow:hidden; z-index:0; }
.hero__video iframe { position:absolute; top:50%; left:50%; width:177.78vh; min-width:100%; height:56.25vw; min-height:100%; transform:translate(-50%,-50%); border:0; pointer-events:none; }
.hero .overlay { grid-area:1/1; }
.hero__video video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); object-fit:cover; }

.hero__inner { grid-area:1/1; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding: var(--y-gap) var(--x-gap); color:#fff; }
.hero__inner__eyebrow { font-family:var(--font-family-heading); font-size:clamp(1.4rem,1.9vw,2.3rem); margin:0 0 .5rem; }
.hero__inner .basic-content__heading { color:#fff; }
.hero .butons { margin-top:1.5rem; }
.scroller { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:1; background:none; border:0; cursor:pointer; }
.scroller svg { fill:#fff; }

/* ---------- shared basic-content ---------- */
.basic-content__content-wrapper:not(:last-child){ margin-bottom:1.5rem; }
.basic-content__content-wrapper p:last-child{ margin-bottom:0; }
.buttons, .butons { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ---------- SECTION: content-image ---------- */
.content-image { display:grid; grid-gap:var(--y-gap) var(--gap); text-align:center; }
.content-image__image { width:100%; object-fit:cover; }
.content-image__content { padding:0 var(--x-gap); display:flex; flex-direction:column; justify-content:center; }
@media (min-width:992px){
  .content-image { grid-template-columns:1fr 50%; align-items:center; text-align:left; }
  .content-image .buttons { justify-content:flex-start; }
  .content-image__content { padding:0 9.3rem; padding-right:0; }
  .content-image__image { aspect-ratio:100/69; max-height:833px; min-height:600px; border-radius:50px 0 0 0; }
  .content-image.reverse-true { grid-template-columns:50% 1fr; }
  .content-image.reverse-true .content-image__content { padding:0 9.3rem; padding-left:0; }
  .content-image.reverse-true .content-image__image { order:-1; border-radius:0 50px 0 0; }
}
@media (min-width:1400px){
  .content-image { grid-template-columns:1fr 60%; }
  .content-image.reverse-true { grid-template-columns:60% 1fr; }
}

/* ---------- SECTION: banner ---------- */
.banner-section { position:relative; display:grid; align-items:center; justify-items:center; }
section.content-image + .banner-section { margin-top: calc(-1 * var(--y-gap)); }
.banner-section__image { grid-area:1/1; width:100%; height:100%; object-fit:cover; max-height:833px; min-height:500px; }
.banner-section__image.parallaxed { background-attachment:fixed; background-repeat:no-repeat; background-size:cover; background-position:center; height:52.0625vw; background-image:url('assets/amenties_0004_TrinFay_Pool_Main02b_v4_1080.webp'); }
.banner-section .overlay { grid-area:1/1; }
.banner-section__content { grid-area:1/1; position:relative; z-index:1; color:#fff; text-align:center; padding:var(--x-gap); max-width:850px; margin:var(--y-gap) var(--x-gap); }
.banner-section__content .basic-content__heading { color:#fff; }

/* ---------- SECTION: instagram-feed ---------- */
.instagram-feed { display:grid; grid-template-columns:1fr; gap:2rem; padding:var(--y-gap) var(--x-gap); align-items:center; }
.instagram-feed__link { font-family:var(--font-family-heading); font-weight:var(--font-weight-heading); font-size:2.4rem; text-transform:uppercase; text-decoration:none; color:var(--color-fg); display:flex; align-items:center; justify-content:center; gap:10px; transition:color var(--base-timing); }
.instagram-feed__link:hover { color:var(--color-primary); }
.instagram-feed__link svg { height:2.4rem; fill:var(--color-primary); }
.ig-feed { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.ig-feed .ig-item { width:calc(33.333% - .667rem); aspect-ratio:1; border-radius:var(--border-radius); overflow:hidden; }
.ig-feed .ig-item img { width:100%; height:100%; object-fit:cover; }
@media (min-width:992px){ .instagram-feed { grid-template-columns:.5fr 1fr; } }

/* ---------- SECTION: footer-form ---------- */
.footer-form { background-color:var(--color-footer-bg); color:#fff; border-bottom:1px solid #fff; }
.footer-form__inner { display:grid; gap:2rem; padding:var(--y-gap) var(--x-gap); align-items:center; }
.footer-form__content .title { color:#fff; }
.form { display:grid; grid-template-columns:1fr; gap:15px; }
.form__group__full { grid-column:1 / -1; }
.form__label { display:none; }
.form__input { width:100%; height:40px; padding:.5rem 1.5rem; box-sizing:border-box; font-size:14px; line-height:1.5; border-radius:2rem; border:1px solid #fff; background:transparent; color:#fff; }
.form__input::placeholder { color:rgba(255,255,255,.85); }
.form__input option { color:#000; }
.footer-form .btn { grid-column:1 / -1; }
.form__ackbar { position:absolute; left:-9999px; opacity:0; height:0; width:0; }
@media (min-width:992px){ .form { grid-template-columns:1fr 1fr; gap:2rem 1.5rem; } }
@media (min-width:1200px){ .footer-form__inner { grid-template-columns:1fr 1fr; gap:18%; } }

/* ---------- SECTION: footer ---------- */
.footer { background-color:var(--color-footer-bg); color:#fff; padding:var(--y-gap) 0; }
.footer a { color:#fff; text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer__inner { display:grid; grid-template-areas:"logo" "location" "contact" "hours"; gap:1rem var(--gap); padding:var(--x-gap); text-align:center; align-items:start; justify-items:center; }
.footer__inner p { margin:0; }
.footer__label { font-weight:bold; margin-bottom:5px; }
.footer__logo { grid-area:logo; }
.footer__logo img { width:17.145rem; max-width:100%; height:auto; margin:0 auto; object-fit:contain; }
.footer__logo .sns { list-style:none; display:flex; justify-content:center; gap:.5rem; margin:1rem 0 0; padding:0; }
.footer__logo .sns__link { display:inline-flex; padding:.5rem; }
.footer__logo .sns svg { fill:#fff; width:18px; height:18px; }
.footer__location { grid-area:location; display:flex; flex-direction:column; gap:1rem; align-items:center; }
.footer__contact { grid-area:contact; }
.footer__hours { grid-area:hours; display:flex; flex-direction:column; align-items:center; }
.footer__hours-wrapper { list-style:none; margin:0; padding:0; }
.footer__hour { display:grid; grid-template-columns:.5fr 1fr; gap:10px; max-width:300px; text-align:left; }
@media (min-width:768px){ .footer__inner { grid-template-areas:"logo logo logo" "location contact hours"; } }
@media (min-width:1200px){ .footer__inner { grid-template-areas:"logo location contact hours"; align-items:center; } }
.copyright { display:grid; gap:.5rem; text-align:center; justify-items:center; padding:1.5rem var(--x-gap); background:var(--color-footer-bg); color:#fff; font-size:12px; }
.copyright .hud-logo { width:55px; height:auto; }
.copyright a { color:#fff; }

/* ---------- ANIMATION LAYER (reveals + hero video wipe) ---------- */
/* Hero video shows immediately (no reveal — matches live behaviour). */

/* Scroll reveals: start state set here, .reveal-in (added by anim.js) clears it */
[data-animate-element]{ opacity:0; will-change: transform, opacity;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94), opacity .6s cubic-bezier(.25,.46,.45,.94); }
[data-animate-element="up"]{ transform: translateY(50px); }
[data-animate-element="left-to-right"]{ transform: translateX(-100px); }
[data-animate-element="right-to-left"]{ transform: translateX(100px); }
[data-animate-element].reveal-in{ opacity:1; transform:none; }
/* contain the horizontal slide-ins */
.content-image, .banner-section, .footer-form, .footer { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce){
  [data-animate-element]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- SHARED: inner-page header (title + breadcrumbs) ---------- */
.header { display:grid; place-items:center; text-align:center; color:#fff; position:relative; overflow:hidden; margin-bottom:var(--y-gap); }
.header__background-color, .header__image, .header__inner, .header__media { grid-area:1/1; }
.header__background-color { width:100%; padding-top:clamp(400px,37.5%,550px); background-color:var(--color-primary); background-size:cover; background-position:center; }
.header__image { width:100%; height:100%; object-fit:cover; max-height:550px; min-height:400px; }
.header .overlay { grid-area:1/1; }
.header__inner { position:relative; z-index:1; padding:var(--x-gap); max-width:1200px; }
.header__title { margin-bottom:0; color:#fff; }
.breadcrumbs { margin-bottom:1rem; }
.breadcrumbs__list { list-style:none; margin:0; padding:0; }
.breadcrumbs__item { display:inline-block; font-size:1rem; }
.breadcrumbs__item:not(:last-child)::after { content:''; display:inline-block; margin:0 .45rem; width:.45em; height:.45em; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); vertical-align:middle; }
.breadcrumbs__link { color:#fff; text-decoration:none; }
.breadcrumbs__link:hover { text-decoration:underline; }