/* ============================================================
   css/layout.css
   Mercenary Beauty — Page Section Layouts

   WHY THIS FILE EXISTS:
   While components.css styles what a thing looks like,
   this file controls how sections are positioned, sized,
   and arranged on the page.

   THE DIFFERENCE:
   - .btn-cta { background: green } → components.css
   - .hero { display: grid; grid-template-columns: 1fr 1fr } → here

   RESPONSIVE DESIGN:
   The @media block at the bottom overrides styles for smaller
   screens. We use a "desktop-first" approach here — styles are
   written for desktop, then adjusted downward for mobile.
   ============================================================ */


/* ------------------------------------------------------------
   HERO SECTION
   Two-column grid: left = sticky text, right = image collage.
   min-height: 175vh gives the parallax scroll room — the left
   text drifts down as the user scrolls, driven by posHeroText()
   in main.js. On mobile (≤960px) this collapses to 100vh since
   the right image panel is hidden and no parallax room is needed.
   ------------------------------------------------------------ */

.hero {
  min-height: 55vh;
  padding-top: var(--nav-height); /* Prevents content hiding behind fixed nav */
  background: var(--color-cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow-x: clip; /* Clips ::before glow (right:-5%) without creating a scroll container — keeps position:sticky intact */
}

/* Soft blue radial glow in top-right corner (decorative) */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 65%);
  pointer-events: none; /* Decorative only — doesn't block clicks */
}

/* Left column: sticky so text stays visible while right images scroll.
   Height is exactly one viewport minus the nav bar so it fills
   the screen precisely without overflow. */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--page-gutter);
  position: sticky;
  top: var(--nav-height);
  align-self: stretch;
  z-index: 1;
}

.hero-left-inner {
  will-change: transform; /* JS in main.js drives translateY on scroll — see posHeroText() */
}

/* Hero text elements */
.hero-eyebrow {
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeUp .6s ease both;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--font-display-weight);
  line-height: .96;
  letter-spacing: var(--font-display-tracking);
  color: var(--color-accent);
  margin-bottom: 32px;
  animation: fadeUp .7s .1s ease both;
}

.hero-title-line1 {
  display: block;
  text-align: center;
  /*padding-left: 5rem;*/
}

.hero-title-line2 {
  display: block;
  text-align: center;
}

.hero-title em {
  font-style: italic;
  color: var(--color-primary);
  font-weight: 400;
}


.hero-rotate {
  display: inline-block;
  font-family: var(--font-alt-header);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hero-rotate-out {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes rotateWordIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-rotate-in {
  animation: rotateWordIn 0.25s ease forwards;
}

.hero-sub {
  font-size: var(--text-body);
  font-family: var(--font-body);
  letter-spacing: var(--font-display-tracking);
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-secondary);
  max-width: 44ch;
  margin: 0 auto 44px;
  animation: fadeUp .7s .2s ease both;
  text-align: center;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  animation: fadeUp .7s .3s ease both;
}

/* Right column: single slideshow box */
.hero-right {
  overflow: hidden;
  align-self: start;
  height: 55vh;
  animation: fadeUp .9s .15s ease both;
  position: relative;
}

.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in;
}

.hero-slide.active {
  opacity: 1;
}


/* ------------------------------------------------------------
   SERVICES SECTION
   Dark background, two-column: intro left, service list right.
   ------------------------------------------------------------ */

.services-bg {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

.services-bg::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(121, 148, 255, .08) 0%, transparent 60%);
  pointer-events: none;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.services-intro {
  font-size: var(--text-founder);
  font-family: var(--font-display);
  letter-spacing: var(--font-display-tracking);
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-secondary);
  max-width: 42ch;
  margin-top: 24px;
}


/* ------------------------------------------------------------
   EDITORIAL IMAGE STRIP
   Full-width 5-column photo strip between sections.
   ------------------------------------------------------------ */

.editorial-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 320px;
  overflow: hidden;
}

