/* =====================================================================
 *  嘉丽泽权益详情页样式（benefits/jialize/）
 *  只放本页专属样式；通用组件见 subpage.css / styles.css
 * ===================================================================== */

/* ---------- 头图 ---------- */
.jl-hero { position: relative; color: #fff; background: var(--navy-950); }
.jl-hero__img { width: 100%; height: min(62vw, 420px); object-fit: cover; display: block; }
.jl-hero__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 20px 22px;
  background: linear-gradient(180deg, rgba(7, 21, 34, 0.12) 0%, rgba(7, 21, 34, 0) 32%, rgba(7, 21, 34, 0.86) 100%);
}
.jl-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.jl-badge {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 11px; border-radius: 999px;
  background: var(--gold); color: var(--navy-950);
}
.jl-badge--line {
  background: rgba(7, 21, 34, 0.42); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45); font-weight: 500;
}
.jl-hero__name {
  margin: 12px 0 2px; font-family: var(--font-display); font-weight: 900;
  font-size: 25px; letter-spacing: 0.01em;
}
.jl-hero__loc { margin: 0; font-size: 13px; opacity: 0.85; }
.jl-hero__value {
  margin: 12px 0 0; font-size: 14px; line-height: 1.7;
}
.jl-hero__value b {
  color: var(--gold-lt); font-size: 21px; font-weight: 800; padding: 0 2px;
}
.jl-hero__value s { opacity: 0.65; font-size: 13px; }
.jl-hero .share-page {
  position: absolute; top: 14px; right: 14px; margin: 0;
  background: rgba(7, 21, 34, 0.55); color: #fff; border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}

/* ---------- 价格区 ---------- */
.jl-season {
  background: var(--white); border: 1px solid rgba(10, 35, 66, 0.09);
  border-radius: var(--radius); overflow: hidden; margin: 0 0 14px;
  box-shadow: 0 2px 10px rgba(10, 35, 66, 0.05);
}
.jl-season__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--navy-900); color: #fff;
}
.jl-season__label { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.jl-season__tag { font-size: 12px; color: var(--gold-lt); letter-spacing: 0.06em; }
.jl-table { width: 100%; border-collapse: collapse; }
.jl-table th, .jl-table td {
  padding: 12px 8px; font-size: 14px; text-align: right; vertical-align: top;
}
.jl-table th {
  font-size: 12px; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid rgba(10, 35, 66, 0.08); padding-top: 10px; padding-bottom: 8px;
  white-space: nowrap;
}
.jl-table td { border-top: 1px solid rgba(10, 35, 66, 0.06); }
.jl-table tr:first-of-type td { border-top: none; }
.jl-table th:first-child, .jl-table td:first-child { text-align: left; padding-left: 14px; }
.jl-table th:last-child, .jl-table td:last-child { padding-right: 14px; }
.jl-table td:not(:first-child) { white-space: nowrap; }
.jl-item { font-weight: 600; color: var(--ink); }
.jl-item small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.jl-price { color: var(--gold-deep); font-weight: 800; font-size: 17px; white-space: nowrap; }
.jl-price small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.jl-guest { color: var(--muted); white-space: nowrap; }
.jl-save {
  display: inline-block; white-space: nowrap;
  background: rgba(197, 161, 91, 0.16); color: var(--gold-deep);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; font-weight: 700;
}
.jl-hotel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--navy-900); color: #fff; border-radius: var(--radius);
  padding: 14px 16px; margin: 0 0 12px;
}
.jl-hotel__label { font-weight: 700; }
.jl-hotel__label small { display: block; font-weight: 400; font-size: 12px; opacity: 0.75; margin-top: 2px; }
.jl-hotel__price { color: var(--gold-lt); font-weight: 800; font-size: 20px; white-space: nowrap; }
.jl-hotel__price small { font-size: 12px; font-weight: 500; }
.jl-pricenote { margin: 4px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ---------- 订场流程 ---------- */
.jl-bookintro { margin: 0 0 6px; font-size: 14px; color: var(--ink); line-height: 1.8; }
.jl-steps { margin: 8px 0 0; padding: 0; list-style: none; }
.jl-step { display: flex; gap: 14px; position: relative; padding: 10px 0; }
.jl-step:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 44px; bottom: -6px;
  width: 2px; background: rgba(10, 35, 66, 0.12);
}
.jl-step__no {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold-lt);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; z-index: 1;
}
.jl-step__t { display: block; font-weight: 700; color: var(--navy-800); font-size: 15px; }
.jl-step__d { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.jl-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.jl-cta .btn { flex: 1 1 150px; justify-content: center; }
.jl-vouchernote {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: rgba(197, 161, 91, 0.12); color: var(--gold-deep);
  font-size: 13px; line-height: 1.7;
}
.jl-course-phone { margin: 12px 2px 0; font-size: 13px; color: var(--muted); }
.jl-course-phone a {
  display: inline-block; padding: 8px 2px; margin: -8px 0; /* 触控目标加高 */
  color: var(--navy-800); font-weight: 600; text-decoration: none;
}

/* ---------- 球场介绍 ---------- */
.jl-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px;
}
.jl-fact {
  background: var(--white); border: 1px solid rgba(10, 35, 66, 0.08);
  border-radius: 12px; padding: 12px 14px;
}
.jl-fact__k { font-size: 12px; color: var(--muted); }
.jl-fact__v { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--navy-800); line-height: 1.5; }
.jl-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.9; color: var(--ink); }
.jl-block { margin-top: 20px; }
.jl-block h3 {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; color: var(--navy-800);
}
.jl-block p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: var(--ink); }
.jl-block img.jl-photo {
  width: 100%; border-radius: var(--radius); display: block; cursor: zoom-in;
}
.jl-holemaps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.jl-holemap {
  position: relative; border: none; padding: 0; cursor: zoom-in;
  border-radius: 12px; overflow: hidden; background: var(--navy-950);
}
.jl-holemap img {
  width: 100%; height: 150px; object-fit: cover; object-position: top; display: block;
  opacity: 0.92;
}
.jl-holemap span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
  font-size: 12px; color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(7, 21, 34, 0), rgba(7, 21, 34, 0.85));
}

