/* ==========================================================================
   VIKA — About page (Areas/Home/Views/About/Index.cshtml)
   Relies on vika.css + vika-inner.css
   ========================================================================== */

.about-us-container { position: relative; z-index: 1; }
.about-us-container > section { position: relative; padding-block: var(--sp-9); border-block-start: 1px solid var(--glass-border); }

/* section titles (the original markup uses .section-title; sized down + centred here) */
.about-us-container .section-title {
  text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-block-end: var(--sp-8);
}
.about-us-container .section-title::after {
  content: ""; display: block; width: 64px; height: 2px; margin: var(--sp-4) auto 0;
  background: linear-gradient(90deg, var(--c-gold-dim), var(--c-gold-bright), var(--c-gold-dim));
}

/* ---------- hero ---------- */
.about-us-container > .about-hero-section { border-block-start: 0; padding-block: var(--sp-9) var(--sp-8); overflow: hidden; }
.about-hero-section .art-rings { inset-inline-end: -4%; opacity: 0.55; }
.about-hero-section .container, .about-hero-section .about-container { position: relative; z-index: 2; }
/* the En / Ar / Ru views wrap sections in .about-container instead of .container */
.about-container { width: min(100% - 2 * var(--sp-5), var(--container)); margin-inline: auto; }
.hero-content { max-width: 820px; margin-inline: auto; text-align: center; }
.hero-title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 500; line-height: 1.3; margin-block-end: var(--sp-4); }
.hero-subtitle { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--fg-muted); margin-block-end: var(--sp-6); }

.company-info { margin-block: var(--sp-7); padding: var(--sp-6) var(--sp-6); }
.company-name { font-size: 1.3rem; font-weight: 500; color: var(--accent); margin-block-end: var(--sp-5); }
.company-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); }
.about-us-container .stat-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 120px; }
.about-us-container .stat-label { font-size: 0.75rem; letter-spacing: 0.05em; color: var(--fg-faint); }
.about-us-container .stat-value { font-family: var(--font-en); font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1.3; }

.hero-description { color: var(--fg-muted); font-size: 1rem; line-height: 2.1; text-align: justify; text-align-last: center; }

/* ---------- video ---------- */
.video-wrapper {
  max-width: 920px; margin-inline: auto; overflow: hidden; background: #000;
  border: 1px solid var(--glass-border); box-shadow: 0 24px 60px oklch(0% 0 0 / 0.45);
}
.video-embed, .video-player { position: relative; aspect-ratio: 16 / 9; }
.video-embed iframe, .video-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-fallback { display: grid; place-items: center; height: 100%; padding: var(--sp-5); text-align: center; color: var(--fg-muted); }
.video-fallback a { color: var(--accent); word-break: break-all; }

/* ---------- stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); }
.stat-card { padding: var(--sp-7) var(--sp-5); text-align: center; transition: transform var(--t-med), border-color var(--t-med); }
.stat-card:hover { transform: translateY(-6px); border-color: oklch(74% 0.09 85 / 0.4); }
.stat-number {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    margin-block-end: var(--sp-2);
    background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright), var(--c-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
}
.stat-title {
    font-size: 0.9rem;
    color: var(--fg-muted);
    text-align: center;
}

/* ---------- mission & vision ---------- */
.mission-vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-6); }
.mission-card, .vision-card { padding: clamp(var(--sp-5), 3.5vw, var(--sp-7)); transition: border-color var(--t-med); }
.mission-card:hover, .vision-card:hover { border-color: oklch(74% 0.09 85 / 0.4); }
.card-header { display: flex; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-5); padding-block-end: var(--sp-4); border-block-end: 1px solid var(--glass-border); }
.card-icon {
  flex: 0 0 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid oklch(74% 0.09 85 / 0.5); color: var(--accent); font-size: 1.15rem;
  background: oklch(74% 0.09 85 / 0.06);
}
.card-title { font-size: 1.3rem; font-weight: 500; margin: 0; }
.card-content { color: var(--fg-muted); font-size: 0.95rem; line-height: 2.1; text-align: justify; }

/* ---------- values ---------- */
.values-content { max-width: 800px; margin-inline: auto; }
.values-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-7); padding: 0; margin: 0; list-style: none; }
.values-list li { display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-4); border-block-end: 1px solid var(--glass-border); }
.value-icon {
  flex: 0 0 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--accent); color: var(--accent); font-size: 0.7rem;
}
.value-text { font-size: 1rem; color: var(--fg); }
.values-text { text-align: center; color: var(--fg-muted); font-size: 1rem; line-height: 2.1; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .about-us-container > section { padding-block: var(--sp-8); }
  .about-us-container > .about-hero-section { padding-block: var(--sp-8) var(--sp-7); }
  .company-info { padding: var(--sp-5) var(--sp-4); }
  .company-stats { flex-direction: column; align-items: center; gap: var(--sp-4); }
  .mission-vision-grid { grid-template-columns: 1fr; }
  .values-list { grid-template-columns: 1fr; }
  .card-content, .hero-description { text-align: start; text-align-last: auto; }
}