/* =========================================================
   SCHOOLHUB — LAYOUT
   Structural rules only.
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

.schoolhub-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.schoolhub-container {
  width: min(100% - clamp(2rem, 6vw, 5rem), 1200px);
  margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.schoolhub-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
}

.schoolhub-header-inner {
  min-height: 72px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.schoolhub-header-actions {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.75rem;
}

.schoolhub-desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  margin-inline: auto;
}

.schoolhub-menu-toggle {
  display: none;
}

.schoolhub-mobile-menu {
  display: none;
}


/* =========================================================
   MAIN / HERO OFFSET
   ========================================================= */

.schoolhub-main {
  padding-top: 72px;
  background-color: #ffffff;
}

.schoolhub-hero {
  padding-top: 40px;
}

/*
 * Homepage hero already handles its own
 * top spacing, so don't add the global
 * header offset to it.
 */
/* Tutor LMS already provides its own archive top spacing. */
.schoolhub-main:has(.tutor-wrap-parent) {
  padding-top: 0;
}

/*
 * Homepage hero already handles its own
 * top spacing, so don't add the global
 * header offset to it.
 */
.schoolhub-main:has(.schoolhub-hero) {
  padding-top: 0;
}


/* =========================================================
   HERO — DESKTOP FLEXBOX
   ========================================================= */

.schoolhub-hero-inner {
  min-height: calc(100vh - 72px);

  display: flex;
  flex-direction: row;

  align-items: stretch;

  gap: clamp(2rem, 6vw, 6rem);

  padding-block: 0;
}


/*
 * RTL + DOM order:
 * content is first → RIGHT
 * visual is second → LEFT
 */

.schoolhub-hero-content {
  min-width: 0;
  flex: 1 1 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: center;

  padding-bottom: 0;

  text-align: right;
}

.schoolhub-status-badge {
  align-self: flex-start;
}

.schoolhub-hero-inner h1,
.schoolhub-hero-description {
  text-align: right;
}

.schoolhub-hero-visual {
  min-width: 0;
  flex: 1 1 0;

  display: flex;
  align-items: center;
  justify-content: left;
}

