/* ============ Homepage sections ============ */

/* hero */
.hero{position:relative; background:
  radial-gradient(120% 90% at 92% -10%, var(--teal-bg) 0%, rgba(230,245,245,0) 55%),
  var(--paper); overflow:hidden}
.hero .container{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:56px; align-items:center; padding-top:72px; padding-bottom:80px}
.hero h1{font-size:46px; line-height:1.3; letter-spacing:.01em}
.hero h1 .soft{color:var(--teal)}
.hero p.sub{color:var(--ink-2); font-size:16px; line-height:1.95; margin:22px 0 28px; max-width:30em}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap}
.sup-chip{display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 18px 8px 8px; box-shadow:var(--shadow-sm)}
.sup-chip img{width:40px; height:40px; border-radius:999px; object-fit:cover}
.sup-chip .t{font-size:12px; color:var(--ink-3); line-height:1.5}
.sup-chip .t b{display:block; font-size:13px; color:var(--ink); font-weight:700}

.hero-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:18px; position:relative}
.hero-card .tag{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.hero-card .tag .k{font-family:var(--serif); font-style:italic; color:var(--teal); font-size:13px}
.hero-card .tag .pill{font-size:11px; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:3px 10px}
.hero-card h3{font-size:18px; margin-bottom:12px}
.hero-card .pic{border-radius:var(--r-md); overflow:hidden; background:var(--primary-50)}
.hero-card .pic img{width:100%; height:230px; object-fit:cover}
.hero-card .more{margin-top:14px; display:flex; justify-content:flex-end}

/* category cards */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.cat-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; transition:.2s ease; display:flex; flex-direction:column}
.cat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#d9e6e6}
.cat-card .ill{aspect-ratio:1/.82; background:var(--primary-50); overflow:hidden}
.cat-card .ill img{width:100%; height:100%; object-fit:cover}
.cat-card .body{padding:20px 20px 22px}
.cat-card h3{font-size:17px; margin-bottom:8px}
.cat-card p{color:var(--ink-3); font-size:13px; line-height:1.75; margin:0 0 16px; min-height:44px}

/* doctor section */
.doctor{background:var(--bg-alt)}
.doctor .grid{display:grid; grid-template-columns:320px 1fr; gap:40px; align-items:start}
.doc-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; text-align:center; box-shadow:var(--shadow-sm)}
.doc-card img{width:96px; height:96px; border-radius:999px; object-fit:cover; margin:0 auto 14px; border:3px solid #fff; box-shadow:var(--shadow-sm)}
.doc-card .nm{font-size:18px; font-weight:700}
.doc-card .ro{font-size:12px; color:var(--ink-3); margin-top:4px}
.doc-card .cred{margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:8px}
.doc-card .cred span{font-size:11.5px; color:var(--ink-2); line-height:1.6}
.column-list{display:flex; flex-direction:column; gap:14px}
.col-item{background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:20px 22px;
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; transition:.18s}
.col-item:hover{border-color:var(--teal); box-shadow:var(--shadow-sm)}
.col-item .no{font-family:var(--serif); font-style:italic; font-size:28px; color:var(--cyan); line-height:1}
.col-item .meta{display:flex; gap:10px; align-items:center; margin-bottom:6px}
.col-item .tg{font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--qa); background:var(--accent-soft); border-radius:4px; padding:2px 7px}
.col-item .dt{font-size:11px; color:var(--ink-3)}
.col-item h4{font-size:15px; line-height:1.5; font-weight:500; color:var(--ink)}
.col-item .ar{color:var(--ink-3); font-family:var(--serif)}

/* latest articles */
.tabs{display:inline-flex; gap:6px; background:var(--primary-50); border-radius:999px; padding:4px}
.tabs button{border:none; background:none; font-family:var(--jp); font-size:13px; color:var(--ink-2);
  padding:7px 18px; border-radius:999px; cursor:pointer}
.tabs button.on{background:#fff; color:var(--teal); font-weight:700; box-shadow:var(--shadow-sm)}
.art-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.art-card{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:#fff; transition:.2s}
.art-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px)}
.art-card .thumb{aspect-ratio:16/9; overflow:hidden; background:var(--teal-bg)}
.art-card .thumb img{width:100%; height:100%; object-fit:cover}
.art-card .b{padding:18px 18px 20px}
.art-card .tags{display:flex; gap:8px; margin-bottom:10px}
.art-card .tags span{font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--teal); background:var(--teal-bg); border-radius:4px; padding:3px 8px}
.art-card h3{font-size:15px; line-height:1.55; font-weight:700}
.art-card .dt{font-size:11px; color:var(--ink-3); margin-top:12px}

/* newsletter */
.newsletter{background:
  radial-gradient(90% 120% at 50% -20%, var(--teal-bg) 0%, rgba(230,245,245,0) 60%), var(--paper);
  text-align:center}
.newsletter .kicker{display:block}
.newsletter h2{font-size:34px; margin:0 0 16px}
.newsletter p{color:var(--ink-2); max-width:34em; margin:0 auto 26px}
.nl-form{display:flex; gap:10px; max-width:460px; margin:0 auto; background:#fff;
  border:1px solid var(--border); border-radius:999px; padding:6px; box-shadow:var(--shadow-sm)}
.nl-form input{flex:1; border:none; outline:none; padding:0 18px; font-family:var(--jp); font-size:14px; color:var(--ink); background:transparent}
.nl-actions{display:flex; gap:12px; justify-content:center; margin-bottom:22px}
.nl-note{font-size:12px; color:var(--ink-3); margin-top:14px}

@media (max-width:900px){
  .hero .container{grid-template-columns:1fr; gap:32px; padding-top:44px; padding-bottom:52px}
  .hero h1{font-size:30px; line-height:1.35}
  .hero-card .pic img{height:200px}
  .cat-grid{grid-template-columns:1fr 1fr; gap:16px}
  .cat-card p{min-height:0}
  .doctor .grid{grid-template-columns:1fr; gap:24px}
  .col-item{grid-template-columns:auto 1fr; gap:14px}
  .col-item .ar{display:none}
  .art-grid{grid-template-columns:1fr; gap:18px}
  .newsletter h2{font-size:24px}
}
@media (max-width:560px){
  .cat-grid{grid-template-columns:1fr}
}