/*
  about.css
  Styles specific to the About page: hero, values band, philosophy, and
  team sections. Section spacing itself comes from the shared
  .comrade-section utility (base.css); this file only adds what's
  unique to About. Three small shared patterns (section heading, icon
  badge, card) are defined once near the top and reused by every
  section below rather than repeated per section.
*/

/* ---- Shared: section heading ---- */
.comrade-about-section-heading {
  max-width: 640px;
  margin-bottom: var(--comrade-space-lg);
}

.comrade-about-section-heading h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--comrade-text);
}

.comrade-about-section-heading p {
  margin-top: var(--comrade-space-sm);
  font-size: 1.05rem;
  color: var(--comrade-text-muted);
}

.comrade-about-section-heading--centered {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.comrade-about-section-heading__rule {
  display: block;
  width: 40px;
  height: 3px;
  margin: var(--comrade-space-sm) auto 0;
  border-radius: var(--comrade-radius-pill);
  background-color: var(--comrade-primary);
}

/* ---- Shared: icon badge, reused by value/philosophy cards and, at a
   different size, the team avatars below ---- */
.comrade-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--comrade-surface-soft);
  border: 1px solid var(--comrade-border);
  color: var(--comrade-primary);
  transition: background-color var(--comrade-transition-hover),
    border-color var(--comrade-transition-hover);
}

.comrade-icon-badge svg {
  width: 24px;
  height: 24px;
}

/* ---- Shared: card, used by both the values grid and the philosophy
   grid. A single hover treatment (lift + burgundy border/shadow + the
   icon badge tinting) is defined once here so both grids behave
   identically. ---- */
.comrade-about-card {
  background-color: var(--comrade-surface-soft);
  border: 1px solid var(--comrade-border);
  border-radius: var(--comrade-radius-lg);
  padding: var(--comrade-space-lg);
  transition: transform var(--comrade-transition-hover),
    box-shadow var(--comrade-transition-hover),
    border-color var(--comrade-transition-hover);
}

.comrade-about-card:hover {
  transform: translateY(-4px);
  border-color: var(--comrade-primary);
  box-shadow: 0 18px 34px var(--comrade-shadow-soft);
}

.comrade-about-card:hover .comrade-icon-badge {
  background-color: var(--comrade-primary-light);
  border-color: var(--comrade-primary);
}

.comrade-about-card__title {
  margin-top: var(--comrade-space-md);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--comrade-text);
}

.comrade-about-card__description {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--comrade-text-muted);
}

/* ---- Hero ---- */
.comrade-about-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--comrade-space-xl);
  align-items: start;
}

.comrade-about-hero__headline {
  margin-top: var(--comrade-space-sm);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--comrade-text);
}

.comrade-about-hero__description {
  margin-top: var(--comrade-space-lg);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--comrade-text-muted);
}

.comrade-about-hero__quote {
  margin: var(--comrade-space-lg) 0 0;
  padding-left: var(--comrade-space-md);
  border-left: 3px solid var(--comrade-primary);
}

.comrade-about-hero__quote p {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--comrade-text);
}

/* ---- Hero orbit slot: positions the reusable safety orbit
   (components/safety-orbit.html, styled in safety-orbit.css) within
   this column. All the visualization's own appearance and motion live
   in that shared component's own files, not here. ---- */
.comrade-about-hero__orbit-slot {
  margin: 0 auto;
  width: fit-content;
}

/* ---- Values: sits on the "deep" alternating band ---- */
.comrade-about-values {
  background-color: var(--comrade-surface-deep);
}

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

/* ---- Philosophy: the section itself now lives on the Vision page
   (see vision.html), between Hero and Why -- this file just hasn't
   been split up to match. Left here rather than moved to vision.css
   to keep this change small, since .comrade-about-section-heading/
   .comrade-icon-badge/.comrade-about-card above are the same shared
   patterns Values (still on this page) also builds on; move the
   Philosophy-only pieces below to vision.css (or a shared file) if
   it needs further changes of its own.

   Sits on the "deep" band: Vision's Hero is plain, so the
   Hero/Philosophy/Why sequence needs Philosophy deep and Why plain
   to alternate -- see the comment on .comrade-vision-why in
   vision.css for the other half of that swap. */
.comrade-about-philosophy {
  background-color: var(--comrade-surface-deep);
}

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

.comrade-about-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.comrade-about-card__number {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--comrade-border-strong);
}

