<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'

const router = useRouter()

function goToAbout(): void {
  router.push('/about')
}

const coreTeachings = [
  { number: 1, title: 'Introduction', glyph: '⌂' },
  { number: 2, title: 'Foundations', glyph: '◧' },
  { number: 3, title: 'Divine Plan', glyph: '◯' },
  { number: 4, title: 'Architecture of the Soul', glyph: '♥' },
  { number: 5, title: 'Arba Yesodot', glyph: '✦' },
  { number: 6, title: 'Fluid Integration', glyph: '✎' },
]

interface Testimonial {
  name: string
  quote: string
}

type TestimonialPosition = 'active' | 'previous' | 'next' | 'hidden'

const testimonials: Testimonial[] = [
  {
    name: 'Nathaniel M',
    quote:
      'A decade and a half in the best Jewish day schools money can ' +
      'buy and I never once heard the optimistic and encouraging ' +
      'vision that Rabbi Gerzi just shared.',
  },
  {
    name: 'Nathan G',
    quote:
      'Rabbi Gerzi gave me the tools for making learning real and ' +
      'relevant to my everyday life.',
  },
  {
    name: 'Anonymous Student',
    quote:
      'My understanding of Torah has been profoundly improved through ' +
      'his teachings.',
  },
]

const testimonialIndex = ref(0)

function testimonialOffset(index: number): number {
  const relativeIndex = index - testimonialIndex.value + testimonials.length

  return relativeIndex % testimonials.length
}

function previousTestimonialIndex(): number {
  if (testimonialIndex.value === 0) {
    return testimonials.length - 1
  }

  return testimonialIndex.value - 1
}

function nextTestimonialIndex(): number {
  return (testimonialIndex.value + 1) % testimonials.length
}

function testimonialPosition(index: number): TestimonialPosition {
  const offset = testimonialOffset(index)

  if (offset === 0) {
    return 'active'
  }

  if (offset === testimonials.length - 1) {
    return 'previous'
  }

  if (offset === 1) {
    return 'next'
  }

  return 'hidden'
}

function testimonialDataCy(index: number): string {
  const position = testimonialPosition(index)

  if (position === 'active') {
    return 'testimonial-active'
  }

  if (position === 'previous') {
    return 'testimonial-previous-preview'
  }

  if (position === 'next') {
    return 'testimonial-next-preview'
  }

  return 'testimonial-hidden'
}

function testimonialHiddenClass(index: number): string {
  const offset = testimonialOffset(index)

  if (offset < testimonials.length / 2) {
    return 'testimonials__card--hidden-next'
  }

  return 'testimonials__card--hidden-previous'
}

function testimonialClass(index: number): string[] {
  const position = testimonialPosition(index)
  const positionClass = `testimonials__card--${position}`

  if (position === 'hidden') {
    return [positionClass, testimonialHiddenClass(index)]
  }

  return [positionClass]
}

function nextTestimonial(): void {
  testimonialIndex.value = nextTestimonialIndex()
}

function previousTestimonial(): void {
  testimonialIndex.value = previousTestimonialIndex()
}

interface Sponsor {
  name: string
  src: string
}

const sponsors: Sponsor[] = [
  { name: 'SHARE', src: '/assets/share.png' },
  { name: 'U of Israel', src: '/assets/yYMUkyx3NlGYDK4AUiUvP05Ik.png' },
  { name: 'Mayberg Foundation', src: '/assets/mayberg.png' },
  { name: 'JLE UK', src: '/assets/jle.png' },
  { name: 'Yeshivat Reishit', src: '/assets/reishit.png' },
  { name: 'Aish HaTorah', src: '/assets/aish.png' },
  { name: 'Yeshivat Lev HaTorah', src: '/assets/levhatorah.png' },
]

const sponsorGroups: Sponsor[][] = [sponsors, sponsors]

function sponsorGroupDataCy(sponsorGroupIndex: number): string {
  if (sponsorGroupIndex === 0) {
    return 'sponsor-logo-group'
  }

  return 'sponsor-logo-group-duplicate'
}

function sponsorLogoAlt(sponsor: Sponsor, sponsorGroupIndex: number): string {
  if (sponsorGroupIndex === 0) {
    return sponsor.name
  }

  return ''
}

