/* ============================================================
   ABOUT US — page-specific styles
   Extends main.css (all tokens, components, and animations
   are inherited from the shared stylesheet)
   ============================================================ */

/* Active nav link highlight */
.nav__link--active {
  color:white !important;
  background:var(--color-blue) !important;
  border-color:var(--color-warm-black) !important;
  box-shadow:2px 2px 0 var(--color-warm-black) !important;
  transform:rotate(-1.5deg);
}

/* ============================================================
   2. PAGE HERO — full-width image + overlapping callout panel
   ============================================================ */
.about-hero {
  position:relative;
  padding-bottom:var(--space-lg);
}

/* Full-bleed image */
.about-hero__image-wrap {
  position:relative;
  width:100%;
  height:70vh;
  min-height:60vh;
  max-height:520px;
  overflow:hidden;
}
.about-hero__image-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.about-hero__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, var(--color-blue-dark) 0%, rgba(0,77,117,0.35) 40%, transparent 70%);
}

/* White callout panel — overlaps the image from below */
.about-hero__panel {
  position:relative;
  z-index:2;
  background:white;
  border:5px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-2xl);
  box-shadow:8px 8px 0 var(--color-warm-black);
  margin-top:-160px;
  transform:rotate(-0.8deg);
}
/* Speech bubble tail pointing up at the image */
.about-hero__panel::after {
  content:'';
  position:absolute;
  top:-22px;
  left:50px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 14px 22px 14px;
  border-color:transparent transparent white transparent;
  filter:drop-shadow(0 -5px 0 var(--color-warm-black));
}

.about-hero__heading {
  font-family:var(--font-display);
  font-size:var(--text-4xl);
  font-weight:var(--weight-black);
  line-height:1.08;
  color:var(--color-warm-black);
  margin-bottom:var(--space-md);
  letter-spacing:-0.02em;
}
@media (min-width:900px) { .about-hero__heading { font-size:var(--text-5xl); } }
.about-hero__heading em {
  font-style:normal;
  color:var(--color-blue);
}

.about-hero__body {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  line-height:var(--leading-relaxed);
  max-width:55ch;
}

/* Two-column layout inside the panel: text + video */
.about-hero__panel-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
  align-items:center;
}
@media (min-width:1100px) {
  .about-hero__panel-grid {
    grid-template-columns:1fr 1fr;
    gap:var(--space-2xl);
  }
}

.about-hero__video {
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:3px solid var(--color-warm-black);
  box-shadow:4px 4px 0 var(--color-warm-black);
}
.about-hero__video iframe,
.about-hero__video video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Featured-in marquee inside the panel */
.about-hero__marquee {
  margin-top:var(--space-xl);
  padding-top:var(--space-lg);
  border-top:2px solid var(--color-grey-light);
}

/* ============================================================
   4. OUR MISSION — reuses homepage .mission styles,
   but swaps column order (text left, carousel right)
   ============================================================ */
.about-mission {
}
.about-mission .mission__panels {
  grid-template-columns:0.9fr 1.1fr;
}
.about-mission .mission__panel-text {
  grid-row:1 / 3;
}
.about-mission .mission__panel-main {
  grid-row:1 / 3;
}

@media (max-width:900px) {
  .about-mission .mission__panels {
    grid-template-columns:1fr;
  }
  .about-mission .mission__panel-text,
  .about-mission .mission__panel-main {
    grid-row:auto;
  }
}

/* About Café — image left, text right (default mission__panels order) */
.about-cafe-mission .mission__panel-main {
  grid-row:1 / 3;
}
.about-cafe-mission .mission__panel-text {
  grid-row:1 / 3;
}
@media (max-width:900px) {
  .about-cafe-mission .mission__panels {
    grid-template-columns:1fr;
  }
  .about-cafe-mission .mission__panel-text,
  .about-cafe-mission .mission__panel-main {
    grid-row:auto;
  }
}

/* ============================================================
   OUR STORY — full-screen video with overlay callout
   ============================================================ */
