/* Willie Ski V3 — shared presentation for the nine Zao topic pages. */
.v3-subpage body {
  color: var(--ink);
  background: var(--washi);
}

.v3-subpage .v2-continuation {
  width: var(--shell);
  max-width: none;
  margin-inline: auto;
  padding: 34px 0 84px;
  border: 0;
  background: transparent;
}

.v3-subpage header.snow-topic-hero[data-topic-hero] {
  min-height: 430px;
  margin: 0 0 28px;
  padding: 52px;
  border: 1px solid #ddd3c6;
  border-top: 5px solid var(--red);
  border-radius: 10px;
  color: var(--ink);
  background: #dce5e3;
  box-shadow: 0 18px 48px rgb(47 57 50 / 10%);
}

.v3-subpage header.snow-topic-hero:not(.snow-topic-hero--overview)::after {
  background: linear-gradient(90deg, rgb(255 253 249 / 97%) 0%, rgb(255 253 249 / 88%) 35%, rgb(255 253 249 / 42%) 58%, rgb(255 253 249 / 6%) 82%);
}

.v3-subpage header.snow-topic-hero .snow-topic-hero__media img {
  object-position: var(--topic-photo-position, 66% 50%);
}

.v3-subpage header.snow-topic-hero .snow-topic-hero__copy {
  width: min(100%, 570px);
  max-width: 570px;
}

