/* ==========================================================================
   Breadcrumb Subbar & Top Hero Section (Matching doctor.html & contact.html)
   ========================================================================== */

.breadcrumb-subbar {
  padding: 12px 0;
  border-bottom: 1px solid var(--gold-line);
  background: rgba(255, 253, 249, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.breadcrumb-subbar .doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
}

.breadcrumb-subbar .doc-breadcrumb a {
  color: var(--olive);
  transition: color .25s ease;
}

.breadcrumb-subbar .doc-breadcrumb a:hover { color: var(--gold); }
.breadcrumb-subbar .doc-breadcrumb .sep { color: var(--gold); }
.breadcrumb-subbar .doc-breadcrumb .current { color: var(--ink); font-weight: 500; }

.branch-top-hero {
  position: relative;
  padding: 55px 0 52px;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-line);
  background:
    linear-gradient(135deg, rgba(251, 250, 247, .9) 0%, rgba(243, 237, 226, .95) 100%),
    url("../assets/images/brand/about-lounge.jpg") center 55% / cover no-repeat;
}

.branch-top-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .5), transparent 48%);
  pointer-events: none;
}

.branch-top-hero__main {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 2;
}

.branch-top-hero__main .eyebrow {
  font-size: 12px;
  letter-spacing: .32em;
  color: var(--gold);
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.branch-top-hero__main h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 50px);
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 400;
  line-height: 1.22;
}

.branch-top-hero__main p.lead {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.85;
  font-weight: 300;
  margin: 0 auto;
}

.hero-gold-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px auto 20px;
  max-width: 280px;
}

.hero-gold-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero-gold-divider .diamond {
  color: var(--gold);
  font-size: 8px;
  transform: rotate(45deg);
}

.branch-top-hero__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  margin-top: 24px;
}

.branch-top-hero__pills .spec-pill {
  font-size: 13px;
  color: var(--olive-dark);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(184, 149, 96, .28);
  padding: 7px 18px;
  border-radius: 999px;
  font-weight: 400;
  text-decoration: none;
  transition: all .3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(50, 42, 24, .04);
}

.branch-top-hero__pills .spec-pill::before {
  display: inline-block;
  margin-right: 7px;
  color: var(--gold);
  content: "◆";
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
  transition: color .3s ease;
}

body[data-branch-id="pt2"] .branch-top-hero__pills .spec-pill::before {
  content: "✦";
  color: var(--gold);
}

body[data-branch-id="pt2"] .branch-top-hero__pills .spec-pill:hover::before {
  color: #fff;
}

.branch-top-hero__pills .spec-pill:hover {
  color: #fff;
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(184, 149, 96, .25);
}

.branch-top-hero__pills .spec-pill:hover::before {
  color: #fff;
}

.branch-top-hero__pills .spec-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

#branch-location,
#branch-doctors,
#branch-programs,
#branch-articles,
#branch-facilities {
  scroll-margin-top: 110px;
}

.branch-detail-main {
  background:
    radial-gradient(circle at 88% 8%, rgba(184, 149, 96, .12), transparent 32rem),
    radial-gradient(circle at 12% 88%, rgba(222, 207, 181, .16), transparent 28rem),
    var(--cream);
}

.branch-detail-crumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--gold-line);
  background: rgba(255, 253, 249, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.branch-detail-crumb .wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 13px;
}

.branch-detail-crumb a {
  color: var(--olive);
  transition: color .25s ease;
}

.branch-detail-crumb a:hover { color: var(--gold); }
.branch-detail-crumb span[aria-hidden="true"] { color: var(--gold); }

/* Branch Hero Section */
.branch-detail-hero {
  padding: 60px 0 80px;
  border-bottom: 1px solid var(--gold-line);
}

.branch-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(40px, 5vw, 64px);
}

.branch-detail-media {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 460px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card, 10px);
  background: var(--cream-card, #FFFEFC);
  box-shadow: 0 16px 42px rgba(62, 57, 49, .09);
  transition: border-color .4s ease, box-shadow .4s ease;
}

.branch-detail-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(30, 26, 20, .05) 0%, transparent 40%, rgba(30, 26, 20, .35) 100%);
  pointer-events: none;
}

.branch-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease, ease);
}

.branch-detail-media:hover img {
  transform: scale(1.05);
}