.editorial-img {
  overflow: hidden;
  position: relative;
}

.editorial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter .4s ease;
  filter: brightness(.88); /* Slightly darkened at rest */
}

.editorial-img:hover img {
  transform: scale(1.07);
  filter: brightness(1); /* Full brightness on hover */
}


/* ------------------------------------------------------------
   FOUNDER SECTION
   Two-column: image left, bio right.
   ------------------------------------------------------------ */

.founder-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 0;
  align-items: stretch;
}

.founder-img-wrap {
  position: relative; /* Required for the floating accent image */
}


/* ------------------------------------------------------------
   CTA SECTION
   Dark background, centered text, booking widget.
   ------------------------------------------------------------ */

.cta-bg {
  background: var(--color-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Large decorative glow behind CTA text */
.cta-bg::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, rgba(121, 148, 255, .07) 0%, transparent 60%);
  pointer-events: none;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   Desktop-first: base styles target desktop, media queries
   override downward. Only changed properties are listed.

   Breakpoints used:
   ≤960px  — Tablet + large mobile (iPad, large Android)
   ≤480px  — Small phones (iPhone SE, older Android)
   ============================================================ */

/* ------------------------------------------------------------
   PHOTO BLOCK — 6 equal-width images in a row below the marquee
   ------------------------------------------------------------ */

.photo-block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
}

.photo-block-item {
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 3 / 4;
}

.photo-block-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.photo-block-item:hover img {
  transform: scale(1.06);
}


/* ≤960px — Tablet + large mobile
   Desktop-first overrides: only properties that change are listed. */
@media (max-width: 960px) {

  /* Nav */
  nav {
    padding: 0 var(--page-gutter-sm);
  }

  /* Hero — single column, right images stack below text */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto; /* Height driven by content — no blank space */
  }

  .hero-left {
    padding: 60px var(--page-gutter-sm) 40px;
    position: relative; /* Disable sticky — no need with stacked layout */
    top: auto;
  }

  .hero-right {
    display: grid;  /* Show images below the text */
    height: 58vh;   /* Compact image panel — scales with viewport */
    align-self: auto;
  }

  /* Sections */
  .section {
    padding: var(--section-pad-sm) var(--page-gutter-sm);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Services — stack to single column */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Founder — stack with no gap so CTA bg flows into bio */
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #about .founder-img-wrap {
    padding: 32px var(--page-gutter-sm) 32px var(--page-gutter-sm);
  }

  #about .founder-img-wrap > img {
    width: 85%;
  }

  #about .founder-bio {
    padding: 40px var(--page-gutter-sm);
  }

  /* Editorial strip — show only 3 images on tablet */
  .editorial-strip {
    grid-template-columns: repeat(3, 1fr);
    height: 220px;
  }

  .editorial-strip .editorial-img:nth-child(n+4) {
    display: none;
  }

  /* Stats — 2 columns instead of 3 on tablet */
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer — stack to single column */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  footer {
    padding: 60px var(--page-gutter-sm) 32px;
  }
}

/* ≤930px — Tablet and below
   Hide the last 3 photo block images so the row stays tight at 3 across. */
@media (max-width: 930px) {
  .photo-block {
    grid-template-columns: repeat(3, 1fr);
  }
  .photo-block-item:nth-child(n+4) {
    display: none;
  }
}

/* ≤480px — Small phones (iPhone SE, older Androids)
   Further collapses anything still too wide at 960px. */
@media (max-width: 480px) {

  /* Clip any section that has wide decorative children (phase shapes, glows, etc.) */
  .section {
    overflow-x: clip;
  }

  /* Hero image panel — shorter on small phones to avoid pushing content far down */
  .hero-right {
    height: 48vh;
  }

  /* Stats — single column so numbers have full width to breathe */
  .stats-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Founder image fills full width at small phone sizes */
  #about .founder-img-wrap > img {
    width: 100%;
  }

  /* Footer bottom — stack copyright lines */
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}