/* ============================================================
   GoAtlas Luxury Design System
   Loaded on every page, after each page's own <style> block, so
   these rules refine (not replace) the existing brand system.
   Brand colors are untouched — this file only elevates typography,
   spacing, motion, buttons, and card presentation.
   ============================================================ */

:root{
  --heading:#1F2937;
  --body-text:#6B7280;
  --ease-luxury: cubic-bezier(.16,.72,.28,1);
}

/* ---------- Typography ---------- */
body{ line-height:1.7; }
p{ color:var(--body-text); line-height:1.75; }
h1,h2,h3{
  color:var(--heading);
  letter-spacing:-0.015em;
  line-height:1.18;
}
h1{ letter-spacing:-0.02em; line-height:1.08; }
h4,h5{ letter-spacing:0.01em; }
.eyebrow{ letter-spacing:0.24em; font-weight:600; }

/* Section heads used across destination/guide/hotel pages */
.section-head p, .g-desc, .item-desc, .offer-desc, .promo-meta{
  color:var(--body-text);
}

/* ---------- Buttons ---------- */
.btn-primary{
  border-radius:8px !important;
  padding:16px 34px !important;
  letter-spacing:0.05em !important;
  font-weight:600 !important;
  box-shadow:0 10px 28px -10px rgba(212,175,55,0.55) !important;
  transition:transform .45s var(--ease-luxury), box-shadow .45s var(--ease-luxury) !important;
}
.btn-primary:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 20px 40px -12px rgba(212,175,55,0.7) !important;
}
.btn-ghost{
  border-radius:8px !important;
  transition:all .45s var(--ease-luxury) !important;
}
.btn-ghost:hover{
  transform:translateY(-2px);
}

/* ---------- Universal card refinement ----------
   Applies the same elevated treatment to every card family
   on the site, keyed to their real existing class names. */

.item-card, .g-card, .dest-card, .pack-card, .partner-card,
.offer-card, .promo-card, .banner-tile, .info-card, .split-card, .tip-card{
  border-radius:22px !important;
  border:none !important;
  box-shadow:0 18px 44px -26px rgba(11,31,58,0.18) !important;
  transition:transform .55s var(--ease-luxury), box-shadow .55s var(--ease-luxury) !important;
}

.item-card:hover, .pack-card:hover, .partner-card:hover,
.offer-card:hover, .promo-card:hover, .banner-tile:hover,
.info-card:hover, .split-card:hover, .tip-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 30px 60px -22px rgba(11,31,58,0.24) !important;
}

.g-card{
  box-shadow:0 24px 50px -28px rgba(11,31,58,0.35) !important;
  transition:transform .6s var(--ease-luxury) !important;
}
.g-card:hover{ transform:translateY(-4px) !important; }

/* Card image zoom-on-hover, applied wherever a card contains a photo */
.item-photo, .g-card, .dest-photo, .hero-photo, .banner-tile{ overflow:hidden !important; }
.item-photo img, .g-card img, .dest-photo img, .banner-tile img{
  transition:transform 1.1s var(--ease-luxury) !important;
}
.item-card:hover .item-photo img,
.g-card:hover img,
.dest-card:hover .dest-photo img,
.banner-tile:hover img{
  transform:scale(1.045) !important;
}

/* Card typography — dark heading color applies ONLY to cards with a white/
   light card body (hotels, restaurants, partners). Cards where the heading
   sits directly over a photo (.dest-card, .g-card) are handled separately
   below with explicit white + text-shadow, since forcing dark text on those
   made destination names unreadable against the photo — a real regression,
   caught and fixed. */
.item-card h3, .partner-card h3{
  color:var(--heading) !important;
  letter-spacing:-0.01em;
}

/* Headings inside dark/photo-background containers, site-wide — the full
   list found by auditing every page for headings that rely on INHERITED
   white text rather than their own explicit color. This matters because
   the global "h1,h2,h3{color:var(--heading)}" rule above always overrides
   inheritance, even without !important — so any heading that didn't set
   its own color was silently going dark-on-dark, invisibly, regardless of
   whether it matched a card class by name. Found via full site audit:
     .dest-info h3   — Featured Destinations (home) + region-page grids
     .g-info h4      — attraction/hotel/gem/photo cards, all destination pages
     .safety-box h3  — safety-info box, all destination pages
     .region-hero h1 — region page titles (Asia, Europe, etc.)
     .article-hero h1— blog post hero titles
     .hub-hero h1    — Destinations index page hero title
     .region-info h3 — continent names on the Destinations index page
     .gem-info h3, .insp-info h3, .expert-copy h2 — homepage sections
     .featured-info h2 — blog index featured post
     .chat-head h4   — chat widget header, present on every page
   All explicit + text-shadow, so this can't silently break again. */
.dest-info h3, .g-info h4, .safety-box h3, .region-hero h1, .article-hero h1,
.hub-hero h1, .region-info h3, .gem-info h3, .insp-info h3, .expert-copy h2,
.featured-info h2, .chat-head h4{
  color:#FFFFFF !important;
  text-shadow:0 2px 10px rgba(6,18,35,0.55), 0 1px 3px rgba(6,18,35,0.4) !important;
}
.item-tag, .g-tag, .offer-tag, .banner-label{
  letter-spacing:0.14em !important;
  font-weight:600 !important;
  border-radius:20px !important;
}