.branch-detail-number {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 30px;
  color: var(--gold-light, #E3D1B3);
  background: rgba(48, 46, 42, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--serif-en, 'Lora', serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.branch-detail-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 8px;
}

.branch-detail-kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.branch-detail-content h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.22;
}

.branch-detail-service {
  margin: 10px 0 0;
  color: var(--gold-dark, #8d7048);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.branch-detail-description {
  margin: 16px 0 0;
  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 15px
     written here, before this fix). Bumped to 16px to match the same
     readability pass done on program/article/doctor body text. */
  font-size: 16px !important;
  font-weight: 300;
  line-height: 1.85 !important;
}

.branch-detail-address {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--gold-line);
}

.branch-detail-address p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 300;
}

.branch-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.branch-detail-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: var(--gold);
  stroke-width: 2.2;
}

.branch-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card-inner, 8px);
  background: rgba(248, 244, 236, .55);
}

.branch-detail-meta > div {
  padding-left: 16px;
  border-left: 1px solid rgba(184, 149, 96, .22);
}

.branch-detail-meta > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.branch-detail-meta strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.branch-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: 28px;
}

.branch-detail-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #FFFFFF !important;
  background: linear-gradient(130deg, #B89560, #967543);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(184, 149, 96, .26);
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease), background .35s ease;
}

.branch-detail-map:hover {
  transform: translateY(-2px);
  background: linear-gradient(130deg, #c7a36d, #a5824e);
  box-shadow: 0 14px 32px rgba(184, 149, 96, .38);
}

.branch-detail-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--olive-dark);
  background: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: transform .35s var(--ease, ease), background .35s ease, color .35s ease;
}

.branch-detail-book:hover {
  transform: translateY(-2px);
  color: #302719;
  background: linear-gradient(125deg, #ead7af, #c8a566);
}

/* Sections Styling */
.branch-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.branch-section-head .eyebrow {
  justify-content: center;
  margin-bottom: 12px;
  color: var(--gold);
}

.branch-section-head h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 400;
  color: var(--ink);
}

.branch-section-head p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
}

/* Doctors Section */
.branch-doctors-section {
  padding: 88px 0;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--gold-line);
}

/* Featured Highlighted Doctor Card (Background Doctor Photo + 50% Right Body Layout) */
.branch-doctor-featured {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 48px;
  padding: 40px;
  background-color: var(--cream);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card, 16px);
  box-shadow: 0 24px 60px rgba(50, 42, 24, .1);
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
}

.branch-doctor-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 75px rgba(151, 120, 76, .16);
}

.branch-doctor-featured__overlay {
  display: none !important;
}

.branch-doctor-featured__badge {
  display: none !important;
}

/* Doctor cutout PNG (Doctors.ts's featuredPhoto — transparent background,
   see that field's comment) floating in front of the shared room
   background set above via inline style. Left-aligned + bottom-anchored,
   matching where the doctor previously WAS the card's own background
   image (background-position: left center above). Mobile override lives
   in the @media (max-width: 900px) block below, next to that
   breakpoint's other .branch-doctor-featured overrides. */
.branch-doctor-featured__photo {
  position: absolute;
  left: 4%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
  pointer-events: none;
}

/* Redesigned Luxury Featured Doctor Body Layout */
.branch-doctor-featured__body {
  width: min(52%, 560px);
  max-width: 560px;
  margin-left: auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 40px 32px 42px;
  background: #FFFFFF;
  border: none;
  border-radius: 15px;
  box-shadow: 0 30px 70px rgba(45, 35, 20, 0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  overflow: hidden;
  transition: all 0.4s ease;
}

.branch-doctor-featured__body::before {
  display: none !important;
}

.branch-doctor-featured__name,
.branch-doctor-featured__body h3 {
  font-family: var(--serif, 'Cormorant Garamond', 'Lora', serif);
  font-size: clamp(25px, 2.3vw, 32px);
  color: #1F1914;
  margin: 0;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.branch-doctor-featured__title-badge {
  display: block;
  padding: 0 0 14px;
  margin: 6px 0 18px;
  border-bottom: 1px solid rgba(184, 149, 96, 0.22);
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
}

.branch-doctor-featured__specs-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(184, 149, 96, 0.22);
  background: transparent;
  box-shadow: none;
}

.branch-doctor-featured__specs-card .spec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(184, 149, 96, 0.22);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(50, 42, 24, 0.03);
  transition: all 0.3s ease;
}

.branch-doctor-featured__specs-card .spec-row:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(184, 149, 96, 0.45);
  box-shadow: 0 6px 16px rgba(184, 149, 96, 0.12);
}

