/* ════════════════════════════════════════════════════════════════════
   GOLIVE CONTENT COMPONENTS · 内容型组件库
   结构提炼自 Webflow 模板 "PodcastHub"(播客/内容站)
   视觉适配:星跃 VI(依赖 golive_tokens.css)
   用途:内容展示类区块 —— 案例库 / 爆款拆解 / 文章列表 / 内容详情
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════ 1 · 内容区块骨架 ════════════════════════
   PodcastHub 骨架:page-padding > container-large > section-padding */
.content-section{position:relative;padding-block:var(--section-padding--medium)}
.content-section.has-border-top{border-top:1px solid var(--color-border)}
.content-section.is-alt{background:var(--color-surface--alt)}
.content-section.is-accent{background:var(--accent);color:var(--color-on-accent)}
.content-section.is-accent .content-head h2{color:var(--color-on-accent)}
.content-section.is-accent .content-head .eyebrow{color:var(--color-lime--bright)}
.content-section.is-accent .content-head p{color:var(--color-on-accent--muted)}

/* ════════════════════════ 2 · 区块标题(Heading Section) ════════════════════════
   对应 PodcastHub .heading-section(text-6xl regular + text-large text-secondary) */
.content-head{max-width:var(--content-width--medium);margin-bottom:3rem}
.content-head.is-center{margin-inline:auto;text-align:center}
.content-head .eyebrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:var(--fonts--badge);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-coral);
  margin-bottom:1rem;
}
.content-head .eyebrow::before{content:"";width:2rem;height:1px;background:var(--color-coral)}
.content-head.is-center .eyebrow::after{content:"";width:2rem;height:1px;background:var(--color-coral)}
.content-head h2{font-size:var(--fs--h1);letter-spacing:var(--ls--display);margin-bottom:.75rem}
.content-head p{color:var(--color-text--secondary);font-size:var(--fs--body);line-height:var(--lh--body);max-width:32rem;margin-inline:auto}
/* 区块头部带操作按钮(右对齐) */
.content-head.is-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:none}
.content-head.is-row .ch-text{max-width:var(--content-width--medium)}
.content-head.is-row .ch-text p{margin-inline:0}

/* ════════════════════════ 3 · 内容卡(剧集卡 → 通用内容卡) ════════════════════════
   对应 PodcastHub .episode-item:封面缩略图 + hover overlay + 标题 + 描述 + 按钮 */
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap--large)}
.content-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--default);
  overflow:hidden;transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease),box-shadow var(--duration--base) var(--ease);
}
.content-card:hover{transform:translateY(-4px);border-color:var(--color-border--strong);box-shadow:var(--shadow--md)}
.content-card .cc-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--color-surface--alt)}
.content-card .cc-cover .cc-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.16em;color:var(--color-text--secondary)}
.content-card .cc-cover .cc-grad{position:absolute;inset:0;background:var(--gradient--brand);opacity:.16;transition:opacity var(--duration--base) var(--ease)}
.content-card:hover .cc-cover .cc-grad{opacity:.26}
/* 媒体型 overlay(播放按钮) */
.content-card .cc-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration--base) var(--ease);background:rgba(10,20,32,.25)}
.content-card:hover .cc-overlay{opacity:1}
.content-card .cc-play{
  width:3rem;height:3rem;border-radius:50%;background:var(--color-surface);color:var(--color-text--primary);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow--md);
  transform:scale(.85);transition:transform var(--duration--base) var(--ease);
}
.content-card:hover .cc-play{transform:scale(1)}
.content-card .cc-badge{position:absolute;top:.75rem;left:.75rem;z-index:2}
/* 封面角标 · 复用 badge */
.cc-badge .badge{font-size:.625rem;padding:.25rem .75rem}
/* 卡体 */
.content-card .cc-body{padding:1.25rem}
.content-card .cc-meta{display:flex;align-items:center;gap:.75rem;font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text--secondary);margin-bottom:.625rem}
.content-card .cc-meta .cc-cat{color:var(--color-coral)}
.content-card .cc-meta .cc-time{margin-left:auto}
.content-card h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.45;margin-bottom:.5rem}
.content-card p{font-size:.8125rem;color:var(--color-text--secondary);line-height:1.6}
.content-card .cc-cta{display:inline-flex;align-items:center;gap:.375rem;margin-top:1rem;font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-coral);transition:gap var(--duration--fast) var(--ease)}
.content-card .cc-cta:hover{gap:.625rem}
@media(max-width:1080px){.content-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.content-grid{grid-template-columns:1fr}}

