/* Bürgenstock Festive Seasons — BODY CONTENT ONLY (season nav, stacked rows,
   more-inspiration, card sliders). Intentionally excludes header, hero/cover and
   footer rules from the full ai-theme/css/style.css mockup stylesheet — those
   sections use the production theme's own header/footer and the SeasonCover block's
   own hero-section styling, so nothing here should ever touch them.
   Everything is scoped under .season-page so it can never leak onto other markup. */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

.season-page {
  /* The hero's background image (PageCover's .hero__bg) is position:fixed, which — per the
     CSS stacking spec — paints above plain static in-flow content regardless of DOM order.
     Without its own stacking context here, the fixed hero bg visually covers the nav/rows below it. */
  position: relative;
  z-index: 1;
  font-family: 'Lora', Georgia, serif;
  color: #1D1D1F;
  background: #F1F0EB;
}
.season-page a { color: #1D1D1F; text-decoration: none; }
.season-page a:hover { color: #1D1D1F; }
.season-page img { max-width: 100%; display: block; }

.season-page .eyebrow {
  font-family: 'Lora', Georgia, serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #77766f;
}

/* ---------- Season sub-navigation ---------- */
.season-page .season-nav {
  display: flex;
  justify-content: center;
  gap: 36px;
  padding: 22px 40px;
  border-bottom: 1px solid #e6e4dc;
  background: #fff;
}
.season-page .season-nav a, .season-page .season-nav span {
  font-family: 'Lora', Georgia, serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #77766f;
  padding-bottom: 5px;
  cursor: pointer;
}
.season-page .season-nav a:hover, .season-page .season-nav span:hover { color: #1D1D1F; }
.season-page .season-nav .active {
  color: #1D1D1F;
  border-bottom: 1px solid #1D1D1F;
}

/* mobile: horizontal scroll */
.season-page .season-nav-scroll {
  position: relative;
  display: none;
  border-bottom: 1px solid #e6e4dc;
  background: #fff;
}
.season-page .season-nav-scroll .track {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 14px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.season-page .season-nav-scroll .track::-webkit-scrollbar { display: none; }
.season-page .season-nav-scroll .track a, .season-page .season-nav-scroll .track span {
  flex: none;
  font-family: 'Lora', Georgia, serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #77766f;
  padding: 14px 0 3px;
  cursor: pointer;
}
.season-page .season-nav-scroll .track .active {
  color: #1D1D1F;
  border-bottom: 1px solid #1D1D1F;
}
.season-page .season-nav-scroll .fade {
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 44px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* ---------- Landing: stacked season/occasion rows ---------- */
.season-page .season-rows { padding: 0 40px 8px; display: flex; flex-direction: column; }
.season-page .season-row {
  border-top: 1px solid #dcdad1;
  padding: 44px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
.season-page .season-row > div { max-width: 520px; margin-left: auto; margin-right: auto; }
.season-page .season-row .media { overflow: hidden; aspect-ratio: 8 / 5; display: block; }
.season-page .season-row.reverse .media { order: 2; }
.season-page .season-row .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.season-page .season-row .media:hover img { transform: scale(1.04); }
.season-page .season-row .season-label { margin-bottom: 14px; }
.season-page .season-row h2 { font-size: 32px; font-weight: 500; margin: 0 0 14px; }
.season-page .season-row h2 a { color: #1D1D1F; }
.season-page .season-row h2 a:hover { color: #1D1D1F; }
.season-page .season-row p { font-size: 15px; line-height: 1.75; color: #3a3a38; margin: 0 0 22px; max-width: 520px; }
.season-page .btn-outline {
  display: inline-block;
  font-family: 'Lora', Georgia, serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid #1D1D1F;
  padding: 13px 28px;
  cursor: pointer;
  min-height: 44px;
}
.season-page .btn-outline:hover { background: #1D1D1F; border-color: #1D1D1F; color: #fff; }
.season-page .btn-outline.muted { border-color: #9d9b92; }

/* ---------- More inspiration ---------- */
.season-page .more-inspiration { padding: 40px 40px 72px; }
.season-page .more-inspiration .inner { border-top: 1px solid #dcdad1; padding-top: 52px; }
.season-page .more-inspiration h2 { font-size: 30px; font-weight: 500; margin: 0 0 28px; text-align: center; }
.season-page .inspiration-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.season-page .inspiration-grid .item { cursor: pointer; min-width: 0; text-align: center; }
.season-page .inspiration-grid .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.season-page .inspiration-grid .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.season-page .inspiration-grid .item:hover .thumb img { transform: scale(1.04); }

.season-page .inspiration-grid .label {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: .5rem;
  margin-top: 16px;
  text-align: center;
  position: relative;
  display: inline-block;
}
.season-page .inspiration-grid .item:hover .label { color: #1D1D1F; }

@media (min-width: 1024px) {
  .season-page .inspiration-grid .label:before,
  .season-page .inspiration-grid .label:after {
    content: "";
    display: block;
    position: absolute;
    height: 1.5px;
    width: 0;
    bottom: 0;
  }
  .season-page .inspiration-grid .label:before {
    left: 0;
    right: 0;
    transition: width 0s ease, background .4s ease;
  }
  .season-page .inspiration-grid .label:after {
    right: 0;
    background: #1D1D1F;
    transition: width .4s ease;
  }
  .season-page .inspiration-grid .item:hover .label:before {
    width: 100%;
    background: #1D1D1F;
    transition: width .4s ease;
  }
  .season-page .inspiration-grid .item:hover .label:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
  }
}

/* ---------- Card sliders (season subpage) ---------- */
.season-page .slider-section { padding: 64px 40px; }
.season-page .slider-section .inner-top { padding-top: 0; }
.season-page .slider-section:has(~ .slider-section) {
  border-bottom: 1px solid #dcdad1;
  padding-bottom: 64px;
}
.season-page .slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.season-page .slider-head h2 { font-size: 30px; font-weight: 500; margin: 0; }
.season-page .slider-arrows { display: flex; gap: 8px; }
.season-page .slider-arrows button {
  font-size: 18px;
  color: #1D1D1F;
  cursor: pointer;
  padding: 10px 16px;
  min-height: 44px;
  user-select: none;
  background: none;
  border: none;
}
.season-page .slider-arrows button:hover { color: #4C7294; }

.season-page .slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.season-page .slider-track::-webkit-scrollbar { display: none; }
.season-page .slider-track:focus-visible { outline: 2px solid #1D1D1F; outline-offset: 2px; }

.season-page .card {
  flex: none;
  width: 328px;
  cursor: pointer;
}
.season-page .card:focus-visible { outline: 2px solid #1D1D1F; outline-offset: 2px; }
.season-page .card .thumb { height: 246px; overflow: hidden; }
.season-page .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.season-page .card:hover .thumb img { transform: scale(1.05); }
.season-page .card .tag { font-family: 'Lora', Georgia, serif; font-size: 13.5px; color: #77766f; margin: 16px 0 6px; }
.season-page .card .title {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8px;
  color: #1D1D1F;
  position: relative;
  display: inline-block;
}
.season-page .card:hover .title { color: #1D1D1F; }
.season-page .card .desc { font-size: 14px; line-height: 1.65; color: #5b5a54; }

@media (min-width: 1024px) {
  .season-page .card .title:before,
  .season-page .card .title:after {
    content: "";
    display: block;
    position: absolute;
    height: 1.5px;
    width: 0;
    bottom: 0;
  }
  .season-page .card .title:before {
    left: 0;
    right: 0;
    transition: width 0s ease, background .4s ease;
  }
  .season-page .card .title:after {
    right: 0;
    background: #1D1D1F;
    transition: width .4s ease;
  }
  .season-page .card:hover .title:before {
    width: 100%;
    background: #1D1D1F;
    transition: width .4s ease;
  }
  .season-page .card:hover .title:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
  }
}

.season-page .slider-more { display: flex; justify-content: flex-end; margin-top: 28px; padding-bottom: 48px; }

/* ---------- Responsive (body-content subset only) ---------- */
@media (max-width: 768px) {
  .season-page .season-nav { display: none; }
  .season-page .season-nav-scroll { display: block; }

  .season-page .season-rows { padding: 16px 16px 8px; gap: 32px; }
  .season-page .season-row, .season-page .season-row.reverse {
    grid-template-columns: 1fr;
    padding: 0;
    border-top: none;
    gap: 0;
  }
  .season-page .season-row .media, .season-page .season-row.reverse .media { order: 0; height: 210px; }
  .season-page .season-row .season-label { font-size: 9.5px; letter-spacing: .16em; margin: 14px 0 6px; }
  .season-page .season-row h2 { font-size: 22px; margin-bottom: 6px; }
  .season-page .season-row p { font-size: 13px; line-height: 1.6; margin-bottom: 16px; max-width: none; }
  .season-page .season-row .btn-outline { font-size: 11px; padding: 12px 24px; }

  .season-page .more-inspiration { padding: 32px 16px 48px; }
  .season-page .more-inspiration .inner { padding-top: 32px; }
  .season-page .more-inspiration h2 { font-size: 22px; margin-bottom: 20px; }
  .season-page .inspiration-grid { grid-template-columns: 1fr; gap: 28px; }
  .season-page .inspiration-grid .label { font-size: 18px; margin-top: 12px; }

  .season-page .slider-section { padding: 32px 0; }
  .season-page .slider-section .inner-top { padding-top: 0; }
  .season-page .slider-section:has(~ .slider-section) {
    border-bottom: 1px solid #dcdad1;
    padding-bottom: 32px;
  }
  .season-page .slider-head { padding: 0 16px; margin-bottom: 16px; }
  .season-page .slider-head h2 { font-size: 22px; }
  .season-page .slider-head .slider-arrows { display: none; } /* replaced by centered arrows below track on mobile */
  .season-page .slider-track { padding: 0 16px; gap: 12px; }
  .season-page .card { width: 262px; }
  .season-page .card .thumb { height: 196px; }
  .season-page .card .tag { font-size: 13px; margin: 12px 0 5px; }
  .season-page .card .title { font-size: 20px; margin-bottom: 6px; }
  .season-page .card .desc { font-size: 14px; line-height: 1.6; }
  .season-page .slider-arrows.mobile-arrows {
    display: flex;
    justify-content: center;
    gap: 56px;
    margin-top: 20px;
  }
  .season-page .slider-more { display: none; }
}

/* Cover note — the small "detailed programme still to come" line pinned to the bottom
   of the single season hero. The only rule here outside .season-page: the cover block
   sits above that wrapper, and its Tailwind utilities are not part of the theme build,
   so the note carries its own styling. Scoped to its own class, nothing else is touched. */
.season-cover-note {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 0 16px 32px;
  text-align: center;
  font-family: 'Lora', Georgia, serif;
}
.season-cover-note p {
  display: inline-block;
  max-width: 608px;
  margin: 0 auto;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .season-cover-note { padding-bottom: 40px; }
  .season-cover-note p { font-size: 14px; }
}