/* ============================================================
   FREEDOM 瑞度 - 重点项目 / 视频与出版类页面样式
   适用：index.html（重点服务推荐）、cctv.html、yearbook.html、case.html
   ============================================================ */

/* ---------- 通用：区块头部小标 ---------- */
.sec-eyebrow{
    display:inline-block;
    font-family: var(--font-sans-en);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-brand-red);
    font-weight: 700;
}

/* ============================================================
   一、首页「最新重点服务」推荐带
   ============================================================ */
.featured-band{
    background:
        radial-gradient(1200px 420px at 12% -10%, rgba(200,31,44,0.07), transparent 60%),
        linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
}
.featured-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
.feat-card{
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.feat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-3); }

.feat-card__top{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 26px 0; flex-wrap: wrap;
}
.feat-card__badge{
    display: inline-block;
    background: var(--color-brand-red);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.feat-card__eyebrow{
    font-family: var(--font-sans-en);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.feat-card__media{
    margin: 18px 26px 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0b0b0c;
    position: relative;
}
.feat-card__media video{ display:block; width:100%; aspect-ratio: 16 / 9; object-fit: contain; background:#0b0b0c; }
.feat-card__media--shots{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: transparent;
}
.feat-card__media--shots img{
    display:block; width:100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm);
}

.feat-card__body{ padding: 22px 26px 28px; display:flex; flex-direction:column; gap: 16px; flex:1; }
.feat-card__title{
    margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--color-ink);
    display:flex; flex-direction: column; gap: 4px;
}
.feat-card__title .en{
    font-family: var(--font-sans-en); font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: var(--ls-widest); color: var(--color-gray-400); text-transform: uppercase;
}
.feat-card__desc{ margin:0; color: var(--color-gray-700); line-height: var(--lh-relaxed); font-size: var(--fs-body-sm); }
.feat-card__list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.feat-card__list li{
    position: relative; padding-left: 22px; font-size: var(--fs-body-sm);
    color: var(--color-ink); line-height: 1.6;
}
.feat-card__list li::before{
    content:""; position:absolute; left:0; top:.55em;
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--color-brand-red); transform: rotate(45deg);
}
.feat-card__cta{ align-self: flex-start; margin-top: auto; }

@media (max-width: 900px){
    .featured-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   二、视频作品墙（央视投放作品 · 在线观看）
   ============================================================ */
.video-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    align-items: start;
}
.video-card{
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.video-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-3); }
.video-card__frame{
    position: relative; background: #0b0b0c; overflow: hidden;
    aspect-ratio: 16 / 9;
}
.video-card__frame.is-portrait{ aspect-ratio: 9 / 16; max-height: 520px; }
.video-card__frame video{
    display:block; width:100%; height:100%; object-fit: contain; background:#0b0b0c;
}
.video-card__ratio{
    position:absolute; top:10px; left:10px; z-index:2;
    background: rgba(0,0,0,.6); color:#fff;
    font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
    padding: 3px 10px; border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}
.video-card__body{ padding: 20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.video-card__brand{
    font-family: var(--font-sans-en); font-size: var(--fs-micro); font-weight:700;
    letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-brand-red);
}
.video-card__title{ margin:0; font-size: var(--fs-h4); font-weight:600; color: var(--color-ink); line-height: var(--lh-snug); }
.video-card__desc{ margin:0; font-size: var(--fs-body-sm); color: var(--color-gray-700); line-height: 1.7; }
.video-card__meta{
    display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top: 12px;
    border-top: 1px dashed var(--color-gray-200);
}
.video-card__tag{
    font-size: var(--fs-micro); color: var(--color-gray-700);
    background: var(--color-gray-50); border:1px solid var(--color-gray-200);
    padding: 3px 10px; border-radius: var(--radius-pill);
}

/* 案例卡上的「视频」角标 */
.case-card__badge--video{ background: var(--color-brand-red); }

/* ============================================================
   三、频道 / 规格卡片
   ============================================================ */
