/* =====================================================================
   Articles — articles.php (index) and article.php (detail)
   Long-form medical reading. Measure is the whole design: ~68ch, generous
   leading, and every device that helps someone scan for the one paragraph
   they came for (contents list, tables, callouts, anchored headings).
   ===================================================================== */

/* ------------------------------------------------------------- index ---- */
.arts__hero{background:var(--mint);padding:3rem 0 2.5rem;border-bottom:1px solid rgba(11,122,59,.12)}
.arts__hero h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.12;margin:.5rem 0 .6rem;max-width:20ch}
.arts__hero .lead{max-width:62ch;margin:0}
.arts__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 1.75rem}
.arts__filters a{display:inline-flex;align-items:center;min-height:38px;padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:600;color:var(--ink-2);background:#fff;white-space:nowrap}
.arts__filters a:hover{border-color:var(--green-700);color:var(--green-700)}
.arts__filters a[aria-current]{background:var(--green-700);border-color:var(--green-700);color:#fff}

.arts__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.acard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.acard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.09);border-color:rgba(11,122,59,.3)}
.acard__img{aspect-ratio:16/9;overflow:hidden;background:var(--mint)}
.acard__img img{width:100%;height:100%;object-fit:cover;display:block}
.acard__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.acard__cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700)}
.acard__body h2,.acard__body h3{font-size:1.12rem;line-height:1.32;margin:0;color:var(--ink)}
.acard:hover h2,.acard:hover h3{color:var(--green-800)}
.acard__body p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2);text-align:left;hyphens:manual}
.acard__meta{margin-top:auto;padding-top:.4rem;font-size:.8rem;color:var(--muted);display:flex;gap:.5rem;align-items:center}

.acard--lead{grid-column:1/-1;flex-direction:row;align-items:stretch}
.acard--lead .acard__img{flex:0 0 46%;aspect-ratio:auto}
.acard--lead .acard__body{padding:2rem 2.25rem;justify-content:center;gap:.7rem}
.acard--lead h2{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}
.acard--lead p{font-size:1rem}
@media(max-width:820px){.acard--lead{flex-direction:column}.acard--lead .acard__img{flex:none;aspect-ratio:16/9}.acard--lead .acard__body{padding:1.15rem 1.25rem 1.35rem}}

/* ------------------------------------------------------------ detail ---- */
.art{padding:2.5rem 0 0}
.art__head{max-width:72ch;margin:0 auto}
.art__head h1{font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.14;margin:.55rem 0 .9rem}
.art__stand{font-size:1.12rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.25rem;text-align:left;hyphens:manual}
.art__byline{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.86rem;color:var(--muted);padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.art__byline .dot::before{content:"·";margin-right:.55rem}
.art__hero{margin:1.75rem auto 2rem;max-width:1000px;border-radius:18px;overflow:hidden;aspect-ratio:21/9}
.art__hero img{width:100%;height:100%;object-fit:cover;display:block}

.art__grid{display:grid;grid-template-columns:minmax(0,72ch) 260px;gap:3.5rem;justify-content:center;align-items:start}
.art__body{max-width:72ch;min-width:0}
.art__body h2{font-size:1.45rem;line-height:1.25;margin:2.5rem 0 .8rem;scroll-margin-top:110px}
.art__body h3{font-size:1.12rem;line-height:1.35;margin:1.9rem 0 .6rem;scroll-margin-top:110px;color:var(--green-800)}
.art__body h2 .anchor,.art__body h3 .anchor{opacity:0;margin-left:.4rem;color:var(--green-700);font-weight:400;text-decoration:none}
.art__body h2:hover .anchor,.art__body h3:hover .anchor,.art__body .anchor:focus{opacity:1}
.art__body p{font-size:1.02rem;line-height:1.75;margin-bottom:1.15rem;color:var(--ink-2)}
.art__body ul,.art__body ol{margin:0 0 1.35rem;padding-left:1.3rem}
.art__body ul{list-style:disc}.art__body ol{list-style:decimal}
.art__body li{margin-bottom:.6rem;line-height:1.7;color:var(--ink-2)}
.art__body li>strong:first-child{color:var(--ink)}
.art__body a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}

