/* =============================================================
   Our Story — page-specific styles
   Requires: ../css/styles.css (shared nav/footer/tokens)
   ============================================================= */

/* ── Shared tokens (mirrored from shared styles for safety) ── */
:root {
  --red:    #812926;
  --yellow: #FFD546;
  --green:  #7EBB55;
  --green-dk: #67924B;
  --navy:   #1C395C;
  --teal-bg:#F0FAFB;
  --cream:  #FCFAF4;
  --orange: #F78A3C;
  --why-bg: #FEF6EF;
  --max-w:  1200px;
}

/* ── Fade-in utility ── */
.fade-in,
.fade-in-left,
.fade-in-right {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in-left  { transform: translateX(-36px); }
.fade-in-right { transform: translateX(36px);  }

.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* =============================================================
   1. HERO BANNER
   ============================================================= */
.story-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.story-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.story-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.35) 45%,
    transparent 100%
  );
  z-index: 1;
}

.story-hero__text {
  position: relative;
  z-index: 2;
  padding: 0 120px 60px;
  max-width: 620px;
  color: #fff;
}

.story-hero__text h1 {
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 16px;
  color: #fff;
}

.story-hero__text p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  color: rgba(255,255,255,0.92);
  max-width: 480px;
}

/* =============================================================
   2. VISION & MISSION
   ============================================================= */
.vision-mission {
  background: #fff;
  padding: 84px 110px 100px;
}

.vm-content {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: center;
}

.vm-left {
  max-width: 580px;
}

.vm-heading {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em;
  margin: 0 0 14px !important;
  color: #000;
}

.vm-vision-text {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 28px;
}

.vm-divider {
  width: 12%;
  height: 5.5px;
  background: var(--orange);
  border-radius: 3px;
  margin: 0 0 28px;
}

.vm-left p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}

.vm-right {
  flex-shrink: 0;
}

/* The wrapper clips to circle — the actual image fills it without borders */
.vm-photo-wrap {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.vm-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* Strip white fringe from PNG source with multiply blend */
  mix-blend-mode: multiply;
}

/* =============================================================
   3. OUR "WHY"
   ============================================================= */
.our-why {
  background: var(--why-bg);
  padding: 90px 110px 120px;
}

.our-why__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.section-title {
  font-size: clamp(38px, 4.2vw, 55px) !important;
  font-weight: 800 !important;
  text-align: center;
  margin: 0 0 64px !important;
  line-height: 1.1 !important;
  color: #000;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.why-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 48px rgba(0,0,0,0.10);
}

.why-card__icon {
  margin-bottom: 24px;
  line-height: 0;
}

.why-card__title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
}

.why-card p {
  font-size: 15px;
  line-height: 1.75;
  color: #444;
  margin: 0;
}

/* =============================================================
   4. IMPACT JOURNEY TIMELINE
   Alternates: odd = photo LEFT | dot CENTER | text RIGHT
               even = text LEFT | dot CENTER | photo RIGHT
   ============================================================= */
.impact-journey {
  background: #fff;
  padding-bottom: 100px;
}

.journey-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 60px;
}

.journey-inner .section-title {
  padding-top: 91px;
}

.timeline {
  display: flex;
  flex-direction: column;
}

/* Base entry: 3 columns — col1 | dot | col3 */
.timeline-entry {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 0 32px;
  align-items: start;
}

/* dot + line column — always center (column 2) */
.timeline-dot-col {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

.tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EDEFF2;
  border: 3px solid #c4c8d0;
  flex-shrink: 0;
}

.tl-line {
  width: 2px;
  background: #EDEFF2;
  flex: 1;
  min-height: 60px;
}

/* ── ODD entries (1st, 3rd, 5th…): photo col1-LEFT, text col3-RIGHT ── */
.timeline-entry:nth-child(odd) .timeline-photo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 4px;
}

.timeline-entry:nth-child(odd) .timeline-text {
  grid-column: 3;
  grid-row: 1;
  padding-top: 4px;
  padding-bottom: 60px;
}

/* ── EVEN entries (2nd, 4th…): text col1-LEFT, photo col3-RIGHT ── */
.timeline-entry:nth-child(even) .timeline-text {
  grid-column: 1;
  grid-row: 1;
  padding-top: 4px;
  padding-bottom: 60px;
}

.timeline-entry:nth-child(even) .timeline-photo {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
}

.timeline-photo img {
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  display: block;
  margin-bottom: 60px;
}

.tl-year {
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
  color: #000;
}

.tl-subtitle {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 12px;
  color: #000;
}

.timeline-text p:last-child {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin: 0;
}

.timeline-text a {
  color: var(--orange);
  text-decoration: underline;
}

/* =============================================================
   5. ROTATING HEADLINE SECTION
   Matches the homepage hero animated word effect exactly
   ============================================================= */
