/* Cyclink conversion layer — 2026-11-11
   Loaded after the existing bundle. Keeps the current brand tokens and only
   changes hierarchy, proof and mobile conversion. */

/* 1. Re-order the homepage without moving large HTML blocks. */
.cyclink-redesign main#main { display: flex; flex-direction: column; }
.cyclink-redesign main#main > .hero { order: 1; }
/* The audience tabs sit directly under the hero. Without an explicit order
   they default to 0 and are laid out before the hero, so their -76px margin
   pulls them behind the fixed header on mobile (a stray tab peeks out at the
   top of the page). Same order as the hero keeps DOM order: hero, then tabs. */
.cyclink-redesign main#main > .aud-tabs { order: 1; }
.cyclink-redesign main#main > #kids { order: 2; }
.cyclink-redesign main#main > #next-classes { order: 3; }
.cyclink-redesign main#main > #parent-voices { order: 4; }
.cyclink-redesign main#main > #about-proof { order: 5; }
.cyclink-redesign main#main > .rd-about { order: 6; }
.cyclink-redesign main#main > #learning-style { order: 7; }
.cyclink-redesign main#main > .rd-locations { order: 8; }
.cyclink-redesign main#main > #cycling-map { order: 9; }
.cyclink-redesign main#main > .rd-faq { order: 10; }
.cyclink-redesign main#main > #latest-events { order: 11; }
.cyclink-redesign main#main > .cta-band { order: 12; }

/* 2. Keep the main CTA visible in the default "kids" audience state. */
body.aud-kids .hero__actions,
body.aud-kids .hero__points { display: flex !important; }

/* 3. Hero next-class strip */
.hero__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(43, 33, 24, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.35;
}
.hero__next-label {
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
}
.hero__next a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(43, 33, 24, .14);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.hero__next a:hover { background: var(--yellow); }
.hero__next-all { margin-left: auto; border: 0 !important; background: transparent !important; text-decoration: underline !important; }

/* 4. Course-card fact line */
.kids-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.kids-card__facts li {
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff6d8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

/* 5. Assessment price line */
.kids-assess__price {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.kids-assess__price small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }

/* 6. Homepage "next classes" section */
.rd-home-sessions { background: #fff1c9; }
.home-session-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
.home-session-row {
  display: grid;
  grid-template-columns: 150px 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fffaf0;
  border: 1px solid rgba(43, 33, 24, .12);
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
}
.home-session-row:hover { background: #fff; border-color: rgba(43, 33, 24, .28); }
.home-session-row__when { font-weight: 900; }
.home-session-row__place { font-weight: 800; }
.home-session-row__course { color: var(--ink-soft); }
.home-session-row__price { font-weight: 900; text-align: right; white-space: nowrap; }
.home-session-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

/* 7. Real WhatsApp proof */
.voice-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.voice-shot {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #2b2118;
  border: 3px solid #fffaf0;
  box-shadow: 0 8px 18px rgba(43, 33, 24, .12);
}
.voice-shot img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: contain;
  background: #2b2118;
}
.voice-shot figcaption {
  padding: 7px 9px;
  background: #2b2118;
  color: #fffaf0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.voice-proof-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #2b2118;
  color: #fffaf0;
  font-size: 12px;
  font-weight: 800;
}

/* 8. Sticky mobile conversion bar */
.mobile-cta {
  display: none;
}
@media (max-width: 760px) {
  .mobile-cta {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 60;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 250, 240, .94);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(43, 33, 24, .18);
    border: 1px solid rgba(43, 33, 24, .12);
  }
  .mobile-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 12px;
    font-weight: 900;
    text-decoration: none;
    font-size: 14px;
  }
  .mobile-cta__find { background: var(--yellow); color: var(--ink); }
  .mobile-cta__wa { background: var(--ink); color: var(--cream); }
  .fab { bottom: 76px; }
  .voice-shots { grid-template-columns: 1fr; }
  .voice-shot img { height: 160px; }
  .home-session-grid { grid-template-columns: 1fr; }
  .home-session-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .home-session-row__course { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero__next { font-size: 13px; }
  .hero__next-all { margin-left: 0; }
  .kids-card__facts li { font-size: 11px; }
}

/* 9. Level prep note */
.level-prep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff1c9;
  border: 1px solid rgba(43, 33, 24, .12);
  font-size: 15px;
  line-height: 1.55;
}
.level-prep p { margin: 0; max-width: 760px; }
.cyclink-redesign .hero__formula { display: none; }
.cyclink-redesign main#main > .rd-about { display: none; }
.voice-proof { margin-top: 14px; }
.voice-proof summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 900; color: var(--ink); padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(43,33,24,.14); }
.voice-proof[open] summary { margin-bottom: 10px; }


