@import url('/css/variables.css');

/* Intro */
.about-hero { width:min(1200px,92%); margin: 80px auto 150px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; }
.about-hero h1 { font-family:'Playfair Display',serif; font-size: clamp(28px,3.4vw,42px); margin:0 0 30px 0; }
.about-hero p { color: var(--gray-700); line-height:1.7; margin: 0 0 20px 0; max-width: 55ch; }
.about-hero .btn { display:inline-block; padding:10px 80px; border-radius: 10px; background:#111; color:#fff; text-decoration:none; margin-top:14px; font-weight: 400; text-align:center; transition: transform 180ms ease; }
.about-hero .btn:hover { transform: scale(1.04); }
.about-hero .image { width:100%; aspect-ratio:16/10; background:#cbd5e1 center/cover no-repeat; border-radius: 14px; box-shadow: var(--shadow-md); }

/* Team */
.team-section { width:min(1200px,92%); margin: 40px auto 80px; }
.team-section h2 { text-align:center; font-family:'Playfair Display',serif; font-size: clamp(26px,3vw,38px); margin-bottom: 20px; }
.area-block { margin: 26px 0 40px; }
.area-title { font-weight:700; color:#111; margin: 0 0 12px 0; }
.marquee { position:relative; overflow:hidden; }
.track { display:flex; gap:16px; width:max-content; animation: scroll-left 35s linear infinite; }
.track.rtl { animation-name: scroll-right; }
.marquee:hover .track { animation-play-state: paused; }

.card { width: 260px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease; }
.card:hover, .card:focus-within { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md); }
.card .photo { position:relative; height: 180px; background:#e5e7eb center/cover no-repeat; }
.card .shine { position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 35%, transparent 70%); transform: translateX(-100%); transition: transform .6s ease; }
.card:hover .shine { transform: translateX(100%); }
.card .footer { background:#f8fafc; padding: 10px 12px; }
.card .name { font-weight: 800; margin:0 0 4px 0; color:#111; }
.card .role { margin:0; color: var(--gray-600); font-size:.95rem; }

@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; gap: 20px; margin-top: 120px; }
  .track { animation-duration: 28s; }
}