function sponsorLogoDataCy(sponsorGroupIndex: number): string {
  if (sponsorGroupIndex === 0) {
    return 'sponsor-logo'
  }

  return 'sponsor-logo-duplicate'
}

interface Project {
  title: string
  description: string
  imagePath: string
  fallbackColor: string
}

const projects: Project[] = [
  {
    title: 'Chaburot',
    description:
      'Rabbi Gerzi organizes group learning sessions for men and ' +
      'women that provide a focused learning environment for ' +
      'spiritual growth.',
    imagePath: '/assets/projects/chaburot.webp',
    fallbackColor: '#6b5b3c',
  },
  {
    title: 'Pilzno Work Inspired',
    description:
      "Rabbi Gerzi's program that provides the theoretical and " +
      'practical frameworks for a healthy relationship to work.',
    imagePath: '/assets/projects/pilzno-work-inspired.webp',
    fallbackColor: '#4a3a55',
  },
  {
    title: 'Shul',
    description:
      'Rabbi Gerzi\u2019s shul in Ramat Beit Shemesh ' +
      '\u201CPilzno Beis Dovid\u201D provides a warm and enriching ' +
      'environment for a diverse community of congregants.',
    imagePath: '/assets/projects/shul.webp',
    fallbackColor: '#3d4a4b',
  },
  {
    title: 'New Building',
    description:
      'Rabbi Gerzi has received the blessing of the Beit Shemesh ' +
      'municipality to develop a new center, equipped with modern ' +
      'facilities to support a integrated Torah lifestyle.',
    imagePath: '/assets/projects/new-building.webp',
    fallbackColor: '#5a4232',
  },
]

function projectCardStyle(project: Project): string {
  return [
    `--card-image: url(${project.imagePath})`,
    `--card-fallback: ${project.fallbackColor}`,
  ].join('; ')
}
</script>

