/**
 * 餐饮服务页样式 —— 炭火烧烤 /bbq、烤全羊 /lamb
 *
 * 复用策略（重要，别改）：
 *   Hero     → home.css 的 .hero / .hero-overlay / .hero-aurora / .hero-content
 *              （home.css 在主站每个页面都无条件加载，所以直接用，不必复制）
 *   栅格     → common.css 的 .grid-2 / .grid-3 / .grid-4（断点也已写好）
 *   标题     → common.css 的 .section-title
 *   流程卡   → home.css 的 .step-card / .step-number
 *   → 本文件只写本页**真正新增**的组件。
 *
 * ⚠️ 不要为了让本页"看着独立"就把 hero / 筛选栏 / 分页 复制一份进来 ——
 *    合作频道（property.css / jobs.css / nanny.css）正是各自复制了一份，
 *    才有了三份重复实现，改一处漏两处。
 *
 * @project  BlazeHibachi - Premium Mobile Hibachi Catering
 * @company  YiShangQi (易商企)
 * @copyright Copyright (c) 2026 YiShangQi. All rights reserved.
 */

/* ---- 2. 简介 + 卖点 ---- */
.svc-intro {
    max-width: 760px;
    margin: 0 auto var(--space-6);
    text-align: center;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--color-text-light);
}

.svc-points {
    margin-top: var(--space-6);
}

.svc-point {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.svc-point-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(234, 88, 12, 0.08);
    color: var(--color-primary);
    font-size: var(--fs-lg);
}

.svc-point h3 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
}

.svc-point p {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: var(--lh-base);
}

/* ---- 3. 我们烤什么 ---- */
.svc-menu-item {
    padding: var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.svc-menu-item h3 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary);
}

.svc-menu-item p {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: var(--lh-base);
}

/* ---- 4. 适用场景 ---- */
.svc-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    text-align: center;
    border-radius: var(--border-radius-lg);
    background: var(--amber-50, rgba(234, 88, 12, 0.06));
}

.svc-scene i {
    font-size: var(--fs-xl);
    color: var(--color-primary);
}

.svc-scene span {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

/* ---- 6. 常见问题（原生 <details>，无需 JS）----
   ⚠️ 这里原先有 `max-width: 820px; margin: 0 auto`（把 FAQ 收窄居中）。
   它让 FAQ 成为本页**唯一**不占满容器的区块 —— 实测本页其它区块全是 1152px，
   只有 FAQ 是 820px，看起来像"没对齐"而不是排版选择（而且当初也没写理由）。
   现改为占满容器，与页面节奏一致。

   收窄的初衷是"问答正文行宽别太长" —— 但当前中英文答案都在一行以内，
   这个限制实际上没起作用。**以后若问答文案变长到两三行以上**，
   再把 max-width 加到 `.svc-faq-item p`（只压正文、不压卡片），别加回容器上。 */

.svc-faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-3);
    background: var(--color-bg);
}

.svc-faq-item summary {
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* 去掉浏览器默认三角，改用**纯 CSS 箭头**。
   刻意不用 Font Awesome 字符（content:'\f105' + font-family:'Font Awesome 6 Free'）：
   字体族名一旦与 all.min.css 里的定义不一致，箭头就会变成方块乱码。
   边框画箭头没有这个依赖。 */
.svc-faq-item summary::-webkit-details-marker { display: none; }

.svc-faq-item summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);        /* 收起时指向右 */
    transition: transform var(--transition);
    flex-shrink: 0;
    margin-left: var(--space-2);
}

.svc-faq-item[open] summary::after {
    transform: rotate(45deg);         /* 展开时指向下 */
}

.svc-faq-item p {
    padding: 0 var(--space-5) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: var(--lh-base);
}

/* ---- 7. 预约引导区（替代原先的套餐列表）---- */
.svc-book {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.svc-book h2 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-3);
}

.svc-book > p {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: var(--lh-base);
    margin-bottom: var(--space-5);
}

.svc-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

.svc-price strong {
    font-size: var(--fs-xxl);
    line-height: 1;
    color: var(--color-primary);
}

.svc-price--none {
    color: var(--color-text-light);
    font-style: italic;
}

.svc-book-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

