/* ============================================
   About Page Typography System
   3-Tier Token Architecture: Primitives → Semantic → Components
   ============================================ */

/* ============================================
   TIER 1: PRIMITIVE TOKENS
   Base font families and color palette
   ============================================ */

:root {
  /* Font Families */
  --font-serif: 'Playfair Display', serif;
  --font-sans-heading: 'Kanit', sans-serif;
  --font-sans-heading-alt: 'Prompt', sans-serif;
  --font-sans-body: 'Inter', sans-serif;

  /* Color Palette (from existing site) */
  --color-mint: #A8DCD1;
  --color-coral: #F5D5D8;
  --color-lavender: #E5D9F2;
  --color-cream: #FFF8DC;
  --color-teal: #6BA5A3;

  /* Text Colors */
  --text-primary: #2C2C2C;
  --text-secondary: #5A5A5A;

  /* Font Weights */
  --weight-light: 400;
  --weight-regular: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ============================================
   TIER 2: SEMANTIC TOKENS
   Responsive type sizing using clamp()
   ============================================ */

:root {
  /* Display Typography (Hero, Major Statements) */
  --type-display-family: var(--font-serif);
  --type-display-size: clamp(2.5rem, 6vw, 4rem);
  --type-display-weight: 700;
  --type-display-line-height: 1.2;

  /* Heading Typography (Section Labels, Metadata) */
  --type-heading-family: var(--font-sans-heading);
  --type-heading-size: clamp(1.25rem, 3vw, 1.75rem);
  --type-heading-weight: 600;
  --type-heading-line-height: 1.4;

  /* Body Typography (Main Narrative Text) */
  --type-body-family: var(--font-sans-body);
  --type-body-size: clamp(1rem, 2vw, 1.125rem);
  --type-body-weight: 400;
  --type-body-line-height: 1.8;

  /* Emphasis Typography (Key Concepts, Italic) */
  --type-emphasis-family: var(--font-serif);
  --type-emphasis-size: clamp(1.125rem, 2.5vw, 1.375rem);
  --type-emphasis-weight: 400;
  --type-emphasis-line-height: 1.6;

  /* Label Typography (Timestamps, Metadata) */
  --type-label-family: var(--font-sans-body);
  --type-label-size: clamp(0.75rem, 1.5vw, 0.875rem);
  --type-label-weight: 500;
  --type-label-line-height: 1.5;

  /* Display Typography - Bold Variant (Hero emphasis) */
  --type-display-bold-family: var(--font-serif);
  --type-display-bold-size: var(--type-display-size);
  --type-display-bold-weight: var(--weight-bold);
  --type-display-bold-line-height: 1.15;

  /* Heading Typography - Bold Variant (Section emphasis) */
  --type-heading-bold-family: var(--font-sans-heading);
  --type-heading-bold-size: var(--type-heading-size);
  --type-heading-bold-weight: var(--weight-semibold);
  --type-heading-bold-line-height: 1.3;

  /* Emphasis Typography - Bold Italic Variant (Key concepts) */
  --type-emphasis-bold-family: var(--font-serif);
  --type-emphasis-bold-size: var(--type-emphasis-size);
  --type-emphasis-bold-weight: var(--weight-semibold);
  --type-emphasis-bold-line-height: 1.6;

  /* Lead Typography (Opening paragraphs) */
  --type-lead-family: var(--font-sans-body);
  --type-lead-size: clamp(1.125rem, 2.5vw, 1.25rem);
  --type-lead-weight: var(--weight-semibold);
  --type-lead-line-height: 1.7;
}

/* ============================================
   TIER 3: COMPONENT CLASSES
   5 semantic typography classes
   ============================================ */

.type-display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  color: var(--text-primary);
}

.type-heading {
  font-family: var(--type-heading-family);
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line-height);
  color: var(--text-primary);
}

.type-body {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  color: var(--text-primary);
}

.type-emphasis {
  font-family: var(--type-emphasis-family);
  font-size: var(--type-emphasis-size);
  font-weight: var(--type-emphasis-weight);
  font-style: italic;
  line-height: var(--type-emphasis-line-height);
  color: var(--text-primary);
}

.type-label {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.type-display-bold {
  font-family: var(--type-display-bold-family);
  font-size: var(--type-display-bold-size);
  font-weight: var(--type-display-bold-weight);
  line-height: var(--type-display-bold-line-height);
  color: var(--text-primary);
}

.type-heading-bold {
  font-family: var(--type-heading-bold-family);
  font-size: var(--type-heading-bold-size);
  font-weight: var(--type-heading-bold-weight);
  line-height: var(--type-heading-bold-line-height);
  color: var(--text-primary);
}

.type-emphasis-bold {
  font-family: var(--type-emphasis-bold-family);
  font-size: var(--type-emphasis-bold-size);
  font-weight: var(--type-emphasis-bold-weight);
  font-style: italic;
  line-height: var(--type-emphasis-bold-line-height);
  color: var(--text-primary);
}

.type-lead {
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-line-height);
  color: var(--text-primary);
}

