/*
 * 城市服务页样式 (7060023504)
 * 仅 /savannah-airport-shuttle 等城市页使用, 由 city.jsp 单独引入。
 * 与 rental.css 分离的原因: 城市页是纯内容页, 用不到租车表单/走马灯那 44KB 样式。
 *
 * 页面正文全部来自后台 Pages.bodyContent, 本文件为其中的 class 提供排版基线;
 * 后台改文案不需要动这里, 只要 bodyContent 里沿用 city-page / city-cta 两个 class。
 */

/* ==================== 城市服务页 (7060023504) ==================== */
/* 页面正文全部来自后台 Pages.bodyContent, 本段为其中的 class 提供排版基线。
   配色沿用首页 city-showcase 的做法: 深色页面背景 + 白色内容卡 ——
   城市页是长文页面(客户原文单段近 500 字符), 白底深字的可读性远好于深底浅字。
   后台改文案不需要动这里, 只要 bodyContent 里沿用 city-page / city-cta 两个 class。 */
.city-page {
    max-width: 900px;
    margin: 40px auto 60px;
    padding: 48px 52px 56px;
    background: #fff;
    border-radius: 14px;
    color: #444;
}
.city-page h1 {
    font-family: 'Jomolhari', serif;
    font-size: 38px;
    line-height: 1.25;
    color: #222;
    margin: 0 0 8px 0;
}
.city-page h2 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin: 34px 0 12px 0;
}
.city-page p {
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 16px 0;
}
.city-page a { color: #52a4a6; text-decoration: underline; }
.city-page a:hover { color: #3d8385; }

/* CTA 按钮: 文案必须带城市名+关键词(SEO 要求)故普遍偏长, 而全站 .button 是固定 42px 高、
   不换行的。这里在城市页作用域内放开高度让它折两行, 三个按钮均分一行并保持同高。
   color 必须重申 —— 上面 .city-page a 的青色会盖掉 .button 自带的白字, 变成青字压青底。 */
.city-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; align-items: stretch; }
.city-page .city-cta .button {
    flex: 1 1 0;
    min-width: 190px;
    height: auto;
    line-height: 1.45;
    padding: 12px 18px;
    white-space: normal;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.city-page .city-cta .button:hover { color: #fff; }

@media (max-width: 640px) {
    .city-page { margin: 16px 12px 32px; padding: 28px 20px 32px; border-radius: 10px; }
    .city-page h1 { font-size: 26px; }
    .city-page h2 { font-size: 19px; margin: 26px 0 10px 0; }
    .city-page p { font-size: 14px; }
    .city-cta { flex-direction: column; gap: 10px; margin-top: 30px; }
    .city-page .city-cta .button { flex: none; width: 100%; min-width: 0; }
}

/* h3: FAQ 小标题(bodyContent 里的问句) */
.city-page h3 {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 22px 0 6px 0;
}

/* 表格: 行程耗时表。两列固定比例, 目的地列长但耗时列必须始终可见 */
.city-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 26px 0;
    font-size: 14px;
    table-layout: fixed;
}
.city-table th:first-child,
.city-table td:first-child { width: 58%; }
.city-table th {
    text-align: left;
    background: #f4f7f7;
    color: #222;
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 2px solid #e2eaea;
}
.city-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.city-table tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
    .city-page h3 { font-size: 15px; margin: 18px 0 6px 0; }
    /* 窄屏不横滑: 横滑会把耗时列推出屏幕, 而耗时正是这张表的主信息。
       改为压字号 + 允许换行, 两列同屏可见 */
    .city-table { font-size: 13px; }
    .city-table th, .city-table td { padding: 8px 8px; word-break: break-word; }
    .city-table th:first-child,
    .city-table td:first-child { width: 55%; }
}

/* ============================================================
   城市大图 + 城市互链(7060023504 SEO)
   ============================================================ */

/* 首屏大图。原图是给首页走马灯的宽幅容器做的(1376x768), 这里容器更窄,
   用 object-fit: cover + 固定高度裁切, 不重新出图。
   aspect-ratio 兼容性够(Safari 15+), 但仍写死 height 兜底老浏览器, 避免加载时布局跳动。 */
/* 宽度必须跟正文 .city-page 的实际渲染宽度对齐(2026-08-05 刘子盟指出)。
   注意 1004 = .city-page 的 max-width 900 + 左右 padding 52*2 —— 它是默认的 content-box,
   900 只是内容宽, 视觉边界是 1004。这两块没有 padding, 直接写 1004 才与它齐。
   改 .city-page 的 max-width 或 padding 时, 这里和 .city-others 要跟着重算。
   (没有反过来给 .city-page 加 border-box, 那会让正文行宽突然缩 104px, 是回归。) */
.city-hero {
    max-width: 1004px;
    /* 顶部 40px 接住原来 .city-page 的位置 —— 加大图之前页面第一块是正文卡(margin-top:40px),
       现在第一块换成了大图, 它原先写 0 会直接贴住 header。
       底部留 0, 与正文卡的 margin-top:40px 折叠后正好也是 40px, 三块间距一致。 */
    margin: 40px auto 0 auto;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.city-hero img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

/* 底部「我们服务的城市」互链卡 */
.city-others {
    /* 1004 的由来见 .city-hero 上方注释 */
    max-width: 1004px;
    margin: 40px auto 20px auto;
    box-sizing: border-box;
}
.city-others__title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 0 18px 0;
}
.city-others__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* 卡片是 a, 压掉默认链接色与下划线 */
.city-others__card,
.city-others__card:hover,
.city-others__card:visited {
    color: inherit;
    text-decoration: none;
}
.city-others__card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.city-others__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.city-others__card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
/* 城市名压在图上, 底部加深色渐变保证任何图片下文字都可读 */
.city-others__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 18px 14px 18px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

@media (max-width: 640px) {
    .city-hero img { height: 200px; }
    /* 对齐正文卡窄屏的 margin: 16px 12px 32px —— 左右 12px 否则贴屏幕边, 顶部 16px 否则贴 header */
    .city-hero { margin: 16px 12px 0 12px; }
    .city-others { margin: 40px 12px 20px 12px; }
    /* 窄屏两张卡并排会挤到看不清城市名, 改单列 */
    .city-others__grid { grid-template-columns: 1fr; gap: 16px; }
    .city-others__title { font-size: 19px; }
    .city-others__card img { height: 170px; }
}