@media (max-width: 1100px) {
  .school-staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hero-row .et_pb_column {
    max-width: none;
  }

  .cta-card-row {
    flex-wrap: wrap;
    gap: 20px;
  }

  .cta-card-row > .et_pb_column {
    width: calc(50% - 10px) !important;
    margin: 0 !important;
  }

  .bilingual-content-row {
    display: block;
  }

  .bilingual-content-row > .et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .bilingual-content-row > .et_pb_column + .et_pb_column {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
  }

  .school-staff-grid,
  .school-governor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .school-submenu-card {
    flex-basis: calc((100% - 24px) / 2);
  }

  .important-letters-grid,
  .standard-letters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cta-card-row > .et_pb_column {
    width: 100% !important;
  }

  .page-hero {
    padding-block: 48px !important;
  }

  .page-hero::before {
    right: -150px;
    bottom: -170px;
  }

  .school-staff-wrap,
  .school-policies-wrap {
    gap: 36px;
  }

  .school-staff-grid,
  .school-governor-grid,
  .school-policy-grid,
  .important-letters-grid,
  .standard-letters-grid {
    grid-template-columns: 1fr;
  }

  .school-submenu-grid {
    gap: 18px;
  }

  .school-submenu-card {
    flex-basis: 100%;
    min-height: 225px;
  }

  .homepage-letters-grid {
    grid-template-columns: 1fr;
  }

  .school-letter-card {
    padding: 19px;
  }

  .safeguarding-intro-panel,
  .safeguarding-card,
  .safeguarding-person-card,
  .safeguarding-language-card {
    padding: 23px;
  }

  .safeguarding-emergency {
    padding: 24px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .school-policy-card {
    min-height: 250px;
    padding: 19px;
  }

  .school-policy-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .school-policies-intro {
    align-items: flex-start;
    padding: 19px;
  }

  .school-submenu-card {
    padding: 22px;
  }

  .safeguarding-person-card .et_pb_image_wrap,
  .safeguarding-person-card .et_pb_image img {
    width: 112px;
    height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-card,
  .school-policy-card,
  .school-submenu-card,
  .school-submenu-arrow {
    transition: none;
  }
}