/* ============================================================
   pages/despre/css/despre.css
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.about-hero { padding:140px 0 80px; background:var(--mint); }
.about-hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.about-main-img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); display:block; }
.about-hero-img { position:relative; }
.about-badge {
  position:absolute; top:-20px; right:-20px;
  width:100px; height:100px; background:var(--amber);
  border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(245,158,11,.4);
}
.about-badge .n { font-family:var(--serif); font-size:2rem; font-weight:700; color:#fff; line-height:1; }
.about-badge .l { font-size:.5rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.about-strip {
  position:absolute; bottom:-18px; left:24px; right:24px;
  background:var(--green); border-radius:12px;
  padding:16px 22px; display:flex; align-items:center; gap:14px;
  box-shadow:0 8px 30px rgba(22,163,74,.35);
}
.about-strip-ico { font-size:1.7rem; }
.about-strip strong { display:block; font-size:.85rem; font-weight:500; color:#fff; }
.about-strip span  { font-size:.72rem; color:rgba(255,255,255,.8); }

/* ── Bio ─────────────────────────────────────────────────── */
.bio-section { background:var(--white); }
.bio-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:20px; }
.value-card {
  background:var(--paper); border-radius:var(--radius);
  padding:28px 24px;
  border-top:3px solid var(--green);
  transition:all var(--transition);
}
.value-card:nth-child(2) { border-top-color:var(--sky); }
.value-card:nth-child(3) { border-top-color:var(--amber); }
.value-card:nth-child(4) { border-top-color:var(--terra); }
.value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.vc-icon { font-size:2rem; margin-bottom:12px; display:block; }
.value-card h3 { font-family:var(--serif); font-size:1.25rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.value-card p  { font-size:.82rem; color:var(--ink-dim); line-height:1.6; }

/* ── Stats Band ─────────────────────────────────────────── */
.stats-band {
  background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 50%,var(--sky-deep) 100%);
  padding:72px 0;
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-n { font-family:var(--serif); font-size:3.2rem; font-weight:700; color:#fff; display:block; line-height:1; margin-bottom:8px; }
.stat-l { font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.75); }

/* ── Social Cards ──────────────────────────────────────── */
.socials-section { background:var(--skyblush); }
.social-cards { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.social-card {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:36px 40px; border-radius:var(--radius-lg);
  text-decoration:none; transition:all var(--transition);
  border:2px solid transparent;
  background:#fff; box-shadow:var(--shadow-sm);
  min-width:180px;
}
.sc-ico  { font-size:2.5rem; }
.sc-name { font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--ink); }
.sc-sub  { font-size:.75rem; color:var(--ink-dim); }
.sc-fb:hover { border-color:#1877f2; box-shadow:0 8px 32px rgba(24,119,242,.2); transform:translateY(-6px); }
.sc-ig:hover { border-color:var(--amber); box-shadow:0 8px 32px rgba(245,158,11,.2); transform:translateY(-6px); }
.sc-li:hover { border-color:#0a66c2; box-shadow:0 8px 32px rgba(10,102,194,.2); transform:translateY(-6px); }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:960px) {
  .about-hero-grid,.bio-grid { grid-template-columns:1fr; gap:48px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .about-badge { right:0; }
  .about-strip { left:12px; right:12px; }
}
@media(max-width:560px) {
  .values-grid { grid-template-columns:1fr; }
  .stats-grid  { grid-template-columns:1fr 1fr; }
  .social-card { min-width:140px; padding:28px 24px; }
}