/*
 * Shared responsive foundation
 *
 * This is deliberately the final layout layer on every public page.  It
 * gives phone, tablet, and desktop the same spacing, component geometry and
 * responsive boundaries while leaving page-specific visual storytelling
 * intact.  Headline font sizes remain owned by the existing page artwork so
 * this layer does not reintroduce a global type-scale change.
 */
:root {
  --mg-responsive-gutter: clamp(20px, 4vw, 64px);
  --mg-responsive-section-space: clamp(52px, 8vw, 120px);
  --mg-responsive-card-radius: clamp(16px, 1.6vw, 24px);
  --mg-responsive-control-radius: 12px;
  --mg-responsive-control-height: clamp(44px, 4.2vw, 54px);
}

html,
body {
  min-width: 0;
}

main,
section,
article,
header,
footer,
div {
  min-width: 0;
}

/* Common visual components keep the same proportions at every breakpoint. */
:is(.button, .d-button, .header-cta, .language-toggle, .branch-whatsapp,
  .branch-map, .d-branch-actions a, .news-link, .visit-cta-actions a,
  .visit-cta-actions button) {
  min-height: var(--mg-responsive-control-height);
  border-radius: var(--mg-responsive-control-radius);
}

:is(.branch-feature, .d-branch-card, .training-record__team-photo,
  .training-record__story, .st-results-poster) {
  border-radius: var(--mg-responsive-card-radius);
}

/* Text never creates a horizontal scroll bar.  Natural wrapping remains the
   default for English labels and numbers instead of shrinking them blindly. */
:is(h1, h2, h3, h4, p, a, button, label, address, figcaption, span, strong) {
  overflow-wrap: break-word;
}

/* Match the teaching-method nameplate in both languages.  Let the two
   authored lines size the plaque, with a little air between glyphs. */
:is(#mobile-home, #tablet-home) .hero-copy h1 {
  display: inline-block;
  width: max-content !important;
  max-width: 100% !important;
  margin-bottom: .16em;
  padding: .06em .17em .11em;
  background: var(--blue);
  color: var(--yellow);
  box-shadow: .09em .09em 0 var(--yellow);
  line-height: 1.04;
  letter-spacing: .012em !important;
  animation: none !important;
}

:is(#mobile-home, #tablet-home) .hero-copy h1::after {
  content: none;
}

:is(#mobile-home, #tablet-home) .hero-copy h1 > :is(span, em) {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--yellow) !important;
  text-shadow: none;
  white-space: nowrap;
  transform: none !important;
  animation: none !important;
  clip-path: none !important;
}

