/* ==========================================================================
   Dr. Talebzadeh - Surgery Gallery
   Static site stylesheet
   ========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #a3a68a;
  --card: #ffffff;
  --accent: #7a2e2e;
  --accent-strong: #b02b2c;
  --text: #23261c;
  --radius: 14px;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --maxw: 1120px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 16px 56px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  direction: rtl;
  text-align: right;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-strong); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ---------- top menu bar ------------------------------------------------- */
.sg-page-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 640px;
  margin: 22px auto 30px;
  padding: 14px 22px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  direction: rtl;
}

.sg-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.sg-back-btn:hover { text-decoration: underline; }

.sg-social-icons {
  display: flex;
  gap: 14px;
  align-items: center;
}
.sg-social-icons a { display: inline-flex; }
.sg-social-icons img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: transform .2s ease;
}
.sg-social-icons img:hover { transform: scale(1.15); }

/* ---------- page title --------------------------------------------------- */
.page-title {
  text-align: center;
  color: var(--accent);
  font-size: 26px;
  font-weight: 700;
  margin: 4px 0 26px;
}

/* ---------- galleries ---------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two photos per row on desktop */
  gap: 26px 22px;
  margin: 0 0 26px;
  align-items: start;
}

/* a single stacked image keeps the page's natural one-column rhythm */
.single { margin: 0 0 26px; }

figure.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure.shot img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, .25);
}

figure.shot a { display: block; width: 100%; }

/* caption sits BELOW the photo in its own pill - never on top of it */
figure.shot figcaption {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 10px 26px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.35;
}
figure.shot figcaption a {
  color: var(--accent);
  text-decoration: none;
}
figure.shot figcaption a:hover { text-decoration: underline; }

/* ---------- home page ---------------------------------------------------- */
.home-card {
  max-width: 560px;
  margin: 26px auto 0;
  padding: 30px 26px 34px;
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .08);
  text-align: center;
}

.home-card .clinic-name {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.home-card .clinic-line {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 500;
  color: #3a3d30;
}
.home-card .clinic-line a { color: inherit; text-decoration: none; }

.doctor-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  margin: 20px auto 4px;
  box-shadow: var(--shadow-sm);
}

.cta {
  display: inline-block;
  margin: 22px auto 6px;
  padding: 12px 42px;
  background: var(--accent-strong);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s ease;
}
.cta:hover { transform: translateY(-2px); background: #922425; }

.cta-photo {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  margin: 24px auto 0;
  box-shadow: var(--shadow-md);
}

/* ---------- footer ------------------------------------------------------- */
.site-footer {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 18px 22px;
  background: rgba(255, 255, 255, .55);
  border-radius: 18px;
  text-align: center;
  font-size: 14px;
  color: #3a3d30;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 700px) {
  .gallery { grid-template-columns: 1fr; gap: 22px; }
  .page-title { font-size: 21px; }
  figure.shot figcaption { font-size: 18px; padding: 9px 20px; }
}

@media (max-width: 480px) {
  body { padding: 0 12px 40px; }
  .sg-page-menu { max-width: 100%; padding: 10px 16px; }
  .sg-back-btn { font-size: 14px; }
  .sg-social-icons { gap: 10px; }
  .sg-social-icons img { width: 26px; height: 26px; }
  .page-title { font-size: 20px; }
  .home-card { padding: 24px 18px 28px; }
  .cta { font-size: 19px; padding: 11px 32px; }
  .cta-photo { width: 210px; height: 210px; }
}