/* 行式内容列表(编号 + 标题 + 时长) */
.content-rows{display:grid;gap:.5rem}
.content-row{
  display:flex;align-items:center;gap:1.25rem;padding:1.125rem 1.25rem;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--default);
  transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease),background-color var(--duration--base) var(--ease);
}
.content-row:hover{transform:translateX(4px);border-color:var(--color-border--strong);background:var(--color-surface)}
.content-row .cr-no{font-family:var(--fonts--badge);font-size:.75rem;color:var(--color-text--secondary);flex:none;width:2.5rem;font-variant-numeric:tabular-nums}
.content-row .cr-main{flex:1;min-width:0}
.content-row .cr-title{font-size:.9375rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-row .cr-meta{font-family:var(--fonts--badge);font-size:.625rem;color:var(--color-text--secondary);letter-spacing:.06em;text-transform:uppercase;margin-top:.25rem}
.content-row .cr-tag{flex:none;font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.08em;color:var(--color-text--secondary)}
.content-row .cr-arrow{flex:none;color:var(--color-text--secondary);transition:color var(--duration--fast) var(--ease),transform var(--duration--fast) var(--ease)}
.content-row:hover .cr-arrow{color:var(--color-coral);transform:translateX(3px)}

/* ════════════════════════ 4 · 画廊 Gallery ════════════════════════
   对应 PodcastHub .gallery-section */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery-item{position:relative;aspect-ratio:4/3;border-radius:var(--radius--default);overflow:hidden;border:1px solid var(--color-border)}
.gallery-item .gi-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.14em;color:var(--color-text--secondary);transition:transform var(--duration--base) var(--ease)}
.gallery-item:hover .gi-bg{transform:scale(1.04)}
.gallery-item .gi-bg .g{position:absolute;inset:0;background:var(--gradient--brand);opacity:.14}
.gallery-item.is-tall{aspect-ratio:4/5}
@media(max-width:900px){.gallery-grid{grid-template-columns:1fr 1fr}}

/* ════════════════════════ 5 · 大图分区 Big Image ════════════════════════
   对应 PodcastHub .big-image-section */
.big-image{position:relative;border-radius:var(--radius--default);overflow:hidden;min-height:26rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border)}
.big-image .bi-bg{position:absolute;inset:0;background:linear-gradient(160deg,var(--color-surface--alt),var(--accent));display:flex;align-items:center;justify-content:center}
.big-image .bi-bg .bi-glyph{font-family:var(--fonts--badge);font-size:.75rem;letter-spacing:.2em;color:var(--color-on-accent--muted)}
.big-image .bi-content{position:relative;text-align:center;padding:3rem 1.5rem;max-width:34rem;color:var(--color-on-accent)}
.big-image .bi-content .bi-tag{font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-lime--bright);margin-bottom:.75rem}
.big-image .bi-content h2{font-size:var(--fs--h1);letter-spacing:var(--ls--display);color:var(--color-on-accent);margin-bottom:.75rem}
.big-image .bi-content p{color:var(--color-on-accent--muted);font-size:.9375rem;line-height:1.6;margin-bottom:1.5rem}

/* ════════════════════════ 6 · 团队卡 Team ════════════════════════
   对应 PodcastHub .team-section */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap--large)}
.team-card{text-align:center}
.team-card .tc-avatar{width:100%;aspect-ratio:1;border-radius:var(--radius--default);background:var(--color-surface--alt);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.12em;color:var(--color-text--secondary);overflow:hidden;transition:transform var(--duration--base) var(--ease)}
.team-card:hover .tc-avatar{transform:translateY(-3px)}
.team-card b{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.25rem}
.team-card span{font-size:.8125rem;color:var(--color-text--secondary)}
.team-card .tc-socials{display:flex;gap:.5rem;justify-content:center;margin-top:.625rem}
.team-card .tc-socials a{width:1.75rem;height:1.75rem;border-radius:.375rem;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text--secondary);transition:all var(--duration--fast) var(--ease)}
.team-card .tc-socials a:hover{border-color:var(--color-coral);color:var(--color-coral)}
@media(max-width:1080px){.team-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:720px){.team-grid{grid-template-columns:1fr 1fr}}