/* ---------- 图集 ---------- */
.jl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jl-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 10px; cursor: zoom-in; background: rgba(10, 35, 66, 0.06);
}

/* ---------- 交通与住宿 ---------- */
.jl-map { width: 100%; border-radius: var(--radius); display: block; cursor: zoom-in; margin-bottom: 12px; }
.jl-transport p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: var(--ink); }
.jl-pickups { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.jl-pickup {
  font-size: 13px; font-weight: 600; color: var(--navy-800);
  background: var(--white); border: 1px solid rgba(10, 35, 66, 0.14);
  border-radius: 999px; padding: 7px 13px;
}

/* ---------- 签约故事 / 须知 ---------- */
.jl-story p { margin: 0 0 12px; font-size: 14px; line-height: 1.9; color: var(--ink); }
.jl-story__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.jl-story__photos img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; cursor: zoom-in;
}
.jl-notice { margin: 0; padding: 0 0 0 2px; list-style: none; }
.jl-notice li {
  position: relative; padding: 6px 0 6px 18px;
  font-size: 13px; line-height: 1.8; color: var(--muted);
}
.jl-notice li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

.jl-back { padding: 26px 0 10px; text-align: center; }
.jl-back a { color: var(--navy-800); font-size: 14px; font-weight: 600; text-decoration: none; }

@media (min-width: 761px) {
  .jl-hero__img { height: 460px; }
  .jl-hero__overlay { padding: 28px 34px 30px; }
  .jl-hero__name { font-size: 32px; }
  .jl-hero__value { font-size: 16px; }
  .jl-hero__value b { font-size: 25px; }
  .jl-facts { grid-template-columns: repeat(4, 1fr); }
  .jl-gallery { grid-template-columns: repeat(4, 1fr); }
  .jl-holemap img { height: 210px; }
}