/* responsive-fixes.css — hand-authored mobile responsiveness fixes for the landing page (/).
   Loaded AFTER site.css and ui.css so these rules win the cascade (equal specificity, later source order).
   Scoped to landing-page section classes; targets the three breakages visible below ~991px.

   Webflow breakpoints in use: 991px (tablet), 767px (mobile landscape), 479px (mobile portrait). */

/* ============================================================================
   1. "99+ ATAR tutors" hero watermark — desktop only.
   site.css positions this absolutely (bottom-right of the hero) and only hides it
   at <=479px, so between 480–991px it overlaps the hero image and text.
   Per product decision it is fine for this watermark to be desktop-only, so we
   hide it across the whole tablet/mobile range.
   ============================================================================ */
@media screen and (max-width: 991px) {
  .home-99-atar-gray-text {
    display: none !important;
  }
}

/* ============================================================================
   2. "Maths is our language" tutor cards.
   Three alternate wrappers exist in the markup: .desktop (the real 4-card set —
   Michael Chan, Pahul Singh, Edison Yiu, Calvin Kusnadi, with badge-style marks),
   .tablet (a 3-card variant), and .mobile (a plainer 4-card variant with different
   tutors). At 480–991px the .tablet wrapper is shown but inherits width:23% from
   the base .tutor-cards-wrapper, so its cards are crushed into a sliver on the left.
   We instead show the canonical .desktop set across the whole <=991px range and let
   it wrap into a grid: 2-up on tablet/large phones, 1-up on the narrowest phones so
   the subject + mark badges aren't cramped.
   ============================================================================ */
@media screen and (max-width: 991px) {
  .tutor-cards-wrapper.tablet,
  .tutor-cards-wrapper.mobile {
    display: none !important;
  }
  .tutor-cards-wrapper.desktop {
    display: flex !important;
    /* row + wrap: the base <=991px rule sets flex-flow:column, which would keep the
       cards stacked, so we must restore the row direction explicitly. */
    flex-flow: row wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }
  .tutor-cards-wrapper.desktop .tutor-card {
    width: calc(50% - 12px); /* 2-up grid (slack avoids sub-pixel wrap) */
    /* restore the rounded top corners the base <=991px rule squares off */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
  }
  .tutor-cards-wrapper.desktop .tutor-image {
    border-radius: 0;
  }
  /* Keep each "Maths Ext1 (3U)" label and its mark badge on a single row even on
     the narrowest 2-up cards (~480px viewport). */
  .tutor-cards-wrapper.desktop .tutor-subj {
    font-size: 14px;
    white-space: nowrap;
  }
  .tutor-cards-wrapper.desktop .tutor-subj-marks-wrapper {
    grid-column-gap: 8px;
  }
}
/* Narrowest phones: one card per row so "Maths Ext1 (3U)" + its mark badge fit. */
@media screen and (max-width: 479px) {
  .tutor-cards-wrapper.desktop .tutor-card {
    width: 100%;
  }
}

/* ============================================================================
   3. Pricing section — stack the two plan cards vertically when squished and
   keep the subject/year selector readable.
   At 480–991px the STANDARD + ANNUAL cards stay in a cramped side-by-side row;
   below 479px the ANNUAL card is hidden entirely. On phones we stack them, keep
   both visible, and make the selector pills fit without clipping.
   ============================================================================ */
@media screen and (max-width: 767px) {
  /* Stack the two plan cards vertically, full width, both visible. */
  .flex-block-137 {
    flex-direction: column !important;
    align-items: stretch;
  }
  .flex-block-137 .feature-card-4,
  .flex-block-137 .feature-card-yearly-10 {
    width: 100%;
    flex: 0 0 auto;
  }
  .flex-block-137 .feature-card-yearly-10 {
    display: flex !important; /* un-hide the ANNUAL card (site.css hides it <=479px) */
  }

  /* Year/subject selector: let the four pills share the bar width on one line
     instead of wrapping and clipping inside the fixed-height pill bar. */
  .price-tab {
    height: auto;
    min-height: 40px;
    padding: 4px;
  }
  .price-tab .pricing-tab-button,
  .price-tab .pricing-tab-button.pricing-tab-button-active {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
  }
}