/*
 * activity.css — карточка рейса/экскурсии /activity/{slug}.
 *
 * Общий слой для всех динамических карточек офферов (водные рейсы, пешие,
 * автобусные и другие экскурсии). Расширяет styles.css и route.css: свои
 * классы — только с префиксом ac-. Палитра и шрифты — токены styles.css,
 * новые цвета не вводим.
 */

/* --- Hero с обложкой ----------------------------------------------------- */
.ac-hero { position: relative; display: flex; align-items: center; min-height: clamp(540px, 82vh, 760px); padding: 4.5rem 0 5.5rem; overflow: hidden; }
.ac-hero::before, .ac-hero::after { content: none; }
.ac-hero__cover { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-hero__veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(97deg, rgba(8, 47, 60, .95) 6%, rgba(8, 47, 60, .74) 42%, rgba(8, 47, 60, .38) 76%, rgba(8, 47, 60, .52)), linear-gradient(180deg, rgba(8, 47, 60, .5), transparent 26% 74%, rgba(8, 47, 60, .68)); }
.ac-hero__inner { position: relative; }
.ac-hero__copy { position: relative; z-index: 1; max-width: 700px; }
.ac-hero h1 { max-width: 640px; margin-bottom: 1.3rem; font-size: clamp(2.3rem, 4.6vw, 4.2rem); text-wrap: balance; }
.ac-hero .home-hero__lead { max-width: 600px; margin-bottom: 1.9rem; font-size: 1.05rem; }

.ac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; max-width: 780px; margin: 0 0 2.1rem; padding: 0; list-style: none; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .16); }
.ac-facts li { padding: .9rem 1rem; background: rgba(8, 47, 60, .58); backdrop-filter: blur(5px); }
.ac-facts small { display: block; margin-bottom: .35rem; color: var(--sun); font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ac-facts b { color: var(--white); font-size: .88rem; font-weight: 600; line-height: 1.35; }
.ac-hero__note { max-width: 620px; margin: 1.15rem 0 0; color: rgba(255, 255, 255, .68); font-size: .69rem; }
.ac-hero__note i { margin-right: .35rem; color: var(--sun); }

@media (prefers-reduced-motion: no-preference) {
  .ac-hero__copy { animation: ac-rise .7s ease-out both; }
}
@keyframes ac-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --- О поездке: типографика описания организатора ------------------------- */
.ac-section--white { background: var(--white); }
.ac-lead { max-width: 780px; margin-bottom: 1.5rem; color: var(--ink); font-size: 1.04rem; font-weight: 600; }
.ac-prose { max-width: 780px; color: var(--muted); font-size: .9rem; }
.ac-prose div { margin: 0; }
.ac-prose h3 { margin: 2.2rem 0 .9rem; color: var(--ink); font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.ac-prose p { margin: 0 0 1rem; }
.ac-prose ul, .ac-prose ol { margin: 0 0 1.2rem; padding-left: 1.15rem; }
.ac-prose li { margin-bottom: .5rem; }
.ac-prose strong { color: var(--ink); }
.ac-prose em { color: var(--river-800); }

/* --- Таблица параметров ---------------------------------------------------- */
.ac-params th[scope="row"] { padding: 1.1rem 1rem; border-top: 1px solid var(--line); color: var(--river-800); font-size: .78rem; font-weight: 700; text-align: left; vertical-align: middle; white-space: nowrap; }

/* --- Гид / организатор ------------------------------------------------------ */
.ac-guide-card { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.7rem 1.6rem; border: 1px solid var(--line); background: var(--white); }
.ac-guide__avatar { flex: 0 0 88px; width: 88px; height: 88px; border: 2px solid var(--sun); border-radius: 50%; object-fit: cover; }
.ac-guide-card h3 { margin-bottom: .3rem; font-size: 1.5rem; }
.ac-guide__rating { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .9rem; color: #bd8212; font-size: .78rem; font-weight: 700; }
.ac-guide__bio { max-width: 620px; margin: 0; color: var(--muted); font-size: .8rem; white-space: pre-line; }

/* --- Галерея ---------------------------------------------------------------- */
.ac-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 18vw, 225px); gap: 10px; }
.ac-gallery__item { margin: 0; overflow: hidden; }
.ac-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ac-gallery__item:hover img { transform: scale(1.045); }
.ac-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }

/* --- Компактные карточки офферов «Похожие/Ещё прогулки» -------------------- */
/* По единому спеку: маленькое фото сверху (120px) и короткий текстовый блок;
   размеры — строго по спеку. */
.ac-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.ac-offer {
  display: flex; flex-direction: column;
  border: 1px solid rgba(10, 30, 51, .12); border-radius: 12px;
  overflow: hidden; background: var(--paper, #fff);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ac-offer:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 30, 51, .08); }
.ac-offer img { width: 100%; height: 120px; object-fit: cover; display: block; }
.ac-offer__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.ac-offer__badge { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.ac-offer__title {
  font-family: var(--display, Georgia, serif);
  font-size: 1rem; line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-offer__meta { font-size: .78rem; opacity: .75; display: flex; gap: 10px; flex-wrap: wrap; }
.ac-offer__place { font-size: .78rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-offer__price { font-size: .95rem; font-weight: 600; margin-top: auto; }
@media (max-width: 575px) { .ac-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ac-offer img { height: 96px; } }
@media (max-width: 380px) { .ac-offers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ac-offer { transition: none; } .ac-offer:hover { transform: none; } }

/* --- Практично: шесть шагов по три в ряду; ниже 991/575 — как в route.css - */
.rt-steps.ac-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- «Куда дальше» в финальном CTA ------------------------------------------ */
.ac-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 2.4rem; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .32); }
.ac-next a { display: flex; flex-direction: column; gap: .45rem; padding: 1.35rem 1.25rem; background: rgba(8, 47, 60, .38); backdrop-filter: blur(5px); transition: background .25s; }
.ac-next a:hover { background: rgba(8, 47, 60, .66); }
.ac-next small { color: var(--sun); font-size: .56rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.ac-next b { color: var(--white); font-family: var(--display); font-size: 1.12rem; font-weight: 600; line-height: 1.15; }
.ac-next i { align-self: flex-end; margin-top: .3rem; color: var(--sun); }
.ac-cta-note { margin: 1.1rem 0 0; color: rgba(255, 255, 255, .82); font-size: .69rem; }
.ac-cta-note i { margin-right: .35rem; }

/* --- Адаптив ----------------------------------------------------------------- */
/* У ac-steps своя раскладка на три колонки, поэтому повторяем переключения
   route.css для .rt-steps: иначе базовое правило перебивает медиазапросы. */
@media (max-width: 991px) {
  .rt-steps.ac-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .ac-hero { min-height: 0; padding: 3.2rem 0 3.8rem; }
  .ac-hero h1 { max-width: 12ch; }
  .ac-guide-card { flex-direction: column; }
  .ac-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ac-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 26vw, 190px); }
  .ac-gallery__item:first-child { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 575px) {
  .rt-steps.ac-steps { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .ac-facts, .ac-next, .ac-gallery { grid-template-columns: 1fr; }
  .ac-gallery__item:first-child { grid-column: auto; }
  .ac-next { gap: 0; }
  .ac-next a { border-top: 1px solid rgba(255, 255, 255, .22); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-hero__copy { animation: none; }
  .ac-gallery__item img, .ac-next a { transition: none; }
  .ac-gallery__item:hover img { transform: none; }
}