/* 10. Adult class card */
.adult-class-card { margin: 24px 0 0; padding: 26px 28px; border-radius: 24px; background: #fff1c9; border: 1px solid rgba(43,33,24,.14); }
.adult-class-card h2 { margin: 6px 0 8px; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.adult-class-card p { margin: 0 0 10px; }
.adult-class-card__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; padding: 0; list-style: none; }
.adult-class-card__facts li { padding: 5px 10px; border-radius: 999px; background: #fffaf0; border: 1px solid rgba(43,33,24,.12); font-size: 13px; font-weight: 800; }
.adult-class-card__note { margin-top: 12px !important; font-size: 13px; color: var(--ink-soft); }

/* 11. B2B procurement documents */
.b2b-docs { margin: 22px 0 0; padding: 20px 22px; border-radius: 20px; background: #fffaf0; border: 1px solid rgba(43,33,24,.14); }
.b2b-docs__title { margin: 0 0 10px; font-weight: 900; font-size: 18px; }
.b2b-docs ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 18px; margin: 0; padding-left: 20px; line-height: 1.6; }
.b2b-docs__note { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 680px) { .b2b-docs ul { grid-template-columns: 1fr; } }

/* 12. Finder adult note */
.finder-adult-note { margin: 0 0 14px; padding: 12px 15px; border-radius: 14px; background: #fff1c9; border: 1px solid rgba(43,33,24,.12); font-size: 14px; line-height: 1.55; }
.finder-adult-note a { font-weight: 900; color: var(--ink); }

/* 13. Keep map/locations visible in the desktop nav */
@media (min-width: 900px) {
  .nav__links { max-width: 660px; gap: .55rem; }
  .nav__links .nav__link { font-size: .92rem; white-space: nowrap; }
}

/* Finder: step-by-step + compact */
.page-hero--finder { padding: 34px 0 8px !important; }
.finder-adult-note { margin: 0 0 8px !important; padding: 8px 12px !important; font-size: 12.5px !important; line-height: 1.45 !important; }
.finder__progress { margin-bottom: 12px !important; }
.finder__step-title { font-size: clamp(1.25rem, 3vw, 1.5rem) !important; line-height: 1.3 !important; }
.finder__step-sub { font-size: 13px !important; line-height: 1.5 !important; margin: 4px 0 10px !important; }
.finder__options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; }
.finder__option { min-height: 48px !important; padding: 9px 10px !important; font-size: 14px !important; border-radius: 12px !important; }
.finder__step-wrap { min-height: 0 !important; }
.finder__actions { margin-top: 14px !important; }
.finder__actions .btn { min-height: 46px !important; padding: 10px 18px !important; font-size: 14px !important; }

/* Hero intro: two short phrases, inline on desktop and stacked on phones.
   The natural space between the spans is enough on desktop; stacking on
   phones keeps “每堂 1–2 小時” from splitting across lines mid-phrase. */
@media (max-width: 560px) {
  .cyclink-redesign .hero__sub span { display: block; }
}

/* In 大朋友／團體 mode the audience tabs sit after that panel's own hero.
   The kids-mode -77px pull would place them on top of the adult hero, so
   remove it here and let the hero's own bottom margin create the gap. */
body.aud-adults .aud-tabs,
body.aud-groups .aud-tabs {
  margin-top: 0;
}

/* Keep the three audience buttons in one tidy row on phones instead of
   wrapping as 2 + 1. */
@media (max-width: 560px) {
  .aud-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .aud-tab {
    width: 100%;
    min-height: 44px;
    padding: 10px 6px;
    font-size: 13px;
    text-align: center;
  }
}