/* === Scope: pagina Despre noi === */
.page-about .about-wrap{width:min(1120px,92vw);margin:16px auto 24px}
.page-about .breadcrumbs{margin:6px 0 12px}

/* Hero */
.page-about .about-hero{display:grid;gap:12px;grid-template-columns:1fr;align-items:center;margin:6px 0 18px}
@media (min-width:960px){.page-about .about-hero{grid-template-columns:1.1fr .9fr}}
.page-about .about-hero-media{border-radius:14px;overflow:hidden;border:1px solid #f0f0f0;background:#fff}
.page-about .about-hero-media img{width:100%;height:auto;display:block;aspect-ratio:16/6;object-fit:cover}
.page-about .about-hero-text .page-title{margin:0 0 8px}
.page-about .lead{font-size:1.08rem;color:#374151;margin:.25rem 0 .75rem}
.page-about .meta{color:#6b7280;font-size:.95rem}

/* Secțiuni scurte */
.page-about .about-sections{margin:14px 0 18px}
.page-about .about-sections-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:860px){.page-about .about-sections-grid{grid-template-columns:repeat(2,1fr)}}
.page-about .about-card{border:1px solid #eee;border-radius:12px;background:#fff;padding:14px 16px}
.page-about .about-card-title{margin:0 0 8px;font-size:1rem;font-weight:700;color:#111}
.page-about .about-card-text{margin:0;color:#374151}

/* Statistici */
.page-about .about-stats{margin:10px 0 18px}
.page-about .stats-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.page-about .stat{background:#fafafa;border:1px solid #f0f0f0;border-radius:12px;padding:14px;text-align:center}
.page-about .stat-value{font-size:1.35rem;font-weight:800;color:var(--primary,#0B7A75);line-height:1}
.page-about .stat-label{margin-top:6px;font-size:.9rem;color:#6b7280}

/* Galerie simplă */
.page-about .about-gallery{margin:6px 0 4px}
.page-about .gallery-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.page-about .gallery-grid{grid-template-columns:repeat(3,1fr)}}
.page-about .gallery-item{overflow:hidden;border-radius:10px}
.page-about .gallery-item img{width:100%;display:block;border-radius:10px;border:1px solid #eee;background:#fff;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.page-about .gallery-item:hover img{transform:scale(1.06)}

/* === Image Reel (bandă rulantă non-slider) === */
.page-about .about-reel{margin:10px 0 16px}
.page-about .image-reel{
  overflow:hidden;border:1px solid #eee;border-radius:12px;background:#fff;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
}
.page-about .image-reel .reel-track{display:flex;align-items:center;gap:var(--reel-gap,12px);min-width:max-content;animation:reel var(--reel-speed,28s) linear infinite;will-change:transform}
.page-about .image-reel img{
  height:var(--reel-h,240px);width:auto;flex:0 0 auto;object-fit:cover;border-radius:10px;background:#fff;border:1px solid #f0f0f0;
  transition:transform .35s ease;
}
.page-about .image-reel img:hover{transform:scale(1.04)}
.page-about .image-reel[data-dir="rtl"] .reel-track{animation-direction:reverse}
.page-about .image-reel[data-pause="1"]:hover .reel-track{animation-play-state:paused}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.page-about .image-reel .reel-track{animation:none}}

/* ===================================================== */
/* === OVERRIDES: mărim imaginile din REEL doar din CSS === */
/* forțăm valori mai mari fără să atingem JSON/PHP (bat inline-urile) */
.page-about .image-reel{
  --reel-h: 360px !important;   /* înălțimea imaginilor din carusel (↑) */
  --reel-gap: 16px !important;  /* distanța între imagini (opțional) */
  --reel-speed: 26s !important; /* viteză ușor mai lentă (opțional) */
}

/* responsive – un pic mai mic pe mobil */
@media (max-width:900px){
  .page-about .image-reel{ --reel-h: 300px !important; }
}
@media (max-width:600px){
  .page-about .image-reel{ --reel-h: 260px !important; }
}

/* ===================================================================== */
/* === PATCH REEL: fără linii sus, aspect de card, fade pe laterale ==== */
/* 1) Eliminăm artefactele (mask+border) și punem fade pe margini */
.page-about .image-reel{
  border: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-radius:16px;
  background:#fff;
  --reel-fade: #fff; /* schimbă în var(--bg) dacă folosești fundal închis */
  position:relative;
}
.page-about .image-reel::before,
.page-about .image-reel::after{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:64px; z-index:2; pointer-events:none;
  background: linear-gradient(to right, var(--reel-fade) 0%, rgba(255,255,255,0) 100%);
}
.page-about .image-reel::after{
  left:auto; right:0;
  background: linear-gradient(to left, var(--reel-fade) 0%, rgba(255,255,255,0) 100%);
}
/* evităm ca slide-urile să intre sub fade */
.page-about .image-reel .reel-track{ padding:0 64px; }

/* 2) Card look + fără borduri pe imagini (anti hairline) */
.page-about .image-reel img{
  border:0 !important;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:transform .28s ease;
}
.page-about .image-reel img:hover{ transform:scale(1.03); }
.page-about .image-reel img:active{ transform:scale(1.06); }

/* ===================================================================== */
/* === OPTIONAL: Lightbox (zoom full-screen fără JS) ==================== */
/* necesită ca imaginile din reel să fie randate în <a class="reel-link" href="#lb-x"><img></a>
   și în pagină să existe <a id="lb-x" class="lightbox" href="#"><img></a> */
.page-about .reel-link{ display:block; line-height:0 }

.page-about .lightbox{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:rgba(0,0,0,.88);
  z-index:9999;
  cursor:zoom-out;
}
.page-about .lightbox:target{ display:grid; }
.page-about .lightbox img{
  max-width:min(92vw,1400px);
  max-height:92vh;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
}
/* blochează scroll-ul când overlay-ul e deschis (browsere moderne) */
body:has(.page-about .lightbox:target){ overflow:hidden; }