/* Homepage: enquiry-led hero (all widths) and a short story on phones (<768px).
   Phones hide the background sections marked .jhs-m-hide and show the .jhs-m-only
   blocks instead; desktop is unchanged apart from the hero proof points/buttons. */

/* ---------- hero, all widths ---------- */
.hero-wf .hero-proof { list-style: none; margin: 0 auto 26px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 640px; }
.hero-wf .hero-proof li { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
.hero-wf .wf-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-wf .wf-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .7); color: #fff; }
.hero-wf .wf-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.jhs-m-only { display: none; }

@media (max-width: 767.98px) {
  .jhs-m-hide { display: none !important; }
  .jhs-m-only { display: block; }

  /* hero: one clear message; colours follow the existing pastel phone band */
  .hero-wf .hero-proof { margin: 4px auto 18px; gap: 6px; }
  .hero-wf .hero-proof li { background: #fff; border-color: #cbe5d3; color: #17301f; font-size: 13px; padding: 5px 12px; }
  .hero-wf .wf-btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin: 0 auto; }
  .hero-wf .wf-btns .th-btn { justify-content: center; width: 100%; }
  .hero-wf .wf-btn-ghost { border-color: #1a2653; color: #1a2653; }
  .hero-wf h1.wf-kw { font-size: 17px; line-height: 1.4; margin-bottom: 6px; }
  .hero-wf .hero-title { font-size: 24px !important; margin-bottom: 10px; }
  .hero-wf .hero-style1.wf-center { padding: 14px 0 26px !important; }

  /* shared block look */
  .jhs-m-only { padding: 26px 16px; }
  .jhs-m-only h2 { font-size: 22px; line-height: 1.3; margin: 0 0 14px; color: #1a2653; }

  .jhs-m-why { background: #fff; }
  .jhs-m-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .jhs-m-why li { padding: 14px 16px 14px 46px; border: 1px solid #e3e9f4; border-radius: 14px; background: #f7f9fd; position: relative; }
  .jhs-m-why li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%;
    background: #12A594 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
  .jhs-m-why b { display: block; color: #1a2653; font-size: 16px; }
  .jhs-m-why span { display: block; color: #4b5563; font-size: 14px; line-height: 1.55; margin-top: 2px; }

  /* stages: swipeable row instead of three tall stacked cards */
  .jhs-stages.space { padding-top: 26px !important; padding-bottom: 26px !important; }
  .jhs-stages .title-area { margin-bottom: 16px !important; padding: 0 16px; }
  .jhs-stages .jhs-stages__lede { display: none; }
  .jhs-stages .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px !important; margin: 0 !important; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; }
  .jhs-stages .row > [class*="col-"] { flex: 0 0 78% !important; max-width: 78% !important; width: 78% !important; padding: 0 !important; scroll-snap-align: start; position: static !important; top: auto !important; transform: none !important; }
  .jhs-stages .jhs-stage-card__img { height: 130px !important; }
  .jhs-stages .jhs-stage-card__img img { height: 130px !important; object-fit: cover; }
  .jhs-stages .jhs-stage-card__body p { display: none; }

  /* fees line */
  .jhs-m-fees { background: #fff7e6; border-top: 1px solid #f3dfb5; border-bottom: 1px solid #f3dfb5; padding: 16px; }
  .jhs-m-fees p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: #3a2f12; }
  .jhs-m-fees a { font-weight: 700; color: #1a2653; text-decoration: underline; }

  /* admissions hub: compact, and visible without waiting for the scroll animation */
  .attraction-banner { padding-bottom: 26px !important; }
  .attraction-banner .text-banner-animate { margin-bottom: 18px !important; }
  .attraction-banner .wow { visibility: visible !important; animation: none !important; opacity: 1 !important; }
  .attraction-banner .action-cards-container { gap: 10px !important; padding: 0 16px; }
  .attraction-banner .action-card .card-inner { padding: 16px !important; }

  /* questions */
  .jhs-m-faq { background: #f7f9fd; }
  .jhs-m-faq details { background: #fff; border: 1px solid #e3e9f4; border-radius: 12px; margin-bottom: 8px; padding: 0 14px; }
  .jhs-m-faq summary { cursor: pointer; font-weight: 700; color: #1a2653; padding: 13px 22px 13px 0; list-style: none; position: relative; font-size: 15px; }
  .jhs-m-faq summary::-webkit-details-marker { display: none; }
  .jhs-m-faq summary::after { content: "+"; position: absolute; right: 0; top: 9px; font-size: 22px; font-weight: 400; }
  .jhs-m-faq details[open] summary::after { content: "\2013"; }
  .jhs-m-faq details p { margin: 0 0 13px; color: #4b5563; font-size: 14px; line-height: 1.6; }

  /* final call to action */
  .jhs-m-cta { background: #1a2653; color: #fff; text-align: center; }
  .jhs-m-cta h2 { color: #fff; }
  .jhs-m-cta p { color: #d7deeb; margin: 0 0 16px; font-size: 15px; }
  .jhs-m-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: #FFB539; color: #1b1b1b !important; font-weight: 700; text-decoration: none; padding: 0 18px; }
  .jhs-m-cta__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
  .jhs-m-btn--light { background: rgba(255, 255, 255, .12); color: #fff !important; border: 1px solid rgba(255, 255, 255, .35); font-size: 14px; padding: 0 8px; }

  /* links to the sections phones skip */
  .jhs-m-more { background: #fff; }
  .jhs-m-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .jhs-m-more a { display: block; padding: 11px 12px; border: 1px solid #e3e9f4; border-radius: 10px; color: #1a2653; font-weight: 600; font-size: 14px; line-height: 1.3; text-decoration: none; height: 100%; }
}

@media (max-width: 767.98px) {
  /* admissions hub: three short rows instead of three tall cards */
  .attraction-banner .action-cards-container { display: grid !important; grid-template-columns: 1fr !important; }
  .attraction-banner .action-card { padding: 0 !important; min-height: 0 !important; }
  .attraction-banner .action-card .card-inner { display: grid !important; grid-template-columns: 40px 1fr auto; align-items: center; gap: 4px 12px; text-align: left !important; padding: 14px !important; min-height: 0 !important; }
  .attraction-banner .action-card .card-inner > i { grid-row: 1 / span 2; font-size: 26px !important; margin: 0 !important; }
  .attraction-banner .action-card h3 { margin: 0 !important; font-size: 17px !important; }
  .attraction-banner .action-card p { grid-column: 2; margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; }
  .attraction-banner .action-card .animated-btn { grid-column: 3; grid-row: 1 / span 2; margin: 0 !important; padding: 9px 14px !important; font-size: 14px !important; white-space: nowrap; }
  .attraction-banner .admission-hub-head { margin-bottom: 14px !important; padding: 0 16px; }
  .attraction-banner .admission-hub-head h2 { font-size: 24px !important; }
  /* testimonials: tighter card */
  #testi-sec.space { padding-top: 26px !important; padding-bottom: 26px !important; }
  #testi-sec .title-area { margin-bottom: 16px !important; }
  #testi-sec .testi-card { padding: 20px !important; }
  #testi-sec .testi-card_text { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 30px !important; }
}