/* ============================================================
   ABOUT THE CLINIC — Vital Dental Care & Implant Center
   Editorial section: the clinic, the photos, Dr. Pragati Singh,
   and the practical detail. Uses the site tokens:
   --bg --bg-alt --brand --accent --ink --ink-soft --line
   ============================================================ */

.vdc-about{
  --a-serif:'Cormorant Garamond',serif;
  --a-sans:'Manrope','Inter',sans-serif;
  --a-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  padding:clamp(5rem,10vh,8.5rem) 0 clamp(5rem,10vh,8rem);
  background:
    radial-gradient(90% 60% at 88% 8%, rgba(11,91,83,.045), transparent 60%),
    radial-gradient(70% 50% at 4% 96%, rgba(232,176,75,.05), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--a-sans);
  overflow:hidden;
}
/* hairline top edge so it reads as a distinct chapter */
.vdc-about::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}

/* ---------- shared section typography ---------- */
.vdc-sec-eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 20px;
  font-size:10px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brand);
}
.vdc-sec-eyebrow::before{ content:""; width:40px; height:1px; background:var(--accent); flex:none; }

.vdc-sec-title{
  margin:0 0 22px;
  font-family:var(--a-serif); font-weight:500;
  font-size:clamp(34px,4.1vw,62px); line-height:1.04; letter-spacing:-.01em;
  color:var(--ink);
}
.vdc-sec-title em{ font-style:italic; color:var(--brand); }

/* ---------- intro: copy + tall portrait ---------- */
.vdc-about-intro{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,5vw,5.5rem); align-items:start;
}

.vdc-place{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 26px;
  font-size:12px; line-height:1.7; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.vdc-place svg{ width:16px; height:16px; flex:none; color:var(--accent); margin-top:1px; }
.vdc-place b{ color:var(--brand); font-weight:700; }

.vdc-lede{
  margin:0 0 30px; max-width:52ch;
  font-size:clamp(16px,1.25vw,18px); line-height:1.8; color:var(--ink-soft);
}
.vdc-lede b{ color:var(--ink); font-weight:600; }

.vdc-about-points{ list-style:none; margin:0 0 34px; padding:0; max-width:54ch; }
.vdc-about-points li{
  position:relative; padding:14px 0 14px 26px;
  border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.72; color:var(--ink-soft);
}
.vdc-about-points li:last-child{ border-bottom:1px solid var(--line); }
.vdc-about-points li::before{
  content:""; position:absolute; left:2px; top:23px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.vdc-about-points b{ color:var(--ink); font-weight:700; }

.vdc-about-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* tall clinic photo */
.vdc-about-shot{
  position:relative; margin:0;
  border-radius:var(--r-lg,32px); overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(11,91,83,.45);
}
.vdc-about-shot img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:79/102;
}
.vdc-about-shot figcaption{
  position:absolute; left:18px; right:18px; bottom:18px;
  padding:14px 18px; border-radius:14px;
  background:rgba(248,243,234,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
}
.vdc-about-shot figcaption b{
  display:block; font-family:var(--a-serif); font-weight:600; font-size:19px; color:var(--ink);
}
.vdc-about-shot figcaption span{
  display:block; margin-top:2px;
  font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- photo strip ---------- */
.vdc-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.1vw,16px);
  margin-top:clamp(3rem,6vh,5rem);
}
.vdc-strip-item{ margin:0; }
.vdc-strip-item img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:18px; border:1px solid var(--line);
  transition:transform .6s var(--a-ease), box-shadow .5s;
}
.vdc-strip-item:hover img{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 26px 50px -26px rgba(11,91,83,.5);
}
.vdc-strip-item figcaption{
  margin-top:11px;
  font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
/* uniform crop keeps every caption on one baseline */

/* ---------- Dr. Pragati Singh ---------- */
.vdc-doc{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(2.5rem,5vw,5.5rem); align-items:start;
}
/* Meet the Doctor stands alone between How We Care and Real Results */
.vdc-doctor-section{ background:var(--bg-alt); }
.vdc-doctor-section .vdc-visit{ margin-top:clamp(3rem,6vh,4.5rem); }
.vdc-doc-photo{
  position:relative; margin:0;
  border-radius:var(--r-lg,32px); overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(11,91,83,.45);
}
.vdc-doc-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 62%, rgba(11,91,83,.10));
}
.vdc-doc-photo img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
/* a square portrait with the clinic's name in frame: show it whole rather than crop the lettering */
.vdc-doc-photo.is-square img{ aspect-ratio:1/1; }
/* shorter than the text beside it, so it stays in view while the profile is read */
@media (min-width:1101px){
  .vdc-doc-photo.is-square{ position:sticky; top:110px; }
  /* overflow:hidden would stop sticky from working; clip trims the same way */
  .vdc-doctor-section{ overflow:clip; }
}

.vdc-doc-name{
  margin:0; font-family:var(--a-serif); font-weight:600;
  font-size:clamp(34px,3.6vw,52px); line-height:1.05; letter-spacing:-.01em; color:var(--ink);
}
.vdc-doc-cred{
  margin:10px 0 0; font-family:var(--a-serif); font-style:italic;
  font-size:clamp(18px,1.5vw,22px); color:var(--brand); line-height:1.4;
}
.vdc-doc-role{
  margin:12px 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line);
  font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
}
.vdc-doc-para{
  margin:0 0 18px; max-width:60ch;
  font-size:15.5px; line-height:1.85; color:var(--ink-soft);
}
.vdc-doc-para b{ color:var(--ink); font-weight:700; }

