/* Article template on "style A" (slc-article-design.php): loads AFTER design-a.css and uses its tokens (--deep --teal --aqua --aqua-line --ink ...),
   its fonts (Noto Serif Thai headings, Anuphan body) and its .btn / .crumbs / .steps / .amount components.
   Everything is scoped to .slc-art. Rollback = remove the article ID from SLC_ARTICLE_DESIGN_LIVE. */

.slc-art{--measure:540px;--header-h:176px;--rail:272px}   /* px, not rem: the site's html font-size is 62.5% */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.slc-art.slc-d{background:var(--white)}
.slc-art .page{overflow:clip}                              /* design-a uses hidden: that would stop the sticky contents list */
.slc-art a{overflow-wrap:anywhere}                         /* a pasted URL must wrap, not push the page sideways */

/* primary button in the deep teal: white on #2EAFCC (.btn-teal) is only 2.6:1 */
.slc-art .btn-deep{background:var(--deep);color:#fff}
.slc-art .art-body p.cta-inline a.btn-deep:hover{background:var(--deeper);color:#fff}

/* ---------- hero: title, reviewer, date, cover ---------- */
.slc-art .art-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 20px 32px;background:var(--deep);color:#fff}
.slc-art .art-copy{min-width:0}
.slc-art .art-hero .crumbs{margin:0;display:flex;gap:6px;min-width:0;white-space:nowrap}
.slc-art .art-hero .crumbs span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.slc-art .art-hero h1{font:600 clamp(25px,6.4vw,34px)/1.4 var(--serif);margin:0 0 18px;letter-spacing:0}
.slc-art .art-hero .crumbs+h1{margin-top:16px}
.slc-art .art-meta p{margin:0}
.slc-art .art-meta .upd{gap:4px 18px}
.slc-art .art-meta{display:grid;gap:8px;font-size:15px;line-height:1.6;color:#DDF2F7}
.slc-art .art-meta .rev{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.slc-art .art-meta .rev>b{font-weight:500;color:#fff}
.slc-art .art-meta a{color:#fff;text-underline-offset:3px}
.slc-art .art-meta time{color:#fff}
.slc-art .art-cover{margin:0}
.slc-art .art-cover img{width:100%;height:auto;border-radius:16px;background:#fff}
@media (min-width:900px){
  .slc-art .art-hero{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center;gap:48px;padding:40px 48px 52px}
  .slc-art .art-hero.no-cover{grid-template-columns:minmax(0,1fr)}
  .slc-art .art-hero h1{font-size:clamp(30px,2.9vw,36px)}
}

/* ---------- grid: contents rail + one reading column ---------- */
.slc-art .art-grid{display:grid;grid-template-columns:minmax(0,1fr);padding:26px 20px 0}
@media (min-width:900px){
  .slc-art .art-body{font-size:18px}   /* 18px + 540px = about 72 Thai characters a line (measured) */
  .slc-art .art-grid{grid-template-columns:var(--rail) minmax(0,var(--measure));grid-template-areas:"toc points" "toc body";column-gap:56px;justify-content:center;padding:44px 48px 0}
  .slc-art .art-grid.no-toc{grid-template-columns:minmax(0,var(--measure));grid-template-areas:"points" "body"}
  .slc-art .art-toc{grid-area:toc}
  .slc-art .art-points{grid-area:points}
  .slc-art .art-body{grid-area:body}
}

/* key points */
.slc-art .art-points{margin:0 0 20px;padding:20px 20px 10px;border:1px solid var(--aqua-line);border-radius:18px;background:var(--aqua)}
.slc-art .kp-title{margin:0 0 6px;font:600 20px/1.4 var(--serif);color:var(--deeper)}
.slc-art .art-points ul{margin:0;padding:0;list-style:none}
.slc-art .art-points li{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:9px 0;border-top:1px solid var(--aqua-line);font-size:16px;line-height:1.7}
.slc-art .art-points li:first-child{border-top:0}
.slc-art .art-points li::before{content:"";width:18px;height:18px;margin-top:5px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* contents: collapsed row on phones, sticky rail on desktop */
.slc-art .art-toc{margin:0 0 8px}
.slc-art .art-toc details{margin:0;padding:0;border:1px solid var(--aqua-line);border-radius:14px;background:#fff}
.slc-art .art-toc summary{padding:13px 16px;font:600 17px/1.4 var(--serif);color:var(--deeper)}
.slc-art .art-toc ol{margin:0;padding:2px 16px 12px;list-style:none}
.slc-art .art-toc li{margin:0}
.slc-art .art-toc a{display:block;padding:7px 0 7px 12px;border-left:3px solid var(--aqua-line);font-size:15px;line-height:1.5;color:var(--ink);text-decoration:none}
.slc-art .art-toc a:hover{color:var(--deep)}
.slc-art .art-toc a.on{border-left-color:var(--teal);color:var(--deeper);font-weight:500}
@media (min-width:900px){
  .slc-art .art-toc{position:sticky;top:158px;align-self:start;max-height:calc(100vh - 182px);overflow:auto;margin:0}
  .slc-art .art-toc details{border:0;border-radius:0;background:none}
  .slc-art .art-toc summary{padding:0 0 10px;pointer-events:none;cursor:default}
  .slc-art .art-toc summary::after{display:none}
  .slc-art .art-toc ol{padding:0}
}

/* ---------- reading column ---------- */
.slc-art .art-body{min-width:0;font-size:17px;line-height:1.95;color:var(--ink);overflow-wrap:break-word}
.slc-art .art-body>*:first-child{margin-top:0}
.slc-art .art-body p{margin:0 0 1.15em}
.slc-art .art-body a:not(.btn){color:var(--deep);text-underline-offset:3px}
.slc-art .art-body a:not(.btn):hover{color:var(--teal)}
.slc-art .art-body a.btn{text-decoration:none}
.slc-art .art-body a.btn-line,.slc-art .art-body a.btn-deep{color:#fff}
.slc-art .art-body a.btn-ghost{color:var(--deep)}
.slc-art .art-body strong{font-weight:600}
.slc-art .art-body h2{margin:2.3em 0 .65em;font:600 clamp(23px,5.6vw,29px)/1.45 var(--serif);color:var(--deeper);scroll-margin-top:var(--header-h)}
.slc-art .art-body h2::before{content:"";display:block;width:56px;height:5px;margin-bottom:14px;border-radius:3px;background:var(--slc-grad)}
.slc-art .art-body h2 strong,.slc-art .art-body h3 strong{font-weight:inherit}
.slc-art .art-body h3{margin:1.9em 0 .45em;font:500 clamp(19px,4.8vw,22px)/1.55 var(--serif);color:var(--ink);scroll-margin-top:var(--header-h)}
.slc-art .art-body h6{margin:.4em 0 1.2em;font:400 14px/1.6 var(--sans);color:var(--ink-soft);text-align:center}
.slc-art .art-body ul,.slc-art .art-body ol{margin:0 0 1.2em;padding:0;list-style:none}
.slc-art .art-body ul li{position:relative;margin:0 0 .45em;padding-left:26px}
.slc-art .art-body ul li::before{content:"";position:absolute;left:6px;top:.82em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.slc-art .art-body ol:not(.steps):not(.refs-list){counter-reset:n;padding-left:0}
.slc-art .art-body ol:not(.steps):not(.refs-list)>li{counter-increment:n;position:relative;margin:0 0 .5em;padding-left:30px}
.slc-art .art-body ol:not(.steps):not(.refs-list)>li::before{content:counter(n)".";position:absolute;left:0;top:0;font:600 16px/1.95 var(--serif);color:var(--deep)}

/* figures: real alt text becomes the caption, a picture credit or "*results vary" line sits under its picture */
.slc-art .art-body figure.af{margin:2em auto;text-align:center}
.slc-art .art-body figure.af img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:14px}
.slc-art .art-body figcaption{margin:10px auto 0;max-width:34em;font-size:14px;line-height:1.65;color:var(--ink-soft);text-align:center}
.slc-art .art-body figcaption .credit{display:block}
.slc-art .art-body figcaption .disc{display:block;margin-top:2px}
.slc-art .art-body figcaption a{color:inherit}
.slc-art .art-body .fig-row{display:grid;gap:14px;margin:2em 0}
.slc-art .art-body .fig-row figure.af{margin:0}
.slc-art .art-body .fig-row img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:600px){.slc-art .art-body .fig-row{grid-template-columns:1fr 1fr}}

/* tables */
.slc-art .art-body .tablewrap{margin:1.8em 0;overflow-x:auto;border:1px solid var(--aqua-line);border-radius:14px}
.slc-art .art-body table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.65}
.slc-art .art-body th,.slc-art .art-body td{padding:12px 14px;border-bottom:1px solid var(--aqua-line);text-align:left;vertical-align:top}
.slc-art .art-body thead th{background:var(--aqua);border-bottom:2px solid var(--teal);font:600 15.5px/1.5 var(--serif);color:var(--deeper)}
.slc-art .art-body tbody td:first-child{font-weight:600;color:var(--deeper);white-space:nowrap}
.slc-art .art-body tbody td:nth-child(2){background:none;font-weight:inherit}   /* design-a tints column 2 for its SLC-vs-others tables: not for every article table */
.slc-art .art-body thead th:nth-child(2){border-radius:0}
.slc-art .art-body tbody tr:last-child td{border-bottom:0}

/* steps (a run of "1. 2. 3." paragraphs is a real sequence) */
.slc-art .art-body .steps{margin:1.6em 0}
.slc-art .art-body .steps li{padding:14px 16px;margin:0}
.slc-art .art-body .steps li::before{margin-top:2px}
.slc-art .art-body .steps span{line-height:1.8;font-size:16.5px}
.slc-art .art-body .steps b{margin-bottom:2px;font-size:17px}

/* the article's own booking button (marketing pastes one with inline colours: the template swaps in the style A button) */
.slc-art .art-body p.cta-inline{margin:1.6em 0;text-align:center}
.slc-art .art-body p.cta-inline a.btn{color:#fff;text-decoration:none}

/* "Label : value" contact lines pasted as separate paragraphs */
.slc-art .art-body .kv{margin:1.6em 0;padding:14px 18px;border:1px solid var(--aqua-line);border-radius:14px;font-size:15.5px;line-height:1.8}
.slc-art .art-body .kv p{margin:0}
.slc-art .art-body .kv .kv-title{margin-bottom:4px;font-weight:600;color:var(--deeper)}

/* callout */
.slc-art .art-body p.note{margin:1.8em 0;padding:14px 18px;border-left:4px solid var(--teal);border-radius:0 14px 14px 0;background:var(--aqua);font-size:15.5px;line-height:1.8}

/* sources */
.slc-art .art-body .refs{margin:2.2em 0 0;padding-top:4px;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.slc-art .art-body .refs h2{font-size:20px;margin-top:1.6em}
.slc-art .art-body .refs-title{margin:0 0 .5em;font:600 17px/1.5 var(--serif);color:var(--deeper)}
.slc-art .art-body .refs ul,.slc-art .art-body .refs ol{margin:0}
.slc-art .art-body .refs li{margin:0 0 .5em}
.slc-art .art-body .refs-list{counter-reset:r;padding:0}
.slc-art .art-body .refs-list li{counter-increment:r;position:relative;padding-left:28px}
.slc-art .art-body .refs-list li::before{content:counter(r)".";position:absolute;left:0;top:0;font-weight:600;color:var(--deep)}
.slc-art .art-body .refs ul li::before{top:.75em;width:6px;height:6px}

/* FAQ accordion */
.slc-art .art-faq{margin:0 0 1.4em;border-top:1px solid var(--aqua-line)}
.slc-art .art-faq details{margin:0;padding:0;border-bottom:1px solid var(--aqua-line)}
.slc-art .art-faq summary{padding:16px 0;font:500 17px/1.6 var(--sans);color:var(--ink)}
.slc-art .art-faq summary:hover{color:var(--deep)}
.slc-art .art-faq .ans{padding:0 0 14px;font-size:16.5px;line-height:1.85;color:var(--ink-soft)}
.slc-art .art-faq .ans p{max-width:none;margin:0 0 .8em;color:inherit}
.slc-art .art-faq .ans strong{color:var(--ink)}

/* ---------- treatment price + booking card (after the intro) ---------- */
.slc-art .art-price{margin:2em 0;display:grid;border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(32,99,125,.18);overflow:hidden}
.slc-art .ap-main{padding:24px 22px 20px}
.slc-art .ap-label{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.slc-art .art-price .amount{margin:6px 0 4px;font:700 clamp(46px,12vw,60px)/1.1 var(--serif);color:var(--deeper);letter-spacing:-.02em}
.slc-art .art-price .amount.is-text{font-size:clamp(26px,7vw,30px);line-height:1.3;letter-spacing:0}
.slc-art .art-price .amount small{font:500 .32em var(--sans);margin-left:8px;color:var(--ink);letter-spacing:0}
.slc-art .art-price .amount-rule{width:96px}
.slc-art .art-price .was{font-size:16px;line-height:1.6}
.slc-art .ap-also{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--aqua-line);font-size:16px;line-height:1.6}
.slc-art .ap-cta{display:grid;align-content:center;gap:10px;padding:20px 22px 22px;background:var(--aqua)}
.slc-art .ap-cta .btn{width:100%;text-align:center;line-height:1.3}
.slc-art .ap-cta .fine{margin:2px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
@media (min-width:640px){.slc-art .art-price{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.slc-art .ap-main{padding:26px 26px 22px}}

/* ---------- LINE block inside the text (about 55% down; not sticky) ---------- */
.slc-art .art-body .art-mid{margin:2.2em 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 20px;border:1px solid var(--aqua-line);border-radius:18px;background:var(--aqua)}
.slc-art .art-body .art-mid p{margin:0;flex:1 1 240px;font-size:16px;line-height:1.7}
.slc-art .art-body .art-mid .btn{flex:0 0 auto}
@media (max-width:480px){.slc-art .art-body .art-mid .btn{width:100%}}

/* ---------- end: related + LINE ---------- */
.slc-art .art-end{margin-top:64px}
.slc-art .rel{max-width:1104px;margin:0 auto;padding:0 20px}
.slc-art .rel h2{margin:0 0 16px;font:600 clamp(23px,5.6vw,29px)/1.4 var(--serif);color:var(--deeper)}
.slc-art .rel-grid{display:grid;gap:12px}
.slc-art .rel-card{display:grid;grid-template-columns:104px 1fr;align-items:stretch;overflow:hidden;border:1px solid var(--aqua-line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none}
.slc-art .rel-card:hover{border-color:var(--teal)}
.slc-art .rel-card.no-img{grid-template-columns:1fr;grid-template-rows:1fr}
.slc-art .rel-card img{width:100%;height:100%;min-height:84px;object-fit:cover}
.slc-art .rel-card .t{display:grid;align-content:center;gap:2px;padding:12px 14px}
.slc-art .rel-card .k{font-size:13.5px;line-height:1.5;color:var(--deep)}
.slc-art .rel-card .n{font-size:16px;line-height:1.55;font-weight:500}
@media (min-width:760px){
  .slc-art .rel{padding:0 48px}
  .slc-art .rel-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .slc-art .rel-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .slc-art .rel-card img{aspect-ratio:40/21;height:auto}
  .slc-art .rel-card .t{align-content:start;padding:14px 16px 18px}
}
.slc-art .art-line{margin-top:56px;padding:44px 20px;background:var(--deeper);color:#fff}
.slc-art .art-line .inner{display:grid;gap:22px;max-width:1104px;margin:0 auto}
.slc-art .art-line h2{margin:0 0 8px;font:600 clamp(24px,5.8vw,32px)/1.4 var(--serif);color:#fff}
.slc-art .art-line p{margin:0;max-width:34em;color:#D9EEF4}
.slc-art .art-line .hero-ctas{align-items:center}
.slc-art .art-line .btn-ghost{color:#fff}
.slc-art .art-line .book{flex-basis:100%;margin:2px 0 0;font-size:15px}
.slc-art .art-line .book a{color:#9FE3F4}
@media (min-width:900px){.slc-art .art-line{padding:56px 48px}.slc-art .art-line .inner{grid-template-columns:1.2fr 1fr;align-items:center;gap:48px}}
@media (max-width:480px){.slc-art .art-line .hero-ctas .btn{width:100%}}