/* Doctor detail page */
.doctor-detail-page {
  font-size: 14px;
}

.doctor-detail-page header.site {
  z-index: 110;
}

.doctor-detail-page .btn {
  min-height: 44px;
  padding: 0 23px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
  box-shadow: 0 8px 22px rgba(184,149,96,0.18);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.doctor-detail-page .btn::before {
  display: none;
}

.doctor-detail-page .btn:hover {
  transform: translateY(-2px);
}

.doctor-detail-page .btn-gold {
  border: 1px solid var(--gold);
  background: var(--gold);
  background-size: auto;
  animation: none;
  text-shadow: none;
}

.doctor-detail-page .btn-gold:hover {
  border-color: var(--olive-dark);
  background: var(--olive-dark);
  box-shadow: 0 10px 26px rgba(63,71,52,0.2);
  text-shadow: none;
}

.doctor-detail-page .btn-outline-dark {
  border: 1px solid rgba(184,149,96,0.38);
  background: rgba(255,255,255,0.72);
  color: var(--olive-dark);
  box-shadow: none;
}

.doctor-detail-page .btn-outline-dark:hover {
  border-color: var(--gold);
  background: #FFFFFF;
  color: var(--gold);
}

.doc-hero-redesign {
  padding: 60px 0 70px;
  background: linear-gradient(135deg, rgba(253,251,247,0.97), rgba(244,237,225,0.95)), url('../assets/images/hero/herobg01.png') center/cover no-repeat;
  border-bottom: 1px solid rgba(184,149,96,0.25);
  position: relative;
}

.doc-hero-redesign::after {
  content: "LONGEVITY";
  position: absolute;
  bottom: -30px;
  right: 5%;
  font-family: var(--serif-en);
  font-size: 140px;
  font-weight: 600;
  color: rgba(184,149,96,0.04);
  letter-spacing: .1em;
  pointer-events: none;
}

.doctor-profile--plastic .doc-hero-redesign::after {
  content: "PLASTIC SURGERY";
}

.doc-grid-stage {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
}

/* Grid/flex items default to min-width:auto (i.e. their content's
   min-content size), which can force the track wider than its available
   space if a child can't shrink below that. Explicit 0 lets the
   overflow-wrap rules above actually take effect instead of being
   overridden by this default. */
.doc-info-stage {
  min-width: 0;
}

.doc-portrait-stage {
  position: relative;
}

.portrait-card-glow {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(62,57,49,0.15);
  border: 1.5px solid rgba(184,149,96,0.4);
  background-color: #FFFFFF;
  /* Doctor Display Settings' shared "room" background (a JPG) is set as an
     inline style on this element — see branch/[slug]'s equivalent comment
     for why the doctor photo itself is now a transparent PNG cutout
     (Doctors.ts's portrait field) layered on top via .portrait-img-large
     rather than baked into one photo. */
  background-size: cover;
  background-position: center;
}

.portrait-img-large {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s ease;
  position: relative;
}

.portrait-card-glow:hover .portrait-img-large {
  transform: scale(1.02);
}

/* Right Content Header */
.doc-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .25em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}

.doc-header-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.doc-hero-name {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.doc-hero-title-badge {
  font-size: 16.5px;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 4px;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.doc-role-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.doc-role-row .doc-hero-title-badge {
  margin-bottom: 0;
}

.doc-branch-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 10px;
  border-left: 2px solid var(--gold);
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  white-space: nowrap;
}

.doc-branch-label svg,
.prog-icon-badge svg,
.card-icon svg,
.prog-detail-link svg,
.contact-fact svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-branch-label svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
  stroke-width: 1.6;
}

.doc-hero-sub-title {
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--olive);
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(184,149,96,0.2);
  overflow-wrap: break-word;
  word-break: break-word;
}

.doctor-detail-page .doc-tags-wrap {
  margin-bottom: 24px;
}