.schoolhub-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.schoolhub-hero-image {
  display: block;
  width: min(100%, 520px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  margin-inline: auto;
}


/* =========================================================
   COURSE GRIDS
   ========================================================= */

.schoolhub-course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.schoolhub-course-card {
  min-width: 0;
}

.schoolhub-show-more-desktop {
  align-self: stretch;
  min-width: 0;
}

.schoolhub-summer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.schoolhub-how-inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.schoolhub-steps-grid {
  display: grid;
  gap: 1rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.schoolhub-footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.schoolhub-footer-brand,
.schoolhub-footer-column {
  min-width: 0;
}


/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */

.schoolhub-mobile-bottom-nav {
  display: none;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1280px) {

  .schoolhub-hero-inner {
    gap: 5rem;
  }

}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

  .schoolhub-desktop-nav {
    gap: 1.15rem;
  }

  .schoolhub-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schoolhub-summer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   879px and below
   ========================================================= */

@media (max-width: 879px) {

  .schoolhub-header-inner {
    min-height: 68px;
  }

  .schoolhub-main {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .schoolhub-hero {
    padding-top: 90px;
  }

  /*
   * Homepage hero already handles its own
   * top spacing.
   */
  .schoolhub-main:has(.schoolhub-hero) {
    padding-top: 0;
  }
  
  #ast-scroll-top{
      display: none;
  }
  


  /* ---------------------------------------------------------
     HEADER
     --------------------------------------------------------- */

  .schoolhub-desktop-nav,
  .schoolhub-header-cta {
    display: none;
  }

  .schoolhub-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    appearance: none;
    -webkit-appearance: none;

    opacity: 1;
    visibility: visible;
  }

  .schoolhub-menu-toggle:hover,
  .schoolhub-menu-toggle:focus,
  .schoolhub-menu-toggle:focus-visible,
  .schoolhub-menu-toggle:active {
    opacity: 1;
    visibility: visible;
    transform: none;
  }


  /* ---------------------------------------------------------
     MOBILE MENU
     --------------------------------------------------------- */

  .schoolhub-mobile-menu {
    position: fixed;

    top: 60px;
    right: 0;
    bottom: 60px;
    left: 0;

    z-index: 1050;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
  }

  .schoolhub-mobile-menu[hidden] {
    display: none !important;
  }

  .schoolhub-mobile-menu-inner {
    width: min(100% - clamp(1.5rem, 7vw, 2rem), 1200px);

    min-height: 100%;
    margin-inline: auto;

    display: flex;
    flex-direction: column;

    padding-block: 1.5rem 1rem;
  }

  .schoolhub-mobile-menu nav {
    display: grid;
    gap: 0;
  }

  .schoolhub-mobile-menu-cta {
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
  }


  /* ---------------------------------------------------------
     HERO — MOBILE FLEXBOX
     --------------------------------------------------------- */

  .schoolhub-hero-inner {
    min-height: auto;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding-block: clamp(2.5rem, 7vw, 3.5rem);
  }

  /*
   * Flatten the content wrapper so its children can be
   * ordered around the image on mobile.
   */
  .schoolhub-hero-content {
    display: contents;
  }

  .schoolhub-status-badge {
    order: 1;
    align-self: flex-start;

    margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
  }

  .schoolhub-hero-inner h1 {
    order: 2;

    width: 100%;
    margin-bottom: 1rem;

    text-align: right;
  }

  .schoolhub-hero-description {
    order: 3;

    width: 100%;
    margin-bottom: 0 !important;

    text-align: right;
  }

  .schoolhub-hero-visual {
    order: 4;

    width: 100%;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
  }

  .schoolhub-hero-image {
    width: min(100%, 520px);
    height: auto;
    max-height: none;
  }

  .schoolhub-hero-actions {
    order: 5;

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;

    gap: 0.75rem;
  }

  .schoolhub-hero-actions .schoolhub-button {
    width: 100%;
    flex: 0 0 auto;
  }


  /* ---------------------------------------------------------
     COURSE GRIDS
     --------------------------------------------------------- */

  .schoolhub-course-grid,
  .schoolhub-summer-grid {
    grid-template-columns: 1fr;
  }

  .schoolhub-show-more-desktop {
    display: none;
  }

  .schoolhub-show-more-mobile {
    display: flex;
    width: min(100%, 320px);
    margin-inline: auto;
    margin-top: 1.25rem;
  }


  /* ---------------------------------------------------------
     HOW IT WORKS
     --------------------------------------------------------- */

  .schoolhub-how-inner {
    grid-template-columns: 1fr;
  }


  /* ---------------------------------------------------------
     FOOTER
     --------------------------------------------------------- */

  .schoolhub-footer-main {
    grid-template-columns: 1fr;
  }


  /* ---------------------------------------------------------
     MOBILE BOTTOM NAV
     --------------------------------------------------------- */

  .schoolhub-mobile-bottom-nav {
    position: fixed;

    inset: auto 0 0 0;

    z-index: 1100;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: stretch;

    min-height: 64px;

    padding:
      0.35rem
      max(0.5rem, env(safe-area-inset-right))
      calc(0.35rem + env(safe-area-inset-bottom))
      max(0.5rem, env(safe-area-inset-left));
  }

  .schoolhub-bottom-nav-item {
    display: flex;
    min-width: 0;

    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tutor-color-black{
      font-family: cairo !important;
  }

  .tutor-pagination{
      flex-direction: row !important;
  }

}


/* =========================================================
   MOBILE
   767px and below
   ========================================================= */

@media (max-width: 767px) {

  .schoolhub-container {
    width: min(100% - clamp(1.5rem, 7vw, 2rem), 1200px);
    padding-top: 0;
  }

  .schoolhub-section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .schoolhub-footer-main {
    text-align: center;
  }

  .schoolhub-footer-column nav {
    justify-items: center;
  }

}


/* =========================================================
   SMALL MOBILE
   480px and below
   ========================================================= */

@media (max-width: 480px) {

  .schoolhub-hero-actions .schoolhub-button {
    width: 100%;
  }

  .schoolhub-floating-badge {
    display: none;
  }

  .schoolhub-course-card {
    min-height: 160px !important;
  }

  .schoolhub-footer {
    display: none;
  }

}


/* =========================================================
   VERY SMALL PHONES
   374px and below
   ========================================================= */

@media (max-width: 374px) {

  .schoolhub-header-inner {
    gap: 0.75rem;
  }

  .schoolhub-brand-mark {
    width: 38px;
    height: 38px;
  }

  .schoolhub-course-card {
    min-height: 160px !important;
  }

  .schoolhub-footer {
    display: none;
  }

}