/* =====================================================================
   DOVE SIAMO — «Riccione a piedi» (06/10/2026)
   L'indirizzo in grande, la facciata al vivo con la scheda sovrapposta,
   la frase sulla foto aerea ferma, le distanze come un percorso che si
   traccia allo scroll, tre modi per arrivare, mappa a tutta larghezza.
   ===================================================================== */

/* ---------- l'indirizzo ---------- */
.daddr { background: var(--warm); padding-block: clamp(6rem, 13vw, 11rem) clamp(4rem, 8vw, 7rem); }
.daddr__lead { max-width: 22ch; font: 300 clamp(2rem, 4.4vw, 4.2rem)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.daddr__label { margin-top: clamp(3.5rem, 7vw, 6rem); font: 500 .74rem/1 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--sand); }
.daddr__street { margin-top: 1.2rem; font: 200 clamp(2.8rem, 7.6vw, 7.6rem)/.95 var(--font-display); letter-spacing: -.045em; color: var(--teal-deep); }
.daddr__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 1.6rem; margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.daddr__cols p { grid-column: 7 / 13; font-size: 1.1rem; line-height: 1.8; color: var(--grey); }
.daddr__cols .daddr__big { grid-column: 1 / 6; font: 300 clamp(1.3rem, 2vw, 1.75rem)/1.4 var(--font-display); color: var(--ink); }

/* ---------- la facciata al vivo, scheda sovrapposta ---------- */
.dfront { position: relative; background: var(--warm); padding-bottom: clamp(5rem, 10vw, 8rem); }
.dfront__photo { position: relative; height: clamp(26rem, 86vh, 58rem); overflow: hidden; }
.dfront__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.dfront__wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; margin-top: clamp(-11rem, -14vw, -6rem); }
.dfront__card { width: min(100%, 34rem); padding: clamp(2rem, 4vw, 3.5rem); background: var(--teal-deep); color: rgba(255,255,255,.88); box-shadow: var(--shadow); }
.dfront__card p { font: 300 clamp(1.15rem, 1.6vw, 1.45rem)/1.55 var(--font-display); }

/* ---------- «hai Riccione tutta intorno a te» sulla foto aerea ferma ---------- */
.dall { position: relative; background: var(--teal-deep); view-timeline: --dall block; }
.dall__stage { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.dall__bg { position: absolute; inset: 0; z-index: -1; }
.dall__bg img { width: 100%; height: 100%; object-fit: cover; }
.dall__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15,58,65,.55) 0%, rgba(15,58,65,.78) 70%); }
.dall__text { max-width: 16ch; padding-inline: 1.5rem; text-align: center; font: 200 clamp(2.6rem, 7vw, 7rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--white); }
.dall__text b { font-weight: 400; color: var(--sand-pale); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dall { height: 200vh; }
    .dall__stage { position: sticky; top: 0; }
    .dall__bg img { animation: dallZoom linear both; animation-timeline: --dall; animation-range: contain 0% contain 100%; }
    @keyframes dallZoom { from { transform: scale(1.35); } to { transform: scale(1); } }
    .dall__text { animation: dallText linear both; animation-timeline: --dall; animation-range: contain 0% contain 45%; }
    @keyframes dallText { from { opacity: 0; transform: scale(.82); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
  }
}

/* ---------- le distanze: percorso verticale ---------- */
.droute { background: var(--teal-deep); color: var(--white); padding-block: clamp(6rem, 12vw, 10rem); }
.droute__head { text-align: center; }
.droute .eyebrow { color: rgba(255,255,255,.65); }
.droute__title { font: 200 clamp(2.6rem, 6.4vw, 6.2rem)/1 var(--font-display); letter-spacing: -.035em; }
.droute__map { position: relative; margin-top: clamp(4rem, 8vw, 6.5rem); view-timeline: --route block; }
.droute__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; translate: -50% 0; }
.droute__line i { position: absolute; inset: 0; background: rgba(255,255,255,.16); }
.droute__line b { position: absolute; inset: 0; background: var(--sand); transform-origin: top; }
.droute__origin { position: relative; display: flex; justify-content: center; padding-bottom: clamp(2rem, 4vw, 3rem); }
.droute__origin span { position: relative; padding: .7rem 1.4rem; background: var(--sand); color: var(--teal-deep);
  font: 500 .74rem/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; }