<template>
  <div class="page">
    <SiteHeader />

    <section class="hero" data-cy="hero">
      <div class="hero__backdrop">
        <img src="/assets/sky.png" alt="" class="hero__sky" />
        <img src="/assets/mountain.png" alt="" class="hero__mountain" />
        <img src="/assets/man_on_rock.png" alt="" class="hero__hiker" />
      </div>
      <div class="hero__content">
        <div class="hero__text">
          <h1 class="hero__headline">
            Let&rsquo;s upgrade our lives to a
            <em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah
            existence.
          </h1>
          <p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
        </div>
        <div class="hero__portrait-frame">
          <img
            src="/assets/portrait.png"
            alt="Rabbi Yehoshua Gerzi"
            class="hero__portrait"
            data-cy="hero-portrait"
          />
        </div>
      </div>
    </section>

    <section class="discover-path" data-cy="discover-path">
      <div class="discover-path__inner">
        <svg
          class="discover-path__icon"
          viewBox="0 0 120 80"
          fill="none"
          stroke="currentColor"
          stroke-width="1.2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="M10 65 L40 25 L55 45 L70 15 L90 45 L110 65" />
          <path d="M30 65 C45 55, 60 60, 75 50 S100 55, 110 65" />
        </svg>
        <h2 class="discover-path__heading">
          Discover a Path to a Holistically Engaged Life
        </h2>
        <p class="discover-path__paragraph">
          Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals
          to achieve a state of &ldquo;Healthy, Integrated and Balanced Torah
          Living.&rdquo; His teachings weave together timeless Torah wisdom,
          mystical insights and practical guidance, making ancient wisdom
          accessible and transformative for modern lives.
        </p>
        <p class="discover-path__paragraph">
          Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of
          Kehillas Beis David and Director of the Pilzno Institute of Higher
          Learning.
        </p>
      </div>
    </section>

    <section class="core-teachings" data-cy="core-teachings">
      <div class="core-teachings__inner">
        <h2 class="core-teachings__heading">
          Baderech HaAvodah (Core Teachings)
        </h2>
        <div class="core-teachings__grid">
          <div
            v-for="teaching in coreTeachings"
            :key="teaching.number"
            class="core-teachings__tile"
          >
            <span class="core-teachings__glyph" aria-hidden="true">
              {{ teaching.glyph }}
            </span>
            <p class="core-teachings__label">
              {{ teaching.number }}) {{ teaching.title }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="unique-voice" data-cy="unique-voice">
      <div class="unique-voice__inner">
        <svg
          class="unique-voice__icon"
          viewBox="0 0 140 60"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="M5 35 Q35 5 70 35 Q105 5 135 35" />
          <line x1="70" y1="5" x2="70" y2="40" />
          <path d="M55 40 Q70 45 85 40" />
          <path d="M15 50 Q45 55 75 50 T130 50" />
        </svg>
        <h2 class="unique-voice__heading">A Unique Voice for the Generation</h2>
        <p class="unique-voice__paragraph">
          Rabbi Gerzi provides a wholly unique and much needed perspective to
          his students. Carrying decades of experience guided by a handful of
          the generations most pre-eminent Rabbanim, he teaches a message of
          practically engaged positivity. His Torah is one of unity, bridging
          hashkafic boundaries and engaging a diverse cadre of Jews who are open
          minded to embracing meaningful and experiential Judaism.
        </p>
        <button
          class="unique-voice__cta-button"
          type="button"
          @click="goToAbout"
        >
          Learn about Rabbi Gerzi&rsquo;s Approach
        </button>
      </div>
    </section>

    <section class="testimonials" data-cy="testimonials">
      <div class="testimonials__inner">
        <h2 class="testimonials__heading">What People Are Saying</h2>
        <div class="testimonials__stage" data-cy="testimonials-stage">
          <div
            v-for="(testimonial, index) in testimonials"
            :key="testimonial.name"
            class="testimonials__card"
            :class="testimonialClass(index)"
            :data-cy="testimonialDataCy(index)"
            :aria-hidden="testimonialPosition(index) !== 'active'"
          >
            <h3 class="testimonials__name">{{ testimonial.name }}</h3>
            <p class="testimonials__quote">
              &ldquo;{{ testimonial.quote }}&rdquo;
            </p>
          </div>
        </div>
        <div class="testimonials__controls">
          <button
            type="button"
            class="testimonials__arrow"
            aria-label="Previous testimonial"
            data-cy="testimonial-prev"
            @click="previousTestimonial"
          >
            ‹
          </button>
          <button
            type="button"
            class="testimonials__arrow"
            aria-label="Next testimonial"
            data-cy="testimonial-next"
            @click="nextTestimonial"
          >
            ›
          </button>
        </div>
      </div>
    </section>

    <section class="sponsors" data-cy="sponsors">
      <div class="sponsors__inner">
        <h2 class="sponsors__heading">
          Organizations Rabbi Gerzi has Worked With
        </h2>
        <div class="sponsors__carousel" data-cy="sponsor-carousel">
          <div class="sponsors__track" data-cy="sponsor-track">
            <div
              v-for="(sponsorGroup, sponsorGroupIndex) in sponsorGroups"
              :key="`sponsor-group-${sponsorGroupIndex}`"
              class="sponsors__group"
              :aria-hidden="sponsorGroupIndex === 1 ? 'true' : undefined"
              :data-cy="sponsorGroupDataCy(sponsorGroupIndex)"
            >
              <img
                v-for="sponsor in sponsorGroup"
                :key="`${sponsorGroupIndex}-${sponsor.name}`"
                :src="sponsor.src"
                :alt="sponsorLogoAlt(sponsor, sponsorGroupIndex)"
                class="sponsors__logo"
                :data-cy="sponsorLogoDataCy(sponsorGroupIndex)"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="projects" data-cy="projects">
      <div class="projects__inner">
        <h2 class="projects__heading">Projects</h2>
        <div class="projects__grid">
          <article
            v-for="project in projects"
            :key="project.title"
            class="projects__card"
            :style="projectCardStyle(project)"
            data-cy="project-card"
          >
            <h3 class="projects__card-title">{{ project.title }}</h3>
            <p class="projects__card-body">{{ project.description }}</p>
          </article>
        </div>
      </div>
    </section>

    <section class="journey" data-cy="journey">
      <div class="journey__inner">
        <h2 class="journey__heading">Start Your Journey</h2>
        <div class="journey__cards">
          <a
            class="journey__card journey__card--olive"
            href="/media"
            data-cy="journey-media"
          >
            <h3 class="journey__card-title">Access<br />Torah Media</h3>
            <p class="journey__card-body">
              Explore a wealth of video, audio and written content.
            </p>
          </a>
          <a
            class="journey__card journey__card--slate"
            href="/element/1"
            data-cy="journey-baderech"
          >
            <h3 class="journey__card-title">Explore<br />Baderech HaAvodah</h3>
            <p class="journey__card-body">
              Uncover the transformative principles that can elevate your life.
            </p>
          </a>
        </div>
      </div>
    </section>

    <SiteFooter />
  </div>
</template>

<style scoped>
.page {
  background: var(--color-white);
  min-height: 100vh;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 110vh;
  display: flex;
  align-items: center;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__sky,
.hero__mountain,
.hero__hiker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__sky {
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  z-index: 0;
}

.hero__mountain {
  bottom: calc(50% - 58.8vw);
  width: 100vw;
  max-width: none;
  z-index: 1;
}

.hero__hiker {
  bottom: min(-30vw, -13rem);
  width: 100vw;
  max-width: none;
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
  transform: translateY(clamp(-15.25rem, calc(-22vh - 20px), -8.25rem));
}

.hero__text {
  max-width: 36rem;
}

.hero__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  line-height: 1.25;
  color: var(--color-white);
  margin: 0;
}

.hero__headline em {
  font-style: italic;
}

.hero__attribution {
  margin: 1.5rem 0 0 0;
  font-size: 0.95rem;
  color: var(--color-white);
  opacity: 0.85;
}

.hero__portrait-frame {
  --portrait-frame-size: clamp(200px, 24vw, 350px);

  width: var(--portrait-frame-size);
  height: var(--portrait-frame-size);
  position: relative;
  border-radius: 50%;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero__portrait-frame::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-slate);
  transform: translateX(-50%);
}

