/* Arrival guide (/arrival-guide). A walking route: numbered markers joined by a dashed turquoise line, the same
   colour as the arrows drawn on the owner's photos. Built only from the site tokens (tokens.css). */

.guide-h2 { font-size: var(--fs-h2); }
.link-arrow { font-weight: 600; color: var(--sea-800); text-decoration: none; border-bottom: 1px solid currentColor; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--ink-900); }

/* photos: every guide photo opens in the lightbox */
.guide-photo { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; background: var(--ink-050); }
.guide-photo img { display: block; width: 100%; height: auto; transition: transform var(--dur) var(--ease-out); }
.guide-photo:hover img { transform: scale(1.02); }
.guide-photo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.guide-photo__label { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--ink-900); color: var(--white); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; }
.guide-photo::after { content: ""; position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4b5c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 0.95rem no-repeat; opacity: 0; transition: opacity var(--dur-fast); }
.guide-photo:hover::after, .guide-photo:focus-visible::after { opacity: 1; }
@media (hover: none) { .guide-photo::after { opacity: 1; } }

/* head: intro + "before you set off" */
.guide-head__grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .guide-head__grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--space-8); } }
.guide-head .section-heading { margin-bottom: var(--space-5); }
.guide-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.guide-pdf__size { font-weight: 400; opacity: 0.8; font-size: 0.8125rem; }
.guide-before { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-before__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.guide-before__list { margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: before; display: grid; gap: var(--space-3); }
.guide-before__list li { counter-increment: before; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2); font-size: var(--fs-small); line-height: 1.5; }
.guide-before__list li::before { content: counter(before); width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sea-050); color: var(--sea-800); font-weight: 600; font-size: 0.8125rem; display: grid; place-items: center; }
.guide-before__wa { width: 100%; }

/* the route at a glance: seven thumbnails */
.guide-strip { margin-top: var(--space-7); }
.guide-strip__title { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sea-800); margin: 0 0 var(--space-3); }
.guide-strip__list { position: relative; list-style: none; margin: 0; padding: 0 0 var(--space-3); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7.75rem, 1fr); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.guide-strip__item { scroll-snap-align: start; position: relative; }
.guide-strip__item:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--strip-img-h, 6.5rem) + 0.45rem + 0.85rem - 1px); left: 2.2rem; right: calc(-1 * var(--space-3) + 0.3rem); border-top: 2px dashed var(--sea-400); }
.guide-strip__link { display: grid; gap: 0.45rem; text-decoration: none; color: var(--text-body); }
.guide-strip__link picture { display: block; border-radius: var(--r-sm); overflow: hidden; }
.guide-strip__link img { display: block; width: 100%; height: var(--strip-img-h, 6.5rem); object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.guide-strip__link:hover img { transform: scale(1.04); }
.guide-strip__num { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink-900); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--paper); }
.guide-strip__name { font-size: 0.875rem; line-height: 1.35; font-weight: 500; }
.guide-strip__link:hover .guide-strip__name { color: var(--sea-800); }
.guide-strip__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

/* follow our signs */
.guide-signs__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .guide-signs__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--space-8); } }
.guide-signs__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.guide-signs__photo { margin: 0; }
.guide-signs__photo img { aspect-ratio: 1; object-fit: cover; }
.guide-signs__photo figcaption { margin-top: 0.45rem; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.35; }
@media (max-width: 599px) {
  .guide-signs__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-signs__photo:first-child { grid-column: 1 / -1; }
  .guide-signs__photo:first-child img { aspect-ratio: 4 / 3; }
}

/* the steps */
.guide-route-section { padding-top: var(--space-6); }
.guide-hint { font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 var(--space-5); }
.guide-route { list-style: none; margin: 0; padding: 0; }
.guide-step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "num head" "num media" "num body"; column-gap: var(--space-4); padding-bottom: var(--space-8); scroll-margin-top: calc(var(--header-h) + 1rem); }
.guide-step::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.9rem; bottom: 0.4rem; border-left: 2px dashed var(--sea-400); }
.guide-step--last { padding-bottom: 0; }
.guide-step--last::before { display: none; }
.guide-step__num { grid-area: num; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink-900); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1; display: grid; place-items: center; position: relative; z-index: 1; }
.guide-step--last .guide-step__num { background: var(--sea-600); }
.guide-step__head { grid-area: head; padding-top: 0.15rem; }
.guide-step__kicker { margin: 0 0 0.2rem; font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea-800); }
.guide-step__title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.guide-step__media { grid-area: media; display: grid; gap: var(--space-3); align-content: start; }
.guide-step__zooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.guide-step__zooms--1 { grid-template-columns: minmax(0, 1fr); }
.guide-step__zooms .guide-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.guide-step__body { grid-area: body; padding-top: var(--space-4); }
.guide-step__look { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; margin: 0 0 var(--space-3); padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--sea-050); color: var(--sea-800); font-weight: 500; font-size: var(--fs-small); line-height: 1.45; }
.guide-step__look-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.guide-step__text { margin: 0; max-width: 62ch; }
.guide-step__links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-4) 0 0; }
.guide-step__links .chip { margin: 0; }
@media (min-width: 900px) {
  .guide-step { grid-template-columns: 3.5rem minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "num media head" "num media body"; column-gap: var(--space-6); }
  .guide-step::before { left: calc(1.75rem - 1px); top: 3.9rem; }
  .guide-step__num { width: 3.5rem; height: 3.5rem; font-size: 2rem; }
  .guide-step__head { padding-top: var(--space-2); }
  .guide-step__body { padding-top: 0; }
}