.branch-doctor-featured__specs-card .spec-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184, 149, 96, 0.18), rgba(184, 149, 96, 0.06));
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.branch-doctor-featured__specs-card .spec-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.branch-doctor-featured__specs-card .spec-badge {
  display: block;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.branch-doctor-featured__specs-card .spec-value {
  color: #2A241E;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.branch-doctor-featured__highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0 0 20px;
  padding: 0;
  border: none;
  background: transparent;
}

.branch-doctor-featured__highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px;
  color: #3A3229;
  line-height: 1.45;
  font-weight: 400;
  transition: color 0.3s ease;
}

.branch-doctor-featured__highlight-item:hover {
  background: transparent !important;
  border: none !important;
  transform: none;
  box-shadow: none;
}

.branch-doctor-featured__highlight-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184, 149, 96, 0.2), rgba(184, 149, 96, 0.08));
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.branch-doctor-featured__quote {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 22px;
  background: #FAF8F5;
  border: 1px solid rgba(184, 149, 96, 0.25);
  border-left: 3.5px solid #B89560;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(50, 42, 24, 0.03);
  transition: all 0.3s ease;
}

.branch-doctor-featured__quote:hover {
  background: #FCFAF7;
  border-color: rgba(184, 149, 96, 0.4);
  border-left-color: #D4AF37;
  box-shadow: 0 6px 18px rgba(184, 149, 96, 0.08);
}

.branch-doctor-featured__quote .quote-mark {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 42px;
  line-height: 0.8;
  color: #B89560;
  flex-shrink: 0;
  margin-top: 2px;
}

.branch-doctor-featured__quote p,
body[data-branch-id="pt2"] .branch-doctor-featured__quote p {
  margin: 0;
  font-size: 18px !important;
  font-style: italic;
  color: #4A4035;
  line-height: 1.7;
  font-weight: 400;
}

.branch-doctor-featured__pillars {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.branch-doctor-featured__pillar-tag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--olive-dark);
  background: rgba(248, 244, 236, .9);
  border: 1px solid rgba(184, 149, 96, .3);
  padding: 5px 12px;
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(50, 42, 24, .03);
}

.branch-doctor-featured__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
}

.branch-doctor-featured__btn-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(184, 149, 96, 0.4);
  border-radius: 999px;
  color: #4A3B28;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.branch-doctor-featured__btn-profile:hover {
  background: #B89560;
  color: #FFFFFF;
  border-color: #B89560;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184, 149, 96, 0.28);
}

.branch-doctor-featured__btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #C7A76B 0%, #987844 100%);
  border: none;
  border-radius: 999px;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(184, 149, 96, 0.32);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-doctor-featured__btn-book:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #A5844E 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(184, 149, 96, 0.45);
}

/* >1 "แพทย์หลักประจำสาขา" doctor at a branch renders as a one-at-a-time
   slide instead of a single static card — reuses the Awards carousel's
   .award-carousel/.award-viewport/.award-track/.award-nav/.award-dots
   classes (main.css) for the chrome, this just makes each slide take the
   full track width instead of Awards' ~25%-per-card sizing. See
   branch/[slug]/page.tsx and branch-doctor-featured-slider.js. */
.branch-doctor-featured-track .branch-doctor-featured-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.branch-doctor-featured-track .branch-doctor-featured-slide .branch-doctor-featured {
  margin-bottom: 0;
}

.branch-doctor-featured-carousel {
  margin-bottom: 0;
}

/* Equal spacing above/below the dots, between the slide and the regular
   doctor grid underneath — overrides .award-dots' asymmetric
   margin-top-only spacing (main.css), scoped to this section only so the
   Awards carousel elsewhere on the site is unaffected. */
.branch-doctor-featured-dots {
  margin: 24px 0;
}

.branch-doctor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.branch-doctor-grid .spec-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(184, 149, 96, .22);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 245, 239, .96));
  box-shadow: none;
  text-align: left;
  opacity: 1 !important;
  transform: none !important;
  transition: transform .35s ease, border-color .35s ease;
}

.branch-doctor-grid .spec-card:hover {
  border-color: rgba(166, 122, 89, .5);
  box-shadow: none;
  transform: translateY(-5px) !important;
}

.branch-doctor-grid .photo-wrap {
  position: relative;
  aspect-ratio: auto;
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: var(--radius-card-inner);
}

.branch-doctor-grid .photo-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}

.branch-doctor-grid .ph-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.94);
  transition: transform .8s var(--ease);
}

