/* =========================================================
   Nell Haven Homes - Attractions page only
   Sections: intro + sticky destination nav (Bootstrap ScrollSpy),
   one section per destination (attraction cards + nearby home).
   Load order: bootstrap.min.css -> style.css ->
   header-footer-banner.css -> attractions.css ->
   attractions-responsive.css
   ========================================================= */

/* =========================================================
   STICKY DESTINATION NAV
   Sits directly inside <main> (not inside a section) so it can
   stay sticky while the page scrolls. Links are Bootstrap
   .nav-link so ScrollSpy can mark the active one.
   ========================================================= */
.at-subnav{
  position:sticky;top:104px;z-index:90;
  display:flex;justify-content:center;
  margin:-4px auto 18px;
  pointer-events:none;
}
.at-subnav-inner{
  pointer-events:auto;
  display:flex;align-items:center;gap:4px;
  padding:6px;
  background:rgba(247,244,237,.9);
  border:1px solid rgba(145,171,165,.35);
  border-radius:999px;
  box-shadow:0 14px 34px rgba(21,58,51,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.at-subnav-label{
  padding:0 12px 0 14px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark);
}
.at-subnav .nav-link{
  --bs-nav-link-padding-x:18px;
  --bs-nav-link-padding-y:0;
  display:inline-flex;align-items:center;min-height:40px;
  border-radius:999px;
  font-size:13px;font-weight:700;color:var(--brand-deep);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.at-subnav .nav-link:hover{background:var(--brand-soft);color:var(--brand-deep)}
.at-subnav .nav-link.active{background:var(--brand-deep);color:#fff}

/* =========================================================
   DESTINATION SECTIONS
   ========================================================= */
.at-dest{scroll-margin-top:170px!important}
.at-dest--dallas{background:linear-gradient(180deg,#FBFCFA 0%,#EAF1EF 100%)}
.at-dest--cullowhee{background:linear-gradient(135deg,#FFFFFF 0%,#F8F6F0 56%,#E8EFED 100%)}
.at-dest--tampa{background:linear-gradient(180deg,#F8F6F0 0%,#E9EFED 100%)}

.at-dest-head{align-items:flex-end;margin-bottom:30px}
.at-dest-no{
  display:inline-block;margin-bottom:14px;
  font-family:var(--font-display);font-size:15px;color:var(--brand-dark);letter-spacing:.04em;
}
.at-dest-head h2{
  font-size:clamp(34px,3.8vw,54px);line-height:1.08;
  color:var(--brand-ink);margin:10px 0 0;
}
.at-dest-head p{font-size:15px;line-height:1.72;color:#60736F;max-width:520px;margin:0 0 16px}
.at-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.at-tags li{
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(145,171,165,.45);
  font-size:12px;color:var(--brand-deep);
}

/* ---- photo + nearby home ---- */
.at-side{display:flex;flex-direction:column;gap:16px;height:100%}
.at-photo{
  margin:0;
  aspect-ratio:4/3;
  border-radius:26px;overflow:hidden;
  border:6px solid rgba(255,255,255,.92);
  box-shadow:0 26px 64px rgba(47,84,76,.16);
  background:var(--brand-soft);
}
.at-photo img{width:100%;height:100%;object-fit:cover}
.at-stay{
  display:flex;flex-direction:column;gap:12px;
  padding:22px 24px;
  background:linear-gradient(135deg,#0D2A25 0%,#153A33 60%,#355D55 100%);
  border-radius:22px;color:#fff;
  box-shadow:0 20px 48px rgba(21,58,51,.22);
}
.at-stay-kicker{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.at-stay h3{font-size:22px;line-height:1.2;font-weight:400;margin:0;color:#fff}
.at-stay-specs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.at-stay-specs li{
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  font-size:11.5px;font-weight:600;color:#E7F0EE;
}
.at-stay-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.at-stay .nh-btn{min-height:46px}
.at-stay-link{
  font-size:12.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
  transition:border-color .25s;
}
.at-stay-link:hover{color:#fff;border-color:#fff}

/* ---- attraction card ---- */
.at-card{
  height:100%;
  display:flex;flex-direction:column;
  padding:24px 24px 22px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(145,171,165,.32);
  border-radius:22px;
  box-shadow:0 16px 36px rgba(59,93,86,.08);
  scroll-margin-top:170px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.at-card:hover{border-color:var(--brand);box-shadow:0 20px 44px rgba(59,93,86,.13)}
/* arriving from a "Nearby" link on the Properties page (attractions.html#busch-gardens) */
.at-card:target{border-color:var(--brand);box-shadow:0 0 0 4px rgba(145,171,165,.35),0 16px 36px rgba(59,93,86,.08)}
.at-card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.at-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-deep);
}
.at-icon svg{width:20px;height:20px}
.at-type{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark)}
.at-card h3{font-size:21px;line-height:1.25;font-weight:400;color:var(--brand-ink);margin:0 0 10px}
.at-card p{font-size:14px;line-height:1.7;color:#60736F;margin:0 0 18px}
.at-map{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:var(--brand-deep);
  border-bottom:1px solid rgba(21,58,51,.3);padding-bottom:2px;
  transition:border-color .25s,color .25s;
}
.at-map:hover{color:var(--brand-deeper);border-color:var(--brand-deep)}

/* on desktop the cards stretch to match the photo + "stay nearby" column */
@media (min-width:992px){
  .at-cards{height:calc(100% + var(--bs-gutter-y))}
}

.at-note{margin:22px 0 0;font-size:13px;color:#60736F}

/* =========================================================
   VIEW SWITCH (in the banner) - "By Location" / "By Category"
   Shared by attractions.html and attractions-by-category.html
   ========================================================= */
.at-view{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:26px;padding:5px;
  background:rgba(10,14,12,.28);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.at-view-label{padding:0 10px 0 12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.at-view a{
  display:inline-flex;align-items:center;min-height:38px;padding:0 16px;
  border-radius:999px;
  font-size:12.5px;font-weight:700;color:#fff;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.at-view a:hover{background:rgba(255,255,255,.14);color:#fff}
.at-view a[aria-current="page"]{background:#fff;color:var(--brand-deep)}

/* =========================================================
   CATEGORY VIEW (attractions-by-category.html)
   ========================================================= */
.at-tone-1{background:linear-gradient(180deg,#FBFCFA 0%,#EAF1EF 100%)}
.at-tone-2{background:linear-gradient(135deg,#FFFFFF 0%,#F8F6F0 56%,#E8EFED 100%)}
.at-tone-3{background:linear-gradient(180deg,#F8F6F0 0%,#E9EFED 100%)}

.at-cat-icon{
  display:inline-grid;place-items:center;
  width:54px;height:54px;border-radius:50%;
  margin-bottom:16px;
  background:var(--brand-deep);color:#fff;
  box-shadow:0 14px 30px rgba(21,58,51,.2);
}
.at-cat-icon svg{width:24px;height:24px}

/* location pill + nearest home on each card */
.at-where{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-deep);
  font-size:11px;font-weight:700;letter-spacing:.06em;
}
.at-where i{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.at-card-top .at-where{margin-left:auto}
.at-near{
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;padding:12px 14px;
  border:1px solid rgba(145,171,165,.3);border-radius:14px;
  font-size:13px;line-height:1.4;color:#60736F;
  transition:border-color .25s,background .25s;
}
.at-card .at-near{margin-top:auto}
.at-near + .at-map{margin-top:0}
.at-near:hover{border-color:var(--brand);background:rgba(232,240,237,.5);color:#60736F}
.at-near strong{display:block;color:var(--brand-ink);font-weight:700}
.at-near-go{margin-left:auto;color:var(--brand-dark);font-size:16px}

/* ---- link to an attraction's detail page (attraction-details.html) ---- */
.at-title-link{color:inherit;transition:color .2s}
.at-title-link:hover{color:var(--brand-dark)}
.at-details{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 14px;padding:9px 16px;border-radius:999px;
  background:var(--brand-deep);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s var(--ease);
}
.at-details:hover{background:var(--brand-deeper);color:#fff}
.at-card > p + .at-details{margin-top:auto}
.at-details + .at-map{margin-top:0}