/* =========================================================
   Badr Al Safaa Medical Centre — Physician Profile
   Built from Figma file "Badr-Al-Safaa", prototype frame 526:2355
   Loads after style.css, about.css (top bar, visit block, footer)
   and departments.css (doctor cards, "Clinical Faculty" pill).
   ========================================================= */

.site-nav--cream { background: #fcf9f4; }
.page-doctor [hidden] { display: none !important; }

/* ---------- Profile ---------- */
.doc-profile { background: #fcf9f4; padding: 80px 0 54px; border-bottom: 1px solid #ebe6db; }
.doc-profile__inner { width: min(1074px, calc(100% - 32px)); margin-inline: auto; position: relative; left: min(9px, calc((100vw - 1074px) / 2)); }
.doc-profile__eyebrow { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; color: #ce8d17; }
.doc-profile__heading {
  margin-top: 2px; padding-bottom: 13px; border-bottom: 1px solid #ece9e2;
  font-family: var(--f-serif); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -0.3px; color: #1a1512;
}
.doc-card {
  margin-top: 11px; display: flex; min-height: 500px; overflow: hidden;
  border-radius: 16px; background: #f7efe2; border: 1px solid #eee8da;
}
.doc-card__photo { flex: 0 0 385px; position: relative; background: #eae8e5; }
.doc-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doc-card__body { flex: 1 1 auto; min-width: 0; padding: 60px 47px 46px 48px; display: flex; flex-direction: column; align-items: flex-start; }
.doc-card__name { font-weight: 700; font-size: 38px; line-height: 44px; letter-spacing: -0.4px; color: #140e0a; }
.doc-card__title { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 17px; line-height: 24px; color: #c78e20; }
.doc-card__title img { width: 18px; height: 18px; margin-top: -2px; }
.doc-card__bio { max-width: 572px; margin-top: 10px; font-size: 15px; line-height: 23px; color: #453e35; }
.doc-card__rule { width: 100%; margin: 20px 0 0; border: 0; border-top: 1px solid #e3d9c7; }
.doc-card__hours {
  margin-top: 21px; width: 100%; height: 37px; padding: 0 16px; border-radius: 8px; background: #fdfcf8; border: 1px solid #ebe5d8;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.doc-card__hours b { font-weight: 700; font-size: 11px; line-height: 16px; letter-spacing: 0.8px; color: #706b67; white-space: nowrap; }
.doc-card__hours span { font-weight: 600; font-size: 13.5px; line-height: 18px; color: #000; text-align: right; }
.doc-card__creds { margin: 14px 0 0 -11px; width: calc(100% + 11px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.doc-card__creds li { display: flex; align-items: center; gap: 4px; font-size: 13.5px; line-height: 18px; color: #564f45; }
.doc-card__creds img { width: 12px; height: 12px; }
.doc-card__actions { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; gap: 15px; }
.doc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 201px; height: 41px; border-radius: 4px;
  font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; transition: filter .2s, background-color .2s;
}
.doc-btn img { width: 20px; height: 20px; }
.doc-btn--gold { background: #ecc02b; color: #1c1917; }
.doc-btn--gold:hover { filter: brightness(1.05); }
.doc-btn--outline { border: 1px solid #987a44; color: #6a4900; }
.doc-btn--outline:hover { background: rgba(255,255,255,0.5); }

/* ---------- Other department physicians ---------- */
.doc-others { background: #fbf7eb; padding: 81px 0 79px; border-bottom: 1px solid #ebe6db; }
.doc-others__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.doc-others__pill { background: #f1e6d0; color: #775503; }
.doc-others__pill i { background: #a7802f; }
.doc-others__title { margin-top: 10px; font-weight: 700; font-size: 37px; line-height: 44px; letter-spacing: -0.4px; color: #140e0a; white-space: nowrap; }
.doc-others__lead { width: 316px; padding-bottom: 7px; font-size: 14px; line-height: 19.5px; color: #5e5a4f; }
.doc-others__grid { display: grid; grid-template-columns: repeat(4, 278px); justify-content: space-between; row-gap: 24px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1240px) {
  .doc-others__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .doc-others__grid .dept-card { width: 100%; }
}
@media (max-width: 1080px) {
  .doc-profile__inner { left: 0; }
  .doc-card { flex-direction: column; }
  .doc-card__photo { flex-basis: auto; height: 460px; }
  .doc-card__creds { margin-left: 0; width: 100%; }
}
@media (max-width: 960px) {
  .doc-others__head { flex-direction: column; align-items: flex-start; }
  .doc-others__title { white-space: normal; }
  .doc-others__lead { width: auto; }
  .doc-others__lead br { display: none; }
  .doc-others__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .doc-profile { padding: 48px 0; }
  .doc-profile__heading { font-size: 30px; line-height: 38px; }
  .doc-card__photo { height: 380px; }
  .doc-card__body { padding: 28px 20px; }
  .doc-card__name { font-size: 32px; line-height: 38px; }
  .doc-card__hours { height: auto; padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .doc-card__hours span { text-align: left; }
  .doc-card__creds { grid-template-columns: minmax(0, 1fr); }
  .doc-card__actions { width: 100%; padding-top: 32px; }
  .doc-btn { width: 100%; }
  .doc-others { padding: 56px 0; }
  .doc-others__title { font-size: 30px; line-height: 36px; }
  .doc-others__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .doc-others__grid .dept-card { max-width: 340px; height: 400px; }
  .doc-others__grid .dept-card__photo img { height: 100%; }
}