.story-video {
  position:relative;
  width:100%;
  height:85vh;
  min-height:500px;
  overflow:hidden;
  cursor:none;
}
.story-video.is-playing {
  cursor:default;
}
.story-video__bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.story-video__overlay {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  max-width:var(--max-width);
  margin:0 auto;
  left:0;
  right:0;
  padding:var(--space-3xl) var(--space-lg);
  background:none;
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out);
}
.story-video::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  pointer-events:none;
  transition:opacity var(--duration-slow) var(--ease-out);
}
.story-video.is-playing::after {
  opacity:0;
}
.story-video__overlay.is-hidden {
  opacity:0;
  transform:translateY(40px);
  pointer-events:none;
}
.story-video__callout {
  background:white;
  border:5px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-2xl);
  box-shadow:8px 8px 0 var(--color-warm-black);
  max-width:560px;
  transform:rotate(-0.5deg);
}
.story-video__callout .eyebrow {
  font-size:var(--text-base);
  margin-bottom:var(--space-sm);
}
.story-video__heading {
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  font-weight:var(--weight-black);
  color:var(--color-warm-black);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin-bottom:var(--space-md);
}
@media (min-width:900px) { .story-video__heading { font-size:var(--text-4xl); } }
.story-video__heading em {
  font-style:normal;
  color:var(--color-blue);
}
.story-video__body {
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-warm-black);
  margin-bottom:var(--space-lg);
}
.story-video__body:last-child {
  margin-bottom:0;
}

/* Custom cursor play button */
.story-video__play-cursor {
  position:fixed;
  z-index:10;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  background:var(--color-red);
  color:white;
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  padding:var(--space-sm) var(--space-lg);
  border-radius:999px;
  border:3px solid var(--color-warm-black);
  box-shadow:4px 4px 0 var(--color-warm-black);
  opacity:0;
  transform:translate(-50%, -50%) scale(0.8);
  transition:opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.story-video__play-cursor svg {
  width:18px;
  height:18px;
  fill:currentColor;
  stroke:none;
}
.story-video__play-cursor.is-visible {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.story-video.is-playing .story-video__play-cursor {
  opacity:0 !important;
}

/* Close / back button — hidden until playback */
.story-video__close[hidden] {
  display:none !important;
}
.story-video__close {
  position:absolute;
  top:var(--space-lg);
  right:var(--space-lg);
  z-index:5;
  background:white;
  border:3px solid var(--color-warm-black);
  border-radius:50%;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--color-warm-black);
  transition:transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out);
}
.story-video__close svg {
  width:22px;
  height:22px;
  color:var(--color-warm-black);
}
.story-video__close:hover {
  transform:translateY(-2px);
  box-shadow:6px 6px 0 var(--color-warm-black);
}
.story-video__close:focus-visible {
  outline:2px solid var(--color-blue);
  outline-offset:2px;
}

@media (min-width:600px) {
  .story-video__overlay {
    padding:var(--space-3xl) var(--space-2xl);
  }
}
@media (min-width:900px) {
  .story-video__overlay {
    padding:var(--space-3xl) var(--space-3xl);
  }
}
@media (max-width:900px) {
  .story-video {
    height:70vh;
    min-height:400px;
  }
  .story-video__callout {
    max-width:100%;
    padding:var(--space-lg) var(--space-xl);
  }
  .story-video__heading {
    font-size:var(--text-2xl);
    line-height:1.08;
  }
}
@media (max-width:600px) {
  .story-video {
    height:auto;
    min-height:unset;
    cursor:default;
  }
  .story-video__bg {
    position:relative;
    height:50vh;
    min-height:280px;
  }
  .story-video__overlay {
    position:relative;
    background:none;
    padding:var(--space-lg);
    transform:none;
  }
  .story-video__overlay.is-hidden {
    display:none;
  }
  .story-video__callout {
    transform:none;
  }
  .story-video__play-cursor {
    display:none;
  }
}

/* About Events — text left, stacked event cards right */
.about-events-mission .mission__panels {
  grid-template-columns:0.9fr 1.1fr;
  align-items:start;
}
.about-events-mission .mission__panel-text {
  grid-row:1 / 3;
}
.about-events__stack {
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  grid-row:1 / 3;
}
.about-events__stack .event-card {
  width:100%;
}
@media (max-width:900px) {
  .about-events-mission .mission__panels {
    grid-template-columns:1fr;
  }
  .about-events-mission .mission__panel-text,
  .about-events__stack {
    grid-row:auto;
  }
}

