/* =========================================================
   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).
   ========================================================= */

.page-doctor [hidden] { display: none !important; }

/* ---------- Profile ---------- */
.doc-profile { background: #fcf9f4; padding: 56px 0 0; }
.doc-profile__inner { width: min(1058px, calc(100% - 32px)); margin: 0 auto 10px; padding-bottom: 17px; border-bottom: 1px solid #ece7de; }
.doc-profile__eyebrow { font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.8px; text-transform: uppercase; color: #b88e1c; }
.doc-profile__heading { margin-top: 4px; font-family: var(--f-serif); font-weight: 600; font-size: 30px; line-height: 36px; letter-spacing: -0.8px; color: #1a1816; }
.doc-card {
  background: #fff; border: 1px solid #efeae0; border-radius: 24px; padding: 0 128px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03), 0 10px 30px rgba(189,152,52,0.08);
}
.doc-card__inner { width: min(1182px, 100%); margin: 0 auto; display: flex; min-height: 434px; font-family: var(--f-inter); }
.doc-card__media { flex: 0 0 394px; padding: 28px; background: linear-gradient(180deg, #fbf8f2 0%, rgba(244,237,224,0.5) 100%); }
.doc-card__photo { position: relative; height: 378px; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid #e8decb; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.doc-card__photo img { position: absolute; left: 1px; top: -49px; width: 356px; height: 476px; max-width: none; object-fit: cover; }
.doc-card__body { flex: 1 1 auto; min-width: 0; padding: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.doc-card__name { font-family: var(--f-inter); font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -0.9px; color: #221e1a; }
.doc-card__title { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; line-height: 28px; color: #d99814; }
.doc-card__title img { width: 20px; height: 20px; }
.doc-card__bio { margin-top: 8px; padding: 7px 0 16px; font-size: 15px; line-height: 24.4px; color: #59534b; }
.doc-card__rule { display: none; }
.doc-card__hours {
  margin-top: 8px; display: flex; align-items: stretch; overflow: hidden; border-radius: 12px; background: #fbf9f5; border: 1px solid #ede5d6;
}
.doc-card__hours b { display: flex; align-items: center; padding: 10px 20px; background: #f5efe4; font-weight: 700; font-size: 11px; line-height: 20px; letter-spacing: 0.6px; color: #716a5f; white-space: nowrap; }
.doc-card__hours span { display: flex; align-items: center; padding: 10px 20px; font-weight: 500; font-size: 14px; line-height: 20px; color: #2b2721; }
.doc-card__creds { margin-top: 8px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.doc-card__creds li { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12px; line-height: 16px; color: #49443c; }
.doc-card__creds img { width: 8px; height: 8px; }
.doc-card__actions { width: 100%; margin-top: 24px; padding-top: 16px; border-top: 1px solid #f2ede4; display: flex; flex-wrap: wrap; gap: 16px; }
.doc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 12px 24px; border-radius: 12px;
  font-family: var(--f-inter); font-weight: 700; font-size: 12px; line-height: 16px; white-space: nowrap; transition: filter .2s, background-color .2s;
}
.doc-btn img { width: 16px; height: 16px; }
.doc-btn--gold { background: #d99814; color: #241f17; letter-spacing: 0.6px; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.doc-btn--gold:hover { filter: brightness(1.05); }
.doc-btn--outline { height: 42px; border: 1px solid #d6c7b0; color: #785b1a; font-weight: 600; }
.doc-btn--outline:hover { background: #fbf8f2; }

/* ---------- Other department physicians ---------- */
.doc-others { background: rgba(251,244,220,0.43); padding: 80px 0; border-top: 1px solid #e9dfcb; border-bottom: 1px solid #e9dfcb; }
.doc-others__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.doc-others__pill { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.8px; text-transform: uppercase; color: #b88e1c; }
.doc-others__title { font-family: var(--f-serif); font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -1px; color: #1c1917; }
.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: 1240px) {
  .doc-card { padding: 0 16px; }
}
@media (max-width: 1080px) {
  .doc-card__inner { flex-direction: column; }
  .doc-card__media { flex-basis: auto; }
  .doc-card__photo { height: 460px; }
  .doc-card__photo img { left: 0; top: 0; width: 100%; height: 100%; object-position: center top; }
}
@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__body { padding: 28px 20px; }
  .doc-card__name { font-size: 32px; line-height: 38px; }
  .doc-card__hours { flex-direction: column; }
  .doc-card__photo { height: 380px; }
  .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%; }
}