/* ==========================================================
   Scenic Iceland — 活动详情页专属样式
   取自 design-src/activity-styles.css，在 product-detail.css 之上叠加。
   ========================================================== */


/* === TOP TRUST STRIP (above title, troll-style) === */
.act-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1rem 0 .25rem}
.act-trust-item{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--color-mist);border-radius:100px;font-size:.82rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em}
.act-trust-item svg{width:18px;height:18px;stroke:var(--color-accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* === HIGHLIGHT LIST (thumb + text rows, 2 cols) === */
.hl-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.25rem}
.hl-row{display:grid;grid-template-columns:104px 1fr;gap:.9rem;padding:.7rem;background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;transition:var(--transition)}
.hl-row:hover{border-color:var(--color-accent-bright);transform:translateY(-2px);box-shadow:0 8px 20px rgba(42,122,150,.10)}
.hl-row-img{aspect-ratio:13/8;border-radius:6px;overflow:hidden;background:var(--color-mist);position:relative}
.hl-row-img img{width:100%;height:100%;object-fit:cover}
.hl-row-img image-slot{position:absolute;inset:0;width:100%;height:100%}
.hl-row-body{min-width:0;align-self:center}
.hl-row-name{font-size:.92rem;font-weight:700;line-height:1.25;margin-bottom:.2rem;letter-spacing:-.015em;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.hl-row-inc{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-grass-deep);background:var(--color-meadow);padding:.15rem .4rem;border-radius:4px}
.hl-row-desc{font-size:.82rem;color:var(--color-text-secondary);line-height:1.45}

/* === GEAR / INCLUDED CARDS === */
.gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem}
.gear{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;text-align:center;transition:var(--transition)}
.gear:hover{border-color:var(--color-grass);transform:translateY(-3px);box-shadow:0 10px 24px rgba(77,149,48,.12)}
.gear-img{aspect-ratio:16/10;background:linear-gradient(160deg,#eef7fb,#d6eef9);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.gear-img img{width:100%;height:100%;object-fit:cover}
.gear-img image-slot{position:absolute;inset:0;width:100%;height:100%}
.gear-body{padding:.85rem 1rem 1rem}
.gear-name{font-size:.95rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.25rem}
.gear-desc{font-size:.82rem;color:var(--color-text-secondary);line-height:1.45}

/* === ADD-ONS === */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem}
.addon{display:grid;grid-template-columns:76px 1fr;gap:.85rem;align-items:center;padding:.8rem;background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;transition:var(--transition)}
.addon:hover{border-color:var(--color-sun);box-shadow:0 8px 20px rgba(255,181,71,.16)}
.addon-img{width:76px;height:76px;border-radius:10px;overflow:hidden;background:var(--color-mist);flex-shrink:0;position:relative}
.addon-img img{width:100%;height:100%;object-fit:cover}
.addon-img image-slot{position:absolute;inset:0;width:100%;height:100%}
.addon-name{font-size:.9rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.2rem}
.addon-desc{font-size:.78rem;color:var(--color-text-secondary);line-height:1.4;margin-bottom:.4rem}
.addon-price{display:inline-flex;align-items:center;font-size:.85rem;font-weight:800;color:var(--color-grass-deep);background:var(--color-meadow);padding:.2rem .55rem;border-radius:100px}

/* === MEETING POINT === */
.meet{display:grid;grid-template-columns:1.1fr 1fr;gap:1.25rem;margin-top:1.25rem;background:var(--color-white);border:1px solid var(--color-border);border-radius:14px;overflow:hidden}
.meet-body{padding:1.35rem 1.5rem}
.meet-row{display:flex;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--color-border)}
.meet-row:last-child{border-bottom:none}
.meet-row svg{width:18px;height:18px;stroke:var(--color-accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.meet-label{font-size:.68rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:.15rem}
.meet-value{font-size:.9rem;font-weight:700;color:var(--color-text);line-height:1.35}
.meet-value small{display:block;font-weight:500;color:var(--color-text-secondary);font-size:.82rem;margin-top:.15rem}
.meet-map{position:relative;background:linear-gradient(180deg,#eef7fb,#dceff7);min-height:280px}
/* 设计稿里集合点是一张手绘 SVG，这条规则是给它写的。换成 Leaflet 之后
   容器里的 svg 变成了地图控件（缩放按钮、署名里的小旗子），撑满 100%
   会把署名旗子糊成一大块。限定只作用于直接子元素 —— Leaflet 的 svg
   都嵌在 .leaflet-container 里面，够不着。 */
.meet-map > svg{width:100%;height:100%;display:block}
.meet-warn{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;padding:.8rem .95rem;background:#fff8e8;border:1px solid #ffe3a8;border-radius:8px;font-size:.83rem;color:#7a5400;line-height:1.5}
.meet-warn svg{width:17px;height:17px;stroke:#c98a00;stroke-width:2.2;fill:none;flex-shrink:0;margin-top:1px}

/* === DEPARTURE TIMES === */
.deps{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem}
.dep{display:inline-flex;flex-direction:column;align-items:center;padding:.6rem 1.1rem;background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;min-width:92px}
.dep strong{font-size:1.05rem;font-weight:800;color:var(--color-text);letter-spacing:-.02em}
.dep span{font-size:.68rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:.1rem}
.dep.dep-season{background:var(--color-mist);border-color:var(--color-sky)}

@media (max-width:1100px){.act-trust{grid-template-columns:1fr 1fr}.addon-grid{grid-template-columns:1fr 1fr}.meet{grid-template-columns:1fr}}
@media (max-width:768px){.hl-list{grid-template-columns:1fr}.gear-grid{grid-template-columns:1fr}.addon-grid{grid-template-columns:1fr}.act-trust{grid-template-columns:1fr}}

/* 设计稿未收录、由本主题补齐的两处小样式 */
.addon-note {
  margin-top: 0.85rem;
  font-size: 0.82rem; color: var(--color-text-muted);
}
.meet-deps-title {
  margin-top: 1.5rem; margin-bottom: 0.25rem;
  font-size: 0.95rem; font-weight: 800; color: var(--color-text);
}
