/* Dive site articles + route maps */
.dive-site-article { max-width: 900px; margin: 0 auto; }
.dive-site-hero {
  min-height: 280px;
  background: center/cover no-repeat #0a3d5c;
  border-radius: 12px;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.dive-site-hero-inner {
  width: 100%;
  padding: 32px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
  color: #fff;
}
.dive-site-hero-inner h1 { margin: 0 0 6px; font-size: 2rem; color: #fff; }
.dive-site-ar { opacity: 0.9; margin: 0 0 8px; }
.dive-site-meta { margin: 0; font-size: 0.9rem; }
.dive-site-meta a { color: #7dd3fc; }
.dive-site-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.dive-site-fig { margin: 0; }
.dive-site-fig img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.dive-site-fig figcaption { font-size: 0.82rem; color: #64748b; margin-top: 6px; }
.dive-site-map { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e2e8f0; }
.dive-site-map-img {
  width: 100%;
  max-width: 720px;
  border-radius: 10px;
  margin-top: 16px;
  border: 1px solid #e2e8f0;
}

.dive-sites-section { padding: 48px 0; background: #f8fafc; }
.dive-sites-section .section-title { color: var(--lb-ocean, #0a3d5c); margin-bottom: 8px; }
.dive-sites-section .section-sub { color: #64748b; margin-bottom: 28px; }
.dive-sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.dive-site-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.dive-site-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.dive-site-card-img { height: 120px; background: center/cover no-repeat #cbd5e1; }
.dive-site-card-body { padding: 12px 14px; }
.dive-site-card-body h3 { font-size: 0.95rem; color: var(--lb-ocean, #0a3d5c); margin: 0 0 4px; }
.dive-site-card-body p { font-size: 0.8rem; color: #64748b; margin: 0; }

.boat-route-cell { display: flex; align-items: flex-start; gap: 12px; }
.boat-route-thumb {
  width: 56px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 6px;
  background: center/cover no-repeat #e2e8f0;
}
.boat-route-map { display: block; margin-top: 8px; max-width: 200px; }
.boat-route-map img { width: 100%; border-radius: 6px; border: 1px solid #e2e8f0; }

.lb-trip-map-link { display: block; margin: 8px 0; max-width: 180px; }
.lb-trip-map-link img { width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; }

/* Google Maps — click to open only, no embedded preview */
.map-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #dbe3ec;
  background: linear-gradient(180deg, #fff 0%, #f4f7fa 100%);
  color: var(--lb-ocean, #0a3d5c);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(10, 61, 92, 0.06);
}
.map-open-btn:hover {
  background: #eef4f8;
  border-color: #b8c9d9;
  box-shadow: 0 2px 6px rgba(10, 61, 92, 0.1);
}
.map-open-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z' fill='%23ea4335'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='%23fff'/%3E%3C/svg%3E");
}
.map-open-btn-inline {
  padding: 4px 10px;
  font-size: 0.78rem;
  vertical-align: middle;
}
.lb-trip-map-btn,
.boat-route-map-btn {
  margin: 10px 0 4px;
}
.bk-itin-map {
  margin: 16px 0;
}
.bk-itin-map-btn {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
}
.dive-site-map .map-open-btn {
  margin-top: 8px;
}
.dive-site-map-img { display: none; }

.bk-itin-hero {
  height: 160px;
  background: center/cover no-repeat #cbd5e1;
  border-radius: 8px;
  margin-bottom: 16px;
}
.bk-itin-sites a { color: var(--lb-teal, #00a8b5); font-weight: 700; }