.vdc-doc-quote{
  margin:28px 0; padding:4px 0 4px 26px;
  border-left:2px solid var(--accent);
}
.vdc-doc-quote p{
  margin:0; max-width:52ch;
  font-family:var(--a-serif); font-style:italic; font-weight:500;
  font-size:clamp(20px,1.9vw,27px); line-height:1.45; color:var(--brand);
}
.vdc-doc-quote p::before{ content:"\201C"; }
.vdc-doc-quote p::after{ content:"\201D"; }

.vdc-doc-creds{ list-style:none; margin:30px 0 0; padding:0; }
.vdc-doc-creds li{
  display:grid; grid-template-columns:130px 1fr; gap:18px;
  padding:13px 0; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.65; color:var(--ink-soft);
}
.vdc-doc-creds li:last-child{ border-bottom:1px solid var(--line); }
.vdc-doc-creds b{
  font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); padding-top:3px;
}

/* ---------- the rest of the team: a single link band to team.html ---------- */
.vdc-team-band{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,2.4vw,2.2rem);
  margin-top:clamp(2.5rem,5vh,3.5rem); padding:clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.4vw,2rem);
  border:1px solid var(--line); border-radius:var(--r-lg,32px);
  background:rgba(255,255,255,.5); color:inherit; text-decoration:none;
  transition:border-color .4s, background .4s, transform .5s var(--a-ease);
}
.vdc-team-band:hover{ border-color:rgba(11,91,83,.35); background:rgba(255,255,255,.8); transform:translateY(-3px); }
.vdc-team-faces{ display:flex; }
.vdc-team-faces img,
.vdc-team-faces i{
  width:48px; height:48px; margin-left:-10px; border-radius:50%; border:3px solid var(--bg-alt); flex:none;
}
.vdc-team-faces img{ margin-left:0; object-fit:cover; }
.vdc-team-faces i{
  display:grid; place-items:center; background:var(--brand); color:var(--bg);
  font-family:var(--a-serif); font-style:italic; font-weight:600; font-size:15px;
}
.vdc-team-faces i:nth-of-type(2){ background:var(--brand-700); }
.vdc-team-copy b{
  display:block; font-family:var(--a-serif); font-weight:600;
  font-size:clamp(20px,1.7vw,24px); line-height:1.25; color:var(--ink);
}
.vdc-team-copy b em{ font-style:italic; font-weight:500; color:var(--brand); }
.vdc-team-copy span{ display:block; margin-top:3px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.vdc-team-go{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-size:13px; font-weight:700; color:var(--brand);
}
.vdc-team-go svg{ width:18px; height:18px; transition:transform .5s var(--a-ease); }
.vdc-team-band:hover .vdc-team-go svg{ transform:translateX(4px); }
@media (max-width:720px){
  .vdc-team-band{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- practical detail ---------- */
.vdc-visit{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.6rem);
  margin-top:clamp(3.5rem,7vh,5.5rem);
}
.vdc-visit-card{
  padding:clamp(1.5rem,2.2vw,2.2rem);
  border:1px solid var(--line); border-radius:var(--r-md,20px);
  background:rgba(255,255,255,.42);
  transition:border-color .4s, background .4s, transform .5s var(--a-ease);
}
.vdc-visit-card:hover{
  border-color:rgba(11,91,83,.35); background:rgba(255,255,255,.72); transform:translateY(-3px);
}
.vdc-visit-k{
  margin:0 0 14px; font-size:9.5px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
}
.vdc-visit-v{
  margin:0 0 10px; font-family:var(--a-serif); font-weight:600;
  font-size:clamp(22px,2vw,29px); line-height:1.2; color:var(--ink);
}
.vdc-visit-v a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--accent); }
.vdc-visit-v a:hover{ color:var(--brand); }
.vdc-visit-s{ margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-soft); }
.vdc-visit-s i{ font-style:normal; color:var(--accent); font-weight:600; }
.vdc-visit-s a{ color:var(--brand); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(11,91,83,.3); }
.vdc-visit-s a:hover{ border-bottom-color:var(--brand); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .vdc-about-intro{ grid-template-columns:1fr; }
  .vdc-about-shot{ max-width:520px; }
  .vdc-doc{ grid-template-columns:1fr; }
  .vdc-doc-photo{ max-width:440px; }
  .vdc-strip{ grid-template-columns:repeat(3,1fr); }
  .vdc-strip-item:nth-child(4),
  .vdc-strip-item:nth-child(5){ display:none; }
}
@media (max-width:720px){
  .vdc-strip{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64%;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter,1.25rem) * -1);
    padding-inline:var(--gutter,1.25rem); padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .vdc-strip::-webkit-scrollbar{ display:none; }
  .vdc-strip-item{ scroll-snap-align:start; }
  .vdc-strip-item:nth-child(4),
  .vdc-strip-item:nth-child(5){ display:block; }
  .vdc-visit{ grid-template-columns:1fr; }
  .vdc-doc-creds li{ grid-template-columns:1fr; gap:4px; }
  .vdc-about-cta .btn,.vdc-about-cta .btn-ghost{ flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .vdc-strip-item img,.vdc-visit-card{ transition:none; }
}