/* =========================================================
   Category / Treatments Page (FINAL TYPOGRAPHY VERSION)
   ========================================================= */

:root{
  --page-max: 1120px;
  --gutter: 24px;
  --radius: 16px;

  --ink:#222;
  --muted:rgba(0,0,0,.72);
  --line:rgba(0,0,0,.10);

  --bg-soft:#f3f1ee;
  --bg-cta:#7a5a3a;
  --gold:#b7924a;

  background-color: #f0efe2;
}

@media (max-width:480px){
  :root{ --gutter:16px; }
}

/* =========================================================
   GLOBAL TYPE RULES (根据你提供规范)
   ========================================================= */

/* Section Titles */
.catIntro__title,
.catPopular__title,
.catBlogs__title,
.catCta__title{
  font-family:"Optima","URW Classico","Segoe UI",serif;
  font-weight:700;
  color: #63625c;
}

/* Body text */
.catIntro__desc,
.catCard__desc,
.catCta__sub{
  font-family:"Suisse Int'l","Suisse Intl","Inter",-apple-system,
               BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
}

/* Small titles / card titles */
.catIntro__kicker,
.catCard__title{
  font-family:"Suisse Int'l","Suisse Intl","Inter",-apple-system,
               BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;
}

/* =========================================================
   WRAPPERS
   ========================================================= */

.catIntro,
.catPopular,
.catBlogs,
.catCta{
  width:100%;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.catIntro__inner,
.catPopular__inner,
.catBlogs__inner,
.catCta__inner{
  max-width:var(--page-max);
  margin:auto;
}

/* =========================================================
   INTRO SECTION
   ========================================================= */

.catIntro{
  padding-top:56px;
  padding-bottom:26px;
  background-color: #fffef2;
}

.catIntro__inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:start;
}

.catIntro__kicker{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(0,0,0,.6);
  margin-bottom:10px;
}

.catIntro__title{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.12;
  color:#63625c;
}

.catIntro__desc{
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  max-width:640px;
}

.catIntro__media img{
  width:100%;
  border-radius:var(--radius);
  box-shadow:0 18px 46px rgba(0,0,0,.12);
}

/* tablet */
@media (max-width:1024px){
  .catIntro__inner{grid-template-columns:1fr 1fr;gap:28px;}
  .catIntro__title{font-size:30px;}
}

/* mobile */
@media (max-width:768px){
  .catIntro{padding-top:42px;}
  .catIntro__inner{grid-template-columns:1fr;gap:18px;}
}

/* =========================================================
   POPULAR SECTION
   ========================================================= */

.catPopular{
  padding-top:22px;
  padding-bottom:44px;
  background-color: #f0efe2;
}

.catPopular__title{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.12;
  color:var(--ink);
  text-align:left;
  margin-bottom: 5rem;
  margin-top: 5rem;
  color: #63625c;
}

.catGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.catCard{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

.catCard__media{
  height:190px;
  background:#faf7f2;
}

.catCard__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.catCard__body{
  padding:18px 18px 0;
}

.catCard__title{
  margin:0 0 10px;
  font-size:18px;
  color:var(--ink);
}

.catCard__desc{
  font-size:13px;
  line-height:1.7;
  color:rgba(0,0,0,.7);
  padding-bottom:14px;
  min-height:86px;
  text-decoration:none;
}

.catCard__actions{
  margin-top:auto;
  padding:14px 18px 18px;
  display:flex;
  gap:10px;
}

/* buttons */
.btn{
  height:34px;
  padding:0 14px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  background-color: #1888a3;
  color: #fffef2;
}

.btn:hover{
  background:#f0efe2;      /* 深一点的金色 */
  color:#1888a3;
}

.btn--ghost{
  border:1px solid rgba(0,0,0,.22);
  color:#111;
}

.btn--gold{
  border:1px solid var(--gold);
  background:var(--gold);
  color:#fff;
}

/* responsive grid */
@media (max-width:960px){
  .catGrid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:560px){
  .catGrid{grid-template-columns:1fr;}
}

/* =========================================================
   BLOG SECTION
   ========================================================= */

.catBlogs{
  background:var(--bg-soft);
  padding:34px 0 40px;
}

.catBlogs__title{
  text-align:center;
  margin-bottom:18px;
  font-size:18px;
}

/* fallback blog grid */
.catBlogs .articles__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

@media(max-width:960px){
  .catBlogs .articles__grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:560px){
  .catBlogs .articles__grid{grid-template-columns:1fr;}
}

/* =========================================================
   CTA
   ========================================================= */

.catCta{
  padding:22px var(--gutter);
  width: 100%;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.catCta__inner{
  background:#1888a3;
  border-radius:10px;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#fff;
}

.catCta__title{
  font-size:18px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: #fffef2;
}

.catCta__sub{
  font-size:13px;
  line-height:1.6;
  opacity:.9;
  max-width:680px;
}

.catCta__btn{
  height:36px;
  padding:0 16px;
  border-radius:8px;

  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  text-decoration:none;

  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;

  display:inline-flex;      /* ⭐关键 */
  align-items:center;       /* 垂直居中 */
  justify-content:center;   /* 水平居中 */

  text-align:center;
}

/* mobile CTA */
@media(max-width:768px){
  .catCta__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .catCta__btn{
    align-self:flex-end;
  }
}

.catCard__link{
  text-decoration:none;
  color:inherit;
}

.catCard__link:hover{
  text-decoration:none;
}

.catCard__link *{
  text-decoration:none !important;
}

/* ================================
   CARD HOVER – Premium Subtle Motion
   ================================ */

.catCard{
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.catCard:hover{
  transform: translateY(-6px) rotateZ(-0.4deg);
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
}

/* 轻微“呼吸感”微抖动（非常 subtle） */
.catCard:hover{
  animation: cardFloat .9s ease-in-out infinite alternate;
}

@keyframes cardFloat{
  from{
    transform: translateY(-6px) rotateZ(-0.4deg);
  }
  to{
    transform: translateY(-8px) rotateZ(0.3deg);
  }
}