/*
 * The Clever Impersonators — About Us Page Styles
 * assets/css/about.css
 * Loaded after global style.css (design system tokens + base components).
 */

/* Page-scoped tuning variables (token-based; no hard px guessing) */
:root{
  --about-pad-y:       calc(var(--space-20) + var(--space-5)); /* 100px */
  --about-gap:         var(--space-16);
  --about-media-nudge: calc(var(--space-6) + var(--space-6) + var(--space-4) + var(--space-4)); /* 80px */
  --about-media-max:   520px;

  --about-member-pad:  var(--space-20); /* 80px */
  --about-meet-last:   var(--space-16); /* 64px */
}

/* ===== HERO ===== */
.about-hero{
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-height);
  padding-bottom: var(--space-16);
  background: var(--color-bg-hero);
}
.about-hero .hero__content{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-6);
}
.about-hero__logomark{
  height: 64px;
  width: auto;
  margin: 0 auto var(--space-4);
  display: block;
}
.about-hero__title{
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #ffffff;
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  text-shadow: 0 0 40px rgba(46,168,199,0.4), 0 2px 30px rgba(0,0,0,0.9);
}
.about-hero__subtitle{
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* Match footer tagline exactly */
.tc-slogan{
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-teal);
  margin-top: var(--space-12);
  opacity: 0.95;
}

.section-divider--left{ margin-left: 0; margin-right: auto; }

/* Ensure divider doesn’t add “mystery” vertical space */
.page-glow-divider{ margin-block: 0; }

