/**
 * About page styles.
 * Loaded only on /about — page-specific styles that do not belong in site.css.
 *
 * Relies on site.css for: custom properties, section system, buttons, skip-link,
 * nav, footer, and all shared utilities.
 * Follows CUBE CSS methodology: Composition, Utility, Block, Exception.
 *
 * Responsive Breakpoints (Desktop-First):
 * - Desktop:       1025px+ (base styles, no media query)
 * - Laptop:        max-width: 1024px
 * - Tablet:        max-width: 768px
 * - Large Mobile:  max-width: 580px  (content-driven: portrait scaling threshold)
 * - Tech Stack:    max-width: 570px  (content-driven: fifth icon in Section 3 wraps to second row / tooltip clips viewport)
 * - Mobile:        max-width: 480px
 */

/* ==========================================================================
   Page-Specific Custom Properties
   ========================================================================== */

:root {
  /**
   * Portrait column width — shared between the hero grid column and the portrait's
   * max-width so both values stay in sync if the portrait size is ever adjusted.
   * Used in: .about-hero__layout (grid-template-columns) and .about-hero__portrait (max-width).
   */
  --about-portrait-width: 540px;
}

/* ==========================================================================
   Composition — Layout Structure
   ========================================================================== */

/* Section 1, Hero layout — two-column asymmetric grid: photo | text */
.about-hero__layout {
  display: grid;
  grid-template-columns: var(--about-portrait-width) 1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Section 2, Story layout — single editorial column */
.about-story__layout {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Section 3, Platforms layout — single editorial column, matches story width */
.about-platforms__layout {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Section 4, Beyond layout — heading above 3-column card grid */
.about-cards__layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Section 5, CTA layout — centered text block */
.about-cta__layout {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ==========================================================================
   Utility — Single-Purpose Classes
   ========================================================================== */

/* (none added yet) */

/* ==========================================================================
   Block — Section 1: The Mission, Hero
   ========================================================================== */

/* Photo column — positioned context for gaze element */
.about-hero__photo-col {
  position: relative;
}

/* Picture element — block so it participates in grid flow */
.about-hero__picture {
  display: block;
  position: relative;
  isolation: isolate; /* Contain the z-index: -1 pseudo within this context */
}

/**
 * Wavy highlighter border on the portrait.
 *
 * Technique: ::before pseudo-element with tertiary background sits behind the
 * portrait (z-index: -1). An SVG filter (defined in about.php) uses feTurbulence
 * to generate organic fractal noise, then feDisplacementMap warps the element's
 * pixels based on that noise — creating irregular, hand-drawn waves on all four
 * edges uniformly.
 *
 * Tuning knobs (in the about.php SVG filter definition):
 * - baseFrequency: higher = more, smaller waves (try 0.02–0.05)
 * - scale: displacement intensity — higher = more dramatic edge wobble
 * - seed: changes the random wave pattern without affecting other values
 * - inset (here): controls overall border thickness
 */
.about-hero__picture::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -1;
  background-color: var(--color-bg-navy); /* navy canvas (was --color-tertiary, repurposed to azure in task 6.0) */
  /* Filter defined in about.php <defs id="wavy-portrait-edge"> */
  filter: url('#wavy-portrait-edge');
}

/**
 * Portrait image — scales responsively within its 540px column.
 *
 * height: auto is required here (and on any responsive img with HTML width/height
 * attributes). The HTML attributes reserve layout space before the image loads
 * (prevents layout shift), but without height: auto the browser treats that
 * reserved height as a fixed pixel value that never scales down. The two work
 * together: HTML attributes for layout reservation, height: auto for proportional
 * scaling as width changes.
 */
.about-hero__portrait {
  max-width: var(--about-portrait-width);
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/**
 * Spark cluster — decorative SVG accent partially overlapping the left edge
 * of the portrait. Desktop only: hidden at 1024px and below via responsive block.
 *
 * translate(-65%) shifts the cluster so ~65% of its width sits left of the
 * portrait edge and ~35% overlaps, creating a natural framing accent.
 */
.about-hero__gaze {
  position: absolute;
  left: 0;
  top: 8%;
  transform: translateX(-65%);
  width: 180px;
  pointer-events: none;
}

.about-hero__gaze-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Text column — flex column with consistent vertical rhythm */
.about-hero__text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Eyebrow label — orange, uppercase, tight tracking (matches section__eyebrow) */
.about-hero__eyebrow {
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: 0;
}

/**
 * Hero h1 headline — DM Serif Display (var(--font-accent)) per PRD req 10.
 * Weight 400 is the only available weight for DM Serif Display.
 */
.about-hero__headline {
  font-family: var(--font-accent);
  font-size: var(--font-size-6xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text-light);
  margin-bottom: 0;
}

/* Body copy — muted cream, comfortable line height */
.about-hero__body {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-muted-dark);
  margin-bottom: 0;
}

/* ==========================================================================
   Block — Section 2: The Story
   ========================================================================== */

/* Section heading */
.about-story__heading {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
  margin-bottom: 0;
}

/* Body paragraphs — comfortable reading rhythm */
.about-story__body {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-dark);
  margin-bottom: 0;
}

/**
 * Pull quote — editorial blockquote with orange left border accent.
 * DM Serif Display (var(--font-accent)) gives it an authoritative, personal feel.
 * Margin-top/bottom adds extra breathing room beyond the layout gap.
 */
.pull-quote {
  font-family: var(--font-accent);
  font-size: var(--font-size-3xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text-dark);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
}

.pull-quote p {
  margin: 0;
}

/* Attribution credit — small, non-italic, de-emphasized */
.pull-quote cite {
  display: block;
  font-family: var(--font-base);
  font-size: var(--font-size-small);
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-top: var(--space-sm);
}

/* Cartoon illustration — centered block, max-width 720px */
.about-story__illustration {
  display: block;
  margin: var(--space-sm) auto;
}

/* height: auto required — see comment on .about-hero__portrait for the full explanation */
.about-story__illustration-img {
  display: block;
  max-width: 720px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   Block — Section 3: Choosing the Right Approach
   ========================================================================== */

/* Section h2 heading */
.about-platforms__heading {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
  margin-bottom: 0;
}

/* Section h3 subheading — introduces the tech stack icon group */
.about-platforms__subheading {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-light);
  margin-bottom: 0;
  margin-top: var(--space-sm);
}

/* Body paragraphs — comfortable reading rhythm */
.about-platforms__body {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-muted-dark);
  margin-bottom: 0;
}

/* Quiet closing line below the icon group — de-emphasized aside */
.about-platforms__quiet {
  font-size: var(--font-size-tiny);
  font-style: italic;
  color: var(--color-text-muted-dark);
  text-align: center;
  margin: 5.8rem 0 0;
}

/**
 * Tech stack icon group — flex row, centered, consistent gap.
 * SVG brand colors are baked into each file — no fill overrides needed.
 */
.about-platforms__tech-stack {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/**
 * Tech card wrapper — positions the description tooltip relative to the icon.
 * This is the stagger animation target (direct child of .about-platforms__tech-stack).
 */
.about-platforms__tech-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon wrapper — sized for visual presence */
.about-platforms__tech-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  cursor: default;
}

/* Size the inline SVG to fill its wrapper */
.about-platforms__tech-icon svg {
  width: 100%;
  height: 100%;
}

/**
 * Tech description tooltip — absolutely positioned below the icon so it
 * doesn't affect the flex row layout. Hidden by default; shown on hover/focus.
 * aria-hidden="true" in markup — supplemental visual info, not needed by SR.
 */
.about-platforms__tech-desc {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-light);
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.about-platforms__tech-card:hover .about-platforms__tech-desc,
.about-platforms__tech-card:focus-within .about-platforms__tech-desc {
  opacity: 1;
}

/**
 * Icon scale + description slide-up on hover/focus.
 * Suppressed under prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
  .about-platforms__tech-icon {
    transition: transform 200ms ease;
  }

  /* Add vertical entrance offset; overrides the base translateX(-50%) centering */
  .about-platforms__tech-desc {
    transform: translateX(-50%) translateY(4px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .about-platforms__tech-card:hover .about-platforms__tech-icon,
  .about-platforms__tech-card:focus-within .about-platforms__tech-icon {
    transform: scale(1.15);
  }

  .about-platforms__tech-card:hover .about-platforms__tech-desc,
  .about-platforms__tech-card:focus-within .about-platforms__tech-desc {
    transform: translateX(-50%) translateY(0);
  }
}

/* ==========================================================================
   Block — Section 4: Beyond the Code
   ========================================================================== */

/* Section heading */
.about-cards__heading {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xl);
}

/* 3-column card grid */
.about-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/**
 * Discovery card — relative positioning context for the SVG border overlay.
 * Padding provides inner breathing room; the SVG border sits on top via absolute
 * positioning and does not affect the card's layout dimensions.
 */
.discovery-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Card heading */
.discovery-card__heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* Card body paragraphs */
.discovery-card__body {
  font-size: var(--font-size-base);
  line-height: 1.75;
  margin: 0;
}

/**
 * Hand-drawn dashed border via inline SVG (.discovery-card__border in about.php).
 *
 * Each card's SVG contains two <path> elements with the same coordinates:
 * - .discovery-card__border-dash: dashed stroke, visible at rest
 * - .discovery-card__border-draw: solid stroke, animates in on hover
 *   (stroke-dashoffset starts at 400 — the full path length — making it
 *   invisible, then transitions to 0 as the border is "drawn")
 *
 * On hover: the dashed path fades out while the solid path draws in.
 * Each card has slightly different path coordinates and dash rhythms so
 * the borders look individually hand-drawn.
 *
 * preserveAspectRatio="none" lets the paths stretch to any card height without
 * a fixed aspect ratio. Path length is ~385 SVG units; 400 is used as a safe
 * overestimate for stroke-dasharray/stroke-dashoffset.
 *
 * See knowledge/system/design-decisions.md (SVG Border Technique) for full rationale.
 */

/* SVG border container — stretched to match card bounds */
.discovery-card__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Dashed path — rest state */
.discovery-card__border-dash {
  fill: none;
  stroke: var(--color-primary);
}

/* Draw-in path — starts invisible, animates in on hover */
.discovery-card__border-draw {
  fill: none;
  stroke: var(--color-primary);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

@media (prefers-reduced-motion: no-preference) {
  .discovery-card__border-dash {
    transition: opacity 200ms ease;
  }

  .discovery-card__border-draw {
    transition: stroke-dashoffset 600ms ease;
  }

  .discovery-card:hover .discovery-card__border-dash {
    opacity: 0;
  }

  .discovery-card:hover .discovery-card__border-draw {
    stroke-dashoffset: 0;
  }
}

/* Reduced motion: snap to drawn state without animation */
@media (prefers-reduced-motion: reduce) {
  .discovery-card:hover .discovery-card__border-draw {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Block — Section 5: Closing CTA
   ========================================================================== */

/* CTA heading */
.about-cta__heading {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
  margin-bottom: 0;
}

/* CTA body copy */
.about-cta__body {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-muted-dark);
  max-width: 56ch;
  margin-bottom: 0;
}

/* Button group — flex row with gap, centered */
.about-cta__buttons {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Exception — JS animation initial states (.js class)
   ========================================================================== */

/**
 * Section 1 hero elements start hidden when JS is available.
 * hero-animations.js reveals them via the double-rAF sequence on load.
 * Without .js (JS disabled or failed): elements are fully visible by default.
 * No data-anim attributes on Section 1 — the scroll observer must not target these.
 */
.js .about-hero__eyebrow,
.js .about-hero__headline,
.js .about-hero__body,
.js .about-hero__picture {
  opacity: 0;
  transform: translateY(20px);
}

/* ==========================================================================
   Responsive — max-width: 1024px (Laptop)
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- Section 1: Hero --- */

  /* Collapse two-column grid to single column; photo stacks above text */
  .about-hero__layout {
    grid-template-columns: 1fr;
  }

  /* Center the photo column content */
  .about-hero__photo-col {
    display: flex;
    justify-content: center;
  }

  /* Hide the gaze element at laptop/tablet/mobile — desktop only */
  .about-hero__gaze {
    display: none;
  }

  /* --- Section 3: Beyond the Code --- */

  /*
   * 2+1 arrangement: two cards side-by-side in the first row, third card
   * centered below at half the grid width so it doesn't stretch full-width.
   */
  .about-cards__grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-cards__grid .discovery-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

}

/* ==========================================================================
   Responsive — max-width: 768px (Tablet)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Section 2: The Story --- */

  /* Constrain the picture element to match the img's max-width so both share the same bounds */
  .about-story__illustration {
    max-width: 720px;
    width: 100%;
  }

  /* --- Section 3: Beyond the Code --- */

  /* Single column at tablet — remove the 2+1 centering constraint */
  .about-cards__grid {
    grid-template-columns: 1fr;
  }

  .about-cards__grid .discovery-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  /* --- Section 4: Closing CTA --- */

  /* Buttons stack vertically at tablet */
  .about-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

}

/* ==========================================================================
   Responsive — max-width: 580px (Large Mobile / Landscape Phone)
   ========================================================================== */

/* --- Section 1: Hero --- */

/*
 * Cap portrait and its picture wrapper at 380px (~65% of viewport) so the portrait
 * doesn't dominate the screen at this size. Constraining the picture element keeps
 * the ::before pseudo-element (wavy border) aligned to the portrait bounds.
 * The border inset is also reduced from 24px to 16px to stay proportional at the
 * smaller portrait size.
 */
@media (max-width: 580px) {
  .about-hero__picture {
    max-width: 380px;
    width: 100%;
  }

  .about-hero__portrait {
    max-width: 380px;
  }

  .about-hero__picture::before {
    inset: -16px;
  }

  /* --- Section 3: Choosing the Right Approach --- */

  /*
   * Reveal text on Tech Stack is visible at this breakpoint so Quiet closing line
   * doesn't need as much margin.
   */

  /* Quiet closing line below the icon group — de-emphasized aside */
  .about-platforms__quiet {
    margin: 1.2rem 0 0;
  }
}  

/* ==========================================================================
   Responsive — max-width: 570px (Tech Stack Wrap Threshold)
   ========================================================================== */

/*
 * Two issues converge in this range:
 * - At 567px, the fifth icon's tooltip (position: absolute, centered via translateX(-50%))
 *   extends past the right edge of the viewport.
 * - At 559px, the fifth icon wraps to a second row and the tooltip overlaps icons below it.
 * Hover tooltips also don't work on touch devices.
 *
 * A single breakpoint at 570px covers both. Fix: switch the description to static
 * positioning so it sits in normal document flow below its icon — always visible,
 * never overlapping adjacent rows or clipping the viewport.
 *
 * No separate fix is needed for the third-row breakpoint (~343px): once the
 * description is static, it flows naturally regardless of how many rows form.
 */
@media (max-width: 570px) {

  /* --- Section 3: Tech Stack --- */

  /* Release the card from its relative positioning context — no longer needed
     once the description is in flow rather than absolutely positioned */
  .about-platforms__tech-card {
    align-items: center;
  }

  /* Switch from absolute tooltip to always-visible static label below the icon */
  .about-platforms__tech-desc {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    width: 120px;
    margin-top: var(--space-xs);
  }

  /* Cancel the reduced-motion and animation overrides that target the absolute state */
  .about-platforms__tech-card:hover .about-platforms__tech-desc,
  .about-platforms__tech-card:focus-within .about-platforms__tech-desc {
    transform: none;
  }

}

/* ==========================================================================
   Responsive — max-width: 480px (Mobile)
   ========================================================================== */

/* (No additional Section 1 overrides at 480px) */