/* Event Accordion */
.event-accordion {
  margin-top:var(--space-md);
  margin-bottom:var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:0;
}
.event-accordion__item {
  border-bottom:2px solid var(--color-grey-light);
}
.event-accordion__item:first-child {
  border-top:2px solid var(--color-grey-light);
}
.event-accordion__trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:var(--space-md) 0;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
  text-align:left;
  transition:color var(--duration-fast) var(--ease-out);
}
.event-accordion__trigger:hover {
  color:var(--color-blue);
}
.event-accordion__trigger:focus-visible {
  outline:2px solid var(--color-blue);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.event-accordion__icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  transition:transform var(--duration-slow) var(--ease-out);
}
.event-accordion__trigger[aria-expanded="true"] .event-accordion__icon {
  transform:rotate(180deg);
}
.event-accordion__panel {
  overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out),
             opacity var(--duration-base) var(--ease-out);
  max-height:0;
  opacity:0;
}
.event-accordion__panel[hidden] {
  display:block;
  max-height:0;
  opacity:0;
}
.event-accordion__panel.is-open {
  max-height:300px;
  opacity:1;
}
.event-accordion__panel p {
  padding:0 0 var(--space-md) 0;
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-warm-black);
}

/* ============================================================
   SPLIT PANELS — reusable left/right content + images layout
   Used for Mission, Café, Story, and Events sections
   ============================================================ */
.about-split__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3xl);
  align-items:start;
}
.about-split__grid--reversed {
  direction:rtl;
}
.about-split__grid--reversed > * {
  direction:ltr;
}

.about-split--cream {
  background:var(--color-warm-white);
}

.about-split__body {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-lg);
  max-width:55ch;
}
.about-split__body--long p {
  margin-bottom:var(--space-md);
}
.about-split__body--long p:last-child {
  margin-bottom:0;
}

.about-split__list {
  list-style:none;
  margin-bottom:var(--space-xl);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.about-split__list li {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  line-height:var(--leading-relaxed);
  padding-left:var(--space-lg);
  position:relative;
}
.about-split__list li::before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-blue);
  border:2px solid var(--color-warm-black);
}

.about-split__actions {
  display:flex;
  gap:var(--space-md);
  flex-wrap:wrap;
  align-items:center;
}

/* Images — stacked or single */
.about-split__images--stacked {
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
}

.about-split__img {
  border:4px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:5px 5px 0 var(--color-warm-black);
  transition:all var(--duration-normal) var(--ease-out);
}
.about-split__img:hover {
  transform:translateY(-4px) rotate(0deg);
  box-shadow:8px 8px 0 var(--color-warm-black);
}
.about-split__img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out);
}
.about-split__img:hover img {
  transform:scale(1.03);
}

.about-split__img--tall {
  aspect-ratio:16/10;
}
.about-split__img--wide {
  aspect-ratio:3/1;
}
.about-split__img--full {
  aspect-ratio:4/3;
}

/* ============================================================
   CAFÉ HOURS TABLE
   ============================================================ */
.about-cafe__hours {
  margin-bottom:var(--space-xl);
}
.about-cafe__hours-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-sm) 0;
  border-bottom:1px solid var(--color-grey-light);
  max-width:360px;
}
.about-cafe__hours-row:last-child {
  border-bottom:none;
}
.about-cafe__hours-day {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  font-weight:var(--weight-medium);
}
.about-cafe__hours-time {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  font-weight:var(--weight-bold);
}

/* ============================================================
   8. THE PEOPLE — team member cards with more detail
   ============================================================ */
.about-people__header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:var(--space-xl);
}

.about-people__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
}

.about-person-card {
  position:relative;
  border:4px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:white;
  box-shadow:5px 5px 0 var(--color-warm-black);
  transition:all var(--duration-normal) var(--ease-out);
}
.about-person-card.is-visible:hover {
  --card-rotate:0deg;
  transform:translateX(0) translateY(-6px) rotate(0deg) scale(1);
  box-shadow:8px 8px 0 var(--color-warm-black);
}

.about-person-card__media {
  aspect-ratio:4/3;
  background:var(--color-blue-light);
  overflow:hidden;
}
.about-person-card__media img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out);
}
.about-person-card:hover .about-person-card__media img {
  transform:scale(1.05);
}

.about-person-card__info {
  padding:var(--space-lg);
  background:white;
}
.about-person-card:nth-child(1) .about-person-card__info { border-top:5px solid var(--color-red); }
.about-person-card:nth-child(2) .about-person-card__info { border-top:5px solid var(--color-blue); }
.about-person-card:nth-child(3) .about-person-card__info { border-top:5px solid var(--color-yellow); }

.about-person-card__name {
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
  margin-bottom:var(--space-xs);
}
.about-person-card__role {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  font-weight:var(--weight-medium);
  margin-bottom:var(--space-sm);
}
.about-person-card__quote {
  font-size:var(--text-base);
  color:var(--color-grey-dark);
  line-height:var(--leading-relaxed);
  font-style:italic;
}

/* Hover reveal — matches homepage "Who We Are" pattern */
@media (hover:hover) {
  .about-person-card__media {
    aspect-ratio:4/5;
  }
  .about-person-card__info {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    transition:transform var(--duration-normal) var(--ease-out);
  }
  .about-person-card__quote {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--duration-normal) var(--ease-out),
               margin var(--duration-normal) var(--ease-out);
    margin-bottom:0;
    margin-top:0;
  }
  .about-person-card__quote span {
    overflow:hidden;
  }
  .about-person-card:hover .about-person-card__quote {
    grid-template-rows:1fr;
    margin-top:var(--space-sm);
  }
}

/* ============================================================
   10. OPPORTUNITIES TO THRIVE — dark CTA section
   ============================================================ */
.about-opportunities {
  background:var(--color-blue-dark);
  color:white;
  position:relative;
  overflow:hidden;
}

.about-opportunities__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3xl);
  align-items:center;
}

.about-opportunities__body {
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-lg);
}

.about-opportunities__list {
  list-style:none;
  margin-bottom:var(--space-xl);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.about-opportunities__list li {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  line-height:var(--leading-relaxed);
  padding-left:var(--space-lg);
  position:relative;
}
.about-opportunities__list li::before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-yellow);
  border:2px solid var(--color-warm-black);
}

.about-opportunities__content {
  background:white;
  color:var(--color-warm-black);
  border:4px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-lg);
  box-shadow:5px 5px 0 rgba(0,0,0,0.3);
  transition:all var(--duration-normal) var(--ease-out);
}
.about-opportunities__content .eyebrow {
  color:var(--color-red);
  font-size:var(--text-base);
  margin-bottom:var(--space-sm);
}
.about-opportunities__content .section-heading {
  color:var(--color-warm-black);
  font-weight:var(--weight-black);
  line-height:1.08;
  margin-bottom:var(--space-md);
}
.about-opportunities__content .about-opportunities__body {
  color:var(--color-warm-black);
}
.about-opportunities__content .about-opportunities__list li {
  color:var(--color-warm-black);
}

.about-opportunities__image {
  border:4px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:5px 5px 0 rgba(0,0,0,0.3);
  aspect-ratio:4/3;
  transition:all var(--duration-normal) var(--ease-out);
}
.about-opportunities__image img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============================================================
   11. SUPPORT US — 3 card grid
   ============================================================ */
.about-support__header {
  text-align:center;
  margin-bottom:var(--space-2xl);
}
.about-support .eyebrow { color:var(--color-red); }
.about-support__subtitle {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  max-width:55ch;
  margin:0 auto;
  line-height:var(--leading-relaxed);
}

.about-support__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
}

.about-support-card {
  border:4px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-lg);
  background:white;
  box-shadow:5px 5px 0 var(--color-warm-black);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  transition:all var(--duration-normal) var(--ease-out);
}
.about-support-card.is-visible:hover {
  transform:translateY(-4px) rotate(0deg) scale(1);
  box-shadow:8px 8px 0 var(--color-warm-black);
}

.about-support-card__icon {
  width:48px;
  height:48px;
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-support-card__icon svg {
  width:24px;
  height:24px;
  transition:transform var(--duration-normal) var(--ease-bounce);
}
.about-support-card:hover .about-support-card__icon svg {
  transform:translateY(-3px) rotate(-6deg) scale(1.1);
}
.about-support-card:nth-child(1) .about-support-card__icon { background:var(--color-red-light); color:var(--color-red); }
.about-support-card:nth-child(2) .about-support-card__icon { background:var(--color-blue-light); color:var(--color-blue); }
.about-support-card:nth-child(3) .about-support-card__icon { background:var(--color-yellow-light); color:var(--color-yellow-dark); }

.about-support-card__title {
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
}
.about-support-card__text {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  line-height:var(--leading-relaxed);
  flex:1;
}

/* ============================================================
   13. EXPLORE FURTHER — dark bg, link cards
   ============================================================ */
.about-explore .eyebrow {
  text-align:center;
  color:var(--color-red);
}
.about-explore .section-heading {
  text-align:center;
  color:var(--color-warm-black);
}

.about-explore__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-lg);
}