.v3-subpage header.snow-topic-hero p.snow-topic-hero__eyebrow {
  color: var(--red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: .22em;
}

.v3-subpage header.snow-topic-hero h1 {
  gap: 10px;
  color: var(--pine);
  font-family: var(--serif);
  font-size: clamp(46px, 4.1vw, 66px);
  letter-spacing: .055em;
  text-shadow: 0 1px 1px rgb(255 255 255 / 70%);
}

.v3-subpage header.snow-topic-hero .snow-topic-hero__region {
  color: #586761;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .12em;
}

.v3-subpage header.snow-topic-hero p.snow-topic-hero__lead {
  color: #53615c;
  font-size: 16px;
}

.v3-subpage header.snow-topic-hero p.snow-topic-hero__caption {
  right: 16px;
  bottom: 14px;
  color: #fffaf4;
  background: rgb(57 44 50 / 88%);
  letter-spacing: .07em;
}

.v3-subpage .snow-topic-intro {
  margin: 0 0 28px;
  padding: 18px 22px;
  border-left: 3px solid var(--red);
  color: #5e6964;
  background: #edf2ec;
  font-size: 15px;
}

.v3-subpage :is(.zpv-return-status, .zpv-message) {
  border-color: #d0d9d1;
  color: var(--pine);
  background: #edf2ec;
}

.v3-subpage :is(.zsp-filter-panel, .zcp-filter-panel, .ztp-filter, .zrp-page-index, .zft-topic-nav, .zft-jump-links) {
  border-color: #d4dcd3;
  color: var(--pine);
  background: #edf2ec;
  box-shadow: 0 8px 24px rgb(42 58 51 / 5%);
}

.v3-subpage :is(.zsp-filter-panel, .zcp-filter-panel, .ztp-filter) :is(input, select) {
  border-color: #c8d0c8;
  color: var(--ink);
  background: #fff;
}

.v3-subpage :is(.ztp-filter-button, .zsp-link, .zcp-link, .zrp-action, .zpv-button, .zft-link-card) {
  border-color: #c7cec5;
  color: var(--pine);
  background: #fff;
}

.v3-subpage :is(.ztp-filter-button.is-active, .ztp-link-primary, .zsp-link-primary, .zcp-link-primary, .zrp-action-primary) {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
}

.v3-subpage :is(.ztp-filter-button, .ztp-link, .zsp-link, .zcp-link, .zrp-action, .zpv-button):hover {
  border-color: var(--red);
  color: var(--red-dark);
  background: #f7e9e5;
}

.v3-subpage :is(.ztp-link-primary, .zsp-link-primary, .zcp-link-primary, .zrp-action-primary):hover {
  color: #fff;
  background: var(--red-dark);
}

.v3-subpage :is(
  .ztp-route-card,
  .ztp-compare-card,
  .ztp-branch-card,
  .ztp-mini-card,
  .ztp-safety-card,
  .ztp-parking-card,
  .ztp-local-taxi,
  .zsp-listing,
  .zsp-card,
  .zsp-guide,
  .zcp-listing,
  .zcp-card,
  .zcp-concept,
  .zrp-document,
  .zrp-website,
  .zft-box,
  .zft-link-card
) {
  border-color: #ded5c8;
  background: var(--white);
  box-shadow: 0 10px 30px rgb(47 57 50 / 7%);
}

.v3-subpage :is(.ztp-route-card, .ztp-compare-card, .ztp-branch-card, .ztp-mini-card, .ztp-safety-card, .ztp-parking-card, .zsp-listing, .zcp-listing, .zrp-document, .zrp-website):hover {
  border-color: #c9928a;
  box-shadow: 0 15px 38px rgb(47 57 50 / 11%);
}

.v3-subpage :is(
  .ztp-headline,
  .ztp-section h2,
  .ztp-section h3,
  .zsp-group-title,
  .zsp-card-title,
  .zcp-card-title,
  .zcp-list-heading,
  .zcp-sightseeing-group__title,
  .zrp-section-heading h2,
  .zrp-document h2,
  .zrp-document h3,
  .zft-section-head h2,
  .zft-box-head h2,
  .zft-box-head h3
) {
  color: var(--pine);
  font-family: var(--serif);
}

.v3-subpage :is(.ztp-kicker, .zft-eyebrow, .zft-link-eyebrow, .zrp-badge, .zrp-group-mark) {
  color: var(--red);
}

.v3-subpage[data-zao-preview-page="sightseeing"] .zcp-sightseeing-group__title {
  color: #fff;
  background: var(--red);
  font-family: var(--serif);
}

.v3-subpage :is(.ztp-notice, .ztp-warning, .ztp-season-notice, .zsp-card-notice, .zsp-booking-notice, .zcp-warning, .zcp-final-notice, .zrp-note, .zft-note) {
  border-color: #dcb8af;
  color: #64433e;
  background: #f8eae6;
}

.v3-subpage :is(.ztp-tags span, .zsp-tags span, .zcp-pills span, .zcp-meta span, .zsp-meta span, .ztp-meta span) {
  border-color: #d5ddd4;
  color: #466158;
  background: #edf2ec;
}

.v3-subpage :is(.ztp-fold, .zsp-fold, .zcp-fold) {
  border-color: #d8d1c7;
  background: #fff;
}

.v3-subpage :is(.ztp-fold, .zsp-fold, .zcp-fold) > summary {
  color: var(--pine);
}

.v3-subpage .zsp-root > .zsp-guide > summary {
  border-bottom: 1px solid #d8d1c7;
  color: var(--pine);
  background: #e9eee7;
  font-family: var(--serif);
}

.v3-subpage :is(.zsp-guide-video h3, .zsp-guide-download h3, .zsp-booking-notice h2) {
  color: var(--pine);
}

.v3-subpage :is(.zsp-guide-download, .zsp-protected-form) {
  border-color: #d8d1c7;
  color: var(--ink);
  background: #f7f4ee;
}

.v3-subpage .zsp-guide-cover img {
  background: #edf2ec;
}

.v3-subpage :is(.ztp-table-wrap, .zft-table-scroll, .zft-compact-table) {
  border-color: #d8d1c7;
  background: #fff;
}

.v3-subpage :is(.ztp-table, .zft-compact-table) th {
  color: var(--pine);
  background: #e9eee7;
}

.v3-subpage .zft-masthead {
  border-top-color: var(--red);
  color: var(--pine);
  background: #edf2ec;
}

.v3-subpage :is(.zft-stamp, .zft-emphasis, .zft-peak) {
  color: var(--red);
}

.v3-subpage .zrp-page-index {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 30px;
  padding: 11px;
  border: 1px solid #d4dcd3;
  border-radius: 10px;
}

.v3-subpage .zrp-page-index a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 7px;
  color: var(--pine);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

.v3-subpage .zrp-page-index a:hover {
  color: var(--red);
  background: #f7e9e5;
}

.v3-subpage .zpv-stay-next {
  margin-top: 38px;
  padding: 25px 28px;
  border: 1px solid #ddd5ca;
  border-top: 4px solid var(--red);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgb(47 57 50 / 7%);
}

.v3-subpage .zpv-stay-next h2 {
  color: var(--pine);
  font-family: var(--serif);
  font-size: 20px;
}

.v3-subpage .zpv-stay-next p { color: var(--muted); }
.v3-subpage .zpv-source-note { color: #786f67; }

.v3-subpage :is(a, button, input, select, summary):focus-visible {
  outline: 3px solid #c66056;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .v3-subpage .v2-continuation { padding-top: 20px; padding-bottom: 68px; }
  .v3-subpage header.snow-topic-hero[data-topic-hero] {
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 18px;
    border-radius: 8px;
  }
  .v3-subpage header.snow-topic-hero:not(.snow-topic-hero--overview)::after {
    background: linear-gradient(145deg, rgb(13 28 35 / 76%) 0%, rgb(13 28 35 / 34%) 34%, rgb(13 28 35 / 10%) 61%, rgb(13 28 35 / 68%) 100%);
  }
  .v3-subpage header.snow-topic-hero .snow-topic-hero__media img {
    object-position: var(--topic-photo-mobile-position, 62% 25%);
  }
  .v3-subpage header.snow-topic-hero .snow-topic-hero__copy { align-self: flex-start; }
  .v3-subpage header.snow-topic-hero p.snow-topic-hero__eyebrow,
  .v3-subpage header.snow-topic-hero h1,
  .v3-subpage header.snow-topic-hero .snow-topic-hero__region,
  .v3-subpage header.snow-topic-hero p.snow-topic-hero__lead { color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 72%); }
  .v3-subpage header.snow-topic-hero p.snow-topic-hero__eyebrow { margin-bottom: 6px; font-size: 9px; }
  .v3-subpage header.snow-topic-hero h1 { gap: 4px; font-size: clamp(22px, 7.2vw, 34px); line-height: 1.1; }
  .v3-subpage header.snow-topic-hero p.snow-topic-hero__lead { display: none; }
  .v3-subpage header.snow-topic-hero p.snow-topic-hero__caption {
    top: auto;
    right: 12px;
    bottom: 10px;
    left: auto;
    width: fit-content;
    max-width: calc(100% - 24px);
    padding: 6px 12px 6px 14px;
    color: #fff;
    background: rgb(57 44 50 / 88%);
    text-align: right;
    text-shadow: 0 1px 7px rgb(0 0 0 / 85%);
  }
  .v3-subpage .snow-topic-intro { padding: 15px 17px; font-size: 14px; }
  .v3-subpage .zpv-stay-next { padding: 21px 18px; }
}

@media (max-width: 350px) {
  .v3-subpage header.snow-topic-hero[data-topic-hero] { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-subpage header.snow-topic-hero :is(.snow-topic-hero__eyebrow, .snow-topic-hero__region, .snow-topic-hero__title, .snow-topic-hero__lead, img) { animation: none; }
}