/* ---- Team: plain page background, not the "deep" band.

   Philosophy (the section that used to sit between Values and Team)
   has moved to the Vision page, so Team is now Values' very next
   sibling -- if Team kept the deep background it had when Philosophy
   separated the two, the page would show two deep bands back to
   back with no break, breaking the bg/deep/bg/deep rhythm the rest
   of the site alternates. Plain background here restores a clean
   bg/deep/bg alternation across Hero/Values/Team, matching how
   Vision's own Hero/Philosophy/Why now alternates too (see
   vision.html and vision.css).

   One card component (.comrade-team-card) drives every profile --
   the founder's "featured" variant and the CTO/CMO's "standard"
   variant share the same anatomy: visual on the LEFT, role/name/
   contacts/message on the RIGHT. The only real differences are scale
   -- --featured is full-width with a 300px-wide portrait and a
   readable-width-capped message column; --standard is half-width
   with a smaller 200px-wide portrait and no cap (there's no room to
   need one at that width). Both variants sit in the same container
   with the same surface/border/radius/shadow/hover/typography, so
   the three profiles read as one family at two different scales
   rather than three unrelated designs. No background-color rule here
   on purpose -- see the comment above; it sits on the page's plain
   background, same as .comrade-about-hero (also unruled) above it. */
.comrade-about-team__lead {
  margin-bottom: var(--comrade-space-md);
}

.comrade-about-team__execs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--comrade-space-md);
  /* The CTO, CMO, and Product Engineer cards stretch to match each other's height. */
  align-items: stretch;
}

/* ---- Shared card shell, used by both variants. ---- */
.comrade-team-card {
  background-color: var(--comrade-surface-soft);
  border: 1px solid var(--comrade-border);
  border-radius: var(--comrade-radius-lg);
  overflow: hidden;
  text-align: left;
  /* Grid items default to min-width: auto, which floors their size at
     the content's min-content width and lets them overflow a narrower
     grid track. */
  min-width: 0;
  transition: transform var(--comrade-transition-hover),
    box-shadow var(--comrade-transition-hover),
    border-color var(--comrade-transition-hover);
}

.comrade-team-card:hover {
  transform: translateY(-2px);
  border-color: var(--comrade-primary);
  box-shadow: 0 6px 16px var(--comrade-shadow-soft);
}

.comrade-team-card__visual {
  position: relative;
  overflow: hidden;
  background-color: var(--comrade-surface);
}

/* Calm, premium hover: a hair of further zoom, nothing dramatic, and
   it can't crop anything new -- the container's own size is
   untouched, only the image inside it scales up fractionally. No
   fade, no mask, no filter, on either variant: portraits stay sharp
   and fully visible edge to edge, at rest and on hover alike. */
.comrade-team-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(var(--comrade-team-photo-zoom, 1));
  transform-origin: var(--comrade-team-photo-focus, 50% 30%);
  transition: transform var(--comrade-transition-hover);
}

.comrade-team-card:hover .comrade-team-card__image {
  transform: scale(calc(var(--comrade-team-photo-zoom, 1) * 1.01));
}

.comrade-team-card__body {
  min-width: 0;
}

.comrade-team-card__role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--comrade-text-muted);
}

.comrade-team-card__name {
  margin-top: 0.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--comrade-text);
}

.comrade-team-card__contacts {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: var(--comrade-space-sm);
}

.comrade-team-card__contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--comrade-surface);
  border: 1px solid var(--comrade-border);
  color: var(--comrade-primary);
  transition: border-color var(--comrade-transition-hover),
    transform var(--comrade-transition-hover);
}

.comrade-team-card__contact-link svg {
  width: 15px;
  height: 15px;
}

.comrade-team-card__contact-link:hover {
  border-color: var(--comrade-primary);
  transform: translateY(-2px);
}

/* One message component for every member -- a clearly-labeled signed
   note rather than a generic pasted quote, with a hairline divider
   above it so it reads as its own section. The founder's plain
   paragraphs and the CTO's Sanskrit/transliteration/title/paragraph
   mix both go through this same block; only the per-line type (see
   about-team.html) picks a different treatment below. Renders only
   when a member actually has a message -- there is no empty/
   "coming soon" state, so the CMO's card simply ends after her
   contact icons until a message is added for her. */
.comrade-team-card__message {
  margin-top: var(--comrade-space-md);
  padding-top: var(--comrade-space-md);
  border-top: 1px solid var(--comrade-border);
}

.comrade-team-card__message-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--comrade-primary);
}

.comrade-team-card__message-text {
  margin-top: var(--comrade-space-sm);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--comrade-text-muted);
}

.comrade-team-card__message-text + .comrade-team-card__message-text {
  margin-top: 0.85rem;
}

.comrade-team-card__message-signoff {
  margin-top: var(--comrade-space-sm);
  font-size: 0.95rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  color: var(--comrade-text);
}

