/* =============================================================================
   ABOUT.CSS — Jaipur Stone Industries
   About page: hero · company overview · founders · expertise · philosophy.
   ============================================================================= */


/* =============================================================================
   SHARED TYPOGRAPHIC PRIMITIVES
   Used across every section on this page.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Section wayfinding label
   xs, uppercase, wider tracking, muted — quieter than the accent overline
   used on the homepage. Reads as a document label, not a promotional badge.
   ----------------------------------------------------------------------------- */
.about-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}


/* -----------------------------------------------------------------------------
   Section heading
   Inter Tight Regular (400) — same editorial restraint as all inner-page
   headings. Slightly smaller than the hero title to maintain hierarchy.
   ----------------------------------------------------------------------------- */
.about-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);     /* 2rem = 32px */
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.01em;
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6) 0;
}


/* -----------------------------------------------------------------------------
   Body copy block — used in overview and philosophy sections
   sm, secondary colour, relaxed leading for comfortable prose reading.
   ----------------------------------------------------------------------------- */
.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-body p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}


/* =============================================================================
   1. ABOUT HERO
   Full-bleed 16:9 image anchored at y:0; header overlays transparently.
   Heading and supporting line centered on the image.
   ============================================================================= */

.about-hero {
  padding: 0;
  margin: 0;
  background-color: var(--color-bg-primary);
  line-height: 0;
}

.about-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  z-index: 1;
  pointer-events: none;
  line-height: normal;
}

.about-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 6vw, var(--font-size-5xl));
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
}

.about-hero__rule {
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--color-accent);
  margin-top: var(--space-1);
}

.about-hero__line {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: rgba(234, 234, 234, 0.5);
  text-align: center;
  margin: 0;
}


/* =============================================================================
   2. COMPANY OVERVIEW
   Editorial two-column: text left · image right. Uses .grid-editorial from
   layout.css for the 1fr/1fr split and centred alignment.
   ============================================================================= */

/* Section label + heading + body sit in the left column.
   No additional wrapper needed — .about-label, .about-heading, .about-body
   handle all the typography. */


/* =============================================================================
   3. FOUNDERS
   ============================================================================= */

/* Section label + optional statement above the founders row */
.about-section-intro {
  margin-bottom: var(--space-10);
}

/* Short institutional statement — smaller than the heading */
.about-leadership__statement {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 56ch;
  margin: 0;
}

/* Horizontal row of leader entries — flex, not grid.
   Each entry is fixed-width; the row grows from the left edge. */
.about-leaders-row {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

/* Single leader entry */
.about-leader {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 0 0 auto;
}

/* Portrait container — constrains the inner placeholder to a document-photo
   size: understated, not a corporate headshot. */
.about-leader__portrait {
  width: 120px;
}

/* Name + role text below the portrait */
.about-leader__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.about-leader__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.about-leader__role {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  line-height: 1;
}


/* =============================================================================
   4. GROUP EXPERTISE
   2-column text grid of label/description pairs.
   Reads like a capability document — no cards, no icons, no borders.
   ============================================================================= */

/* Intro block (label + heading) above the grid */
.about-expertise-intro {
  margin-bottom: var(--space-10);
}

/* 2 × 2 grid of expertise items */
.about-expertise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) var(--grid-gap);
}

.about-expertise-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Area label — slightly heavier than body, uppercase micro-text */
.about-expertise-item__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: 1;
}

/* Description — one or two concise sentences */
.about-expertise-item__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}


/* =============================================================================
   5. PHILOSOPHY
   Full-width container, centered composition. Typography carries the section.
   No images, no icons, no decoration.
   ============================================================================= */

/* Label + heading — centered */
.about-philosophy-intro {
  margin-bottom: var(--space-8);
  text-align: center;
}

/* Prose block — two paragraphs, centered with constrained reading width */
.about-philosophy-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

.about-philosophy-body p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}