/*
 * Editorial visual layer
 * Shared across every page as an explicit stylesheet.
 */

::selection {
  color: var(--color-white);
  background: var(--color-brand-forest);
}

html {
  scroll-padding-top: 88px;
}

body {
  overflow-x: clip;
  letter-spacing: -0.005em;
  background:
    radial-gradient(circle at 10% 6%, rgba(229, 155, 7, 0.08), transparent 25rem),
    var(--color-background-light);
}

main {
  overflow: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.container {
  max-width: var(--container-xl);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.rich-content-section {
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.section-header {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-eyebrow,
.category-header > span {
  color: var(--color-eyebrow-on-light);
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-eyebrow {
  color: var(--color-eyebrow-on-dark);
}

.section-title,
.category-header h2 {
  font-size: clamp(2.45rem, 5vw, 4.5rem) !important;
  line-height: 0.98;
}

.section-header .section-title::after,
.category-header > div {
  width: 42px !important;
  height: 2px !important;
  background: var(--color-brand-amber) !important;
}

.section-description {
  max-width: 660px;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

/* Legacy detail pages share a calmer, image-led frame. */
body:not(.package-index-page) .package-header,
.hero-detail,
.blog-post-hero {
  min-height: min(650px, calc(80svh - 40px)) !important;
  height: auto !important;
  margin: 0 clamp(0.75rem, 2vw, 1.75rem) !important;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 5rem) !important;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl) !important;
  overflow: hidden;
  background-position: center top !important;
}

.hero-detail::before,
.blog-post-hero::before {
  /* Heroes are anchored to the top of the photograph, so the title can land on
     open sky. Carry enough shade through the middle band to keep white type
     readable whatever the image does there. */
  background: linear-gradient(180deg, rgba(5, 22, 15, 0.34) 0%, rgba(5, 22, 15, 0.50) 42%, rgba(5, 22, 15, 0.82) 100%) !important;
}

body:not(.package-index-page) .package-header-title,
.hero-detail .hero-title,
.blog-post-hero .blog-post-title {
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--font-family-heading) !important;
  font-size: clamp(3rem, 7vw, 6.2rem) !important;
  font-weight: 400 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

body:not(.package-index-page) .package-header-subtitle,
.hero-detail .hero-subtitle,
.blog-post-hero .blog-post-excerpt {
  max-width: 720px;
  margin-inline: auto;
  font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
  line-height: 1.65;
}

.destination-grid {
  gap: clamp(2rem, 6vw, 5rem) !important;
}

.destination-image-wrapper,
.rich-content-section img,
.itinerary-list img {
  border-radius: var(--radius-xl) !important;
}

.trip-essentials {
  border: 1px solid rgba(38, 75, 22, 0.11) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 18px 50px rgba(23, 35, 21, 0.08) !important;
}

/* Buttons */
.btn {
  min-height: 48px;
  padding: 0.8rem 1.35rem;
  gap: 0.65rem;
  border-width: 1px;
  border-radius: var(--radius-full);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  box-shadow: none;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-brand-forest);
  border-color: var(--color-brand-forest);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-brand-forest-dark);
  border-color: var(--color-brand-forest-dark);
  color: var(--color-white);
  box-shadow: 0 12px 26px rgba(23, 35, 21, 0.18);
}

.btn-secondary {
  background: var(--color-brand-amber);
  border-color: var(--color-brand-amber);
  color: var(--color-brand-forest-dark);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-brand-amber-soft);
  border-color: var(--color-brand-amber-soft);
  color: var(--color-brand-forest-dark);
  box-shadow: 0 12px 28px rgba(138, 91, 19, 0.18);
}

.btn-outline-primary {
  color: var(--color-brand-forest);
  border-color: rgba(38, 75, 22, 0.32);
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  color: var(--color-white);
  border-color: var(--color-brand-forest);
  background: var(--color-brand-forest);
}

/* Shared page heroes */
:is(.about-hero, .destination-hero, .package-header, .gallery-hero, .blog-hero, .contact-hero) {
  min-height: clamp(430px, 62vh, 650px);
  margin: 0 clamp(0rem, 1.7vw, 1.5rem);
  border-radius: 0 0 clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
  overflow: hidden;
}

:is(.about-hero, .destination-hero, .package-header, .gallery-hero, .blog-hero, .contact-hero)::before {
  background:
    linear-gradient(110deg, rgba(23, 35, 21, 0.84) 0%, rgba(23, 35, 21, 0.54) 50%, rgba(23, 35, 21, 0.28) 100%) !important;
}

:is(.about-hero-title, .destination-hero-title, .package-header-title, .gallery-hero-title, .blog-hero-title, .contact-hero-title) {
  max-width: 900px;
  margin-inline: auto;
  color: var(--color-white) !important;
  font-size: clamp(3rem, 7vw, 6rem) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.2) !important;
}

