/* =========================
   About – 2025 production styles (matches ToS + CLS-safe)
   ========================= */

/* ---- Theme tokens (align with ToS/contact) ---- */
.about-section{
  --primary-color: var(--primary-color, #1F2F40);
  --secondary-color: var(--secondary-color, #426A80);
  --accent-color: var(--accent-color, #FF6B35);
  --page-bg:  var(--page-bg-color, #F7F8FB);
  --surface:  var(--surface-color, #FFFFFF);
  --text:     #13202C;
  --muted:    #5A6B7C;
  --link:     #053F7A;
  --link-hover: var(--accent-color);
  --border:   rgba(31,47,64,.10);
  --shadow-1: 0 10px 30px rgba(0,0,0,.06);
  color-scheme: light dark;
}

/* ---- Wrapper (same spacing as ToS) ---- */
.about-section{ padding: clamp(16px, 2vw, 32px); background: var(--page-bg); }

/* ---- Optional breadcrumb / jump nav ---- */
.breadcrumb{ font-size:.95rem; color:var(--muted); }
.breadcrumb a{ color:var(--link) !important; text-decoration:underline; text-underline-offset:2px; }
.breadcrumb a:hover{ color:var(--link-hover) !important; }

.about-nav{ max-width:min(100%,1100px); margin:0 auto 12px; padding:0 12px; }
.about-nav ul{ display:flex; flex-wrap:wrap; gap:8px 14px; list-style:none; padding:0; margin:0 0 8px; }
.about-nav a{
  text-decoration:none !important; border:1px solid rgba(31,47,64,.12);
  border-radius:999px; padding:8px 12px; font-weight:700;
  background:#F7FAFE; color:var(--link) !important;
}
.about-nav a:hover{ background:#EDF6FF; color:var(--link-hover) !important; }
.about-nav a:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent-color) 55%, transparent); outline-offset:2px; border-radius:999px; }

/* ---- Card (exact ToS container width/padding/radius/shadow) ---- */
.about-content{
  max-width:min(100%,1100px); margin:0 auto;
  padding: clamp(16px, 2.5vw, 32px);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  text-wrap: pretty;
}

/* ---- Images (CLS-safe) ---- */
.about-hero{
  display:block; width:100%; max-width:500px;
  aspect-ratio: 500 / 281; height:auto; /* space reserved */
  border-radius:16px; margin:0 auto 16px; background:#EEF3F8;
}
.about-content img:not(.about-hero){
  display:block; width:100%; max-width:500px; height:auto; border-radius:12px; margin:10px auto;
}
/* Optional aspect-ratio helpers for other images */
.ar-16-9{ aspect-ratio:16/9; } .ar-4-3{ aspect-ratio:4/3; } .ar-1-1{ aspect-ratio:1/1; }

/* ---- Title & copy (match ToS) ---- */
.about-title{
  text-align:center; font-weight:800; color:var(--primary-color);
  margin:0 0 clamp(16px, 2vw, 24px);
  line-height:1.2; font-size:clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing:-0.3px;
}
.about-content p{
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height:1.8; color:var(--text); margin:0 0 18px;
}

/* ---- Headings ---- */
.about-content h2{
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
  color:var(--primary-color);
  margin:clamp(22px, 3vw, 30px) 0 12px;
  line-height:1.3; position:relative; scroll-margin-top:90px;
}
.about-content h2::after{
  content:""; position:absolute; left:0; bottom:-8px;
  width:56px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent-color), rgba(212,160,25,.2));
}

/* ---- Lists (bullets ON by default to match ToS) ---- */
.about-content ul, .about-content ol{ margin:12px 0 20px 1.25rem; padding:0; }
.about-content li{ margin:6px 0; color:#223; line-height:1.7; }
.about-content ul.list-none{ list-style:none; margin-left:0; }
.about-content ul.list-dots{ list-style:disc outside; }
.about-content ol.list-decimal{ list-style:decimal outside; }

/* ---- Badges / social chips ---- */
.about-badges{ margin:8px 0 18px; }
.badge{
  display:inline-block; padding:.28rem .6rem; border-radius:999px;
  background:#F1F5F9; color:#1F2F40; font-weight:700; font-size:.88rem;
  margin:0 .4rem .4rem 0; border:1px solid rgba(31,47,64,.06);
}
.about-social{ list-style:none; padding:0; margin:12px 0 18px; }
.about-social li{ display:inline-block; margin:0 10px 10px 0; }
.about-social a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid rgba(31,47,64,.12); border-radius:999px;
  font-weight:700; text-decoration:none !important; color:var(--link) !important; background:#F7FAFE;
}
.about-social a:hover{ background:#EDF6FF; color:var(--link-hover) !important; }
.about-social a:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent-color) 55%, transparent); outline-offset:2px; border-radius:999px; }

/* ---- Links (override globals; keep readable) ---- */
.about-section a, .about-content a{
  color:var(--link) !important; font-weight:700; text-decoration:underline; text-underline-offset:2px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.about-section a:hover, .about-content a:hover{ color:var(--link-hover) !important; text-decoration-color: currentColor; }
.about-content a:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent-color) 55%, transparent); outline-offset:2px; border-radius:4px; }

/* ---- Buttons (if used) ---- */
.about-section button, .about-section .btn{
  color:#FFF !important; background:var(--primary-color) !important; border:none; padding:10px 18px;
  border-radius:10px; font-weight:800; text-decoration:none !important;
}
.about-section .btn--outline{ background:transparent !important; color:var(--primary-color) !important; border:2px solid var(--primary-color) !important; }

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark){
  .about-section{
    --page-bg:#0E1522; --surface:#0F1B2C; --text:#E6EEF8; --muted:#93A1B5;
    --border:rgba(255,255,255,.12); --link:#7FB4FF; --link-hover:#FF9A72;
    --shadow-1:0 12px 34px rgba(0,0,0,.40);
  }
  .about-content{ box-shadow: var(--shadow-1); }
  .badge{ background:#0E1726; color:#E6EEF8; border:1px solid rgba(255,255,255,.12); }
  .about-nav a, .about-social a{ background:#0E1726; border-color:rgba(255,255,255,.12); }
  .about-nav a:hover, .about-social a:hover{ background:#102036; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: no-preference){
  .about-content{ animation: aboutFadeIn .35s ease-out both; }
  @keyframes aboutFadeIn{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform: translateY(0) } }
}

/* ---- Print ---- */
@media print{
  .about-section{ background:#fff; padding:0; }
  .about-content{ box-shadow:none; border:none; padding:0; }
  .about-content a{ text-decoration:none; }
}