/* ===== Shared media card (Story + Mission) ===== */
.mission-photo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}
.mission-photo__container{
  position: relative;
  width: 100%;
  max-width: var(--about-media-max);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 30px rgba(123,63,160,0.15);
}
.mission-photo__container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mission-photo__placeholder{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.mission-photo__placeholder img{ height: 48px; width: auto; opacity: 0.3; }
.mission-photo__placeholder span{
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}
.mission-photo__caption{
  font-size: var(--text-md);
  color: var(--color-accent-purple);
  font-style: italic;
  text-align: center;
  max-width: var(--about-media-max);
  margin: var(--space-4) 0 0;
}

/* ===== OUR STORY ===== */
.section--our-story{
  background: #0a0f12;
  padding: var(--about-pad-y) 0;
}
.story-grid{
  display: grid;
  grid-template-columns: 58% 42%;
  gap: var(--about-gap);
  align-items: stretch; /* equal height columns */
}
.story-text,
.story-media{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.story-text .section-title-lockup{
    align-self: flex-start;
}
.story-text__separator{
  border: none;
  height: 1px;
  background: var(--color-border);
  width: 100%;
  margin: var(--space-6) 0 0;
}
.story-text__heading{
  font-size: var(--text-4xl);
  color: #ffffff;
  margin-top: var(--space-6);
  margin-bottom: 0;
}
.story-text__body{ margin-top: var(--space-8); }
.story-text__body p:not(.tc-slogan){
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.story-text__cta{
  margin-top: auto;        /* pins CTA to bottom-left */
  padding-top: var(--space-8);
}
.story-media{
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--about-media-nudge); /* drops media down to match text column */
}
.section-logo--below-media{
  max-width: 220px;
  height: auto;
  margin-top: auto; /* pushes logo toward bottom */
  opacity: 0.98;
}

/* ===== MEET THE IMPERSONATORS ===== */
.section--meet{
  background: #111318;
  padding-top: var(--about-pad-y);
  padding-bottom: 0; /* prevents “double-padding canyon” before Mission */
}
.member-block{
  padding: var(--about-member-pad) 0;
}
.section--meet .member-block:last-child{
  padding-bottom: var(--about-meet-last);
}
.member-block + .member-block{
  border-top: 1px solid var(--color-border);
}
.member-block--dark{ background: var(--color-bg-dark); }
.member-block--surface{ background: var(--color-bg-surface); }

.member-grid{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--about-gap);
  align-items: center;
}
.member-grid--reversed{ grid-template-columns: 60% 40%; }
.member-grid--reversed .member-photo-col{ order: 2; }
.member-grid--reversed .member-text-col{ order: 1; }

/* Photo column */
.member-photo-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.member-photo{
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.member-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.member-photo__initials{
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  opacity: 0.4;
  user-select: none;
}

.member-photo-label{ text-align: center; }
.member-photo-label__name{
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.member-photo-label__role{
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.member-title-lockup{ display: inline-block; }
.member-accent-bar{
  display: block;
  height: 4px;
  width: 100%;
  background: var(--member-accent, var(--color-accent-green));
  border-radius: 999px;
}

.member-bio{
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-top: 4px;
  margin-bottom: var(--space-8);
}

.member-social{
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.member-social__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.member-social__icon svg{ width: 18px; height: 18px; }

.member-text-col{
  min-width: 0;
}

.member-links{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

.member-links .btn{
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  white-space: normal;
  line-height: 1.3;
}

/* Per-member accents */
.member--green .member-photo{ border: 3px solid rgba(111,168,50,0.7); }
.member--green .member-photo:hover{
  border-color: var(--color-accent-green);
  box-shadow: 0 0 15px var(--color-accent-green), 0 0 40px rgba(111,168,50,0.4), 0 0 80px rgba(111,168,50,0.15);
}
.member--green .member-photo__initials{ color: var(--color-accent-green); }
.member--green .member-photo-label__name{ color: var(--color-accent-green); }
.member--green .member-accent-bar{ background: var(--color-accent-green); }
.member--green .member-social__icon:hover{
  color: var(--color-accent-green);
  border-color: rgba(111,168,50,0.4);
  background: rgba(111,168,50,0.08);
}

.member--red .member-photo{ border: 3px solid rgba(184,74,74,0.7); }
.member--red .member-photo:hover{
  border-color: var(--color-accent-red);
  box-shadow: 0 0 15px var(--color-accent-red), 0 0 40px rgba(184,74,74,0.4), 0 0 80px rgba(184,74,74,0.15);
}
.member--red .member-photo__initials{ color: var(--color-accent-red); }
.member--red .member-photo-label__name{ color: var(--color-accent-red); }
.member--red .member-accent-bar{ background: var(--color-accent-red); }
.member--red .member-social__icon:hover{
  color: var(--color-accent-red);
  border-color: rgba(184,74,74,0.4);
  background: rgba(184,74,74,0.08);
}

.member--teal .member-photo{ border: 3px solid rgba(46,168,199,0.7); }
.member--teal .member-photo:hover{
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 15px var(--color-accent-teal), 0 0 40px rgba(46,168,199,0.4), 0 0 80px rgba(46,168,199,0.15);
}
.member--teal .member-photo__initials{ color: var(--color-accent-teal); }
.member--teal .member-photo-label__name{ color: var(--color-accent-teal); }
.member--teal .member-accent-bar{ background: var(--color-accent-teal); }
.member--teal .member-social__icon:hover{
  color: var(--color-accent-teal);
  border-color: rgba(46,168,199,0.4);
  background: rgba(46,168,199,0.08);
}

.member--white .member-photo{ border: 3px solid rgba(208,208,208,0.7); }
.member--white .member-photo:hover{
  border-color: #ffffff;
  box-shadow: 0 0 15px #d0d0d0, 0 0 40px rgba(208,208,208,0.4), 0 0 80px rgba(208,208,208,0.15);
}
.member--white .member-photo__initials{ color: #d0d0d0; }
.member--white .member-photo-label__name{ color: #ffffff; }
.member--white .member-accent-bar{ background: #d0d0d0; }
.member--white .member-social__icon:hover{
  color: #ffffff;
  border-color: rgba(208,208,208,0.4);
  background: rgba(208,208,208,0.08);
}

/* ===== OUR MISSION ===== */
.section--mission{
  background: #111318; /* match Meet section for consistent alternation */
  padding: var(--about-pad-y) 0;
}
.mission-grid{
  display: grid;
  grid-template-columns: 42% 58%;
  gap: var(--about-gap);
  align-items: stretch;
}
.mission-media,
.mission-text{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.mission-text .section-title-lockup{
    align-self: flex-start;
}
.mission-media{
  max-width: var(--about-media-max);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--about-media-nudge); /* drops media down like Story */
}
.mission-media__logo{
  max-width: 220px;
  height: auto;
  margin: 0 auto var(--space-8);
  display: block;
}

/* Pin caption bottom-left; pin actions bottom-right */
.section--mission .mission-photo{ flex: 1; }
.section--mission .mission-photo__caption{
  margin-top: auto;               /* pins caption at bottom */
  padding-top: var(--space-6);
}

.mission-text__separator{
  border: none;
  height: 1px;
  background: var(--color-border);
  width: 100%;
  margin: var(--space-6) 0 0;
}
.mission-text__heading{
  font-size: var(--text-4xl);
  color: #ffffff;
  margin-top: var(--space-6);
  margin-bottom: 0;
}
.mission-text__body{ margin-top: var(--space-8); }
.mission-text__body p:not(.tc-slogan){
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.mission-text__actions{
  margin-top: auto;     /* pins actions at bottom */
  padding-top: var(--space-8);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ===== SPONSOR CTA ===== */
.section--sponsor{
  position: relative;
  background: var(--color-bg-card);
  padding: var(--space-20) 0;
  overflow: hidden;
}

.section--sponsor::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(46,168,199,0.08) 0%, rgba(123,63,160,0.08) 100%);
  pointer-events: none;
}

.sponsor-inner{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.sponsor-overline{
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent-teal);
  margin-bottom: var(--space-5);
}

.sponsor-heading{
  font-size: var(--text-3xl);
  color: #ffffff;
  margin-bottom: var(--space-6);
}

.sponsor-body{
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-10);
}

.sponsor-cta-btn{
  margin-bottom: var(--space-5);
}

.sponsor-email{
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.sponsor-email a{
  color: var(--color-accent-teal);
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .story-grid,
  .mission-grid{
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .member-grid,
  .member-grid--reversed{
    grid-template-columns: 35% 65%;
  }
}

@media (max-width: 768px){
  :root{
    --about-pad-y:       calc(var(--space-16) + var(--space-4)); /* 80px */
    --about-media-nudge: var(--space-6);
  }

  .about-hero{
    min-height: 40vh;
    padding-bottom: var(--space-10);
  }
  .about-hero__title{
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .story-grid,
  .mission-grid{
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .mission-media__logo,
  .section-logo--below-media{
    max-width: 180px;
  }

  .member-grid,
  .member-grid--reversed{
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .member-grid--reversed .member-photo-col{ order: unset; }
  .member-grid--reversed .member-text-col{ order: unset; }

  .member-photo{
    width: 200px;
    height: 200px;
  }

  .mission-text__actions{ justify-content: center; }
  .member-links{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .member-photo{ width: 160px; height: 160px; }

  .member-links{
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .mission-text__actions{
    flex-direction: column;
    align-items: center;
  }
}