.doc-bio {
  margin-bottom: 32px;
  color: var(--ink-soft);
  /* !important needed — main.css's site-wide paragraph lock
     (p:not(#phivara-paragraph-size-override){font-size:14px}) targets <p>
     directly with ID-level specificity, beating this rule's declared size
     regardless of what it says (was rendering at 14px, not the 14.5px
     written here, before this fix). Bumped to 16px to match the same
     readability pass done on program/article body text. */
  font-size: 16px !important;
  line-height: 1.8 !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* The booking CTA's label is built dynamically as "จองนัดหมายปรึกษา
   {doctor.nameTh}" (see doctor/[slug]/page.tsx) — much longer than the
   short, fixed button labels the global .btn{white-space:nowrap} rule
   (main.css) was designed for. On a narrow phone screen that long Thai
   string can't wrap (nowrap) and, since Thai has no space characters for
   the browser to find a natural break point either, the button silently
   overflows past the viewport edge — clipped rather than scrolled, because
   html/body sets overflow-x:hidden/clip. Overriding wrap behavior just for
   this CTA group fixes it without touching the nowrap short buttons used
   everywhere else on the site (header CTA, tab nav, etc).
*/
.doc-cta-group .btn {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
  height: auto;
  line-height: 1.4;
}

.section-intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.section-intro--compact {
  max-width: 700px;
  margin-bottom: 10px;
}

.section-intro h2,
.doctor-journal .section-head h2 {
  color: var(--ink);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
}

.section-intro > p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Signature Programs Section */
.signature-programs-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #F1E8DA 0%, #FBF7F0 58%, #EEE2D1 100%);
  border-top: 1px solid rgba(184,149,96,0.16);
  border-bottom: 1px solid rgba(184,149,96,0.18);
}

.doc-schedule-section {
  background: var(--cream);
}

.doc-three-col-grid .credential-list li::before {
  content: "◆";
  top: 0.18em;
  font-size: 16px;
  line-height: 1;
  color: var(--gold);
}

.prog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.prog-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #FAF7F2, #FFF);
  border: 1px solid rgba(184,149,96,0.22);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  box-shadow: 0 12px 32px rgba(62,57,49,0.04);
  transition: all 0.4s ease;
  position: relative;
}

.prog-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 20px 44px rgba(184,149,96,0.12);
}

.prog-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(184,149,96,0.15), rgba(245,237,224,0.8));
  border: 1px solid rgba(184,149,96,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.prog-icon-badge svg,
.card-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.5;
  color: var(--gold);
}

.prog-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.35;
}

.prog-card p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}

.prog-detail-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  transition: color 0.3s ease, gap 0.3s ease;
}

.prog-detail-link svg {
  width: 17px;
  height: 12px;
  stroke-width: 1.4;
}

.prog-detail-link:hover {
  gap: 13px;
  color: var(--gold-dark);
}

.contact-section {
  padding: 80px 0;
  background: #FAF7F2;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 28px;
  align-items: stretch;
}

.contact-visual {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid rgba(184,149,96,0.28);
  box-shadow: 0 18px 44px rgba(62,57,49,0.09);
  background: var(--ink);
}

.contact-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34,30,25,0.04) 24%, rgba(34,30,25,0.88) 100%);
}

.contact-visual-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 40px;
  color: #FFFFFF;
}

.contact-visual-content .eyebrow {
  color: var(--gold-light);
}

.contact-visual-content .eyebrow::before {
  background: var(--gold-light);
}

.contact-visual-content h2 {
  max-width: 520px;
  margin-top: 10px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  color: #FFFFFF;
}

.contact-visual-content > p {
  max-width: 540px;
  margin-top: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,0.78);
}

.contact-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.contact-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  line-height: 1.45;
}

.contact-fact svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--gold-light);
  stroke-width: 1.5;
}

.contact-form-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 42px;
  border: 1px solid rgba(184,149,96,0.3);
  border-radius: var(--radius-card);
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(62,57,49,0.07);
}