.branch-doctor-grid .spec-card:hover .ph-photo {
  transform: scale(1.06);
}

.branch-doctor-grid .program-branch {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--terracotta, var(--shell-gold));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-align: left;
}

.branch-doctor-grid .program-branch svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.branch-doctor-grid h3 {
  margin: 0 0 5px;
  font-size: 16px !important;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}

.branch-doctor-grid h3 a {
  color: inherit;
  font-size: 16px !important;
  transition: color .3s ease;
}

.branch-doctor-grid h3 a:hover {
  color: var(--gold);
}

.branch-doctor-grid .note {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.branch-doctor-grid .spec-subnote {
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 36px;
  margin-bottom: 16px;
  color: var(--olive);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}

.branch-doctor-grid .card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.branch-doctor-grid .btn-doc-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 30px;
  color: var(--olive-dark);
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: all .3s ease;
  text-decoration: none;
}

.branch-doctor-grid .btn-doc-detail:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.branch-doctor-grid .go {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
  text-transform: uppercase;
  transition: color .3s ease;
}

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

/* Section Footer & View All Link Button */
.branch-section-footer {
  margin-top: 48px;
  text-align: center;
}

.branch-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #FFFFFF !important;
  background: linear-gradient(130deg, #B89560, #967543);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(184, 149, 96, .26);
  transition: transform .35s var(--ease, ease), background .35s ease, color .35s ease, box-shadow .35s ease;
  text-decoration: none;
}

.branch-view-all-btn:hover {
  transform: translateY(-3px);
  color: #FFFFFF !important;
  background: linear-gradient(130deg, #c7a36d, #a5824e);
  box-shadow: 0 14px 32px rgba(184, 149, 96, .38);
}

/* Load More Spinner & Smooth Reveal Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spin-icon {
  animation: spin .75s linear infinite;
}

@keyframes fadeInUpSmooth {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.doc-card-fade-in {
  opacity: 0;
  animation: fadeInUpSmooth .65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Programs Section */
.branch-programs-section {
  padding: 92px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--gold-line);
}

.branch-program-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Program cards: same visual system as program.html */
.branch-program-grid .program-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(184, 149, 96, .22);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 245, 239, .96));
  box-shadow: var(--shadow-soft);
  transition: .35s;
}

.branch-program-grid .program-card:hover {
  border-color: rgba(166, 122, 89, .5);
  background: #fff;
  box-shadow: var(--shadow-gold);
  transform: translateY(-5px);
}

.branch-program-grid .card-visual {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: #dbe5e0;
}

.branch-program-grid .card-visual > a {
  display: block;
  width: 100%;
  height: 100%;
}

.branch-program-grid .card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s;
}

.branch-program-grid .program-card:hover .card-visual img {
  transform: scale(1.045);
}

.branch-program-grid .card-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 48%, rgba(48, 46, 42, .58));
  pointer-events: none;
}

.branch-program-grid .program-card .card-tag {
  display: none;
}

.branch-program-grid .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 22px 20px;
  text-align: left;
}

.branch-program-grid .card-body h3 {
  position: relative;
  width: 100%;
  margin: 8px 0 14px;
  padding-bottom: 14px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.branch-program-grid .card-body h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold), rgba(199, 167, 107, .42), transparent);
}

.branch-program-grid .card-title-link {
  color: inherit;
  font-family: var(--sans);
  font-size: inherit;
}

.branch-program-grid .card-title-link:hover {
  color: var(--gold);
}

.branch-program-grid .card-body p {
  display: -webkit-box;
  width: 100%;
  min-height: 64px;
  margin: 0 0 18px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.branch-program-grid .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.branch-program-grid .card-foot > span {
  color: var(--terracotta);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .015em;
}

.branch-program-grid .card-foot > span::after {
  content: " THB";
  font-size: 13px;
}

.branch-program-grid .card-link {
  padding: 0;
  border: 0;
  color: var(--gold);
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  white-space: nowrap;
}

.branch-program-grid .card-link:hover {
  color: var(--olive-dark);
}

#btnLoadMorePrograms {
  cursor: pointer;
  font-family: inherit;
}

#btnLoadMorePrograms:disabled {
  cursor: wait;
}

.branch-program-complete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 22px;
  border: 1px solid var(--gold-line);
  border-radius: 30px;
  color: var(--gold);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 4px 14px rgba(50, 42, 24, .05);
  font-size: 13.5px;
  font-weight: 500;
}

/* Articles / Innovations Section */
.branch-articles-section {
  padding: 92px 0;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--gold-line);
}

