/* =========================================================
   SAFFERGURU — ABOUT PAGE STYLESHEET
   Page-specific styles only. Shared tokens, resets, header,
   footer, buttons, cards, animations, .masonry-gallery and
   .cta-banner all come from assets/css/base.css — loaded
   before this file.

   1. About Hero (centered variant)
   2. Our Story
   3. Our Journey (vertical timeline)
   4. Meet Our Team
   5. Travel Gallery (parallax hook)
   6. Our Values
   7. Responsive
   ========================================================= */

/* ---------- 1. ABOUT HERO ----------
   A compact page-banner instead of the full-height landing hero
   used on Home/Trips: short breadcrumb, page title, one line of
   copy — no search card, no CTA row. */
.hero--about {
  height: auto;
  min-height: clamp(260px, 30vw, 360px);
  max-height: none;
}
.hero--about .hero-inner {
  display: block;
  text-align: left;
  padding-block: calc(var(--logo-h) + 20px)
    clamp(24px, 4vh, 44px);
}
.hero--about .hero-copy {
  max-width: 640px;
}
.hero--about .hero-text {
  margin-top: 12px;
  max-width: 460px;
  font-size: clamp(15px, 0.9vw, 18px);
  line-height: 1.6;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(7, 27, 52, 0.38);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}
.breadcrumb a:hover {
  color: #fff;
}
.breadcrumb i {
  width: 13px;
  height: 13px;
  opacity: 0.55;
}
.breadcrumb span[aria-current] {
  color: #fff;
}

.hero-title--page {
  margin-top: 16px;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
}

/* Compact banner still needs real breathing room on phones — the
   260px min-height (tuned for desktop) leaves almost no gap around the
   breadcrumb/title/text stack once it wraps to 3+ lines. */
@media (max-width: 560px) {
  .hero--about {
    min-height: 420px;
  }
}

/* ---------- 2. OUR STORY ---------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.story-image {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  aspect-ratio: 4 / 3;
}
.story-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.story-image:hover img {
  transform: scale(1.06);
}
.story-copy .eyebrow {
  display: flex;
  width: fit-content;
  margin-inline: 0;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(91, 61, 245, 0.14);
  border-radius: 999px;
  background: rgba(91, 61, 245, 0.055);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.story-copy .sec-title {
  text-align: left;
  margin-inline: 0;
  margin-top: 12px;
  font-size: clamp(26px, 3vw, 36px);
}
.story-copy p.story-text {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(30, 41, 59, 0.65);
}
.story-pillars {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}
.story-pillar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.story-pillar .pillar-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #765aff, #4f9fff);
  color: #fff;
  box-shadow: 0 9px 20px -12px rgba(82, 75, 225, 0.85);
}
.story-pillar .pillar-icon i {
  width: 17px;
  height: 17px;
}
.story-pillar h3 {
  font-size: 14.5px;
  color: var(--dark);
}
.story-pillar p {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(30, 41, 59, 0.58);
  max-width: 42ch;
}

/* ---------- 3. OUR JOURNEY (vertical timeline) ---------- */
.journey-timeline {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}
.journey-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(91, 61, 245, 0.05),
    rgba(91, 61, 245, 0.35) 10%,
    rgba(91, 61, 245, 0.35) 90%,
    rgba(91, 61, 245, 0.05)
  );
}
.journey-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: 28px;
}
.journey-item + .journey-item {
  margin-top: 8px;
}
.journey-card {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}
.journey-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card);
}
.journey-item:nth-child(even) .journey-card {
  grid-column: 3;
  text-align: left;
}
.journey-dot {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: var(--sh-lift);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
}
.journey-card .year {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
}
.journey-card h3 {
  margin-top: 4px;
  font-size: 16px;
  color: var(--dark);
}
.journey-card p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(30, 41, 59, 0.6);
}

/* ---------- 4. MEET OUR TEAM ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.team-card {
  text-align: center;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh-soft);
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-card);
}
.team-photo {
  position: relative;
  margin-inline: auto;
  height: 108px;
  width: 108px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 12px 28px -14px rgba(7, 27, 52, 0.4);
}
.team-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.team-card:hover .team-photo img {
  transform: scale(1.08);
}
.team-card h3 {
  margin-top: 18px;
  font-size: 16px;
  color: var(--dark);
}
.team-card .role {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.team-card .bio {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(30, 41, 59, 0.58);
}
.team-socials {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.team-socials a {
  display: grid;
  place-items: center;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: var(--light);
  color: rgba(30, 41, 59, 0.6);
  transition: 0.3s;
}
.team-socials a:hover {
  background: var(--primary);
  color: #fff;
}
.team-socials i {
  width: 14px;
  height: 14px;
}

/* ---------- 5. TRAVEL GALLERY (parallax hook) ----------
   Adds scroll-parallax on top of the shared .masonry-gallery
   hover-zoom, via a --py custom property that about.js updates
   on scroll (see there for why). */
.gallery--parallax img {
  transform: translate3d(0, var(--py, 0), 0) scale(1.06);
}
.gallery--parallax a:hover img {
  transform: translate3d(0, var(--py, 0), 0) scale(1.14);
}

/* ---------- 6. OUR VALUES ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 26px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248, 249, 255, 0.9), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
  border-color: rgba(91, 61, 245, 0.3);
}
.value-icon {
  display: grid;
  place-items: center;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  box-shadow: var(--sh-soft);
  transition: transform 0.4s var(--ease);
}
.value-card:hover .value-icon {
  transform: rotate(-8deg) scale(1.08);
}
.value-icon i {
  width: 22px;
  height: 22px;
}
.value-card h3 {
  font-size: 14px;
  color: var(--dark);
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
  .story-image {
    max-width: 460px;
    margin-inline: auto;
    aspect-ratio: 16 / 10;
  }
  .story-pillars {
    max-width: 460px;
  }
  .journey-timeline::before {
    left: 22px;
  }
  .journey-item {
    grid-template-columns: 44px 1fr;
  }
  .journey-item .journey-dot {
    grid-column: 1;
  }
  .journey-card,
  .journey-item:nth-child(even) .journey-card {
    grid-column: 2;
    text-align: left;
  }
}
@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .story-text{
    text-align: left;
  }

  .story-copy .eyebrow {
    margin-inline: 0;
  }

  .story-copy .sec-title {
    text-align: left;
  }
}