/* Price indicator — elegant integrated presentation instead of a directory chip */
.item-price, .offer-discount{
  color:var(--gold) !important;
  font-weight:600 !important;
  letter-spacing:0.02em;
}
.item-meta-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 14px;
  font-size:0.86rem;
}
.item-meta-row .item-dest{ color:var(--body-text); }
.item-meta-row .item-meta-dot{ color:#C7CDD6; }
.item-meta-row .item-stars{ color:var(--gold-soft); letter-spacing:1px; font-size:0.78rem; }
.item-meta-row .item-price{ font-size:0.86rem; }
.price-tier{ display:inline-flex; letter-spacing:0.5px; }
.price-tier .tier-mark{ font-weight:700; }
.price-tier .tier-filled{ color:var(--gold); }
.price-tier .tier-empty{ color:#D8DEE9; }

/* More breathing room inside card bodies */
.item-body, .pack-card, .partner-card, .offer-card, .promo-card{
  padding:26px 28px !important;
}

/* ---------- Scroll-reveal motion ----------
   Paired with goatlas-luxury.js, which adds .is-visible once via
   IntersectionObserver and never removes it — each element reveals once
   and stays in place; it does not replay or reverse on scroll-up.
   IMPORTANT: elements are only ever hidden once JS has confirmed it's
   running and added .reveal-armed itself. Content is never hidden by
   default — if JS is slow, blocked, or fails, everything stays visible. */
.reveal-armed[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-luxury), transform .9s var(--ease-luxury);
}
.reveal-armed[data-reveal="left"]{ transform:translateX(-32px); }
.reveal-armed[data-reveal="right"]{ transform:translateX(32px); }
.reveal-armed[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0) translateX(0);
}

/* Swing — left/right entry with a genuine 3D rotation, not a flat slide.
   This is the site's default transition for general content sections. */
.reveal-armed[data-reveal="swing-left"]{
  transform:translateX(-70px) rotateY(14deg);
  transform-style:preserve-3d;
}
.reveal-armed[data-reveal="swing-right"]{
  transform:translateX(70px) rotateY(-14deg);
  transform-style:preserve-3d;
}
.reveal-armed[data-reveal="swing-left"].is-visible,
.reveal-armed[data-reveal="swing-right"].is-visible{
  transform:translateX(0) rotateY(0deg);
}

/* Diagonal Swoop — corner entry, position and rotation moving together.
   Used for roughly every third general section, for rhythm variety. */
.reveal-armed[data-reveal="swoop"]{
  transform:translate(-50px,44px) rotate(-3deg) rotateY(14deg);
  transform-style:preserve-3d;
}
.reveal-armed[data-reveal="swoop"].is-visible{
  transform:translate(0,0) rotate(0deg) rotateY(0deg);
}

/* Rise From Depth — scales up and moves toward the viewer out of the
   screen. Reserved for one standout moment per page (the first major
   section after the hero), so it keeps its cinematic impact. */
.reveal-armed[data-reveal="depth"]{
  transform:translateZ(-200px) translateY(30px) scale(0.86);
  transform-style:preserve-3d;
}
.reveal-armed[data-reveal="depth"].is-visible{
  transform:translateZ(0) translateY(0) scale(1);
}

/* Card Cascade — for card grids: each card enters with depth and a
   slight rotateX, staggered by the existing transition-delay logic. */
.reveal-armed[data-reveal="cascade"]{
  transform:translateY(40px) translateZ(-90px) rotateX(10deg);
  transform-style:preserve-3d;
}
.reveal-armed[data-reveal="cascade"].is-visible{
  transform:translateY(0) translateZ(0) rotateX(0deg);
}

/* Curtain Reveal — a clip-path wipe combined with a slight tilt, for
   large feature-image blocks specifically. Opt-in only (applied by hand
   to specific sections), not auto-assigned. */
.reveal-armed[data-reveal="curtain"]{
  clip-path:inset(0 100% 0 0);
  transform:rotateY(8deg);
  transform-style:preserve-3d;
  transition:opacity .8s ease, transform 1s var(--ease-luxury), clip-path 1s var(--ease-luxury) !important;
}
.reveal-armed[data-reveal="curtain"].is-visible{
  clip-path:inset(0 0% 0 0);
  transform:rotateY(0deg);
}

/* Note: perspective for these 3D transforms is set on each element's
   PARENT via JS (armEl in goatlas-luxury.js) — perspective has no visual
   effect when applied to the same element that's rotating; it must be on
   an ancestor to establish the 3D viewing context correctly. */

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .item-photo img, .g-card img, .dest-photo img, .banner-tile img{ transition:none !important; }
}

/* ---------- Restore default section backgrounds ----------
   Many pages (especially the 89 destination pages) style plain <section>
   elements with only padding/spacing — no background — because they always
   relied on the page's own background color showing through behind them.
   That was safe when the body background was a flat light color, but once
   the body became a real (dark) photo, every one of those sections started
   showing that dark photo directly behind text designed assuming a light
   background — headings and FAQ text going dark-on-dark, invisible. This
   was a real, systemic regression, not a one-off styling bug. Restoring a
   light background here, at plain-type-selector specificity, fixes it
   everywhere at once: any section with its own explicit background (.hero,
   navy panels, etc.) already has a MORE SPECIFIC rule and is completely
   unaffected — this only fills in the sections that had none. */
section{ background:#FBF8F2; }

/* ---------- Page background: removed, by request ----------
   The photo background (previously Serengeti, then Ha Long Bay) has been
   removed entirely, sitewide. Back to the site's original plain flat
   color everywhere — no photo, no overlay, no exceptions. */
body{
  background:#FBF8F2;
}