<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.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
}

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 nextTestimonial(): void {
  testimonialIndex.value = (testimonialIndex.value + 1) % testimonials.length
}

function previousTestimonial(): void {
  testimonialIndex.value = (testimonialIndex.value - 1 + testimonials.length) % testimonials.length
}

const newsletterFullName = ref('')
const newsletterEmail = ref('')

function submitNewsletter(submitEvent: Event): void {
  submitEvent.preventDefault()
  // No backend wiring yet - field values stay in component state.
  newsletterFullName.value = ''
  newsletterEmail.value = ''
}

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' },
]

interface Project {
  title: string
  description: string
  accent: 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.',
    accent: '#6b5b3c',
  },
  {
    title: 'Pilzno Work Inspired',
    description:
      "Rabbi Gerzi's program that provides the theoretical and " +
      'practical frameworks for a healthy relationship to work.',
    accent: '#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.',
    accent: '#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.',
    accent: '#5a4232',
  },
]
</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">
          <div
            v-for="(testimonial, index) in testimonials"
            :key="testimonial.name"
            class="testimonials__card"
            :class="{
              'testimonials__card--active': index === testimonialIndex,
            }"
            :data-cy="index === testimonialIndex ? 'testimonial-active' : 'testimonial-side'"
            :aria-hidden="index !== testimonialIndex"
          >
            <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__row">
          <img
            v-for="sponsor in sponsors"
            :key="sponsor.name"
            :src="sponsor.src"
            :alt="sponsor.name"
            class="sponsors__logo"
            data-cy="sponsor-logo"
          />
        </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="{ background: project.accent }"
            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="/core-teachings"
            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>

    <section class="get-involved" data-cy="get-involved">
      <div class="get-involved__card">
        <div class="get-involved__copy">
          <h2 class="get-involved__heading">Get Involved</h2>
          <p class="get-involved__subtext">
            Subscribe for updates as we release new content, chaburot and events.
          </p>
        </div>
        <form class="get-involved__form" @submit="submitNewsletter">
          <label class="get-involved__field">
            <span class="get-involved__label">Full Name</span>
            <input
              v-model="newsletterFullName"
              name="fullName"
              type="text"
              class="get-involved__input"
              autocomplete="name"
            />
          </label>
          <label class="get-involved__field">
            <span class="get-involved__label">Email Address</span>
            <input
              v-model="newsletterEmail"
              name="email"
              type="email"
              class="get-involved__input"
              autocomplete="email"
            />
          </label>
          <button type="submit" class="get-involved__submit">Submit</button>
        </form>
      </div>
    </section>

    <footer class="site-footer" data-cy="footer">
      <div class="site-footer__inner">
        <div class="site-footer__brand">
          <img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
          <div class="site-footer__social">
            <a href="#" class="site-footer__social-link" aria-label="YouTube">▶</a>
            <a href="#" class="site-footer__social-link" aria-label="Spotify">♫</a>
          </div>
        </div>
        <nav class="site-footer__links">
          <ul class="site-footer__link-column">
            <li><a href="/media">Torah Media</a></li>
            <li><a href="/about">About</a></li>
          </ul>
          <ul class="site-footer__link-column">
            <li><a href="/donate">Donate</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </nav>
      </div>
      <p class="site-footer__copyright">© Rabbi Gerzi 2025</p>
    </footer>
  </div>
</template>

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

.hero {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  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;
}

.hero__mountain {
  bottom: -2rem;
  width: 120%;
  max-width: none;
}

.hero__hiker {
  bottom: 10%;
  width: 35%;
  max-width: 480px;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.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(180px, 22vw, 320px);

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

.hero__portrait {
  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__inner {
  max-width: 960px;
  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;
  min-height: 220px;
}

.testimonials__card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 2rem;
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
}

.testimonials__card--active {
  opacity: 1;
  visibility: visible;
}

.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: 2rem;
}

.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__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3rem;
}

.sponsors__logo {
  height: 60px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.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;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.25);
}

.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;
}

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

.get-involved__card {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.get-involved__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  color: var(--color-text);
  margin: 0 0 1.25rem 0;
}

.get-involved__subtext {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 36ch;
}

.get-involved__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.get-involved__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.get-involved__label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.get-involved__input {
  background: var(--color-cream);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
}

.get-involved__input:focus {
  outline: 2px solid var(--color-slate);
  outline-offset: 2px;
}

.get-involved__submit {
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  margin-top: 0.5rem;
}

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

.site-footer {
  background: var(--color-white);
  padding: 4rem 2rem 2rem;
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__signature {
  height: 40px;
  width: auto;
}

.site-footer__social {
  display: flex;
  gap: 0.75rem;
}

.site-footer__social-link {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.site-footer__social-link:hover {
  background: var(--color-cream);
}

.site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.site-footer__link-column {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__link-column a {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
}

.site-footer__link-column a:hover {
  color: var(--color-slate);
}

.site-footer__copyright {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 4rem 1.5rem;
  }

  .hero__text {
    margin: 0 auto;
  }

  .hero__hiker {
    width: 60%;
  }

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

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

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

  .get-involved__card {
    grid-template-columns: 1fr;
    padding: 2rem;
    gap: 2rem;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

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