/* ============================================================
   about.css — About Page Styles
   Gowtham Advanced Physiotherapy
   Depends on: global.css
============================================================ */

/* ── STORY SPLIT ── */
.about-story { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; }
.as-img { position: relative; min-height: 480px; overflow: hidden; }
.as-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.as-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--white));
}
.as-txt { padding: 80px 68px; display: flex; flex-direction: column; justify-content: center; }
.as-txt h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px,3.2vw,46px); font-weight: 400; line-height: 1.1; margin-bottom: 20px;
}
.as-txt p { color: var(--mid); font-size: 15px; line-height: 1.8; margin-bottom: 14px; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.pill { padding: 11px 20px; background: var(--blue); color: var(--white); border-radius: 40px; font-size: 13px; font-weight: 500; }
.pill span { color: var(--coral); font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; margin-right: 5px; }

/* ── TEAM ── */
.team-sec { padding: 96px 60px; background: var(--light); }
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.team-c { background: var(--white); border-radius: 6px; overflow: hidden; transition: all .3s; cursor: none; }
.team-c:hover { box-shadow: 0 24px 60px rgba(16,37,66,.12); transform: translateY(-6px); }
.team-photo { height: 300px; position: relative; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s; }
.team-c:hover .team-photo img { transform: scale(1.05); }
.team-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,37,66,.88) 0%, transparent 55%);
  display: flex; align-items: flex-end; padding: 20px;
}
.team-badge { background: var(--coral); color: var(--white); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 5px 12px; border-radius: 2px; }
.team-body { padding: 24px 24px 28px; }
.team-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.team-body .role { font-size: 11px; color: var(--coral); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.team-body p { font-size: 13px; color: var(--mid); line-height: 1.7; }

/* ── VALUES ── */
.values-sec { padding: 96px 60px; background: var(--white); }
.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--grey); border-radius: 6px; overflow: hidden; margin-top: 52px; }
.val-i { background: var(--white); padding: 46px 24px; text-align: center; transition: background .3s; }
.val-i:hover { background: var(--blue); }
.val-i:hover .vi-t, .val-i:hover .vi-d { color: var(--white); }
.vi-e { font-size: 34px; margin-bottom: 14px; }
.vi-t { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--blue); margin-bottom: 10px; transition: color .3s; }
.vi-d { font-size: 13px; color: var(--mid); line-height: 1.65; transition: color .3s; }

/* ── TIMELINE ── */
.timeline-sec { padding: 96px 60px; background: var(--light); }
.timeline { position: relative; margin-top: 52px; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--grey); }
.tl-i { position: relative; padding: 0 0 50px 44px; }
.tl-i:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -49px; top: 4px; width: 18px; height: 18px; background: var(--coral); border-radius: 50%; border: 3px solid var(--light); box-shadow: 0 0 0 2px var(--coral); }
.tl-yr { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--coral); margin-bottom: 6px; }
.tl-tt { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.tl-desc { font-size: 14px; color: var(--mid); line-height: 1.75; max-width: 640px; }

/* ── AWARDS ── */
.awards-sec { padding: 96px 60px; background: var(--blue); }
.awards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 52px; }
.aw-c { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 36px 28px; text-align: center; transition: all .3s; }
.aw-c:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.aw-ico { font-size: 36px; margin-bottom: 16px; }
.aw-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; color: var(--white); margin-bottom: 8px; }
.aw-sub { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; }

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  .about-story { grid-template-columns: 1fr; }
  .as-img::after { display: none; }
  .as-img { min-height: 320px; }
}
@media (max-width: 820px) {
  .team-grid, .awards-grid, .values-grid { grid-template-columns: 1fr 1fr; }
  .as-txt, .team-sec, .values-sec, .timeline-sec, .awards-sec { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 540px) {
  .team-grid, .awards-grid, .values-grid { grid-template-columns: 1fr; }
}