/*
 * Responsive stability layer
 *
 * This is intentionally loaded last.  Older page styles contain several
 * overlapping device-era breakpoints; this file owns only the three current
 * layout ranges so a phone, tablet, or desktop cannot accidentally render a
 * second layout or create a wider document.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* The phone and tablet share this two-row Chinese campaign headline.  Use a
   single optical correction for both renderers, rather than device-specific
   offsets, so 补/成 and 家/佳 stay on the same vertical edges. */
html:not(.is-english) :is(#mobile-home, #tablet-home) .hero h1 > em {
  position: relative;
  left: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}

/* This care label is generated by a legacy CSS pseudo-element rather than
   HTML, so the shared language switcher cannot see it. */
html.is-english .care-card b:nth-child(3)::after {
  content: "Progress Report Group";
}

body,
main,
.story-cinematic,
.teachers-page .training-record,
.site-bottom-bar {
  min-width: 0;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

/* One, and only one, home renderer is eligible at each layout range. */
@media (max-width: 767px) {
  #mobile-home {
    display: block !important;
    min-width: 0;
  }

  #tablet-home,
  #desktop-home {
    display: none !important;
  }

  #mobile-home .hero,
  #mobile-home .section,
  #mobile-home .branches,
  #mobile-home .care-band {
    min-width: 0;
  }

  /* Older homepage experiments retained desktop grid tracks and a 15ch
     heading cap below the phone breakpoint.  They made a 393px phone give
     headings only ~229px of room.  Mobile owns one full reading column. */
  #mobile-home .hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mobile-home .hero-copy,
  #mobile-home .section-heading,
  #mobile-home .branches .section-heading {
    width: 100%;
    max-width: none !important;
    min-width: 0;
  }

  #mobile-home .hero h1,
  #mobile-home .section-heading h2 {
    width: 100%;
    max-width: none !important;
  }

  /* Both Chinese hero lines contain five characters.  A legacy `em` rule
     enlarged only the second line, so 补/成 and 家/佳 missed each other by a
     few pixels.  Keep the two rows typographically identical. */
  html:not(.is-english) #mobile-home .hero h1 > span,
  html:not(.is-english) #mobile-home .hero h1 > em {
    display: block;
    font-size: 1em !important;
    font-style: normal;
    letter-spacing: inherit !important;
    /* Match the optical left edge of 成 with 补; the inherited display face
       carried a small right offset on the second row. */
    transform: translateX(-.08em);
  }

  /* Branch cards must take the phone width, not the min-content width of a
     long contact number. Each number group stays intact and wraps cleanly
     only when a single row cannot fit. */
  #mobile-home .branches > .branch-feature,
  #mobile-home .branches .branch-feature-body {
    min-width: 0;
    width: 100%;
  }

  #mobile-home .branches .branch-phone {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: .15em .42em;
    margin-inline: 0;
    font-size: clamp(18px, 4.8vw, 21px) !important;
    line-height: 1.28;
    letter-spacing: -.02em;
    white-space: normal !important;
  }

  #mobile-home .branches .branch-phone span,
  #mobile-home .branches .branch-phone i {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* The awards statement is deliberately split by sentence.  The second
     sentence used to inherit a 20px desktop reading size, leaving the final
     Chinese character alone on a third line on 375–430px phones.  This keeps
     every word visible in two calm lines at the smallest supported width. */
  #mobile-home .awards-summary {
    font-size: clamp(16px, 4.7vw, 18px) !important;
    line-height: 1.5;
    text-wrap: balance;
  }

  #mobile-home .awards-summary > span {
    display: block;
  }

  #mobile-home .awards-summary > span + span {
    margin-top: .28em;
  }

  /* Course title has two intentional ideas.  Keep the exact wording, but
     give each idea a deliberate line instead of allowing the longer second
     line to spill into a third row. */
  #mobile-home .courses .section-heading h2 > span {
    display: block;
  }

  #mobile-home .courses .section-heading h2 > span + span {
    margin-top: .18em;
    font-size: .61em;
    line-height: 1.25;
    letter-spacing: 0;
  }

  #mobile-home .courses .section-heading h2 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.14;
  }

  #mobile-home .branches .section-heading h2 {
    font-size: clamp(19px, 5.35vw, 22px) !important;
    line-height: 1.22;
  }

  /* The daycare headline has two deliberately authored lines.  At the
     narrowest supported phone width, this size keeps the longer second
     line intact instead of creating an unattractive third line. */
  #mobile-home .care-copy h2 {
    font-size: clamp(22px, 6.2vw, 27px);
    line-height: 1.16;
    letter-spacing: -.06em;
  }

  html[lang="en"] #mobile-home .care-copy h2 {
    font-size: clamp(18px, 5.3vw, 21px);
    letter-spacing: -.035em;
  }

  /* Titles are content, not decorative fixed-width artwork.  Balancing lets
     Chinese and English choose their natural two-line break rather than
     stranding one word or character below the intended title. */
  #mobile-home h1,
  #mobile-home .section-heading h2,
  #mobile-home .care-copy h2,
  #mobile-home .branch-feature-body h3,
  #mobile-home .method-feature h3,
  #mobile-home .method-cards h3 {
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
}