/* Doctor journal cards — aligned with article.html */
.doctor-journal .article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.doctor-journal .article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--cream-card);
  transition: transform .42s var(--ease), box-shadow .42s, border-color .42s;
}

.doctor-journal .article-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease);
}

.doctor-journal .article-card:hover {
  border-color: rgba(184,149,96,.55);
  box-shadow: 0 24px 52px rgba(62,57,49,.14);
  transform: translateY(-9px);
}

.doctor-journal .article-card:hover::before {
  transform: scaleX(1);
}

.doctor-journal .card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.doctor-journal .card-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.doctor-journal .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .45s ease;
}

.doctor-journal .article-card:hover .card-image img {
  filter: saturate(1.06) brightness(1.02);
  transform: scale(1.065);
}

.doctor-journal .card-copy {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto;
  padding: 19px 22px 21px;
}

.doctor-journal .article-kicker,
.doctor-journal .card-copy h3,
.doctor-journal .card-copy > p {
  grid-column: 1 / -1;
}

.doctor-journal .article-kicker {
  color: var(--terracotta);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.doctor-journal .card-copy h3 {
  margin: 9px 0 10px;
  color: var(--olive-dark);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.42;
}

.doctor-journal .card-copy h3 a {
  color: inherit;
  transition: color .3s ease;
}

.doctor-journal .card-copy h3 a:hover {
  color: var(--gold);
}

.doctor-journal .card-copy > p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 13px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.doctor-journal .card-footer-row {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.doctor-journal .article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11.5px;
}

.doctor-journal .article-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

.doctor-journal .go {
  margin-left: auto;
  color: var(--gold);
  font-size: 13px;
  white-space: nowrap;
  transition: color .3s ease, letter-spacing .3s ease;
}

.doctor-journal .go:hover {
  color: var(--olive-dark);
}

.doctor-journal .article-card:hover .go {
  letter-spacing: .04em;
}

.contact-form-head {
  margin-bottom: 28px;
}

.contact-form-head h3 {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

.contact-form-head p {
  margin-top: 8px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.contact-name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-field {
  margin-bottom: 16px;
}

.form-field--large {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
}

.form-control:focus-visible {
  border-color: var(--gold);
  outline: 3px solid rgba(184,149,96,0.18);
}

.form-control[aria-invalid="true"] {
  border-color: #A34A3F;
}

.form-error {
  display: block;
  margin-top: 6px;
  color: #A34A3F;
  font-size: 12px;
  line-height: 1.5;
}

.form-error[hidden] {
  display: none;
}

textarea.form-control {
  min-height: 120px;
  background: #FAF8F5;
  line-height: 1.7;
  resize: vertical;
}

.form-submit {
  width: 100%;
  text-align: center;
}

.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(74,113,74,0.25);
  border-radius: 8px;
  background: rgba(74,113,74,0.08);
  color: var(--olive-dark);
  line-height: 1.6;
  text-align: center;
}

.form-status[hidden] {
  display: none;
}

.form-status--error {
  border-color: rgba(169,88,78,0.3);
  background: rgba(169,88,78,0.08);
  color: #A9584E;
}

/* Responsiveness */
@media (max-width: 1100px) {
  .doc-grid-stage {
    grid-template-columns: 360px 1fr;
    gap: 36px;
  }

  .prog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-visual {
    min-height: 540px;
  }
}

@media (max-width: 980px) {
  .doctor-journal .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .doc-grid-stage,
  .prog-grid {
    grid-template-columns: 1fr;
  }

  .portrait-img-large {
    height: 420px;
  }

  .contact-visual {
    min-height: 580px;
  }

  .contact-visual-content {
    padding: 28px;
  }

  .contact-facts,
  .contact-name-row {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 28px 22px;
  }
}

@media (max-width: 700px) {
  .doctor-journal .article-grid {
    grid-template-columns: 1fr;
  }
}