.hero__portrait {
  position: relative;
  z-index: 1;
  width: 110%;
  height: auto;
  display: block;
}

.discover-path {
  background: var(--color-slate);
  color: var(--color-white);
  padding: 5rem 2rem;
}

.discover-path__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.discover-path__icon {
  width: 110px;
  height: auto;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 2rem;
  display: block;
}

.discover-path__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 1.5rem 0;
}

.discover-path__paragraph {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.25rem 0;
}

.discover-path__paragraph:last-child {
  margin-bottom: 0;
}

.core-teachings {
  background: var(--color-white);
  padding: 5rem 2rem;
}

.core-teachings__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.core-teachings__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--color-slate);
  text-align: center;
  margin: 0 0 3rem 0;
}

.core-teachings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

.core-teachings__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.core-teachings__glyph {
  font-size: 3rem;
  line-height: 1;
  color: var(--color-slate);
  margin-bottom: 1rem;
  font-weight: 300;
}

.core-teachings__label {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0;
}

.unique-voice {
  background: var(--color-slate);
  color: var(--color-white);
  padding: 5rem 2rem;
}

.unique-voice__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.unique-voice__icon {
  width: 140px;
  height: auto;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin: 0 auto 2rem;
}

.unique-voice__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 1.5rem 0;
}

.unique-voice__paragraph {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2.5rem 0;
}

.unique-voice__cta-button {
  background: var(--color-white);
  color: var(--color-text);
  border: none;
  border-radius: 9999px;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  transition: transform 0.15s ease;
}

.unique-voice__cta-button:hover {
  transform: translateY(-1px);
}

.testimonials {
  background: var(--color-cream);
  padding: 5rem 2rem;
  --testimonials-card-entry-gap: 48px;
  --testimonials-card-gap: 24px;
  --testimonials-card-height: 220px;
  --testimonials-controls-gap: 0.75rem;
  --testimonials-stage-width: 1008px;
}

.testimonials__inner {
  max-width: var(--testimonials-stage-width);
  margin: 0 auto;
  text-align: center;
}

.testimonials__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--color-slate);
  margin: 0 0 2.5rem 0;
}

.testimonials__stage {
  position: relative;
  width: min(100%, var(--testimonials-stage-width));
  height: var(--testimonials-card-height);
  border-radius: 14px;
  margin: 0 auto;
  overflow: hidden;
}