.branch-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Facilities & Atmosphere Section */
.branch-facilities-section {
  padding: 92px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--gold-line);
}

.facilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.facility-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  background: var(--cream-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card, 10px);
  box-shadow: 0 10px 30px rgba(50, 42, 24, .04);
}

.facility-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184, 149, 96, .12);
  color: var(--gold);
  flex-shrink: 0;
}

.facility-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.facility-text {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
}

.branch-facility-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 235px);
  gap: 16px;
}

.branch-gallery-item {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(184, 149, 96, .26);
  border-radius: var(--radius-card-inner, 8px);
  background: #e8dfd2;
  box-shadow: 0 14px 36px rgba(50, 42, 24, .08);
}

.branch-gallery-item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.branch-gallery-item--wide {
  grid-column: span 2;
}

.branch-gallery-item::after {
  position: absolute;
  inset: 38% 0 0;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(31, 25, 18, .62));
  pointer-events: none;
}

.branch-gallery-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.branch-gallery-open:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -5px;
}

.branch-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.branch-gallery-item--featured img {
  object-position: center;
}

.branch-gallery-item--wide img {
  object-position: center 55%;
}

.branch-gallery-item:hover img {
  transform: scale(1.045);
}

.branch-gallery-item figcaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 1;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  pointer-events: none;
}

body.branch-gallery-lightbox-open {
  overflow: hidden;
}

.branch-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px 86px;
  background: rgba(20, 17, 13, .92);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity .28s ease, visibility .28s ease;
}

.branch-gallery-lightbox[hidden] {
  display: none;
}

.branch-gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.branch-gallery-lightbox__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(1180px, 86vw);
  max-height: 88vh;
}

.branch-gallery-lightbox__content img {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 58px);
  object-fit: contain;
  border: 1px solid rgba(227, 209, 179, .32);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

.branch-gallery-lightbox__content p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

.branch-gallery-lightbox__close,
.branch-gallery-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.branch-gallery-lightbox__close:hover,
.branch-gallery-lightbox__nav:hover {
  border-color: rgba(227, 209, 179, .72);
  background: rgba(184, 149, 96, .72);
}

.branch-gallery-lightbox__close {
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 29px;
  font-weight: 200;
  line-height: 1;
}

.branch-gallery-lightbox__close:hover {
  transform: rotate(90deg);
}

.branch-gallery-lightbox__nav {
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.branch-gallery-lightbox__nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.branch-gallery-lightbox__nav--prev {
  left: 24px;
}

.branch-gallery-lightbox__nav--next {
  right: 24px;
}

.branch-gallery-lightbox__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Directions Section */
.branch-directions-section {
  padding: 88px 0;
  background: var(--cream-deep);
}

.directions-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 48px;
  background: var(--cream-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card, 10px);
  box-shadow: 0 16px 42px rgba(50, 42, 24, .06);
}

.directions-info h3 {
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--ink);
}

.directions-info p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  margin: 0;
}

.directions-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

/* Back Link */
.branch-detail-back {
  padding: 10px 0;
  text-align: left;
}

.branch-detail-back a {
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  transition: color .3s ease;
}

.branch-detail-back a:hover {
  color: var(--olive-dark);
}