.about-explore-card {
  background:white;
  color:var(--color-warm-black);
  border:4px solid var(--color-warm-black);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  box-shadow:5px 5px 0 rgba(0,0,0,0.3);
  transition:all var(--duration-normal) var(--ease-out);
}
.about-explore-card.is-visible:hover {
  transform:translateY(-6px) rotate(0deg) scale(1);
  box-shadow:8px 8px 0 rgba(0,0,0,0.3);
}

.about-explore-card__icon {
  width:48px;
  height:48px;
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-explore-card__icon svg {
  width:24px;
  height:24px;
  transition:transform var(--duration-normal) var(--ease-bounce);
}
.about-explore-card:hover .about-explore-card__icon svg {
  transform:translateY(-3px) rotate(-6deg) scale(1.1);
}
.about-explore-card:nth-child(1) .about-explore-card__icon { background:var(--color-blue-light); color:var(--color-blue); }
.about-explore-card:nth-child(2) .about-explore-card__icon { background:var(--color-yellow-light); color:var(--color-yellow-dark); }
.about-explore-card:nth-child(3) .about-explore-card__icon { background:var(--color-red-light); color:var(--color-red); }
.about-explore-card:nth-child(4) .about-explore-card__icon { background:var(--color-blue-light); color:var(--color-blue); }

.about-explore-card__title {
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
}
.about-explore-card__text {
  font-size:var(--text-base);
  color:var(--color-warm-black);
  line-height:var(--leading-relaxed);
  flex:1;
}

.about-explore-card .arrow-link {
  color:var(--color-blue);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
}
.about-explore-card .arrow-link span {
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.about-explore-card .arrow-link:hover {
  color:var(--color-blue-dark);
}

/* ============================================================
   RESPONSIVE — TABLET (≤900px)
   ============================================================ */
@media (max-width:900px) {
  .about-hero__heading { font-size:var(--text-3xl); }
  .about-hero__panel {
    margin-top:-80px;
    padding:var(--space-lg) var(--space-xl);
  }
  .about-hero__image-wrap { height:45vh; }

  .about-split__grid,
  .about-split__grid--reversed {
    grid-template-columns:1fr;
    direction:ltr;
    gap:var(--space-xl);
  }

  .about-people__grid {
    grid-template-columns:1fr 1fr;
  }
  .about-people__header {
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-md);
  }

  .about-opportunities__grid {
    grid-template-columns:1fr;
    gap:var(--space-xl);
  }

  .about-support__grid {
    grid-template-columns:1fr 1fr;
  }

  .about-explore__grid {
    grid-template-columns:1fr 1fr;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤600px)
   ============================================================ */
@media (max-width:600px) {
  .about-hero__heading { font-size:var(--text-2xl); }
  .about-hero__panel {
    margin-top:-48px;
    padding:var(--space-md) var(--space-lg);
    box-shadow:5px 5px 0 var(--color-warm-black);
    transform:rotate(-0.5deg);
  }
  .about-hero__panel::after { left:25px; }
  .about-hero__image-wrap { height:35vh; min-height:260px; }

  /* Reduce gap and marquee spacing inside hero panel on mobile */
  .about-hero__panel-grid { gap:var(--space-md); }
  .about-hero__marquee {
    margin-top:var(--space-md);
    padding-top:var(--space-md);
  }

  /* Mission panel text — reduce padding on small screens */
  .mission__panel-text {
    padding:var(--space-md) var(--space-lg);
  }

  /* Mission image panels — reduce min-height on small screens */
  .mission__panel-main {
    min-height:260px;
  }

  /* People section — hide prev/next nav on mobile single-column grid */
  .about-people .people__nav {
    display:none;
  }

  .about-people__grid {
    grid-template-columns:1fr;
  }

  .about-support__grid {
    grid-template-columns:1fr;
  }

  .about-explore__grid {
    grid-template-columns:1fr;
  }
}