.testimonials__card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 2rem;
  text-align: left;
  width: calc(50% - var(--testimonials-card-gap));
  height: var(--testimonials-card-height);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials__card--active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transform: translateX(-50%);
}

.testimonials__card--previous,
.testimonials__card--next {
  opacity: 0.35;
  visibility: visible;
  z-index: 1;
}

.testimonials__card--previous {
  transform: translateX(calc(-150% - var(--testimonials-card-gap)));
}

.testimonials__card--next {
  transform: translateX(calc(50% + var(--testimonials-card-gap)));
}

.testimonials__card--hidden-previous {
  transform: translateX(calc(-250% - var(--testimonials-card-entry-gap)));
}

.testimonials__card--hidden-next {
  transform: translateX(calc(150% + var(--testimonials-card-entry-gap)));
}

.testimonials__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.testimonials__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.testimonials__controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--testimonials-controls-gap);
}

.testimonials__arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.testimonials__arrow:hover {
  background: var(--color-slate);
}

.sponsors {
  background: var(--color-white);
  padding: 5rem 2rem;
}

.sponsors__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.sponsors__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--color-slate);
  margin: 0 0 3rem 0;
}

.sponsors__carousel {
  --sponsors-edge-fade: 50px;
  --sponsors-logo-gap: clamp(2.75rem, 4vw, 4.25rem);

  width: 85%;
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    black var(--sponsors-edge-fade),
    black calc(100% - var(--sponsors-edge-fade)),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black var(--sponsors-edge-fade),
    black calc(100% - var(--sponsors-edge-fade)),
    transparent
  );
}

.sponsors__track {
  display: flex;
  width: max-content;
  animation: sponsors-scroll 20s linear infinite;
  will-change: transform;
}

.sponsors__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sponsors-logo-gap);
  padding-right: var(--sponsors-logo-gap);
}

.sponsors__logo {
  height: clamp(78px, 7vw, 96px);
  width: auto;
  max-width: 220px;
  flex: 0 0 auto;
  object-fit: contain;
}

@keyframes sponsors-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.projects {
  background: var(--color-cream);
  padding: 5rem 2rem;
}

.projects__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.projects__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--color-slate);
  text-align: center;
  margin: 0 0 3rem 0;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.projects__card {
  border-radius: 14px;
  padding: 3rem 2rem;
  aspect-ratio: 16 / 10;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  --overlay: linear-gradient(#14181a26, #14181a40);
  background-color: var(--card-fallback);
  background-image: var(--overlay), var(--card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.18);
}

.projects__card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 0 0 1rem 0;
}

.projects__card-body {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 28ch;
}

.journey {
  background: var(--color-cream);
  padding: 5rem 2rem;
}

.journey__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.journey__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--color-slate);
  margin: 0 0 3rem 0;
}

.journey__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.journey__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  min-height: 280px;
  border-radius: 14px;
  color: var(--color-white);
  transition: transform 0.2s ease;
}

.journey__card:hover {
  transform: translateY(-4px);
}

.journey__card--olive {
  background: var(--color-olive);
}

.journey__card--slate {
  background: var(--color-slate);
}

.journey__card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  margin: 0 0 1.5rem 0;
  line-height: 1.3;
}

.journey__card-body {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 30ch;
}

@media (max-width: 768px) {
  .testimonials {
    --testimonials-card-height: 320px;
  }

  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 4rem 1.5rem;
  }

  .hero__text {
    margin: 0 auto;
  }

  .core-teachings__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }

  .projects__grid {
    grid-template-columns: 1fr;
  }

  .projects__card {
    aspect-ratio: auto;
  }

  .testimonials__stage {
    width: min(100%, 480px);
  }

  .testimonials__card {
    width: 100%;
    left: 0;
    transform: none;
  }

  .testimonials__card--active {
    transform: none;
  }

  .testimonials__card--previous,
  .testimonials__card--next {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  .sponsors__carousel {
    width: min(100%, 680px);
  }

  .sponsors__logo {
    height: clamp(68px, 18vw, 86px);
    max-width: 190px;
  }

  .journey__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .core-teachings__grid {
    grid-template-columns: 1fr;
  }
}
</style>
