﻿/* ==========================================================================
   Bloom24 — About page styles (page-about.php), prefix: ab-
   ========================================================================== */

/* Hero */
.ab-hero{padding:150px 0 70px;position:relative;background:
  radial-gradient(600px 360px at 90% 10%, rgba(232,106,138,.12), transparent 60%),
  radial-gradient(520px 340px at 4% 40%, rgba(203,168,219,.14), transparent 60%),
  var(--cream)}
/* 鲜花点缀：左上 + 右下两角水彩花束 */
.ab-hero::before,
.ab-hero::after{content:"";position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain;z-index:0}
.ab-hero::before{background-image:url("../images/decor/flower-left.png");width:300px;height:316px;top:0;left:0;opacity:.5}
.ab-hero::after{background-image:url("../images/decor/flower-right.png");width:320px;height:337px;right:0;bottom:-40px;opacity:.5}
.ab-hero .wrap{position:relative;z-index:1}
.ab-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:0}
.ab-hero h1{font-size:clamp(30px,4.2vw,48px);max-width:560px}
.ab-hero h1 em{font-style:italic;color:var(--rose-deep)}
.ab-hero .sub{font-size:1.0625rem;margin-top:20px;max-width:480px}
.ab-hero-actions{display:flex;gap:20px;margin-top:30px;flex-wrap:wrap;align-items:center}
.ab-link-more{font-weight:600;font-size:0.9375rem;color:var(--leaf);border-bottom:2px solid var(--mint);padding-bottom:2px;transition:.2s}
.ab-link-more:hover{color:var(--rose-deep);border-color:var(--rose)}
.ab-hero-photo{width:100%}
.ab-hero-photo img{box-shadow:0 18px 50px rgba(74,44,78,.14)}

/* Numbers card（叠压 hero 底边的深紫大卡） */
.ab-num-card{margin-top:56px;background:linear-gradient(160deg,var(--leaf) 0%,var(--leaf-mid) 100%);border-radius:var(--radius);padding:44px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;box-shadow:0 24px 60px rgba(74,44,78,.25);transform:translateY(70px);margin-bottom:-70px;position:relative;z-index:2}
.ab-num-val{font-family:var(--font-display);font-size:2.875rem;font-weight:700;color:#fff;line-height:1.1}
.ab-num-val span{color:var(--rose)}
.ab-num-lbl{font-size:0.7812rem;color:#CFC0D8;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
/* 数字卡之后的第一个板块顶部留出叠压空间 */
.ab-hero + section,
.ab-num-card + section{padding-top:130px}

/* story 板块：顶边奶油粉山丘波浪 + 淡粉底渐变到白（与 hero 无缝） */
.ab-story{background:#FDF0F3;padding-top:150px;position:relative}
.ab-story::before{content:"";position:absolute;top:-1px;left:0;right:0;height:80px;
  background:var(--cream);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,26 C1370,30 1290,8 1150,10 C1050,12 1000,46 900,44 C800,42 750,14 660,10 C560,6 520,30 430,38 C340,46 290,20 200,14 C120,9 60,36 0,22 Z'/%3E%3C/svg%3E") no-repeat top/100% 100%;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,26 C1370,30 1290,8 1150,10 C1050,12 1000,46 900,44 C800,42 750,14 660,10 C560,6 520,30 430,38 C340,46 290,20 200,14 C120,9 60,36 0,22 Z'/%3E%3C/svg%3E") no-repeat top/100% 100%}
#story .wrap{position:relative;z-index:1}
/* 卡片下挂区域：故事板块顶部从淡粉波浪色渐变到白 */
.ab-story{background:linear-gradient(180deg,#FDF0F3 0,#fff 260px)}

/* Split sections */
.ab-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ab-photo img{box-shadow:0 18px 50px rgba(74,44,78,.14)}

/* Timeline */
.ab-timeline{max-width:760px;margin:56px auto 0;position:relative;padding-left:34px}
.ab-timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--rose),var(--mint))}
.ab-tl-item{position:relative;padding:0 0 34px 22px}
.ab-tl-item:last-child{padding-bottom:0}
.ab-tl-item::before{content:"";position:absolute;left:-32px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}
.ab-tl-year{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--rose-deep)}
.ab-tl-body h3{font-size:1.125rem;margin:4px 0 4px}
.ab-tl-body p{font-size:0.9062rem;color:var(--grey)}

/* CTA 板块：与证书板块区分的独立底色 + 更有分量 */
.page-template-page-about .final{background:#F4ECF6;padding:130px 0 150px}
.page-template-page-about .final h2{font-size:clamp(30px,4.2vw,46px)}
.page-template-page-about .final .sub{color:var(--grey);font-size:1.125rem}
.page-template-page-about .final .btn{padding:17px 38px;font-size:1rem}
.page-template-page-about #certs{padding-bottom:60px}

/* Responsive */
@media(max-width:980px){
  .ab-hero{padding:120px 0 50px}
  .ab-hero-grid,.ab-split{grid-template-columns:1fr}
  .ab-hero-photo{max-width:480px;margin:0 auto}
  .ab-num-card{grid-template-columns:repeat(2,1fr);gap:18px;padding:34px 26px;transform:translateY(50px);margin-bottom:-50px}
  .ab-hero + section,
  .ab-num-card + section{padding-top:100px}
}
@media(max-width:600px){
  .ab-num-val{font-size:2.125rem}
  .ab-num-card{grid-template-columns:1fr 1fr;gap:14px;padding:28px 18px}
}