.rotating-headline-section {
  background: var(--why-bg);
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rotating-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.2;
}

/* The static parts: "A more" and "Cambodia" */
.rh-static {
  display: inline-block;
  color: var(--orange);
  white-space: nowrap;
}

/* The animated word wrapper — fixed width so layout doesn't shift */
.rh-animated-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* separator bar — matches the | on the screenshot */
  border-right: 3px solid var(--orange);
  padding-right: 16px;
  min-width: 280px;
  justify-content: flex-end;
}

.rh-word {
  display: inline-block;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
  /* entrance: slide in from right (same keyframes as homepage) */
  animation: rhSlideIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.rh-word.slide-out {
  animation: rhSlideOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes rhSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
    clip-path: inset(0 0 0 100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0%);
  }
}

@keyframes rhSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0%);
  }
  to {
    opacity: 0;
    transform: translateX(50px);
    clip-path: inset(0 100% 0 0);
  }
}

@media (max-width: 768px) {
  .rotating-headline { font-size: 28px; flex-direction: column; gap: 4px; }
  .rh-animated-wrapper { min-width: 200px; border-right: none; border-bottom: 3px solid var(--orange); padding-right: 0; padding-bottom: 6px; justify-content: center; }
}

/* =============================================================
   6. CTA CARDS — exact homepage pattern
   ============================================================= */
.story-cta-cards {
  width: 100%;
}

.story-cta-cards .cta-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  min-height: 480px;
}

/* Inherit all .cta-card styles from ../css/styles.css.
   The cards use the EXACT same markup + classes as the homepage,
   so all hover overlay / content / arrow logic comes from the shared sheet.
   We only need to set the min-height for 3 cards (vs 4 on home). */
.story-cta-cards .cta-card {
  min-height: 480px;
}

@media (max-width: 1024px) {
  .story-cta-cards .cta-cards-grid { grid-template-columns: repeat(3, 1fr); }
  .story-cta-cards .cta-card { min-height: 360px; }
  .story-cta-cards .cta-card-top h4,
  .story-cta-cards .cta-card-hover-top h4 { font-size: 30px; }
}

@media (max-width: 768px) {
  .story-cta-cards .cta-cards-grid { grid-template-columns: 1fr; }
  .story-cta-cards .cta-card { min-height: 280px; }
  .story-cta-cards .cta-card-top h4,
  .story-cta-cards .cta-card-hover-top h4 { font-size: 26px; }
}

/* =============================================================
   7. JOIN TEAM CTA
   ============================================================= */
.join-team-cta {
  background: #fff;
  padding: 80px 110px;
}

.join-team-cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.join-team-cta__text h2 {
  font-size: 36px !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
  color: #000;
}

.join-team-cta__text p {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  max-width: 520px;
  margin: 0;
}

.join-team-cta__action {
  flex-shrink: 0;
}

/* btn-green: should be in shared styles.css already.
   Keeping here as fallback. */
.btn-green {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.25s ease;
  white-space: nowrap;
}
.btn-green:hover {
  background: var(--green-dk);
  color: #fff;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .story-hero__text { padding: 0 60px 48px; }
  .vision-mission   { padding: 64px 60px 80px; }
  .our-why          { padding: 70px 60px 90px; }
  .journey-inner    { padding: 0 40px; }
  .join-team-cta    { padding: 64px 60px; }

  .vm-content { gap: 48px; }
  .vm-photo-wrap { width: 280px; height: 280px; }
}

@media (max-width: 768px) {
  .story-hero__text { padding: 0 28px 36px; max-width: 100%; }
  .story-hero__text h1 { font-size: 40px; }

  .vision-mission { padding: 48px 28px 64px; }
  .vm-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .vm-right { display: flex; justify-content: center; }
  .vm-photo-wrap { width: 260px; height: 260px; }

  .our-why { padding: 56px 28px 72px; }
  .why-cards { grid-template-columns: 1fr; }

  .journey-inner { padding: 0 20px; }

  /* Mobile timeline: always dot-left | content-right, stacked photo below */
  .timeline-entry {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
  }
  .timeline-dot-col {
    grid-column: 1 !important;
    grid-row: 1 / 3;
    padding-top: 6px;
  }
  /* Override nth-child placement — all text goes to col 2, row 1 */
  .timeline-entry:nth-child(odd) .timeline-text,
  .timeline-entry:nth-child(even) .timeline-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left;
  }
  /* All photos go to col 2, row 2 */
  .timeline-entry:nth-child(odd) .timeline-photo,
  .timeline-entry:nth-child(even) .timeline-photo {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    padding-top: 16px !important;
  }
  .timeline-photo img { max-width: 100%; margin-bottom: 40px; }

  .join-team-cta { padding: 48px 28px; }
  .join-team-cta__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
}