/* the golden tip */
.guide-tip__head { max-width: 46rem; margin-bottom: var(--space-6); }
.guide-tip__cards { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .guide-tip__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plaque-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-4); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.plaque-card__photo img { aspect-ratio: 1; object-fit: cover; }
.plaque-card--4 .plaque-card__photo img { object-fit: contain; background: #e9e6df; }
.plaque-card__count { position: relative; width: 4.25rem; height: 4.25rem; margin: 0 0 var(--space-2); display: grid; place-items: center; }
.plaque-card__shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ink-050); stroke: var(--ink-900); stroke-width: 3; stroke-linejoin: round; }
.plaque-card__n { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; line-height: 1; color: var(--ink-900); }
.plaque-card__name { margin-bottom: var(--space-2); }
.plaque-card p:last-child { margin: 0; font-size: var(--fs-small); line-height: 1.55; }
@media (max-width: 459px) { .plaque-card { grid-template-columns: minmax(0, 1fr); } }
.guide-tip__words { margin: var(--space-5) 0 0; font-size: var(--fs-small); color: var(--text-muted); }

.guide-langs { display: grid; gap: var(--space-6); align-items: center; margin-top: var(--space-8); }
@media (min-width: 900px) { .guide-langs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.guide-langs__plaque { position: relative; }
.guide-langs__pin { position: absolute; left: 3%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--sea-600); color: var(--white); font-weight: 700; font-size: 0.9rem; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--white); pointer-events: none; }
.guide-langs__title { margin-bottom: var(--space-4); }
.guide-langs__list { margin: 0 0 var(--space-5); padding: 0; list-style: none; counter-reset: lang; display: grid; gap: var(--space-3); }
.guide-langs__list li { counter-increment: lang; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-2); line-height: 1.5; }
.guide-langs__list li::before { content: counter(lang); grid-row: span 2; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--sea-600); color: var(--white); font-weight: 700; font-size: 0.9rem; display: grid; place-items: center; }
.guide-langs__list strong { display: block; color: var(--ink-900); }
.guide-langs__note { padding-left: var(--space-4); border-left: 3px solid var(--sea-300); color: var(--ink-700); font-size: var(--fs-small); }

/* day trips */
.guide-daytrip__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .guide-daytrip__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); } }

/* leaving + offline PDF */
.guide-end__grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .guide-end__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-end__card, .guide-pdf { padding: var(--space-6); border-radius: var(--r-md); }
.guide-end__card { border: 1px solid var(--line); background: var(--surface); }
.guide-end__title { font-size: var(--fs-h3); }
.guide-end__facts { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.guide-end__facts div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); }
.guide-end__facts dt { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 0.15em; }
.guide-end__facts dd { margin: 0; font-weight: 500; }
.guide-pdf { background: var(--ink-900); color: var(--ink-100); }
.guide-pdf .guide-end__title { color: var(--white); }
.guide-pdf .btn-accent { background: var(--white); border-color: var(--white); color: var(--ink-900); }
.guide-pdf .btn-accent:hover { background: var(--sea-100); border-color: var(--sea-100); }
.guide-pdf__actions { margin: var(--space-5) 0 var(--space-3); }
.guide-pdf__more { margin: 0; font-size: var(--fs-small); }
.guide-pdf__more a { color: var(--sea-300); }

@media (prefers-reduced-motion: reduce) {
  .guide-photo img, .guide-strip__link img { transition: none; }
  .guide-photo:hover img, .guide-strip__link:hover img { transform: none; }
}

/* day-trip pages: the meeting point */
.trip-pickup { margin: var(--space-4) 0 0; display: grid; gap: var(--space-4); }
.trip-pickup figcaption p { margin: 0; }
.trip-pickup__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3) !important; }

/* our private transfer vs a taxi: the transfer is the dark, recommended card; the taxi stays plain */
.guide-transfer { padding-top: 0; }
.guide-transfer__head { max-width: 46rem; margin-bottom: var(--space-5); }
.guide-transfer__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .guide-transfer__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); } }
.ride { padding: var(--space-5) var(--space-6); border-radius: var(--r-md); }
.ride--ours { background: var(--ink-900); color: var(--ink-100); box-shadow: var(--shadow-card); }
.ride--taxi { border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); }
.ride__badge { display: inline-block; margin: 0 0 var(--space-3); padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--sea-600); color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ride__name { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.ride--ours .ride__name { color: var(--white); }
.ride--taxi .ride__name { color: var(--ink-500); }
.ride__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ride__points li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--space-2); line-height: 1.45; font-size: var(--fs-small); }
.ride__points--yes li::before { content: "\2713"; color: var(--sea-300); font-weight: 700; }
.ride__points--no li::before { content: "\2212"; color: var(--ink-300); font-weight: 700; }
.ride__prices { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.15); display: grid; gap: var(--space-2); }
.ride__prices div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-small); }
.ride__prices dt { color: var(--ink-300); }
.ride__prices dd { margin: 0; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ride__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-5) 0 0; }
.ride__cta { background: var(--white); border-color: var(--white); color: var(--ink-900); }
.ride__cta:hover { background: var(--sea-100); border-color: var(--sea-100); color: var(--ink-900); }
.ride__link { color: var(--sea-300); font-weight: 600; font-size: var(--fs-small); }
.ride__tip { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-700); }