/* =========================================================
   cards.css — การ์ดบริการทรง "soft card"
   ปรับตามคอมโพเนนต์ IntegrationCard: ไอคอน 40px อยู่บนสุด
   เว้น 1.5rem แล้วตามด้วยหัวเรื่อง 1.125rem/600 และคำอธิบาย
   สีจาง ตัดที่ 2 บรรทัด · กรอบบาง เงาอ่อน พื้นนวลกว่าสีขาว
   ========================================================= */

.svc-grid{ gap:1rem; }

.svc-card{
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:1.5rem;                                  /* p-6 */
  background:#fbfcfd;                              /* variant="soft" */
  border:1px solid rgba(22,50,74,.09);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(22,50,74,.045);
}
.svc-card:hover{
  transform:translateY(-3px);
  border-color:rgba(22,50,74,.09);
  background:#fff;
  box-shadow:0 14px 30px -18px rgba(22,50,74,.4);
}

/* ไอคอน size-10 */
.svc-card figure{
  width:40px; height:40px; border-radius:11px;
}
.svc-card figure img{ width:25px; height:25px; }

/* หัวเรื่อง + คำอธิบาย */
.svc-body{
  display:block;
  margin-top:1.5rem;                               /* mt-6 */
  padding:0;
}
.svc-body h3{
  font-size:1.12rem; font-weight:600; line-height:1.5;
  margin-bottom:.35rem;                            /* space-y-1.5 */
}
.svc-body p{
  font-size:.92rem; line-height:1.72; color:var(--faint);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;   /* line-clamp-2 */
  margin:0;
}

/* ลูกศรย้ายไปมุมขวาบน โผล่ตอนชี้ */
.svc-card .svc-arrow{
  position:absolute; top:1.5rem; right:1.5rem;
}

/* หน้าบริการ — การ์ด "บริการอื่นที่เราดูแล" ไม่มีคำอธิบาย จึงย่อระยะลง
   ต้องเขียนเจาะจงระดับ .svc-related เพราะ style.css ล็อกความสูงไอคอนไว้
   ที่ 84px (และ 72px บนจอเล็ก) ด้วยความจำเพาะสูงกว่า .svc-card figure
   ถ้าไม่ทับตรงนี้ กล่องไอคอนจะกลายเป็น 40x84 คือผอมสูงผิดรูป */
.svc-related .svc-card{ padding:1.25rem; }
.svc-related .svc-card figure{ width:40px; height:40px; border-radius:11px; }
.svc-related .svc-card figure img{ width:25px; height:25px; }
.svc-related .svc-card .svc-body{ margin-top:1rem; }
.svc-related .svc-card .svc-body h3{ font-size:1rem; }

@media (max-width:900px){
  .svc-card{ padding:1.25rem; }
  .svc-card .svc-arrow{ top:1.25rem; right:1.25rem; }
}

/* บนมือถือคงเลย์เอาต์ 3 คอลัมน์ตามที่เลือกไว้
   ความกว้างต่อการ์ดเหลือราว 110px จึงซ่อนคำอธิบาย
   ให้เหลือไอคอนกับชื่อเหมือนเดิม */
@media (max-width:620px){
  .svc-related .svc-card{ padding:1rem .75rem; }
  .svc-related .svc-card figure{ width:34px; height:34px; }
  .svc-related .svc-card figure img{ width:22px; height:22px; }
  .svc-related .svc-card .svc-body{ margin-top:.85rem; }
  .svc-related .svc-card .svc-body h3{ font-size:.92rem; }

  .svc-body p{ display:none; }
  .svc-body{ margin-top:.85rem; }
  .svc-card{ padding:1rem .75rem; align-items:center; text-align:center; }
  .svc-card figure{ width:34px; height:34px; }
  .svc-card figure img{ width:22px; height:22px; }
  .svc-body h3{ font-size:.92rem; }
  .svc-card .svc-arrow{ display:none; }
}

/* =========================================================
   RAIL — ส่วน "บทความความรู้สุขภาพใจ" หน้าแรก
   การ์ดภาพเต็มใบ ข้อความขาวซ้อนบนไล่สีเข้มด้านล่าง
   เลื่อนแนวนอนแบบ snap · มีปุ่มลูกศรและจุดบอกตำแหน่ง
   ========================================================= */