:is(.about-hero-text, .package-header-subtitle, .contact-hero-subtitle) {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  line-height: 1.7 !important;
}

/* Cards and listing pages */
.card {
  border: 1px solid rgba(23, 35, 21, 0.1);
  border-radius: 1.35rem;
  background: var(--color-white);
  box-shadow: 0 10px 35px rgba(23, 35, 21, 0.07);
}

.card:hover {
  transform: translateY(-7px);
  border-color: rgba(38, 75, 22, 0.22);
  box-shadow: 0 24px 55px rgba(23, 35, 21, 0.13);
}

.card img {
  min-height: 260px;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card:hover img {
  transform: scale(1.045);
}

.card-content {
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
}

.card h3,
.card-content h3 {
  color: var(--color-text-dark) !important;
  font-size: clamp(1.55rem, 2.5vw, 2rem) !important;
  line-height: 1.08;
}

.card p,
.card-content p {
  color: var(--color-text-secondary) !important;
}

.category-header {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 5vw, 3.25rem) !important;
}

.category-header h2 {
  margin-top: 0.65rem !important;
  color: var(--color-text-dark) !important;
}

/* Keep fixed WhatsApp affordance useful but quieter. */
#whatsapp-float {
  right: 18px !important;
  bottom: 22px !important;
  width: 50px !important;
  height: 50px !important;
  font-size: 23px !important;
  border: 3px solid rgba(255, 255, 255, 0.9);
}

#global-back-to-top {
  right: 18px !important;
  bottom: 82px !important;
}

@media (max-width: 640px) {
  section,
  .rich-content-section {
    padding-block: 4rem;
  }

  .container {
    padding-inline: 1.15rem;
  }

  :is(.about-hero, .destination-hero, .package-header, .gallery-hero, .blog-hero, .contact-hero) {
    min-height: 510px;
    margin-inline: 0.65rem;
  }

  :is(.about-hero-title, .destination-hero-title, .package-header-title, .gallery-hero-title, .blog-hero-title, .contact-hero-title) {
    font-size: clamp(2.75rem, 12vw, 4.35rem) !important;
  }

  .hero-detail,
  .blog-post-hero {
    min-height: 520px !important;
    margin-inline: 0.65rem !important;
    padding-inline: 1.25rem !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  }

  .hero-detail .hero-title,
  .blog-post-hero .blog-post-title,
  body:not(.package-index-page) .package-header-title {
    font-size: clamp(2.8rem, 13vw, 4.25rem) !important;
  }

  main [style*="minmax("] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .trip-essentials {
    gap: 1.25rem !important;
  }

  .grid {
    gap: 1.2rem !important;
  }

  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card,
  .card-link {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card img,
  .btn,
  .nav-link {
    transition: none !important;
  }
}

/* Safari imagery should meet the viewport edge on every route. */
body:not(.package-index-page) .package-header,
:is(
  .home-hero,
  .about-hero,
  .destination-hero,
  .package-header,
  .hero-detail,
  .gallery-hero,
  .blog-hero,
  .blog-post-hero,
  .contact-hero
) {
  margin-inline: 0 !important;
  border-radius: 0 !important;
}