/* Media Queries */
@media (max-width: 1200px) {
  .branch-doctor-grid,
  .branch-program-grid,
  .branch-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .branch-doctor-featured {
    min-height: 440px;
    padding: 24px;
    background-position: 20% top !important;
    align-items: flex-end;
  }

  .branch-doctor-featured__overlay {
    background: linear-gradient(180deg, rgba(253, 251, 247, 0.1) 0%, rgba(253, 251, 247, 0.88) 45%, rgba(253, 251, 247, 0.98) 100%);
  }

  /* Desktop positions the cutout left-aligned + full card height, but the
     card shrinks to 440px and the white body slides up to margin-top:180px
     on mobile, leaving only a short strip up top — center the doctor
     there instead of clipping them behind the body card. */
  .branch-doctor-featured__photo {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 14px;
    height: 175px;
    max-width: 80%;
    transform: translateX(-50%);
    object-position: top center;
  }

  .branch-doctor-featured__body {
    width: 100%;
    max-width: 100%;
    margin-top: 180px;
    padding: 24px 20px;
  }

  .branch-detail-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .branch-detail-media {
    max-width: 100%;
    min-height: 380px;
    aspect-ratio: 16 / 10;
  }

  .branch-detail-content {
    padding-left: 0;
  }

  .facilities-grid,
  .directions-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .directions-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .branch-detail-hero { padding: 42px 0 60px; }
  .branch-detail-meta { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .branch-detail-meta > div {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid rgba(184, 149, 96, .22);
    border-left: 0;
  }
  .branch-detail-meta > div:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .branch-doctor-grid,
  .branch-program-grid,
  .branch-article-grid {
    grid-template-columns: 1fr;
  }
  .directions-card { padding: 32px 24px; }
}

/* Sanampao: redesigned floating director profile panel */
/* Sanampao: redesigned floating director profile panel */
body[data-branch-id="pt2"] .branch-doctor-featured__body {
  width: min(52%, 560px);
  max-width: 560px;
  padding: 38px 40px 32px 42px;
  overflow: hidden;
  border: none;
  border-radius: 15px;
  background: #FFFFFF;
  box-shadow: 0 30px 70px rgba(45, 35, 20, 0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

body[data-branch-id="pt2"] .branch-doctor-featured__body::before {
  display: none !important;
}

@media (max-width: 1050px) {
  body[data-branch-id="pt2"] .branch-doctor-featured__body {
    width: 58%;
    padding: 32px 30px 28px 34px;
  }
}

@media (max-width: 900px) {
  body[data-branch-id="pt2"] .branch-doctor-featured {
    display: block;
    min-height: 0;
    padding: clamp(320px, 52vw, 430px) 24px 24px;
    background-position: 30% top !important;
    background-size: auto clamp(350px, 56vw, 470px);
    background-repeat: no-repeat;
  }

  body[data-branch-id="pt2"] .branch-doctor-featured__body {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  body[data-branch-id="pt2"] .branch-doctor-featured {
    padding: 320px 14px 14px;
    background-position: 30% top !important;
    background-size: auto 350px;
  }

  body[data-branch-id="pt2"] .branch-doctor-featured__body {
    margin-top: 0;
    padding: 26px 20px 22px 24px;
    border-radius: 15px;
  }

  body[data-branch-id="pt2"] .branch-doctor-featured__specs-card,
  body[data-branch-id="pt2"] .branch-doctor-featured__highlights,
  body[data-branch-id="pt2"] .branch-doctor-featured__actions {
    grid-template-columns: 1fr;
  }

  body[data-branch-id="pt2"] .branch-doctor-featured__btn-profile,
  body[data-branch-id="pt2"] .branch-doctor-featured__btn-book {
    width: 100%;
  }
}

/* Match the specialist-card responsive rhythm used on index.html. */
@media (min-width: 1101px) and (max-width: 1200px) {
  body[data-branch-id="pt2"] .branch-doctor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body[data-branch-id="pt2"] .branch-doctor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body[data-branch-id="pt2"] .branch-doctor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body[data-branch-id="pt2"] .branch-doctor-grid {
    grid-template-columns: 1fr;
  }
}

/* Match the four-column program grid and breakpoints used on program.html. */
@media (min-width: 1001px) and (max-width: 1200px) {
  body[data-branch-id="pt2"] .branch-program-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  body[data-branch-id="pt2"] .branch-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body[data-branch-id="pt2"] .branch-program-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .branch-facility-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .branch-gallery-item {
    height: 220px;
  }

  .branch-gallery-item--featured {
    grid-column: span 2;
    grid-row: auto;
    height: 360px;
  }

  .branch-gallery-item--wide {
    grid-column: span 2;
    height: 260px;
  }
}

@media (max-width: 640px) {
  .branch-facility-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .branch-gallery-item,
  .branch-gallery-item--featured,
  .branch-gallery-item--wide {
    grid-column: auto;
    height: 235px;
  }

  .branch-gallery-item figcaption {
    right: 15px;
    bottom: 14px;
    left: 15px;
  }

  .branch-gallery-lightbox {
    padding: 70px 16px 80px;
  }

  .branch-gallery-lightbox__content {
    max-width: 100%;
  }

  .branch-gallery-lightbox__content img {
    max-height: calc(100vh - 190px);
    border-radius: 12px;
  }

  .branch-gallery-lightbox__close {
    top: 16px;
    right: 16px;
  }

  .branch-gallery-lightbox__nav {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .branch-gallery-lightbox__nav:hover {
    transform: scale(1.06);
  }

  .branch-gallery-lightbox__nav--prev {
    left: calc(50% - 58px);
  }

  .branch-gallery-lightbox__nav--next {
    right: calc(50% - 58px);
  }
}