.art__note{display:flex;gap:.85rem;background:var(--clay);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:1.75rem 0}
.art__note i,.art__note svg{flex:none;width:20px;height:20px;color:var(--gold);margin-top:.15rem}
.art__note p{margin:0!important;font-size:.97rem;line-height:1.65;color:var(--ink);text-align:left!important;hyphens:manual}

.art__tablewrap{overflow-x:auto;margin:1.5rem 0 1.75rem;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch}
.art__table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:480px}
.art__table th{text-align:left;padding:.8rem 1rem;background:var(--mint);color:var(--green-800);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid rgba(11,122,59,.15)}
.art__table td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--ink-2)}
.art__table tr:last-child td{border-bottom:0}
.art__table tr:nth-child(even) td{background:rgba(15,23,42,.015)}

.art__fig{margin:1.75rem 0}
.art__fig img{width:100%;border-radius:14px;display:block}
.art__fig figcaption{margin-top:.5rem;font-size:.85rem;color:var(--muted)}

/* aside column */
.art__side{position:sticky;top:100px;font-size:.92rem}
.art__toc{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.25rem}
.art__toc strong{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.art__toc a{display:block;padding:.32rem 0;color:var(--ink-2);line-height:1.4;border-left:2px solid transparent;padding-left:.7rem;margin-left:-.7rem}
.art__toc a:hover{color:var(--green-700)}
.art__toc a.on{color:var(--green-800);font-weight:600;border-left-color:var(--green-700)}
.art__toc a.sub{padding-left:1.5rem;font-size:.88rem}
.art__askbox{background:var(--mint);border-radius:14px;padding:1.1rem}
.art__askbox strong{display:block;margin-bottom:.35rem;color:var(--green-800)}
.art__askbox p{margin:0 0 .8rem;font-size:.88rem;line-height:1.55;color:var(--ink-2);text-align:left;hyphens:manual}

/* footer blocks */
.art__disc{max-width:72ch;margin:2.5rem auto 0;padding:1.1rem 1.25rem;border:1px dashed var(--line);border-radius:14px;font-size:.88rem;line-height:1.65;color:var(--muted)}
.art__disc strong{color:var(--ink)}
.art__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.75rem 0}
.art__tags span{font-size:.78rem;padding:.32rem .7rem;border-radius:999px;background:var(--mint);color:var(--green-800);font-weight:600}
.art__prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.art__prod{display:flex;gap:.9rem;align-items:center;padding:.85rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.art__prod:hover{border-color:var(--green-700)}
.art__prod img{width:64px;height:64px;object-fit:contain;flex:none;background:var(--bg-2);border-radius:10px}
.art__prod strong{display:block;font-size:.95rem;line-height:1.3;color:var(--ink)}
.art__prod small{color:var(--muted);font-size:.82rem}
.art__nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.art__nav a{padding:1rem 1.15rem;border:1px solid var(--line);border-radius:14px}
.art__nav a:hover{border-color:var(--green-700)}
.art__nav small{display:block;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.art__nav strong{font-size:.98rem;line-height:1.35;color:var(--ink)}
.art__nav .next{text-align:right}
@media(max-width:620px){.art__nav{grid-template-columns:1fr}.art__nav .next{text-align:left}}

@media(max-width:1080px){
  .art__grid{grid-template-columns:minmax(0,1fr);max-width:72ch;margin-inline:auto}
  .art__side{display:none}
}

@media print{
  .topbar,.hdr,.mnav,.mega,.ftr,.cta-band,.art__side,.wa-fab,.wa-float,.skip,.art__nav,.art__askbox{display:none!important}
  .art__grid{display:block}
  .art__body{max-width:none}
  .art__body h2,.art__body h3{page-break-after:avoid}
  .art__body p,.art__body li,.art__table tr{page-break-inside:avoid}
}