/*
 * dlya-detey.css — оформление страницы «Прогулки с детьми» (/progulki/dlya-detey).
 *
 * Слой дополняет редакционную систему styles.css (.home-*) и каркас страниц
 * направления route.css (.rt-*): здесь только то, что специфично для этой
 * страницы, под префиксом dd-. Токены, шрифты и палитра — из styles.css,
 * новых цветов и шрифтов не вводим.
 */

/* --- Hero: факты и примечание ------------------------------------------- */
.dd-hero-facts { grid-column: 1 / -1; }
.dd-hero-note { margin: 1.4rem 0 0; color: rgba(255, 255, 255, .5); font-size: .66rem; }
.dd-hero-note i { margin-right: .35rem; color: var(--sun); }

/* --- Плашка «пример» перед таблицей рейсов ------------------------------ */
.dd-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: 1.1rem; }
.dd-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem; border: 1px dashed rgba(233, 118, 93, .5); color: var(--coral); font-size: .57rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.dd-tag::before { content: ""; width: 6px; height: 6px; background: var(--coral); border-radius: 50%; }

/* --- Главный акцент: «С ребёнком на борту» ------------------------------ */
.dd-deti { position: relative; overflow: hidden; background: var(--foam); }
.dd-deti::before { content: "ЧАС НА ВОДЕ"; position: absolute; right: -.5rem; top: 1.5rem; color: rgba(23, 52, 59, .045); font-family: var(--display); font-size: clamp(3.4rem, 13vw, 11rem); line-height: .8; letter-spacing: -.05em; pointer-events: none; }
.dd-deti .home-section__head { position: relative; }

/* Четыре шага подготовки: на фоне секции карточки остаются белыми */
.dd-steps { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.dd-steps li { transition: background .25s; }
.dd-steps li:hover { background: var(--paper); }

/* Короткий рейс на кораблике */
.dd-korablik { max-width: 720px; margin-bottom: clamp(2.6rem, 5vw, 4rem); padding-left: 1.4rem; border-left: 2px solid var(--coral); }
.dd-korablik p { margin-bottom: 1rem; color: var(--muted); font-size: .84rem; }

/* Сравнение «короткий рейс — длинная прогулка» */
.dd-compare__title { max-width: 22ch; margin-bottom: 1.6rem; font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
.dd-compare { position: relative; }
.dd-compare .rt-compare > div { transition: background .3s, transform .3s; }
.dd-compare .rt-compare > div:first-child:hover { background: var(--river-900); }
.dd-compare .rt-compare > div:last-child:hover { background: var(--white); transform: translateY(-2px); }
.dd-compare__note { margin: 1.5rem 0 0; color: var(--muted); font-size: .74rem; }
.dd-compare__note i { color: var(--coral); }

.dd-bar { display: grid; grid-template-columns: auto minmax(60px, 1fr); align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.dd-bar__label { color: var(--muted); font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dd-bar__track { position: relative; height: 6px; background: rgba(23, 52, 59, .12); overflow: hidden; }
.dd-bar__track i { position: absolute; inset: 0 auto 0 0; width: var(--dd-to, 100%); background: linear-gradient(90deg, var(--river-500), var(--river-700)); animation: dd-fill 1.1s .15s cubic-bezier(.2, .7, .2, 1) backwards; }
.dd-bar--short .dd-bar__track i { --dd-to: 42%; }
.dd-bar--long .dd-bar__track i { --dd-to: 100%; background: linear-gradient(90deg, var(--sand), var(--coral)); }
.dd-compare .rt-compare > div:first-child .dd-bar__track { background: rgba(255, 255, 255, .18); }
.dd-compare .rt-compare > div:first-child .dd-bar__label { color: rgba(255, 255, 255, .58); }

@keyframes dd-fill {
  from { width: 0; }
  to { width: var(--dd-to, 100%); }
}

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

/* --- Причал: ссылки и примечание ---------------------------------------- */
.dd-station-links { display: flex; flex-wrap: wrap; gap: .9rem 1.8rem; }
.dd-station-note { margin-top: 3rem; }
.dd-station-note p { max-width: 640px; color: rgba(255, 255, 255, .66); font-size: .8rem; }
.dd-station-note a { color: var(--sun); border-bottom: 1px solid rgba(239, 200, 107, .5); }
.dd-station-note a:hover { color: var(--white); border-color: var(--white); }

/* --- Соседи по разделу и служебные мелочи ------------------------------- */
.dd-neighbors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-links { display: inline-flex; flex-wrap: wrap; gap: 1rem 1.8rem; }

/* --- Фокус -------------------------------------------------------------- */
.dd-neighbors .rt-neighbor:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

@media (max-width: 991px) {
  .dd-station-note { margin-top: 2.4rem; }
}

@media (max-width: 767px) {
  .dd-neighbors { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .dd-hero-note { font-size: .62rem; }
  .dd-compare__title { max-width: none; }
  .dd-korablik { padding-left: 1rem; }
  .dd-deti::before { display: none; }
}