/* join-banner.css — нүүр хуудасны Join-in group tours блок */
.join-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(460px, 62vh, 620px);
  padding: 72px 0;
  color: #fff;
  background: #123f28;
}
.join-banner picture, .join-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.join-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 22, 15, 0.72) 0%, rgba(10, 22, 15, 0.35) 50%, rgba(10, 22, 15, 0) 100%);
}
.join-banner-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.join-banner-eyebrow { display: block; margin-bottom: 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steppe-green); }
.join-banner h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.join-banner h2 em { font-style: italic; color: #F0C58A; }
.join-banner-text p { max-width: 560px; margin-top: 12px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.join-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.join-banner-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); }
.join-banner-ghost:hover { background: #fff; color: var(--altai-forest); }

.join-banner-groups { list-style: none; display: grid; gap: 10px; }
.join-banner-groups a {
  display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.94); color: var(--charcoal); text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.join-banner-groups a:hover { transform: translateY(-2px); }
.join-banner-groups small { color: #5b6360; }
.join-banner-badge { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #fbefdc; color: #8a5a17; font-size: 0.72rem; font-weight: 700; }
.join-banner-badge.is-done { background: #e3f1e6; color: var(--altai-forest); }
.join-banner-more a { background: rgba(12, 24, 17, 0.6); color: #fff; font-weight: 700; text-align: center; box-shadow: none; }

@media (max-width: 800px) {
  .join-banner { align-items: flex-end; }
  .join-banner::after { background: linear-gradient(to top, rgba(10, 22, 15, 0.88) 0%, rgba(10, 22, 15, 0.5) 60%, rgba(10, 22, 15, 0.15) 100%); }
  .join-banner-inner { grid-template-columns: 1fr; gap: 24px; }
}