/* Keep the authored daycare headline structure identical at phone, tablet,
   and desktop widths. */
#mobile-home .care-copy h2 > span,
#tablet-home .care-copy h2 > span,
#desktop-home .d-daycare .d-copy-rail h2 > span {
  display: block;
  white-space: nowrap;
}

/* At the narrowest phone widths, an always-visible speech hint can cover
   translated body copy. Keep the assistant reachable, but reduce its visual
   footprint and let the character itself be the consultation entry. */
@media (max-width: 359px) {
  .myguru-pet,
  .myguru-pet-button {
    display: none !important;
  }

  .myguru-pet-hint {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  #tablet-home {
    display: block !important;
    min-width: 0;
  }

  #mobile-home,
  #desktop-home {
    display: none !important;
  }

  /* The previous desktop footer started at 1,212px wide on an iPad.
     Tablet now uses a deliberate, full-width vertical lockup instead. */
  footer.site-bottom-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding: 28px clamp(24px, 5vw, 42px);
  }

  footer.site-bottom-bar .bottom-brand,
  footer.site-bottom-bar > p,
  footer.site-bottom-bar small {
    width: 100%;
    min-width: 0;
    justify-self: start;
    white-space: normal;
  }

  footer.site-bottom-bar > p {
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.2;
  }

  /* Keep the tablet header in its compact desktop form, without the two
     competing portrait variants from older page styles. */
  .site-header {
    min-height: 68px;
    height: auto;
    padding: 8px 20px;
    gap: 6px;
  }

  .site-header .brand img { width: clamp(108px, 13vw, 132px); }
  .site-header .menu-button { display: none !important; }
  .site-header .nav {
    position: static;
    display: flex !important;
    width: auto;
    margin-left: auto;
    padding: 0;
    gap: clamp(3px, .65vw, 7px);
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .site-header .nav a {
    min-width: 0;
    padding: 0;
    font-size: clamp(9px, 1.18vw, 12px);
    white-space: nowrap;
  }
  .site-header .language-toggle { width: 34px; height: 32px; font-size: 10px; }
  .site-header .header-cta { min-height: 40px; padding-inline: 12px; font-size: 12px; }

  /* Tablet renders the same Chinese two-line campaign title as the phone.
     Keep its two five-character rows on the same optical left/right edges. */
  html:not(.is-english) #tablet-home .hero h1 > span,
  html:not(.is-english) #tablet-home .hero h1 > em {
    display: block;
    font-size: 1em !important;
    font-style: normal;
    letter-spacing: inherit !important;
  }

  html:not(.is-english) #tablet-home .hero h1 > em {
    transform: translateX(-.08em);
  }
}

@media (min-width: 1101px) {
  #desktop-home {
    display: block !important;
    min-width: 0;
  }

  #mobile-home,
  #tablet-home {
    display: none !important;
  }
}
/* Keep the fifth honour at the same display scale as the other values. It
   receives the full phone width so the approved label stays on one line. */
#mobile-home .award-values span:last-of-type,
#tablet-home .award-values span:last-of-type {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: calc(100% + 40px);
  margin-inline: -20px;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* SME100 is one award name. Keep it intact, with only a subtle optical
     letter spacing and the normal small space before Awards. */
  letter-spacing: .018em;
  word-spacing: normal;
  font-variant-numeric: lining-nums tabular-nums;
}