.rail-head{ align-items:flex-start; }
.rail-head-copy{ max-width:52ch; }
.rail-head-copy p{
  margin-top:.9rem; font-size:.98rem; line-height:1.85; color:var(--body);
}
.rail-head-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:1.1rem;
  flex:none; margin-left:auto;
}
.rail-nav{ display:flex; gap:.5rem; }
.rail-btn{
  width:42px; height:42px; border-radius:var(--r-pill);
  border:1px solid var(--hair); background:#fff; color:var(--navy);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rail-btn svg{ width:18px; height:18px; }
.rail-btn:hover:not(:disabled){ background:var(--navy); color:#fff; border-color:var(--navy); }
.rail-btn:disabled{ opacity:.35; cursor:default; }

/* แถบเลื่อน — ให้การ์ดใบถัดไปโผล่พ้นขอบขวาเหมือนต้นแบบ */
.rail-wrap{ margin-top:2.2rem; }
.post-rail{
  display:flex; gap:1rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  /* ให้การ์ดใบแรกตรงกับขอบซ้ายของ .wrap (width: min(1200px, 100% - 48px))
     ส่วนขอบขวาปล่อยให้การ์ดใบถัดไปโผล่พ้นจอ */
  padding:.25rem 1.5rem .5rem max(24px, calc((100vw - 1200px) / 2));
  /* ต้องบอก scroll-padding ให้เท่ากับ padding ซ้าย ไม่อย่างนั้นจุด snap
     จะอยู่ที่ขอบ scrollport ทำให้แถบเลื่อนไปเองเท่ากับค่า padding ตอนโหลด */
  scroll-padding-left:max(24px, calc((100vw - 1200px) / 2));
}
.post-rail::-webkit-scrollbar{ display:none; }

.rail-card{
  position:relative; flex:0 0 auto;
  width:clamp(240px, 26vw, 340px);
  aspect-ratio:5 / 6;
  border-radius:16px; overflow:hidden;
  scroll-snap-align:start;
  display:block; text-decoration:none;
  background:var(--bg-soft);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rail-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(22,50,74,.5); }
.rail-card > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .6s var(--ease);
}
.rail-card:hover > img{ transform:scale(1.05); }

/* ม่านเข้มด้านล่าง — จำเป็นเพราะภาพปกเป็นสีพาสเทลอ่อน
   ถ้าไม่ใส่ ตัวหนังสือขาวจะอ่านไม่ออก */
.rail-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,26,38,0)   22%,
    rgba(10,26,38,.30) 40%,
    rgba(10,26,38,.68) 58%,
    rgba(10,26,38,.90) 76%,
    rgba(10,26,38,.96) 100%);
}
.rail-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.35rem 1.3rem; color:#fff;
}
.rail-tag{
  display:inline-block; font-size:.72rem; font-weight:500;
  padding:.16rem .6rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.22); backdrop-filter:blur(6px);
  color:#fff; margin-bottom:.6rem;
}
.rail-card-body h3{
  color:#fff; font-size:1.06rem; font-weight:600; line-height:1.55;
  margin:0 0 .45rem;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.rail-card-body p{
  color:rgba(255,255,255,.82); font-size:.88rem; line-height:1.7; margin:0 0 .9rem;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.rail-more{
  display:inline-flex; align-items:center; gap:.4rem;
  color:#fff; font-size:.88rem; font-weight:500;
}
.rail-more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.rail-card:hover .rail-more svg{ transform:translateX(4px); }

/* จุดบอกตำแหน่ง */
.rail-dots{
  display:flex; justify-content:center; gap:.45rem; margin-top:1.4rem;
}
.rail-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:var(--r-pill);
  background:var(--hair); cursor:pointer; transition:background .25s ease, width .25s ease;
}
.rail-dots button[aria-current="true"]{ background:var(--navy); width:20px; }

@media (max-width:860px){
  .rail-head{ flex-wrap:wrap; }
  .rail-head-side{ align-items:flex-start; margin-left:0; width:100%; }
  .rail-nav{ display:none; }          /* บนมือถือปัดด้วยนิ้วได้อยู่แล้ว */
  .rail-card{ width:min(76vw, 300px); }
  .post-rail{ padding-left:24px; padding-right:24px; scroll-padding-left:24px; }
}

/* =========================================================
   SPLIT CARD — ส่วนติดต่อเรา
   การ์ดใบเดียวแบ่งสองฝั่ง: ซ้ายแผงเข้มพร้อมข้อความและช่องทางติดต่อ
   ขวาเป็นฟอร์มพื้นสว่าง ป้ายกำกับอยู่เหนือช่องกรอก ปุ่มส่งเต็มความกว้าง
   (ต้นแบบใช้สีส้ม แต่คงสีแบรนด์ฟ้า-เขียวของคลินิกไว้)
   ========================================================= */

.split-card{
  display:grid; grid-template-columns:1fr 1.12fr;
  border-radius:22px; overflow:hidden; margin-top:2.4rem;
  background:#fff;
  box-shadow:0 1px 2px rgba(22,50,74,.05), 0 30px 60px -32px rgba(22,50,74,.42);
}

/* ---- ฝั่งซ้าย: แผงเข้ม ---- */
.split-visual{
  position:relative; isolation:isolate;
  padding:3rem 2.6rem; display:flex;
  background:#0f2b38; color:#fff; min-height:33rem;
}
/* หัวเรื่องอยู่บนตามต้นแบบ ส่วนช่องทางติดต่อดันลงไปชิดล่าง */
.split-visual-inner{ display:flex; flex-direction:column; width:100%; }
.split-visual .split-contact{ margin-top:auto; padding-top:2rem; }
.split-visual > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 25%; z-index:-2;
}
.split-visual::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(165deg,
    rgba(11,38,52,.90) 0%,
    rgba(11,38,52,.82) 42%,
    rgba(11,38,52,.94) 100%);
}
.split-visual-inner{ position:relative; }
.split-visual h3{
  color:#fff; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600;
  line-height:1.42; margin-bottom:.9rem;
}
.split-visual > .split-visual-inner > p{
  color:rgba(255,255,255,.78); font-size:.92rem; line-height:1.9;
  max-width:44ch; margin-bottom:1.5rem;
}
.split-contact{ list-style:none; display:flex; flex-direction:column; gap:1rem; margin:0; padding:0; }
.split-contact li{ display:flex; align-items:flex-start; gap:.8rem; font-size:.9rem; line-height:1.7; }
.split-contact .c-ico{
  width:34px; height:34px; flex:none; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); display:grid; place-items:center; color:#fff;
}
.split-contact .c-ico svg{ width:16px; height:16px; }
.split-contact span{ color:rgba(255,255,255,.86); }
/* บรรทัดชื่อคลินิก + ชั้น ให้เด่นกว่าบรรทัดที่อยู่ */
.split-contact .addr-lead{
  display:block; color:#fff; font-weight:500; margin-bottom:.15rem;
}
.split-contact a{ color:#fff; text-decoration:none; }
.split-contact a:hover{ text-decoration:underline; }

/* ---- ฝั่งขวา: ฟอร์ม ---- */
.split-form{ padding:3rem 2.8rem; background:#fff; }
.split-logo{ height:38px; width:auto; margin-bottom:1.6rem; display:block; }
.split-form h3{ font-size:1.75rem; font-weight:600; line-height:1.4; margin-bottom:.4rem; }
.split-form .form-sub{
  font-size:.93rem; line-height:1.8; color:var(--faint); margin-bottom:1.9rem;
}
.split-form .form-field label{
  display:block; font-size:.86rem; font-weight:500; color:var(--ink);
  margin-bottom:.42rem;
}
.split-form .form-field input,
.split-form .form-field select,
.split-form .form-field textarea{
  border-radius:12px; padding:.78rem 1rem; background:#fff;
  border:1px solid #dfe6ec; font-size:.95rem;
}
.split-form .form-submit{
  width:100%; border-radius:12px; padding:.95rem 1.5rem;
  font-size:1rem; justify-content:center;
}
.split-foot{
  text-align:center; font-size:.9rem; color:var(--faint); margin-top:1.2rem;
}
.split-foot a{ color:var(--teal-dark); font-weight:500; text-decoration:underline; }

@media (max-width:960px){
  .split-card{ grid-template-columns:1fr; }
  .split-visual{ min-height:auto; padding:2.4rem 1.75rem; }
  .split-visual h3{ font-size:1.4rem; }
  .split-form{ padding:2.2rem 1.75rem; }
}
@media (max-width:560px){
  .split-card{ border-radius:16px; margin-top:1.6rem; }
  .split-visual{ padding:2rem 1.35rem; }
  .split-form{ padding:1.9rem 1.35rem; }
  .split-form h3{ font-size:1.45rem; }
}

/* ===== Team: grouped grid + profile dialog ===== */
.team-group{
  display:flex; align-items:baseline; gap:.7rem;
  font-size:1.12rem; font-weight:500; color:var(--navy);
  margin:2.4rem 0 1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--hair);
}
.team-group:first-of-type{ margin-top:.4rem; }
.team-group span{ font-family:var(--font-head); font-size:.82rem; font-weight:400; color:var(--body); }
.team .team-grid{ grid-template-columns:repeat(3,1fr); gap:2rem 1.6rem; }
.team .team-card figure{ height:270px; }
button.team-link{ background:none; border:0; border-bottom:1px solid var(--hair); border-radius:0; cursor:pointer; padding:0 0 3px; }
button.team-link:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.team-dialog{
  width:min(640px, calc(100vw - 32px)); max-height:min(86vh, 860px);
  margin:auto; inset:0; padding:0; border:0; border-radius:20px; background:#fff; color:var(--navy);
  box-shadow:0 30px 80px -30px rgba(22,50,74,.55); overflow:hidden;
}
.team-dialog[open]{ display:flex; flex-direction:column; animation:tdIn .28s ease; }
.team-dialog::backdrop{ background:rgba(22,50,74,.45); backdrop-filter:blur(3px); }
@keyframes tdIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce){ .team-dialog[open]{ animation:none; } }
.td-close{
  position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--navy); cursor:pointer; box-shadow:var(--shadow-sm);
}
.td-close svg{ width:18px; height:18px; }
.td-close:hover{ color:var(--teal-dark); }
.td-body{ overflow-y:auto; padding:0 1.8rem 1.8rem; overscroll-behavior:contain; }
.tp-head{
  display:flex; align-items:flex-end; gap:1.3rem;
  margin:0 -1.8rem 1.4rem; padding:1.6rem 1.8rem 0;
  background:linear-gradient(170deg, var(--sky), var(--mint));
}
.tp-head figure{ flex:0 0 150px; height:150px; display:flex; align-items:flex-end; justify-content:center; }
.tp-head figure img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }
.tp-head > div{ padding-bottom:1.3rem; min-width:0; }
.tp-role{ font-family:var(--font-head); font-size:.82rem; color:var(--teal-dark); margin:0 0 .2rem; }
.tp-name{ font-size:1.3rem; font-weight:500; line-height:1.45; margin:0; }
.tp-lic{ font-family:var(--font-head); font-size:.8rem; color:var(--body); margin:.35rem 0 0; }
.td-body h4{ font-size:.92rem; font-weight:500; margin:1.3rem 0 .65rem; }
.tp-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.tp-tags li{
  font-family:var(--font-head); font-size:.82rem; line-height:1.5; color:var(--navy);
  background:var(--mint); border:1px solid #d3efe6; border-radius:999px; padding:.32rem .8rem;
}
.tp-list{ margin:0; padding:0 0 0 1.1rem; list-style:disc; }
.tp-list li{ font-family:var(--font-head); font-size:.86rem; line-height:1.7; color:var(--body); margin-bottom:.35rem; }
.tp-list li::marker{ color:var(--teal); }
.tp-book{ margin-top:1.5rem; width:100%; justify-content:center; }