.droute__list { list-style: none; margin: 0; padding: 0; }
.droute__stop { position: relative; width: 50%; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(2.5rem, 5vw, 5rem) clamp(1.6rem, 3vw, 2.6rem) 0; text-align: right; }
.droute__stop:nth-child(even) { margin-left: 50%; padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(1.6rem, 3vw, 2.6rem) clamp(2.5rem, 5vw, 5rem); text-align: left; }
.droute__stop::before { content: ""; position: absolute; top: calc(clamp(1.6rem, 3vw, 2.6rem) + 2.2rem); right: -7px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--teal-deep); border: 1px solid var(--sand); }
.droute__stop:nth-child(even)::before { right: auto; left: -6px; }
.droute__val { display: flex; align-items: baseline; gap: .45rem; justify-content: flex-end; }
.droute__stop:nth-child(even) .droute__val { justify-content: flex-start; }
.droute__num { font: 200 clamp(3.6rem, 8vw, 7.4rem)/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.droute__unit { font: 300 clamp(1.2rem, 1.8vw, 1.6rem)/1 var(--font-display); color: var(--sand); }
.droute__pre { font: 300 clamp(1rem, 1.4vw, 1.3rem)/1 var(--font-display); color: rgba(255,255,255,.6); }
.droute__name { margin-top: .9rem; font: 400 clamp(1.1rem, 1.5vw, 1.35rem)/1.3 var(--font-display); }
.droute__note { margin-top: .4rem; margin-left: auto; max-width: 34ch; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.62); }
.droute__stop:nth-child(even) .droute__note { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .droute__line b { animation: routeDraw linear both; animation-timeline: --route; animation-range: entry 30% exit 70%; }
    @keyframes routeDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .droute__stop::before { animation: routeDot linear both; animation-timeline: view(); animation-range: entry 40% entry 80%; }
    @keyframes routeDot { from { background: var(--teal-deep); scale: .6; } to { background: var(--sand); scale: 1; } }
  }
}

/* ---------- come raggiungerci ---------- */
.dways { background: var(--sand-pale); padding-block: clamp(6rem, 12vw, 10rem); }
.dways__title { font: 200 clamp(2.6rem, 6.4vw, 6.2rem)/1 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.dways__list { margin-top: clamp(3rem, 6vw, 5rem); }
.dway { display: grid; grid-template-columns: 3.5rem auto minmax(0, .8fr) minmax(0, 1.3fr); align-items: center; column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding-block: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid rgba(31,42,44,.16); }
.dway:last-child { border-bottom: 1px solid rgba(31,42,44,.16); }
.dway__n { font: 500 .74rem/1 var(--font-display); letter-spacing: .24em; color: var(--sand); }
.dway__ring { display: grid; place-items: center; padding: 40px; border: 1px solid rgba(33,108,120,.25); border-radius: 50%; transition: border-color .5s var(--ease), background-color .5s var(--ease); }
.dway__ring i { font-size: 3rem; line-height: 1; color: var(--teal); transition: color .5s var(--ease); }
.dway:hover .dway__ring { background: var(--teal-deep); border-color: var(--teal-deep); }
.dway:hover .dway__ring i { color: var(--white); }
.dway__t { font: 200 clamp(2.2rem, 4.4vw, 4.2rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.dway__p { font-size: 1.04rem; line-height: 1.75; color: var(--grey); }

/* ---------- mappa ---------- */
.dmap { position: relative; background: var(--sand-pale); }
.dmap__wrap { position: relative; z-index: 1; height: 0; }
.dmap__card { position: absolute; right: 0; top: clamp(2rem, 4vw, 3.5rem); width: min(100%, 25rem); padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--white); box-shadow: var(--shadow); }
.dmap__card .eyebrow { margin-bottom: 1rem; }
.dmap__name { font: 400 1.05rem/1.3 var(--font-display); color: var(--teal); }
.dmap__street { margin-top: .5rem; font: 200 clamp(1.8rem, 2.6vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.dmap__frame { display: block; width: 100%; height: min(82vh, 760px); border: 0; filter: grayscale(.5) contrast(1.04); }

@media (max-width: 899px) {
  .daddr__cols p, .daddr__cols .daddr__big { grid-column: 1 / -1; }
  .dfront__wrap { margin-top: -4rem; }
  .droute__line { left: 7px; translate: 0; }
  .droute__origin { justify-content: flex-start; }
  .droute__stop, .droute__stop:nth-child(even) { width: auto; margin-left: 0; padding: 1.6rem 0 1.6rem 2.4rem; text-align: left; }
  .droute__stop::before, .droute__stop:nth-child(even)::before { left: 1px; right: auto; top: 3.4rem; }
  .droute__val, .droute__stop:nth-child(even) .droute__val { justify-content: flex-start; }
  .droute__note { margin-left: 0; }
  .dway { grid-template-columns: auto minmax(0, 1fr); row-gap: 1.2rem; }
  .dway__n { display: none; }
  .dway__ring { padding: 26px; }
  .dway__ring i { font-size: 2.2rem; }
  .dway__p { grid-column: 1 / -1; }
  .dmap__wrap { height: auto; }
  .dmap__card { position: relative; top: auto; margin: 0 0 -2rem; }
}