/* Thai-safe lead paragraph weight override */
:lang(th) .type-lead {
  font-weight: var(--weight-semibold); /* 600 - Thai-safe max */
}

/* ============================================
   SEMANTIC HEADINGS (H1-H4)
   Language-aware font selection via :lang() pseudo-class
   ============================================ */

/* English Headings */
h1:lang(en) {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}

h2:lang(en) {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

h3:lang(en) {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
}

h4:lang(en) {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

/* Thai Headings - Different Font Assignments */
h1:lang(th) {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}

h2:lang(th) {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}

h3:lang(th) {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}

h4:lang(th) {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}

/* Thai Body Text Adjustments */
:lang(th) {
  line-height: 1.9;
  letter-spacing: 0.2px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================
   LAYOUT COMPONENTS
   Max-width container and section structure
   ============================================ */

.about-page {
  /* Note: Padding removed - now provided by parent .content-glass-container */
  /* max-width removed - glass container handles width constraint (1400px) */
  margin: 0 auto;
}

/* Hero Section */
.about-hero {
  text-align: center;
  margin-bottom: 6rem;
}

.hero-image-container {
  aspect-ratio: 2 / 3;
  max-width: 500px;
  margin: 0 auto 2rem;
  overflow: hidden;
  border-radius: 15px;
  background-color: var(--color-mint);
}

.hero-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-family: var(--font-sans-body);
  font-size: 0.875rem;
}

.hero-greeting {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  margin-top: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-primary);
}

/* ============================================
   IMAGE-TEXT PAIRINGS
   Alternating layout sections for Z-pattern visual flow
   ============================================ */

/* T039: Base section layout */
.about-section {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 4rem;
}

/* T040: Odd sections - image on left (default) */
.about-section:nth-child(odd) {
  flex-direction: row;
}

/* T041: Even sections - image on right (alternating) */
.about-section:nth-child(even) {
  flex-direction: row-reverse;
}

/* T042: Image container sizing */
.about-image {
  flex: 0 0 45%;
  max-width: 45%;
}

/* T043: Image wrapper with aspect ratio */
.image-container {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 15px;
  background-color: var(--color-mint);
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* T044: Text content sizing */
.about-text {
  flex: 1;
}

.about-text h3 {
  margin-bottom: 1rem;
}

.about-text p {
  margin-bottom: 0.75rem;
}

/* ============================================
   ABOUT CONTENT SECTION
   Main narrative content area
   ============================================ */

.about-content {
  margin-bottom: 1rem;
}

/* ============================================
   CALL-TO-ACTION SECTION
   Concluding CTA with gradient button
   ============================================ */

/* T050: CTA section layout */
.cta-section {
  text-align: center;
  margin-top: 0;
  padding-top: 0;
}

/* Hover state for CTA link button (matches homepage style) */
.cta-section a:hover {
  background-color: var(--interactive-hover, rgba(168, 220, 209, 0.1));
  border-color: var(--interactive-hover, #8CBFB0);
  transform: translateY(-2px);
}

/* Focus state for accessibility */
.cta-section a:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 4px;
}

/* Disable transform on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-section a:hover {
    transform: none;
  }
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   Disable animations for users who prefer reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   LEGACY BROWSER SUPPORT
   Fallback for browsers without aspect-ratio support
   ============================================ */

@supports not (aspect-ratio: 2 / 3) {
  /* Padding-bottom hack for aspect ratios */
  /* Will be implemented per-component in later phases */
}

/* ============================================
   MOBILE RESPONSIVE DESIGN
   Viewport <768px adjustments for comfortable mobile reading
   ============================================ */

@media (max-width: 768px) {
  /* T030: Glass container mobile padding adjustment */
  .content-glass-container {
    padding: 3rem 5% 3rem 5% !important;
  }

  /* T031: Hero section mobile spacing */
  .about-hero {
    margin-bottom: 3rem;
  }

  /* T032, T049: Section layout - stack vertically on mobile (override alternating) */
  .about-section {
    flex-direction: column !important;
    gap: 1.5rem;
  }

  /* T033: Image adjustments - full width on mobile */
  .about-image {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* T034: CTA section mobile spacing */
  .cta-section {
    margin-top: 3rem;
    padding-top: 2rem;
  }

  /* Hero image container - slightly smaller on mobile */
  .hero-image-container {
    max-width: 400px;
  }

  /* Reduce hero greeting size slightly on mobile */
  .hero-greeting {
    margin-top: 1.5rem;
  }

  /* About content sections - better mobile spacing */
  .about-content {
    margin-bottom: 2rem;
  }

  .about-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }

  .about-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }

  .about-content p {
    margin-bottom: 1rem;
  }
}