/* CTO-message-specific line types: the Sanskrit line is the most
   visually prominent (largest, boldest), the transliteration sits
   just under it in a smaller italic, and the English title sits
   below that at a weight between the two -- a clear read order
   without any one line competing with the heading above it. */
.comrade-team-card__message-sanskrit {
  margin-top: var(--comrade-space-sm);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--comrade-text);
}

.comrade-team-card__message-translit {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--comrade-text-muted);
}

.comrade-team-card__message-title {
  margin-top: 0.6rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--comrade-text);
}

/* ---- Featured variant: the founder. Wide editorial card, photo
   left, text right. ---- */
.comrade-team-card--featured {
  display: flex;
  align-items: flex-start;
  gap: var(--comrade-space-lg);
  padding: var(--comrade-space-lg);
}

/* The founder portrait is shown at its own intrinsic aspect ratio
   (970 / 1622 -- a tall, fully-composed studio shot) rather than
   cropped into a fixed box: the container's aspect-ratio is set to
   match the source file exactly, so there's nothing left to crop
   away. If this photo is ever swapped again, update the aspect-ratio
   to the new file's own width/height first (see about-team.html's
   comment) rather than reusing this value.

   object-fit: cover, not contain: the container's aspect-ratio is
   set to match the image exactly, so in principle contain would
   never need to letterbox -- but the browser rounds aspect-ratio's
   computed height to a real pixel, which won't land on the image's
   exact ratio to the sub-pixel, so contain was leaving a hairline
   gap (revealing the container's own background) at the top and
   bottom edge. cover always fills the box completely, so that gap
   can't appear -- and since the two ratios already match almost
   exactly, it crops nothing perceptible in exchange. */
.comrade-team-card--featured .comrade-team-card__visual {
  flex-shrink: 0;
  width: 300px;
  aspect-ratio: 970 / 1622;
  border-radius: var(--comrade-radius-md);
  border: 1px solid var(--comrade-border);
}

.comrade-team-card--featured .comrade-team-card__body {
  flex: 1;
  /* Caps the message's line length to an editorial reading width
     instead of letting it stretch the full remaining card width --
     the leftover space beside it is intentional, not a layout bug. */
  max-width: 620px;
}

.comrade-team-card--featured .comrade-team-card__name {
  font-size: 1.4rem;
}

/* ---- Standard variant: CTO / CMO. Same anatomy as the featured
   founder card -- visual on the LEFT, role/name/contacts/message on
   the RIGHT -- just at half the width and a smaller, tighter scale.
   Both cards fill their grid column edge to edge, so the only space
   between the CTO and CMO cards is the grid's own gap token, not a
   card padded out with its own centering margin. ---- */
.comrade-team-card--standard {
  display: flex;
  flex-direction: column;
  gap: var(--comrade-space-md);
  padding: var(--comrade-space-md);
}

.comrade-team-card--standard .comrade-team-card__visual {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--comrade-radius-md);
  border: 1px solid var(--comrade-border);
}

.comrade-team-card--standard .comrade-team-card__image {
  object-position: center 20%;
}

.comrade-team-card--standard .comrade-team-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.comrade-team-card--standard .comrade-team-card__name {
  font-size: 1.2rem;
}

.comrade-team-card--standard .comrade-team-card__contacts {
  margin-top: auto;
  min-height: 34px;
}

/* ---- CMO branded identity visual: there is no CMO photograph, and
   this is deliberately not a "missing image" placeholder -- a warm
   gradient, two thin concentric rings and a pair of small orbit dots
   (the same motif as the hero/about safety-orbit graphics elsewhere
   on the site) frame a neumorphic monogram disc. aria-hidden because
   it's decorative brand flourish, not information -- the member's
   name and role are already in the text right below it. ---- */
.comrade-team-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    160deg,
    var(--comrade-surface-soft),
    var(--comrade-primary-light-strong)
  );
}

/* The visual is a plain square now (matching the CTO photo's own
   frame), so the ring can use the same generous proportions on both
   axes without running out of vertical room the way it did in the
   card's previous landscape layout. */
.comrade-team-monogram__ring {
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--comrade-border-strong);
}

.comrade-team-monogram__ring::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  border: 1px solid var(--comrade-primary-light-strong);
}

.comrade-team-monogram__orbit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--comrade-primary);
}

.comrade-team-monogram__orbit-dot--a {
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
}

.comrade-team-monogram__orbit-dot--b {
  bottom: 18%;
  right: 20%;
}

.comrade-team-monogram__text {
  position: relative;
  width: 32%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--comrade-surface-soft);
  box-shadow: var(--comrade-neumo-raised);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--comrade-primary);
}