/* English award labels need a deliberate display scale as their words occupy
   more horizontal space than the Chinese labels. The long third label may use
   two balanced lines instead of becoming too small. */
html.is-english #mobile-home .award-values span,
html.is-english #tablet-home .award-values span {
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -.045em;
  white-space: normal;
  line-height: 1.08;
  overflow-wrap: normal;
}

/* The Chinese artwork uses four short keywords.  English uses real words,
   so tablet switches to two generous columns rather than allowing four
   narrow columns to collide. */
@media (min-width: 768px) and (max-width: 1100px) {
  html.is-english #tablet-home .award-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px clamp(28px, 6vw, 58px);
  }

  html.is-english #tablet-home .award-values span {
    min-width: 0;
    transform: none;
  }
}

/* A phone cannot give two English phrases a readable column each.  One wide
   reading column keeps every label large and limits the longest phrase to two
   intentional lines instead of producing a tiny or third-line word. */
@media (max-width: 767px) {
  html.is-english #mobile-home .award-values {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  html.is-english #mobile-home .award-values span {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    min-width: 0;
    justify-self: stretch;
    transform: none;
  }

  html.is-english #mobile-home .award-values span:last-of-type {
    grid-column: auto;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  html.is-english #mobile-home .award-values span {
    font-size: clamp(28px, 8.6vw, 34px);
  }
}

/* This bilingual progress heading is authored as two ideas.  Keep those
   ideas as exactly two visual rows in English; without explicit block spans,
   the browser could leave only "Visible" on a third line at wide desktops. */
html.is-english :is(#mobile-home, #tablet-home, #desktop-home) .student-progress .section-heading h2 > span,
html.is-english #desktop-home .d-progress-heading h2 > span {
  display: block;
}

html.is-english #desktop-home .d-progress-heading h2 {
  max-width: 100%;
  font-size: clamp(42px, 3.65vw, 58px);
  line-height: 1.1;
  letter-spacing: -.055em;
}

html.is-english #desktop-home .d-progress-heading h2 > span {
  white-space: nowrap;
}

/* This is a deliberately concise holiday heading.  It must remain a single
   reading line at every viewport, including narrow phones and the desktop
   editorial rail, without letting it run outside its section. */
:is(#mobile-home, #tablet-home) .gallery .section-heading h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -.045em;
}

#desktop-home .d-holidays .d-copy-rail h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -.045em;
}

@media (min-width: 768px) {
  #desktop-home .d-proof-grid .d-value-tags li:last-child {
    grid-column: 1 / -1;
    width: calc((100% - 22px) / 2);
    justify-self: center;
    justify-content: flex-start;
    padding-inline: 24px;
    font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: .018em;
    word-spacing: normal;
    font-variant-numeric: lining-nums tabular-nums;
  }
}

/* Keep every teaching-method check and its label on one visual row.  The
   same grid is used by the phone, tablet, and desktop content roots so the
   yellow check never sits visually above or below its accompanying sentence. */
:is(#mobile-home, #tablet-home, #desktop-home)
  :is(.method-feature, .method-cards, .d-method-feature, .d-method-cards) li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

:is(#mobile-home, #tablet-home, #desktop-home)
  :is(.method-feature, .method-cards, .d-method-feature, .d-method-cards) li::before {
  align-self: center;
}

/* The method explanations lead straight into their checklists.  Remove the
   divider that previously appeared under every explanation on every canvas. */
:is(#mobile-home, #tablet-home, #desktop-home)
  :is(.method-feature, .method-cards, .d-method-feature, .d-method-cards) ul {
  border-top: 0;
}

/* Branch headings must stay open and readable on every canvas.  A small,
   fixed positive tracking avoids the cramped letterforms seen at some device
   widths without changing either authored line. */
:is(#mobile-home, #tablet-home) .branches .section-heading h2,
#desktop-home .d-branches .d-branch-heading h2 {
  letter-spacing: .018em;
}

/* The approved bento photograph is evidence of the daycare lunch itself.
   Keep its full natural frame on desktop rather than cropping it to fill a
   fixed-height service card. */
#desktop-home .d-daycare .d-service-list .d-service-lunch img {
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}