html[lang="en"] :is(#mobile-home, #tablet-home) .hero-copy h1 > :is(span, em) {
  inline-size: auto !important;
  max-inline-size: none !important;
  font-size: 1em !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  html:not([lang="en"]) #mobile-home .hero-copy h1 {
    font-size: clamp(46px, 12.3vw, 54px);
  }

  html[lang="en"] #mobile-home .hero-copy h1 {
    font-size: clamp(21px, 6.7vw, 31px) !important;
  }

  /* The home header sits directly against the full-bleed opening photo. */
  .site-header:has(+ #mobile-home) {
    border-bottom: 0;
  }

  /* The phone hero presents its full-bleed carousel before the copy.  Its
     legacy top padding left a blank strip between the site header and that
     first visual; start the section at the header edge while retaining the
     existing spacing below the carousel and around the reading content. */
  #mobile-home .hero {
    padding-top: 0;
  }

  /* Do not let the shared entrance animation briefly translate the first
     banner downward on a phone: the header and banner must remain joined
     from the first rendered frame, not only after the animation settles. */
  #mobile-home .hero-visual {
    animation: none;
  }

  /* The branch facade is wider than the 16:9 campaign posters.  Match the
     active slide to its source dimensions so contain adds no white bars. */
  #mobile-home .hero-carousel:has(.hero-slide-building.is-active) {
    aspect-ratio: 1915 / 821;
  }

  /* Branch names are short identity labels, not paragraph copy.  Keep every
     MyGuru Education branch name on one clean line—even on the narrowest
     phone—rather than creating a distracting orphaned second line. */
  #mobile-home .branch-feature-body h3 {
    font-size: clamp(14px, 4.1vw, 19px) !important;
    line-height: 1.2;
    letter-spacing: -.035em;
    word-spacing: 0;
    overflow-wrap: normal;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  /* The three quality promises are one deliberate row on every phone.
     Android and iOS can report slightly different text metrics, so this
     uses a safe minimum size, no wrapping, and compact fixed side padding
     instead of letting the final promise fall onto a second line. */
  #mobile-home .quality-message-bar {
    flex-wrap: nowrap;
    gap: clamp(4px, 1.6vw, 9px);
    padding: 12px 8px;
    font-size: clamp(9px, 2.5vw, 11px);
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
  }

  #mobile-home .quality-message-bar :is(span, b) {
    flex: 0 0 auto;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  #mobile-home .quality-message-bar b {
    font-size: clamp(6px, 1.5vw, 7px);
  }

  /* English promise copy is much longer than the Chinese labels.  Let it use
     two calm rows on phones instead of clipping the final words off-screen. */
  html[lang="en"] #mobile-home .quality-message-bar {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 7px;
    row-gap: 6px;
    padding: 11px 14px;
    font-size: clamp(9px, 2.45vw, 10.5px);
  }

  /* The English promise heading is one thought.  Its source has two spans for
     Chinese composition; render those inline in English so the browser makes
     a balanced two-line heading rather than clipping the first span. */
  html[lang="en"] #mobile-home .promise .section-heading h2 {
    font-size: clamp(20px, 5.35vw, 23px) !important;
    line-height: 1.16;
    letter-spacing: -.045em;
  }

  html[lang="en"] #mobile-home .promise .section-heading h2 span {
    display: inline;
    white-space: normal !important;
  }

  html[lang="en"] #mobile-home .promise .section-heading h2 span + span::before {
    content: " ";
  }

  html[lang="en"] #mobile-home .promise .section-heading .promise-title-lead {
    margin-right: .18em;
  }

  /* Programme names need the same one-line treatment in English.  Their
     compact phone scale keeps “Secondary · Form 1 – Form 5” intact instead
     of leaving “Form 5” stranded on a second row. */
  html[lang="en"] #mobile-home .course-panel h3 {
    font-size: clamp(18px, 5.1vw, 21px) !important;
    letter-spacing: -.055em;
    overflow-wrap: normal;
    white-space: nowrap !important;
  }

  /* Keep the Chinese teacher-team promise as one complete phrase.  It is a
     short label, so reducing only this title is clearer than leaving a lone
     “资” on a second line. */
  html:not([lang="en"]) .training-record__team-photo figcaption strong {
    font-size: clamp(30px, 8.2vw, 38px) !important;
    letter-spacing: -.055em;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  /* Course panels use a capped phone scale.  The legacy card title was
     allowed to grow with the viewport, making a wider Android renderer
     wrap wording that remained on one line on iOS. */
  #mobile-home .courses {
    padding-inline: clamp(20px, 5vw, 24px);
  }

  #mobile-home .course-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  #mobile-home .course-tabs button {
    min-width: 0;
    min-height: 46px;
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #mobile-home .course-panel {
    padding: clamp(20px, 5vw, 24px) !important;
    gap: 16px;
    border-radius: 20px;
  }

  #mobile-home .course-panel h3 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(25px, 6.4vw, 29px) !important;
    line-height: 1.18;
    letter-spacing: -.025em;
    white-space: nowrap;
  }

  #mobile-home .course-intro {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.65;
  }

  #mobile-home .course-subject-groups {
    gap: 14px;
  }

  #mobile-home .course-subject-group {
    padding: 17px 18px;
    border-radius: 15px;
  }

  #mobile-home .course-subject-group h4 {
    font-size: 17px;
    line-height: 1.25;
  }

  #mobile-home .course-list {
    gap: 8px;
  }

  #mobile-home .course-list span {
    padding: 7px 11px;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .site-header,
  .section,
  .branches,
  .care-band,
  .story-cinematic :is(.st-hero, .st-journey-mobile, .st-results, .st-school,
    .st-school-archive, .st-system, .st-method, .st-close),
  .training-record,
  .teachers-consult {
    padding-inline: var(--mg-responsive-gutter);
  }

  :is(.branch-feature-body, .d-branch-card, .training-record__story) {
    padding: clamp(20px, 5vw, 28px);
  }

  :is(.branch-feature-body > div, .d-branch-actions, .visit-cta-actions) > * {
    min-width: 0;
  }
}

/* Extremely narrow phones retain readable copy; a controlled two-line title
   is better than clipping the programme name. */
@media (max-width: 360px) {
  #mobile-home .course-panel h3 {
    font-size: 25px !important;
    white-space: normal;
  }

  html:not([lang="en"]) .training-record__team-photo figcaption strong {
    font-size: 27px !important;
  }
}

/* The Chinese teacher-team promise is one complete label.  Keep it on one
   line and bring the dot close to the words instead of leaving two wide,
   distracting spaces around it. */
html:not([lang="en"]) .training-record__team-photo figcaption strong {
  word-spacing: -0.18em;
}

