/* tpl-about.css: GENERATED from prototype about.css (same order as the prototype head). */
/* ---- about.css ---- */
/* ==========================================================================
   Atheer Care prototype — About page styles (owner: Designer 3)
   Requires ../tokens.css + styles.css (Designer 1). Shared components (header,
   hero shell, process, cards, buttons, form, sheet, sticky bar, footer) are NOT
   restyled here. Only About-specific components live in this file.
   Rules: tokens only · logical properties only · transform/opacity motion only ·
   content visible without JS · no letter-spacing on Arabic.
   STABLE API: the facts_* spec-sheet classes may be reused by other pages
   (Designer 5, sector pages). Do not rename them.
   ========================================================================== */

/* ---------- Breadcrumb bar ----------
   IDENTICAL to the two .section_breadcrumb rules in service.css (Designer 1).
   Duplicated here only because page CSS may not link another page's CSS.
   → Proposal for Designer 1: promote to styles.css and delete both copies. */
.section_breadcrumb { background: var(--bg-page); }
.section_breadcrumb .breadcrumb_list { min-block-size: 3rem; }

/* ---------- Opening (reuses .section_hero / .hero_component shell) ---------- */
.about-hero_descriptor {                                     /* entity descriptor: a <p> under the H1 (copy G.1 #4) */
  font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 600;
  color: var(--text-accent); margin-block-start: -0.5rem;
}
.about-hero_lead { color: var(--text-primary); }            /* answer-first paragraph reads as primary text */
/* PROTOTYPE-ONLY: [[TOKEN]] placeholders in the first viewport use a system font so they don't re-wrap the
   LCP paragraph when Readex Latin swaps in (measured CLS 0.27 at 768 px with tokens, 0.003 with real values).
   Real values render in the page font; delete this rule at build. */
.about-hero_disambiguation { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); max-inline-size: 38rem; }
.about-hero_ids .hero_proof-item { max-inline-size: 100%; }
.about-hero_actions .button { flex: 1 1 auto; }
@media (min-width: 479px) { .about-hero_actions .button { flex: 0 0 auto; } }
.about-hero_visual { border-radius: var(--radius-large); overflow: hidden; }
.about-hero_visual .placeholder-media { aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .about-hero_visual .placeholder-media { aspect-ratio: 4 / 5; } }

/* ---------- Shared small helpers (page-scoped) ---------- */
.about_center { justify-content: center; }
.about_links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; margin-block-start: 0.75rem; padding: 0; list-style: none; }
.about_hub-link { margin-block-start: 1rem; }

/* ---------- Why we exist + founder block ---------- */
.why_component { display: grid; gap: var(--space-large); align-items: start; }
@media (min-width: 992px) { .why_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xlarge); } }
.why_text h2 { margin-block-start: 0.75rem; }
.why_text .text-rich-text a { min-block-size: var(--touch-min); display: inline-flex; align-items: center; }
.founder_card {
  display: grid; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
.founder_media .placeholder-media { aspect-ratio: 16 / 9; }
.founder_body { display: grid; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; }
.founder_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.founder_quote { padding-inline-start: 1rem; border-inline-start: 2px solid var(--border-subtle); color: var(--text-primary); }
.founder_quote footer { margin-block-start: 0.25rem; font-size: var(--font-size-small); color: var(--text-muted); }

/* ---------- Commitments you can check (stack as cards on mobile, copy G.1 #7) ---------- */
.principles_list { display: grid; gap: var(--gutter); padding: 0; list-style: none; }
@media (min-width: 768px) { .principles_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .principles_list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principles_item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.875rem; align-content: start;
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.principles_icon {
  inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
  border-radius: var(--radius-medium); background: var(--bg-accent-tint); color: var(--text-accent);
}
.principles_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.principles_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); align-self: center; }
.principles_detail, .principles_verify { grid-column: 1 / -1; }
.principles_detail { color: var(--text-secondary); }
.principles_verify { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); padding: 0.75rem; background: var(--bg-alt); border-radius: var(--radius-medium); }
.principles_verify-label { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }

/* ---------- Team ---------- */
.team_component { display: grid; gap: var(--space-medium); align-items: start; }
@media (min-width: 992px) { .team_component { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-large); } }
.team-lead_card { padding: 0; overflow: hidden; gap: 0; }
.team-lead_media .placeholder-media { aspect-ratio: 4 / 3; border-radius: 0; }
.team-lead_body { display: grid; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.team-lead_role { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-accent); }
.team-lead_line { color: var(--text-secondary); }
.team-lead_creds { padding-block-start: 0.5rem; border-block-start: 1px solid var(--border-subtle); color: var(--text-secondary); overflow-wrap: anywhere; }
.team-lead_creds-title { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-primary); }
.team-lead_card .card_footer { margin-block-start: 0.5rem; flex-wrap: wrap; }
.crew_block { display: grid; gap: 1rem; }
.crew_facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.crew_fact { padding: 0.75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.crew_fact dt { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); }
.crew_fact dd { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.crew_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.5rem; padding: 0; list-style: none; }
.crew_item { min-inline-size: 0; }
.crew_item figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; margin: 0; }
.crew_item code, .founder_media code, .team-lead_media code { overflow-wrap: anywhere; max-inline-size: 100%; }
.crew_item .placeholder-media { aspect-ratio: 4 / 3; border-radius: var(--radius-medium); font-size: 0.75rem; }
.crew_item figcaption { font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }
.safety_note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: start;
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.safety_icon { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.safety_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.safety_body { display: grid; gap: 0.5rem; color: var(--text-secondary); }

/* ---------- Equipment & materials (reuses .card-grid / .card / .card_icon) ---------- */
.equipment_list { display: grid; gap: 0.375rem; padding: 0; list-style: none; font-size: var(--font-size-small); overflow-wrap: anywhere; }
.equipment_spec { margin-block-start: auto; padding-block-start: 0.625rem; border-block-start: 1px dashed var(--border-subtle); font-size: var(--font-size-small); color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------- Facts: procurement spec sheet (STABLE class names; reusable) ----------
   Reads as a printed supplier-data sheet on certificate paper: dark title strip,
   label/value rows with hairlines, Western digits, LTR isolation for IDs. */
.facts_component { display: grid; gap: var(--space-medium); align-items: start; max-inline-size: 56rem; }
.facts_sheet { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-large); overflow: hidden; }
.facts_head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.875rem 1.25rem; background: var(--bg-inverse); color: var(--text-inverse);
}
.facts_title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 600; }
.facts_title .icon-embed-small { color: var(--amber-500); }
.facts_updated { font-size: var(--font-size-small); color: var(--steel-300); }
.facts_head .placeholder { color: var(--amber-500); background: var(--steel-800); border-color: var(--amber-500); }
.facts_list { margin: 0; }
.facts_row { display: grid; gap: 0.125rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--border-subtle); }
.facts_row:first-child { border-block-start: 0; }
.facts_row:nth-child(even) { background: var(--bg-alt); }
.facts_row dt { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); line-height: var(--lh-small); }
.facts_row dd { color: var(--text-primary); overflow-wrap: anywhere; min-inline-size: 0; }
.facts_row dd a[href^="tel:"] { display: inline-flex; align-items: center; min-block-size: var(--touch-min); color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
@media (min-width: 768px) {
  .facts_row { grid-template-columns: minmax(10rem, 3fr) minmax(0, 7fr); gap: 1rem; align-items: baseline; }
}
.facts_verify { display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: var(--touch-min); font-size: var(--font-size-small); }
.facts_row.is-conditional { background: var(--bg-surface); outline: 1px dashed var(--border-control); outline-offset: -6px; }
.facts_conditional-tag { display: inline-block; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.facts_side { display: grid; gap: 1rem; }        /* optional aside next to the sheet (actions, notes) */
.facts_actions { display: grid; gap: 0.625rem; }
@media (min-width: 992px) { .facts_component.has-side { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-large); max-inline-size: none; } }

/* ---------- Who we serve: link lives in the card footer, whole card clickable ---------- */
.sector_link { text-decoration: none; min-block-size: var(--touch-min); }
.sector_link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* extended hit area */
.card.is-link:focus-within .sector_link:focus-visible { outline: none; }

/* ---------- Client logos (permission-gated) ---------- */
.logos_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .logos_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logos_item {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 0.75rem;
  background: var(--bg-surface); border: 1px dashed var(--border-control); border-radius: var(--radius-medium);
}
/* Real logos (Webflow CMS image): grayscale is a static paint effect, never animated. */
.logos_item img { max-inline-size: 80%; max-block-size: 60%; object-fit: contain; filter: grayscale(1); opacity: 0.8; }
.logos_rule { margin-block-start: 1rem; display: flex; justify-content: center; }

/* ---------- For procurement: company profile ---------- */
.profile_component {
  display: grid; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
@media (min-width: 768px) { .profile_component { grid-template-columns: auto minmax(0, 1fr); } }
@media (min-width: 992px) { .profile_component { grid-template-columns: auto minmax(0, 1fr) minmax(15rem, auto); padding: 2rem; } }
.profile_icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.profile_icon svg { inline-size: 2rem; block-size: 2rem; }
.profile_body { display: grid; gap: 0.5rem; min-inline-size: 0; }
.profile_meta { font-size: var(--font-size-small); color: var(--text-muted); overflow-wrap: anywhere; }
.profile_actions { display: grid; gap: 0.5rem; }
.profile_actions .button { inline-size: 100%; }
.profile_actions .button.is-text { justify-content: center; }
.profile_wa .icon-embed-small { color: var(--whatsapp-700); }
@media (min-width: 768px) and (max-width: 991px) { .profile_actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }