/* ============================================================
   EAGLES PHOTOGRAPHY — ABOUT PAGE CSS
   4-color block hero, story highlight, founders, FAQ
   ============================================================ */

/* ============================================================
   4-COLOR BLOCK HERO
   ============================================================ */
.ep-about-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

/* 4 equal full-height columns */
.ep-about-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}

.ep-about-col {
  height: 100%;
  will-change: transform, opacity;
}

.ep-about-col-1 { background: var(--color-teal); }
.ep-about-col-2 { background: var(--color-pink); }
.ep-about-col-3 { background: var(--color-orange); }
.ep-about-col-4 { background: var(--color-amber); }

/* Centered white text over the blocks */
.ep-about-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  padding: 0 24px;
}

.ep-about-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: 0.92;
  color: #fff;
  text-shadow: 0 6px 40px rgba(13, 13, 13, 0.25);
}

.ep-about-hero__label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 18px;
  opacity: 0.92;
}

/* ============================================================
   STORY SECTION
   ============================================================ */
.ep-about-story {
  padding: 120px var(--content-pad);
  background: var(--color-bg);
}

.ep-about-story__big {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 76px);
  line-height: 1.08;
  color: var(--color-ink);
  max-width: 1000px;
}

.ep-about-story__big .line {
  display: block;
}

.ep-about-story__big .line--b { padding-left: 8%; }
.ep-about-story__big .line--c { padding-left: 22%; }
.ep-about-story__big .line--d { padding-left: 10%; }
.ep-about-story__big .line--e { padding-left: 30%; }

/* Highlight chip — dark bg slides in (motion.css drives ::before).
   Text colour flips to cream as the chip arrives so it stays
   readable both before and after the reveal. */
.ep-about-story .ep-highlight {
  color: var(--color-ink);
  transition: color 0.6s var(--ease-expo-out);
}

.ep-about-story .ep-highlight.is-revealed {
  color: var(--color-dark-text);
}

.ep-about-story__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--lh-body-l);
  color: var(--color-ink-muted);
  max-width: 600px;
  margin-top: 56px;
}

/* ============================================================
   FOUNDERS — two large colored cards
   ============================================================ */
.ep-about-founders {
  padding: 40px var(--content-pad) 100px;
  background: var(--color-bg);
}

.ep-about-founders__head {
  margin-bottom: 48px;
}

.ep-about-founders__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.ep-about-founder {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ep-about-founder--kavin { background: var(--color-teal); }
.ep-about-founder--naga  { background: var(--color-pink); }

.ep-about-founder__photo {
  overflow: hidden;
}

.ep-about-founder__photo img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s var(--ease-expo-out);
}

.ep-about-founder:hover .ep-about-founder__photo img {
  transform: scale(1.04);
}

.ep-about-founder__body {
  padding: 32px;
}

.ep-about-founder__name {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: #fff;
}

.ep-about-founder__qual {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
}

.ep-about-founder__role {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

.ep-about-founder__bio {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: #fff;
  margin-top: 16px;
}

/* ============================================================
   ABOUT FAQ WRAPPER
   ============================================================ */
.ep-about-faq {
  padding: 100px var(--content-pad);
  background: var(--color-bg);
}

.ep-about-faq__head {
  margin-bottom: 40px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ep-about-story__big .line--b,
  .ep-about-story__big .line--c,
  .ep-about-story__big .line--d,
  .ep-about-story__big .line--e { padding-left: 0; }
}

@media (max-width: 768px) {
  .ep-about-hero { height: 80vh; min-height: 440px; }

  /* Keep all four colour blocks visible side by side on mobile */
  .ep-about-founders__grid { grid-template-columns: 1fr; }

  .ep-about-founder__photo img { height: 380px; }

  .ep-about-story { padding: 80px var(--content-pad); }

  /* Smaller, roomier story heading so it fits without cramping */
  .ep-about-story__big {
    font-size: clamp(24px, 6.6vw, 40px);
    line-height: 1.32;
  }

  /* Highlight chip on mobile:
     The desktop clipPath slide-in relies on scroll timing and can leave
     the absolutely-positioned dark box overlapping wrapped words on a
     narrow screen. On mobile we instead paint a clean, always-visible
     inline chip that wraps per line (box-decoration-break) with cream
     text sitting on top — no dependency on the animation state. */
  .ep-about-story .ep-highlight,
  .ep-about-story .ep-highlight.is-revealed {
    color: var(--color-dark-text);
    background: var(--color-ink);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.02em 0.3em;
    border-radius: 4px;
    box-shadow: 0.3em 0 0 var(--color-ink), -0.3em 0 0 var(--color-ink);
  }
  /* Disable the sliding overlay so it can't cover the text */
  .ep-about-story .ep-highlight::before { display: none; }
}