/* =============================================
   AFTR6 — Section Visual Separation System (v3)
   =============================================
   The fix: make bg differences OBVIOUS.
   
   3 section tiers with real contrast:
   ■ TIER 1:  #0a0a0a  — obsidian black      (hero, gallery, testimonials)
   ■ TIER 2:  #111111  — deep charcoal       (trust, packages, steps, services)  
   ■ TIER 3:  #0a0a0a  — obsidian black      (who we serve, FAQ, CTA)
   
   The difference between tier 1 and tier 2 is pronounced.
   The difference between tier 2 and tier 3 is obvious.
   
   Dividers are 80px tall SVGs — you can't miss them.
   ============================================= */

/* ===== ROOT TIER COLORS ===== */
:root {
  --sec-black:  #0a0a0a;   /* True black */
  --sec-navy:   #111111;   /* Deep Charcoal — cohesive with black */
  --sec-forest: #0a0a0a;   /* Reverted to black */

  /* Backwards-compat aliases */
  --bg-a: var(--sec-black);
  --bg-b: var(--sec-navy);
  --bg-c: var(--sec-navy);
  --bg-d: var(--sec-black);
  --bg-dark: var(--sec-black);
  --bg-mid: var(--sec-navy);
  --bg-accent: var(--sec-black);
}

/* ===== SECTION BACKGROUNDS ===== */

/* TIER 1 — True black */
.hero-section,
.gallery-section,
.testimonials-section,
.booking-section {
  background: var(--sec-black) !important;
}

/* TIER 2 — Dark navy (clearly different from black) */
.trust-section,
.stats-section,
.steps-section,
#featured-packages,
#services-home,
.services-section {
  background: var(--sec-navy) !important;
}

/* TIER 3 — Deep forest (brand green dark) */
#who-we-serve,
.faq-section,
.cta-banner {
  background: var(--sec-forest) !important;
}

/* Stats section — navy like trust, but feels connected */
.stats-section {
  background: var(--sec-navy) !important;
}

/* Split section text panels */
#who-we-serve .split-section__text {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ===== SECTION SEPARATOR LINES ===== */
/* Subtle top line on every section for extra clarity */
.trust-section,
.gallery-section,
.stats-section,
.testimonials-section,
.steps-section,
.faq-section,
.booking-section,
#featured-packages,
#who-we-serve,
#services-home,
.services-section {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Brighter line on accent sections */
#who-we-serve,
.faq-section {
  border-top-color: rgba(62, 180, 137, 0.15);
}

/* ===== SVG SECTION DIVIDERS ===== */
/* 80px tall — properly visible transitions */

.section-divider {
  position: relative;
  z-index: 10;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: block;
}

.section-divider svg {
  display: block;
  width: 100%;
}

/* ===== IMAGE PLACEHOLDER BLOCKS ===== */

.img-placeholder {
  position: relative;
  width: 100%;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  border: 1px dashed rgba(62, 180, 137, 0.3);
}

/* Aspect ratio variants */
.img-placeholder--hero    { min-height: 500px; }
.img-placeholder--wide    { aspect-ratio: 16/9; }
.img-placeholder--square  { aspect-ratio: 1/1; }
.img-placeholder--tall    { aspect-ratio: 3/4; }
.img-placeholder--portrait { aspect-ratio: 4/5; }
.img-placeholder--banner  { aspect-ratio: 21/9; min-height: 220px; }
.img-placeholder--thumb   { aspect-ratio: 4/3; }

/* Dashed border pulse */
@keyframes dash-pulse {
  0%, 100% { border-color: rgba(62, 180, 137, 0.2); }
  50%       { border-color: rgba(62, 180, 137, 0.5); }
}
.img-placeholder { animation: dash-pulse 3s ease-in-out infinite; }

/* Shimmer */
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(62, 180, 137, 0.06) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: img-shimmer 2.5s ease-in-out infinite;
}

@keyframes img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Grid texture */
.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* Inner label */
.img-placeholder__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}

.img-placeholder__icon {
  font-size: 2.2rem;
  opacity: 0.4;
}

.img-placeholder__label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(62, 180, 137, 0.5);
}

.img-placeholder__sub {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.04em;
}

/* ===== SPLIT LAYOUT ===== */
/* ===== SPLIT LAYOUT ===== */
.split-section {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 64px;
}

.split-section--reverse {
  grid-template-columns: 4fr 6fr;
}

.split-section:last-child {
  margin-bottom: 0;
}

.split-section__text {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.split-section__media {
  position: relative;
  overflow: hidden;
}

.split-section__media .img-placeholder {
  height: 100%;
  border-radius: 0;
  min-height: 400px;
}

.split-section--reverse .split-section__text { order: 1; }
.split-section--reverse .split-section__media { order: 2; }

/* ===== SERVICE CARD IMAGE ===== */
.service-card-img {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.service-card-img .img-placeholder {
  aspect-ratio: 16/9;
  border-radius: 8px;
}

/* ===== FULL-WIDTH IMAGE BREAK ===== */
.section-image-break {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  position: relative;
}

.section-image-break img,
.section-image-break .img-placeholder {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .split-section { grid-template-columns: 1fr; }
  .split-section__text { padding: 48px 24px; order: 2; }
  .split-section__media { order: 1; }
  .split-section--reverse .split-section__text,
  .split-section--reverse .split-section__media { order: unset; }
  .split-section__media .img-placeholder { min-height: 240px; }
  .img-placeholder--hero { min-height: 280px; }
}

@media (max-width: 480px) {
  .split-section__text { padding: 36px 16px; }
  .img-placeholder--banner { min-height: 160px; }
}