.channel-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.channel-card{
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    display:flex; flex-direction:column; gap: 12px;
    transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.channel-card:hover{ border-color: var(--color-brand-red); box-shadow: var(--shadow-2); transform: translateY(-4px); }
.channel-card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.channel-card__name{ margin:0; font-size: var(--fs-h4); font-weight:600; color: var(--color-ink); }
.channel-card__tag{
    font-size: var(--fs-micro); font-weight:700; letter-spacing: var(--ls-wide);
    color: var(--color-brand-red); background: var(--color-brand-red-l2);
    padding: 3px 10px; border-radius: var(--radius-pill);
}
.channel-card__row{
    display:flex; justify-content:space-between; gap:12px;
    font-size: var(--fs-caption); padding: 8px 0;
    border-bottom: 1px dashed var(--color-gray-200);
}
.channel-card__row:last-of-type{ border-bottom:none; }
.channel-card__row .k{ color: var(--color-gray-500); }
.channel-card__row .v{ color: var(--color-ink); font-weight:600; text-align:right; }
.channel-card__desc{ margin:0; font-size: var(--fs-body-sm); color: var(--color-gray-700); line-height:1.7; }

/* 通用信息卡（价值点） */
.tile-grid{
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.tile{
    background: var(--color-white); border:1px solid var(--color-gray-200);
    border-radius: var(--radius); padding: 26px;
}
.tile__k{
    font-family: var(--font-sans-en); font-size: var(--fs-caption); font-weight:700;
    letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-brand-red);
    display:block; margin-bottom: 10px;
}
.tile__v{ margin:0; font-size: var(--fs-body-sm); color: var(--color-gray-700); line-height: 1.75; }

/* ============================================================
   四、流程步骤
   ============================================================ */
.steps{ display: grid; gap: 2px; }
.step{
    display: grid; grid-template-columns: 92px 1fr; gap: 24px; align-items: start;
    padding: 24px 0; border-bottom: 1px solid var(--color-gray-200);
}
.step:last-child{ border-bottom: none; }
.step__num{
    font-family: var(--font-sans-en); font-size: 2rem; font-weight: 700; line-height:1;
    color: var(--color-brand-red); opacity: .9;
}
.step__name{ margin:0 0 6px; font-size: var(--fs-h4); font-weight: 600; color: var(--color-ink); }
.step__desc{ margin:0; font-size: var(--fs-body-sm); color: var(--color-gray-700); line-height: 1.75; }
@media (max-width: 640px){
    .step{ grid-template-columns: 56px 1fr; gap: 16px; }
    .step__num{ font-size: 1.4rem; }
}

/* ============================================================
   五、规格对照表
   ============================================================ */
.spec-table{ width:100%; border-collapse: collapse; background: var(--color-white); }
.spec-table th, .spec-table td{
    padding: 18px 20px; text-align: left; font-size: var(--fs-body-sm);
    border-bottom: 1px solid var(--color-gray-200); vertical-align: top;
}
.spec-table thead th{
    background: var(--color-gray-50); color: var(--color-ink);
    font-weight: 700; letter-spacing: var(--ls-wide); font-size: var(--fs-caption);
    text-transform: uppercase;
}
.spec-table tbody tr:last-child td{ border-bottom: none; }
.spec-table td strong{ color: var(--color-brand-red); }
.spec-wrap{
    border:1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden;
    overflow-x: auto;
}

/* ============================================================
   六、年鉴实拍图 / 图集
   ============================================================ */
.shot-grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px;
}
.shot-grid figure{
    margin:0; border-radius: var(--radius); overflow:hidden; background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}
.shot-grid img{ display:block; width:100%; height:100%; object-fit: cover; aspect-ratio: 3/4; transition: transform .7s var(--ease-out); }
.shot-grid figure:hover img{ transform: scale(1.04); }
.shot-grid figure.is-lead img{ aspect-ratio: 4/5; }
@media (max-width: 780px){
    .shot-grid{ grid-template-columns: 1fr 1fr; }
    .shot-grid figure.is-lead{ grid-column: 1 / -1; }
    .shot-grid figure.is-lead img{ aspect-ratio: 16/10; }
}
/* 通栏三图（年鉴实拍）：统一比例 */
.shot-grid--wide{ grid-template-columns: repeat(3, 1fr); }
.shot-grid--wide img,
.shot-grid--wide figure.is-lead img{ aspect-ratio: 4 / 3; }
@media (max-width: 780px){
    .shot-grid--wide{ grid-template-columns: 1fr; }
    .shot-grid--wide img,
    .shot-grid--wide figure.is-lead img{ aspect-ratio: 16 / 10; }
}

/* 竖屏视频容器（年鉴宣传片） */
.portrait-video{
    max-width: 380px; margin: 0 auto; border-radius: var(--radius-lg);
    overflow: hidden; background:#0b0b0c; box-shadow: var(--shadow-3);
}
.portrait-video video{ display:block; width:100%; aspect-ratio: 9/16; object-fit: contain; background:#0b0b0c; }

/* ============================================================
   七、案例详情页 · 在线视频
   ============================================================ */
.cd-video{ margin: 0 0 48px; }
.cd-video__title{
    display:flex; align-items:center; gap:10px;
    font-size: var(--fs-h3); font-weight:600; color: var(--color-ink);
    margin: 0 0 18px;
}
.cd-video__title .dot{
    width:10px; height:10px; border-radius:50%; background: var(--color-brand-red);
    box-shadow: 0 0 0 4px var(--color-brand-red-l2); flex: none;
}
.cd-video__frame{
    background:#0b0b0c; border-radius: var(--radius-lg); overflow:hidden;
    box-shadow: var(--shadow-2);
}
.cd-video__frame video{
    display:block; width:100%; max-height: 74vh; object-fit: contain; background:#0b0b0c;
}
/* 竖屏成片：收窄容器，居中呈现 */
.cd-video__frame.is-portrait{ max-width: 400px; margin: 0 auto; }
.cd-video__tip{
    margin: 14px 0 0; font-size: var(--fs-caption); color: var(--color-gray-500);
}

/* ============================================================
   八、常见问题
   ============================================================ */
.faq-list{ display:grid; gap: 12px; }
.faq-item{
    background: var(--color-white); border:1px solid var(--color-gray-200);
    border-radius: var(--radius); overflow: hidden;
}
.faq-item summary{
    cursor: pointer; list-style: none; padding: 20px 24px;
    font-size: var(--fs-body); font-weight: 600; color: var(--color-ink);
    display:flex; align-items:center; justify-content:space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"+"; font-family: var(--font-sans-en); font-size: 1.4rem; line-height:1;
    color: var(--color-brand-red); flex:none; transition: transform var(--dur-fast);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item__a{
    margin:0; padding: 0 24px 22px; font-size: var(--fs-body-sm);
    color: var(--color-gray-700); line-height: var(--lh-relaxed);
}

/* ============================================================
   九、深色区块内的浅色调整
   ============================================================ */
.section--dark .tile{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.section--dark .tile__v{ color: rgba(255,255,255,0.78); }
.section--dark .tile__k{ color: #FF8A93; }