/* ---- 7b. 预订区的「两档并列」（只在 /bbq 页出现，见 service.php 的 $isBbqPage）----
   /bbq 页同时承载炭火烧烤与整羊宴，所以预订区从"单一价格 + 单按钮"变成两张**带图大卡**。
   卡片与首页的服务卡（.service-tile）刻意同构：图片铺满整卡 + 下深上浅的遮罩 + 文字压底部，
   这样两处视觉语言一致，而且**图片直接复用后台「首页服务卡片」的同一套设置**，不用额外素材。

   ⚠️ 无图时回退成浅色卡（不铺图、文字用深色）：后台没传图时页面不能变成白板或深色空块。
   尺寸：桌面 2 列 → 每张约 564px 宽、380px 高（首页服务卡是 320px，这里多一行价格和按钮）。
   ⚠️ .svc-book 默认 max-width:680px 装不下 → /bbq 页加了 --wide 放开到通栏。 */
.svc-book--wide { max-width: 100%; }

.svc-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    text-align: left;
}

.svc-spec {
    position: relative;
    display: flex;
    min-height: 380px;
    padding: var(--space-6) var(--space-5);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

/* 有图：让图片通栏铺满，内边距交给 .svc-spec-body */
.svc-spec.has-image {
    padding: 0;
    border-color: transparent;
}

.svc-spec-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 下深上浅的遮罩：照片深浅不可控，白字要压得住（与 .service-tile-shade 同一思路） */
.svc-spec-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 13, 10, 0.10) 0%,
        rgba(20, 13, 10, 0.50) 55%,
        rgba(20, 13, 10, 0.82) 100%);
}

.svc-spec-body {
    position: relative;      /* 浮在图片与遮罩之上 */
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;   /* 有图时文字压底部，与首页服务卡一致 */
    gap: var(--space-3);
    text-align: center;
}

.svc-spec.has-image .svc-spec-body { padding: var(--space-6) var(--space-5); }

/* 无图时垂直居中：浅色卡里若也压底部，上方会留一大块空白 */
.svc-spec:not(.has-image) .svc-spec-body { justify-content: center; }

.svc-spec-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-secondary);
}

/* 有图时文字转白 + 轻微投影：遮罩之外再加一道保险，深色照片上也读得清 */
.svc-spec.has-image .svc-spec-name {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.svc-spec .svc-price {
    justify-content: center;
    margin-bottom: 0;
}

.svc-spec .svc-price strong { font-size: var(--fs-xxl); }

.svc-spec.has-image .svc-price {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.svc-spec.has-image .svc-price strong { color: #fff; }

.svc-spec .btn { margin-top: var(--space-2); }

/* ---- 整羊宴区块（在菜单区内部收尾，只在 /bbq 页出现）----
   放在菜单区**内部**而不是新开 .section：本页区块的白/灰交替是排好的，
   插一个新区块必然出现两块同色相邻。 */
.svc-lamb-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-bg);
    /* 统一 1px 边框，不做左侧主色描边。
       与上方菜单卡的区分交给标题色（.svc-lamb-main h3 用主色）+ 位置，不靠边框。 */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.svc-lamb-main {
    flex: 1 1 320px;
}

.svc-lamb-main h3 {
    margin-bottom: var(--space-2);
    font-size: var(--fs-md);
    color: var(--color-primary);
}

.svc-lamb-main p {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: var(--lh-base);
}

.svc-lamb-side {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: var(--space-3);
}

/* 这一档的价格与按钮靠左对齐（.svc-price 默认是居中，为预订区的排版写的） */
.svc-lamb-side .svc-price {
    justify-content: flex-start;
    margin-bottom: 0;
}

.svc-lamb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .svc-specs { grid-template-columns: 1fr; }
    .svc-spec { min-height: 300px; }                          /* 手机单列时 380px 会显得过高 */
    .svc-spec.has-image .svc-spec-body { padding: var(--space-5) var(--space-4); }
    .svc-lamb-box { padding: var(--space-4); }
    .svc-lamb-actions .btn { flex: 1 1 auto; justify-content: center; }
}

.svc-contact-hint {
    margin-top: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* ---- 8. 相关服务 ---- */
.svc-related-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.svc-related-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.svc-related-card > i:first-child {
    font-size: var(--fs-lg);
    color: var(--color-primary);
    flex-shrink: 0;
}

.svc-related-card > span {
    flex: 1;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.svc-related-arrow {
    color: var(--color-primary);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}