/* ===========================================================
   Meet Our Providers (amg_doctor archive) — scoped add-ons.
   Loaded ONLY on the providers archive. Reuses the global
   design system (main.css) for everything else.
   =========================================================== */

/* ---- Banner (ihero--media, matching the About hero). Anchor the team photo
        crop to the top so faces stay framed at the hero's landscape size. ---- */
.prov-banner .ihero__media img{ object-position:center top; }

/* ---- "Meet Our Qualified Doctors" (qualification tiles) section background ---- */
.prov-md-bg{ background:#C9F7FE; }

/* ---- Why Choose Us (providers only): center the icon and keep a tidy,
        balanced two-line text block below it. Scoped here so the landing
        page's identical .why grid stays left-aligned. ---- */
.why__item{ align-items:center; text-align:center; }
.why__item b{ max-width:22ch; }

/* ---- Doctor cards (cyan photo on top, name + role centered below).
        grid-auto-rows:1fr + footer flex:1 keeps every card the exact same
        height with no bottom white space. ---- */
.doc-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:22px; margin-top:8px; }
.doc-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:2px solid transparent;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 22px rgba(16,40,80,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.doc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#06A9FF; }
.doc-card__media{ background:var(--cyan-100); line-height:0; }
.doc-card__media img{ width:100%; height:248px; object-fit:cover; object-position:center top; display:block; }
.doc-card__b{
  flex:1;
  padding:18px 14px;
  text-align:center;
  background:var(--cyan-50);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.doc-card__b h3{ font-family:var(--serif); font-size:1.1rem; font-weight:500; margin:0; color:var(--ink); }
.doc-card:hover .doc-card__b h3{ color:var(--blue); }
.doc-card__role{ color:var(--body); font-size:.88rem; }
@media(max-width:980px){ .doc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .doc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:430px){ .doc-grid{ grid-template-columns:1fr; } }

/* ---- Why Choose: qualification tiles (content from ref 1, tile layout from
        ref 2) — rounded tiles, icon on top, label below, one highlighted. ---- */
.qual-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:6px; }
.qual-tile{
  background:#fff; border:1px solid var(--cyan-200); border-radius:var(--radius);
  padding:30px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  box-shadow:0 6px 18px rgba(16,40,80,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.qual-tile:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,40,80,.1); border-color:var(--blue); }
.qual-tile__ic{ color:var(--blue); line-height:0; }
.qual-tile__ic svg{ width:42px; height:42px; }
.qual-tile b{ color:var(--ink); font-size:.96rem; font-weight:600; line-height:1.35; }
.qual-tile--active{ background:var(--blue); border-color:var(--blue); box-shadow:0 16px 34px -12px rgba(4,100,203,.5); }
.qual-tile--active .qual-tile__ic{ color:#fff; }
.qual-tile--active b{ color:#fff; }
@media(max-width:860px){ .qual-tiles{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .qual-tiles{ grid-template-columns:repeat(2,1fr); } }

/* ---- Patient Care Approach image ---- */
.prov-approach__img img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; }

/* ---- FAQ accordion (native <details>) ---- */
.faq{ max-width:820px; margin:34px auto 0; text-align:left; display:grid; gap:14px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer;
  padding:20px 24px; font-weight:600; color:var(--ink); font-size:1.02rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] summary{ color:var(--blue); }
.faq-ic{ flex:0 0 22px; width:22px; height:22px; position:relative; }
.faq-ic::before, .faq-ic::after{ content:""; position:absolute; background:var(--blue); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.faq-ic::before{ left:3px; right:3px; top:10px; height:2px; }
.faq-ic::after{ top:3px; bottom:3px; left:10px; width:2px; }
.faq-item[open] .faq-ic::after{ transform:scaleY(0); opacity:0; }
.faq-a{ padding:0 24px 22px; }
.faq-a p{ margin:0; color:var(--body); line-height:1.65; }

/* ---- CTA: highlighted, boxed dark-blue container ---- */
.prov-cta-wrap{ background:var(--cyan-50); }
.prov-cta{
  background:#0059A6; color:#fff;
  border-radius:24px; padding:64px 40px; text-align:center;
  box-shadow:0 26px 60px -24px rgba(0,89,166,.55);
}
.prov-cta .pill{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); }
.prov-cta h2{ color:#fff; }
.prov-cta .lead{ color:rgba(255,255,255,.85); margin:0 auto 26px; }
.prov-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.prov-cta .btn--light{ background:#fff; color:#0059A6; }
.prov-cta .btn--light:hover{ background:#e9f2fb; color:#0059A6; }
.prov-cta__ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.prov-cta__ghost:hover{ background:#fff; color:#0059A6; border-color:#fff; }
@media(max-width:640px){ .prov-cta{ padding:44px 22px; } }