@media (max-width:620px){
  .team .team-grid{ grid-template-columns:1fr 1fr; gap:1.4rem 1rem; }
  .team .team-card figure{ height:170px; }
  .team-group{ font-size:1.02rem; margin-top:1.8rem; }
  .team-dialog{ max-height:90vh; border-radius:18px; }
  .td-body{ padding:0 1.2rem 1.3rem; }
  .tp-head{ margin:0 -1.2rem 1.1rem; padding:1.2rem 1.2rem 0; gap:.9rem; }
  .tp-head figure{ flex-basis:104px; height:110px; }
  .tp-name{ font-size:1.08rem; }
}
.team-body h3, .tp-name{ word-break:keep-all; overflow-wrap:anywhere; }

/* ===== Contact form result popup ===== */
.cf-dialog{
  width:min(420px, calc(100vw - 32px)); margin:auto; inset:0;
  padding:2rem 1.8rem 1.6rem; border:0; border-radius:20px; background:#fff; color:var(--navy);
  text-align:center; box-shadow:0 30px 80px -30px rgba(22,50,74,.55);
}
.cf-dialog[open]{ animation:tdIn .28s ease; }
.cf-dialog::backdrop{ background:rgba(22,50,74,.45); backdrop-filter:blur(3px); }
@media (prefers-reduced-motion: reduce){ .cf-dialog[open]{ animation:none; } }
.cf-ico{ width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center;
  background:var(--mint); color:var(--teal-dark); }