@media (min-width: 701px) {
  html:not([lang="en"]) .training-record__team-photo figcaption strong {
    display: inline-block;
    max-width: 100%;
    font-size: clamp(34px, 3.7vw, 54px);
    letter-spacing: -0.045em;
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  /* Tablet is its own comfortable layout—not a stretched phone or a cramped
     desktop.  This single boundary is shared across homepage, story and team. */
  :is(#tablet-home, .story-cinematic, .teachers-page main) {
    width: 100%;
  }

  .site-header {
    padding-inline: var(--mg-responsive-gutter);
  }
}

@media (min-width: 1101px) {
  .site-header {
    padding-inline: max(32px, calc((100vw - 1360px) / 2));
  }

  /* The Puchong Jaya facade contains programme labels along its lower edge.
     Match the carousel to this source image's real proportion and contain it
     so “Primary / Secondary” remains visible instead of being cover-cropped. */
  #desktop-home .d-hero-carousel:has(.d-hero-slide:first-child.is-active) {
    aspect-ratio: 1915 / 821;
  }

  #desktop-home .d-hero-slide:first-child img {
    object-fit: contain !important;
    object-position: center;
  }
}

/* Keep both English school-visit headlines in the same treatment.  The
   archive phrase used to keep growing after its reading column stopped
   growing, which split “Support” onto another line and made the yellow
   highlight cover the letters.  Cap only this long English title, then make
   its yellow label a single self-contained line with a blue offset shadow. */
html[lang="en"] .story-cinematic .st-school--archive .st-school__copy h2 {
  font-size: clamp(25px, 2.7vw, 38px) !important;
  line-height: 1.12;
  letter-spacing: -.055em;
  white-space: nowrap !important;
}

html[lang="en"] .story-cinematic .st-school--archive .st-school__copy h2 em {
  display: inline-block;
  margin-top: .16em;
  padding: .06em .14em .12em .08em;
  background: var(--st-yellow);
  box-shadow: 7px 7px 0 var(--st-blue);
  color: var(--st-blue);
  line-height: .92;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  html[lang="en"] .story-cinematic .st-school--archive .st-school__copy h2 {
    font-size: clamp(27px, 7.2vw, 33px) !important;
  }

  html[lang="en"] .story-cinematic .st-school--archive .st-school__copy h2 em {
    box-shadow: 6px 6px 0 var(--st-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The two statements in the mobile parent-journey card are one continuous
   message.  Give them the same type scale so the second half does not look
   accidentally subordinate on phones and tablets. */
html:not([lang="en"]) #mobile-home .parent-journey-card :is(h2, p) {
  font-size: clamp(30px, 4.4vw, 61px) !important;
  line-height: 1.54 !important;
}

@media (max-width: 600px) {
  html:not([lang="en"]) #mobile-home .parent-journey-card :is(h2, p) {
    font-size: clamp(25px, 7.5vw, 33px) !important;
  }
}

/* On desktop, the closing statement should lead directly into its action
   panel.  A smaller gap keeps the two pieces reading as one invitation while
   retaining enough space for the paragraph to breathe. */
@media (min-width: 1101px) {
  /* Keep the teaching-method title in the same blue-and-yellow emphasis
     language as the site’s key statements.  The offset is expressed in em so
     it scales with the responsive heading at every desktop width. */
  #desktop-home .d-method .d-copy-rail h2 > :is(em, span) {
    display: inline-block;
    padding: .06em .17em .11em;
    background: var(--mg-blue);
    color: var(--mg-yellow);
    box-shadow: .09em .09em 0 var(--mg-yellow);
    font-style: normal;
    line-height: .94;
  }

  #desktop-home .d-parent-note {
    margin-inline: auto;
    padding-bottom: 30px;
    position: relative;
    isolation: isolate;
    justify-items: center;
    text-align: center;
  }

  #desktop-home .d-parent-note > * {
    position: relative;
    z-index: 1;
  }

  /* A single quiet brand-colour dash on each side gives the centred note a
     little rhythm without turning the open space into an illustration. */
  #desktop-home .d-parent-note::before,
  #desktop-home .d-parent-note::after {
    content: "";
    position: absolute;
    top: 40%;
    width: clamp(42px, 4vw, 58px);
    height: 5px;
    pointer-events: none;
    z-index: 0;
    border: 0;
    border-radius: 999px;
    background: var(--mg-yellow);
    box-shadow: none;
    transform: none;
  }

  #desktop-home .d-parent-note::before {
    left: clamp(-94px, -7vw, -68px);
  }

  #desktop-home .d-parent-note::after {
    right: clamp(-94px, -7vw, -68px);
    background: var(--mg-blue);
  }

  #desktop-home .d-parent-note > p {
    max-width: 46em;
    padding: 18px 0 0;
    border-top: 5px solid var(--mg-yellow);
    border-left: 0;
    text-align: center;
  }
}