@charset "UTF-8";
/* ============================================================
   全站唯一卡片样式（六个位置共用，只有数据不同）：
     ① /cities   ② /provinces   ③ /scenic-spots 主网格
     ④ 首页热门城市   ⑤ 首页热门省份   ⑥ /scenic-spots 顶部热门景区
   所有页面统一 @push('styles') 引本文件（带 ?v=filemtime）。
   ⚠️ 卡片相关规则只允许写在这里；cities-list.css / provinces-list.css / spots-list.css
      只保留各自页面独有的部分（页头 / 筛选条 / CTA / 大区跳转等）。
   图区用不依赖 aspect-ratio 的 padding-top 土办法撑高，图片绝对定位铺满 ——
   确保「有 <img> 且图区有高度、图片不被隐藏」。
   复用 layouts/app.blade.php 的 token：
     --primary-600/--primary-200/--text/--text-2/--text-3/--text-4/--border/--shadow-lg
     --radius/--radius-sm/--font-head/--font-body
   ============================================================ */

/* ===== 网格：桌面 4 列 → 平板 3 → 手机 2 → 窄机 1 ===== */
.lx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px 16px; }
@media (max-width: 991px) { .lx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .lx-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
/* 首页热门：手机 2 / 平板 3 / 桌面 6（一行 6 个小卡） */
.lx-grid.lx-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 576px) { .lx-grid.lx-grid--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .lx-grid.lx-grid--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }

/* ===== 卡片外壳 ===== */
.lx-card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--border, #dde9ed); border-radius: 16px;
  box-shadow: 0 2px 12px rgba(15, 62, 74, .07);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lx-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-200, #b5e5d9);
  box-shadow: var(--shadow-lg, 0 14px 34px rgba(15, 62, 74, .14));
}
/* 首屏外/纯前端分页时隐藏（DOM 与链接保留） */
.lx-off { display: none !important; }
/* 整卡链接：覆盖整张卡片（.lx-card 是 relative） */
.lx-link { position: absolute; inset: 0; z-index: 4; }

/* ===== 图区：padding-top 撑出 4:3 高度 + 图片绝对铺满（不依赖 aspect-ratio） ===== */
.lx-card .lx-media {
  position: relative; height: 0; padding-top: 75%;
  overflow: hidden; background: #123b45;
}
.lx-card .lx-media img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 1; visibility: visible;
  transition: transform .15s ease;
}
.lx-card:hover .lx-media img { transform: scale(1.03); }
/* 旧占位层一律不显示（图挂了就露 .lx-media 的深色底） */
.lx-card .lx-media .lx-ph,
.lx-card .lx-media .lx-media-ph { display: none !important; }

/* ===== 图片上方：白底头部两行（标题 / 短语 + 特征词；两行固定存在，内容可空） ===== */
.lx-card .lx-media-top {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 8px 10px 5px; background: #fff;
}
.lx-card .lx-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  font-family: var(--font-head, inherit); font-size: .88rem; font-weight: 700;
  line-height: 1.3; color: var(--text, #0f3e4a); white-space: normal;
}
.lx-card .lx-badge i { flex: 0 0 auto; font-size: .72rem; color: var(--primary-600, #0aa87a); }
.lx-card .lx-media-top-row2 {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 3px 6px; margin: 0; padding: 0; min-height: 0;
}
.lx-card .lx-tagline,
.lx-card .lx-tags,
.lx-card .lx-tags--media {
  display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 3px 6px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
}
.lx-card .lx-tagline,
.lx-card .lx-tag {
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  font-family: var(--font-body, inherit); font-size: .7rem; font-weight: 500;
  line-height: 1.4; color: var(--text-3, #658c96); white-space: nowrap;
}

/* ===== 图片下方：白底底部两行（简介 ≤2 行 + 一行淡字） ===== */
.lx-card .lx-body {
  display: flex; flex-direction: column;
  padding: 5px 10px 9px; background: #fff;
}
.lx-card .lx-desc {
  margin: 0; font-size: .72rem; font-weight: 400; line-height: 1.5;
  color: var(--text-3, #658c96);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lx-card .lx-foot {
  margin: 3px 0 0; font-size: .68rem; font-weight: 500; line-height: 1.4;
  color: var(--text-4, #8fa9af);
}

/* ===== 首页一行 6 个的紧凑变体：只降字号/内边距，不改结构 ===== */
.lx-grid--sm .lx-card { border-radius: 14px; }
.lx-grid--sm .lx-card .lx-media-top { padding: 6px 8px 4px; }
.lx-grid--sm .lx-card .lx-badge { font-size: .76rem; }
.lx-grid--sm .lx-card .lx-tagline,
.lx-grid--sm .lx-card .lx-tag { font-size: .62rem; }
.lx-grid--sm .lx-card .lx-body { padding: 4px 8px 7px; }
.lx-grid--sm .lx-card .lx-desc { font-size: .68rem; }
.lx-grid--sm .lx-card .lx-foot { font-size: .62rem; }

@media (prefers-reduced-motion: reduce) {
  .lx-card, .lx-card .lx-media img { transition: none; }
  .lx-card:hover { transform: none; }
  .lx-card:hover .lx-media img { transform: none; }
}

/* 首页热门城市/热门省份：和列表页一样一行 4 个（原来被 6 列的规则盖住了） */
.lx-home--cities .lx-grid.lx-grid--sm,
.lx-home--provinces .lx-grid.lx-grid--sm,
.lx-grid.lx-grid--sm{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
@media (max-width:1199px){ .lx-home--cities .lx-grid.lx-grid--sm,.lx-home--provinces .lx-grid.lx-grid--sm,.lx-grid.lx-grid--sm{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (max-width:991px){ .lx-home--cities .lx-grid.lx-grid--sm,.lx-home--provinces .lx-grid.lx-grid--sm,.lx-grid.lx-grid--sm{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
@media (max-width:575px){ .lx-home--cities .lx-grid.lx-grid--sm,.lx-home--provinces .lx-grid.lx-grid--sm,.lx-grid.lx-grid--sm{grid-template-columns:repeat(1,minmax(0,1fr))!important} }