/* Inn Overveen — things-to-do page (on top of style.css) */

.guide-hero {
  position: relative; overflow: hidden; color: var(--white);
  min-height: min(56vh, 520px); display: flex; align-items: flex-end;
  background: #1b1714;
}
.guide-hero .band-shade { background: linear-gradient(180deg, rgba(10, 12, 12, .2), rgba(10, 12, 12, .72)); }
.guide-hero-inner { position: relative; z-index: 1; padding-top: 110px; padding-bottom: 52px; }
.guide-hero .hero-title { font-size: clamp(34px, 5.4vw, 60px); }
.crumbs { margin: 0 0 14px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.crumbs a { color: var(--white); }

.chips-bar {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line);
}
.chips { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--white);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.guide-section { scroll-margin-top: calc(var(--header-h) + 60px); }
.guide-head { max-width: 720px; margin-bottom: 36px; }
.guide-head p { font-size: 18px; margin: 0; }

.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1080px) { .tips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tips { grid-template-columns: 1fr; } }
.tip {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.section-warm .tip { border-color: transparent; box-shadow: var(--shadow-sm); }
.tip-photo { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--warm); }
.tip-photo img { width: 100%; height: 100%; object-fit: cover; }
.tip-photo figcaption {
  position: absolute; right: 0; bottom: 0; max-width: 100%;
  padding: 3px 8px; font-size: 11px; line-height: 1.4;
  background: rgba(0, 0, 0, .45); border-top-left-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tip-photo figcaption a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.tip-photo figcaption a:hover { text-decoration: underline; }
.tip-n {
  position: absolute; left: 14px; top: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--accent); box-shadow: var(--shadow-sm);
  font-family: var(--serif); font-size: 17px; font-weight: 500;
}
.tip-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.tip h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.25; }
.tip p { font-size: 16px; margin: 0 0 12px; }
.tip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: auto 0 0 !important; font-size: 14px !important; color: var(--muted); }
.tip-how { font-weight: 700; color: var(--accent); }
.tip-map { font-weight: 700; }

.guide-back { margin: 22px 0 0 !important; font-size: 16px !important; }
.guide-back a { color: var(--white); }

@media (max-width: 560px) {
  .guide-hero { min-height: 60vh; }
}