.cf-ico svg{ width:32px; height:32px; }
.cf-dialog.is-error .cf-ico{ background:#fdecea; color:#c0392b; }
.cf-title{ font-size:1.2rem; font-weight:500; margin:0 0 .5rem; }
.cf-text{ font-family:var(--font-head); font-size:.9rem; line-height:1.7; color:var(--body); margin:0 0 1.4rem; }
.cf-ok{ width:100%; justify-content:center; }
.form-submit[disabled]{ opacity:.65; cursor:progress; }
.field-err{ margin:.4rem 0 0; font-family:var(--font-head); font-size:.8rem; color:#c0392b; }
.cf-text{ white-space:pre-line; }
.cf-dialog.is-error .cf-text{ text-align:left; display:inline-block; }

/* ===== Footer: compact on phones ===== */
@media (max-width:620px){
  .footer-grid{ gap:1.6rem; padding:2.4rem 0 1.8rem; }
  .footer-logo{ height:40px; margin-bottom:.7rem; }
  .footer-about p{ max-width:none; }
  .footer-col h3{ margin-bottom:.35rem; }
  .footer-extra{ display:none; }
  .footer-menu{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.2rem; row-gap:0; }
  .footer-menu h3{ grid-column:1 / -1; }
  .footer-contact{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
  .footer-contact h3, .footer-contact p{ grid-column:1 / -1; margin:0; }
  .footer-contact a{
    justify-content:center; text-align:center; white-space:nowrap;
    background:#fff; border:1px solid var(--hair); border-radius:999px; padding:.45rem .8rem;
  }
}

/* ===== Programme cards: 4 cards ===== */
@media (min-width:861px){
  .pkg-grid{ grid-template-columns:repeat(2, 1fr); gap:1.6rem 1.1rem; }
}
@media (min-width:1181px){
  .pkg-grid{ grid-template-columns:repeat(4, 1fr); }
  .pkg-card{ padding:2.2rem 1.5rem; }
  .pkg-foot{ flex-direction:column; align-items:stretch; }
  .pkg-foot .btn{ width:100%; justify-content:center; }
}

/* ===== Section heads: badge + label on one row, two-tone heading (same as แนวทางการดูแล) ===== */
.sec-head--stack{ grid-template-columns:1fr auto; align-items:end; gap:1.2rem 2rem; }
.sec-head--stack .sec-stack{ margin-bottom:1rem; }
.sec-head--stack h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); font-weight:500; }
@media (max-width:700px){
  .sec-head--stack{ grid-template-columns:1fr; gap:.9rem; }
  .sec-head--stack .text-link{ grid-column:1; margin-top:0; }
  .sec-head--stack .rail-head-side{ width:auto; gap:0; }
  .rail-head-copy p{ margin-top:.6rem; }
}