/* ════════════════════════ 7 · 主持人 / 人物特写 Host ════════════════════════
   对应 PodcastHub .host-section:左右图文 */
.host-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.host-layout .host-portrait{border-radius:var(--radius--default);aspect-ratio:4/5;background:linear-gradient(160deg,var(--color-surface--alt),var(--color-border));display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);font-family:var(--fonts--badge);font-size:.75rem;letter-spacing:.2em;color:var(--color-text--secondary)}
.host-layout .host-quote{font-family:var(--fonts--heading);font-size:1.5rem;line-height:1.5;letter-spacing:-.01em;margin-bottom:1.5rem;color:var(--color-text--primary)}
.host-layout .host-quote::before{content:"“";color:var(--color-coral);font-family:Georgia,serif;font-size:2.5rem;line-height:0;display:block;margin-bottom:1rem}
.host-layout .host-name{font-size:1rem;font-weight:600}
.host-layout .host-role{font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text--secondary);margin-top:.25rem}
@media(max-width:900px){.host-layout{grid-template-columns:1fr}}

/* ════════════════════════ 8 · 内容详情头 Article Hero ════════════════════════
   对应 PodcastHub 单集页 .blog-article-hero */
.article-hero{padding-block:3.5rem 2.5rem}
.article-hero .ah-cover{position:relative;aspect-ratio:21/9;border-radius:var(--radius--default);overflow:hidden;background:var(--color-surface--alt);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;margin-bottom:2.5rem}
.article-hero .ah-cover .ah-glyph{font-family:var(--fonts--badge);font-size:.75rem;letter-spacing:.2em;color:var(--color-text--secondary)}
.article-hero .ah-cover .ah-grad{position:absolute;inset:0;background:var(--gradient--brand);opacity:.16}
.article-hero .ah-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text--secondary);margin-bottom:1.25rem}
.article-hero .ah-meta .ah-cat{color:var(--color-coral)}
.article-hero .ah-meta .ah-dot{width:3px;height:3px;border-radius:50%;background:var(--color-border--strong)}
.article-hero h1{font-size:var(--fs--h1);letter-spacing:var(--ls--display);max-width:44rem;margin-bottom:1.25rem}
.article-hero .ah-desc{color:var(--color-text--secondary);font-size:1.0625rem;max-width:36rem;line-height:1.7}
.article-hero .ah-actions{display:flex;gap:.75rem;margin-top:2rem;flex-wrap:wrap}

/* ════════════════════════ 9 · 正文排版 Article Body ════════════════════════ */
.article-body{max-width:var(--content-width--medium);margin-inline:auto}
.article-body p{font-size:1rem;line-height:1.85;color:var(--color-text--primary);margin-bottom:1.5rem}
.article-body h2{font-size:1.5rem;letter-spacing:-.02em;margin:2.5rem 0 1rem}
.article-body h3{font-size:1.125rem;margin:2rem 0 .75rem}
.article-body blockquote{border-left:3px solid var(--color-coral);padding:1rem 1.5rem;background:var(--color-surface--alt);border-radius:0 var(--radius--default) var(--radius--default) 0;font-size:1.0625rem;line-height:1.7;margin:2rem 0;color:var(--color-text--primary)}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.5rem}
.article-body li{line-height:1.8;margin-bottom:.5rem}
.article-body .ah-figure{border-radius:var(--radius--default);overflow:hidden;background:var(--color-surface--alt);border:1px solid var(--color-border);aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;margin:2rem 0}
.article-body .ah-figure figcaption{font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.08em;color:var(--color-text--secondary);text-align:center;padding:.75rem}

/* ════════════════════════ 10 · 分页 / 关联内容 ════════════════════════ */
.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:3rem}
.pagination .pg-num{width:2.5rem;height:2.5rem;border-radius:.5rem;border:1px solid var(--color-border);background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-family:var(--fonts--badge);font-size:.8125rem;color:var(--color-text--secondary);transition:all var(--duration--fast) var(--ease)}
.pagination .pg-num.is-active{background:var(--accent);color:var(--color-on-accent);border-color:var(--accent)}
.pagination .pg-num:hover{border-color:var(--color-coral);color:var(--color-coral)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap--large)}
@media(max-width:760px){.related-grid{grid-template-columns:1fr}}