/* ==========================================================================
   Partner schools page (/partner-schools/)
   Matches the live partner-schools page styling
   ========================================================================== */

/* ------------------------------
   Hero — "Partner schools" title + orange intro card
   ------------------------------ */
.partners-hero {
  padding: 170px 0 80px;
}
.partners-title {
  margin: 0 0 32px;
  font-family: var(--font-source-serif);
  font-weight: 400;
  color: var(--text);
}
.partners-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 60px;
  background-color: var(--primary);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.partners-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 411px;
  max-width: 100%;
}
.partners-card-text p {
  margin: 0 0 32px;
  font-family: var(--font-inter);
  font-weight: 500;
  color: var(--accent);
}
.partners-card-shape {
  flex-shrink: 0;
}
.partners-card-shape img {
  display: block;
  width: auto;
  height: 180px;
}

/* ------------------------------
   "Questions?" green CTA card
   ------------------------------ */
.questions-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px;
  background-color: var(--secondary);
  background-image: url("/assets/img/shape-questions-m.svg");
  background-position: calc(100% - 80px) center;
  background-repeat: no-repeat;
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* Green overlay — invisible on desktop, tints the cover background ≤768 */
.questions-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--secondary);
  opacity: 0;
  pointer-events: none;
}
.questions-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 489px;
  max-width: 100%;
}
.questions-inner h2 {
  margin: 0 0 8px;
  font-family: var(--font-source-serif);
  font-weight: 400;
  color: var(--text);
}
.questions-inner p {
  margin: 0 0 51px;
  font-family: var(--font-source-serif);
  font-weight: 400;
  color: var(--text);
}

/* ------------------------------
   Partners — school list (province filter + A–Z table)
   Ported from the live hidden section: hello-elementor-child custom.css
   "Partner School" block + post-29.css container rules. Hidden at every
   breakpoint on the live site; built visible here (data: /js/schools-data.js).
   ------------------------------ */
.partner-list {
  padding: 0 0 80px;                 /* live: container b04ca82 */
}

/* "Partners" heading + Support-letter note (live band 4c4fa23) */
.partner-list-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 60px;
}
.partner-list-title {
  margin: 0;
  font-family: var(--font-source-serif);
  font-weight: 400;
  color: var(--text);
}
.partner-list-download {
  width: 381px;                      /* live: d860f0a --width:381px */
  max-width: 100%;
}
.partner-list-download p {
  margin: 0;
  font-family: var(--font-source-serif);
  font-weight: 400;
  color: var(--text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Search box (live .school-controls / .search-input) */
.partner-school-list-wrap .school-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-bottom: 60px;
}
.partner-school-list-wrap .school-controls .search-input {
  padding: 22px 54px 22px 28px;
  width: 100%;
  max-width: 410px;
  font-family: var(--font-inter);
  font-size: var(--fs-16);
  line-height: var(--lh-26-5);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--black);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5299 20.4706L16.8358 15.7774C18.1963 14.144 18.8748 12.049 18.73 9.92813C18.5852 7.80726 17.6283 5.82387 16.0584 4.39054C14.4885 2.95721 12.4264 2.1843 10.3012 2.2326C8.1759 2.2809 6.15108 3.14669 4.64791 4.64986C3.14474 6.15303 2.27895 8.17785 2.23065 10.3031C2.18235 12.4284 2.95526 14.4904 4.38859 16.0603C5.82191 17.6302 7.80531 18.5871 9.92618 18.7319C12.047 18.8767 14.1421 18.1983 15.7755 16.8378L20.4686 21.5318C20.5383 21.6015 20.621 21.6568 20.7121 21.6945C20.8031 21.7322 20.9007 21.7516 20.9992 21.7516C21.0978 21.7516 21.1954 21.7322 21.2864 21.6945C21.3775 21.6568 21.4602 21.6015 21.5299 21.5318C21.5995 21.4621 21.6548 21.3794 21.6925 21.2884C21.7302 21.1973 21.7497 21.0997 21.7497 21.0012C21.7497 20.9026 21.7302 20.8051 21.6925 20.714C21.6548 20.623 21.5995 20.5403 21.5299 20.4706ZM3.74924 10.5012C3.74924 9.16617 4.14512 7.86112 4.88682 6.75109C5.62852 5.64106 6.68272 4.7759 7.91612 4.265C9.14953 3.75411 10.5067 3.62044 11.8161 3.88089C13.1255 4.14134 14.3282 4.78422 15.2722 5.72822C16.2162 6.67222 16.8591 7.87496 17.1195 9.18433C17.38 10.4937 17.2463 11.8509 16.7354 13.0843C16.2245 14.3177 15.3594 15.3719 14.2493 16.1136C13.1393 16.8553 11.8343 17.2512 10.4992 17.2512C8.70964 17.2492 6.9939 16.5374 5.72846 15.272C4.46302 14.0065 3.75122 12.2908 3.74924 10.5012Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 28px) center;
  background-size: 22px;
  border: 1px solid var(--text);
  border-radius: 50px;
}
.partner-school-list-wrap .school-controls .search-input:focus-visible,
.partner-school-list-wrap .school-controls .search-input:focus {
  outline: none;
}
.partner-school-list-wrap .school-controls .search-input::-webkit-search-cancel-button {
  display: none;
}
.partner-school-list-wrap .school-controls .search-input::placeholder {
  font-family: var(--font-inter);
  font-size: var(--fs-16);
  line-height: var(--lh-26-5);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--black);
  opacity: 1;
}

/* Selects (live .sort-select; the province filter reuses it) */
.partner-school-list-wrap .sort-select:focus-visible,
.partner-school-list-wrap .sort-select:focus {
  outline: none;
}
.partner-school-list-wrap .sort-select {
  padding: 0 4px 0 0;
  width: fit-content;
  font-family: var(--font-inter);
  font-size: var(--fs-16);
  line-height: var(--lh-26-5);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--black);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.partner-school-list-wrap .school-card .no-result-found p,
.partner-school-list-wrap .school-card .instruction-text {
  margin: 0;
  font-family: var(--font-source-serif);
  font-size: var(--fs-24);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--text);
}
.partner-school-list-wrap .school-card .no-result-found p {
  text-align: center;
  padding: 40px 0;
}

/* Grid view header: "Select your province:" + sort (live .school-results-header) */
.partner-school-list-wrap .school-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.partner-school-list-wrap .school-card .school-results {
  margin-bottom: 24px;
}
.partner-school-list-wrap .school-card .school-results:empty {
  display: none;
}

/* Province cards (live .province-grid / .province-card) */
.partner-school-list-wrap .school-card .province-grid .province-card[hidden] { display: none !important; }
.partner-school-list-wrap .school-card .province-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.partner-school-list-wrap .school-card .province-grid .province-card {
  padding: 29px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: 1px solid var(--gray-2);
  border-radius: 10px;
  transition: ease 0.3s all;
  cursor: pointer;
}
.partner-school-list-wrap .school-card .province-grid .province-card:hover {
  background: transparent;
  box-shadow: 4px 4px 2px 0px var(--gray-2);
}
.partner-school-list-wrap .school-card .province-grid .province-card .province-name {
  font-family: var(--font-source-serif);
  font-size: var(--fs-24);
  line-height: var(--lh-42);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--text);
  text-align: left;
}
.partner-school-list-wrap .school-card .province-grid .province-card .province-icon {
  width: auto;
  height: 30px;
  flex-shrink: 0;
}
.partner-school-list-wrap .school-card .province-grid .province-card .province-icon svg,
.partner-school-list-wrap .school-card .province-grid .province-card .province-icon img {
  display: block;
  width: auto;
  height: 100%;
}

/* Table view header: "← All provinces · <Province>" + sort
   (live .partner-school-header / .back-to-provinces / .current-province) */
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .province-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .back-to-provinces {
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .back-to-provinces:hover {
  background-color: transparent;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .back-to-provinces,
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .current-province {
  margin: 0;
  font-family: var(--font-source-serif);
  font-size: var(--fs-20);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .current-province {
  margin-top: 4px;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .current-province:empty {
  display: none;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .back-to-provinces::before,
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .current-province::before {
  content: "";
  display: inline-block;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .back-to-provinces::before {
  margin-top: 4px;
  width: 14px;
  height: 11px;
  background-image: url("data:image/svg+xml;utf8,<svg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.6499 10.1037C5.37661 10.377 4.93344 10.3768 4.66006 10.1037L0.205079 5.64869C-0.0682884 5.37532 -0.0682883 4.93221 0.205079 4.65885L4.66006 0.203866C4.93344 -0.0692929 5.37661 -0.0694311 5.6499 0.203866C5.9232 0.477165 5.92306 0.920326 5.6499 1.19371L2.38984 4.45377L14 4.45377L14 5.85377L2.38984 5.85377L5.6499 9.11383C5.92306 9.38721 5.9232 9.83037 5.6499 10.1037Z' fill='black'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.partner-school-list-wrap .school-card .partner-school-list .partner-school-header .current-province::before {
  height: 4px;
  width: 4px;
  border-radius: 4px;
  background-color: var(--text);
}

/* Schools table (live .schools-table-container .table) */
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container {
  overflow: auto;
  padding-bottom: 10px;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  box-shadow: none;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table tr {
  padding: 0;
  border-top: 1px solid var(--gray-3);
  background: transparent;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table th,
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table td {
  padding: 20px 8px;
  font-family: var(--font-source-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-26);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--gray-3);
  background: transparent;
  vertical-align: middle;
  text-align: left;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table th:first-child,
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table td:first-child {
  padding-left: 0;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table th:last-child,
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table td:last-child {
  padding-right: 0;
}
/* Two columns: "School - Association" (serif) | contact email (Inter, smaller) */
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table .name-col {
  width: 60%;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table td.email-col {
  font-family: var(--font-inter);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table .email-col {
  width: 40%;
  overflow-wrap: anywhere;
}
/* Visible column headers */
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table thead th {
  font-family: var(--font-inter);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  font-weight: 600;
}
.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table a {
  color: var(--text);
  text-decoration: underline;
}

/* Loader — kept to match the live structure; only shown with .active */
.partner-school-list-wrap .school-card .table-data-list-loader-wrap {
  position: relative;
  min-height: 300px;
}
.partner-school-list-wrap .school-card .table-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-light-1);
  z-index: 1;
  display: none;
}
.partner-school-list-wrap .school-card .table-loader.active {
  display: flex;
}
.partner-school-list-wrap .school-card .table-data-list-loader-wrap:has(.table-loader.active) .schools-table-container {
  display: none;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.partner-school-list-wrap .school-card .loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--secondary-dark-2);
  border-top: 4px solid var(--secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
.partner-school-list-wrap .school-card .table-loader p {
  font-family: var(--font-source-serif);
  font-size: var(--fs-20);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--text);
}

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width: 1200px) {
  .partners-hero { padding: 130px 0 50px; }
  .partners-card-text { width: 50%; }

  .partner-school-list-wrap .school-card .province-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partner-school-list-wrap .school-card .province-grid .province-card {
    padding: 16px;
  }

  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table th,
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table td {
    padding: 12px 8px;
  }

  .questions-card {
    padding: 64px;
    background-size: 43% auto;
  }
  .questions-inner p { margin-bottom: 32px; }
}

@media (max-width: 992px) {
  .partners-hero { padding: 120px 0 50px; }
  .partners-title { margin: 32px 0; }
  .partners-card { flex-wrap: wrap; padding: 24px; }
  .partners-card-text p { margin-bottom: 24px; }

  .partner-list { padding-bottom: 50px; }
  .partner-list-header { margin-bottom: 32px; }
  .partner-school-list-wrap .school-controls {
    gap: 14px;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  .partner-school-list-wrap .school-controls .search-input {
    padding: 10px 34px 10px 18px;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
  }
  .partner-school-list-wrap .school-results-header {
    flex-wrap: wrap;
    gap: 14px;
  }
  .partner-school-list-wrap .school-card .partner-school-list .partner-school-header {
    flex-wrap: wrap;
    gap: 14px;
  }

  .questions-card {
    background-position: center center;
    background-size: cover;
  }
}

@media (max-width: 768px) {
  .partners-card { padding: 32px; }
  .partners-card-text { width: 100%; }
  .partners-card-text p { margin-bottom: 16px; }
  .partners-card-shape { order: -1; width: 100%; }
  .partners-card-shape img { width: 100%; max-width: 100%; height: auto; }

  .partner-list-download { width: 100%; }

  .partner-school-list-wrap .school-card .province-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Stack the two values inside each row instead of horizontal scrolling;
     column headers hide (each row stacks its values). */
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table thead {
    display: none;
  }
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table,
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table tbody {
    display: block;
    width: 100%;
  }
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table tr {
    display: block;
    padding: 12px 0;
    border-top: 1px solid var(--gray-3);
  }
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table tr:last-child {
    border-bottom: 1px solid var(--gray-3);
  }
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table th,
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table td {
    display: block;
    width: auto;
    padding: 2px 0;
    border-bottom: none;
  }
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table .name-col,
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table .email-col {
    width: auto;
  }
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table tr:first-child th,
  .partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table tr:first-child td {
    border-top: none;
  }

  .questions-card { padding: 32px; }
  .questions-card::before { opacity: 0.3; }
  .questions-inner { width: 100%; }
  .questions-inner p { margin-bottom: 24px; }
}

@media (max-width: 576px) {
  .partners-title { margin: 32px 0 16px; }
  .partners-card { padding: 24px; }

  .partner-school-list-wrap .school-card .province-grid .province-card {
    gap: 8px;
  }
  .partner-school-list-wrap .school-card .province-grid .province-card .province-name {
    font-size: var(--fs-16);
  }
  .partner-school-list-wrap .school-card .province-grid .province-card .province-icon {
    height: 24px;
  }

  .questions-card { padding: 16px; }
  .questions-inner .btn { align-self: flex-end; }
}

.partner-school-list-wrap .school-card .partner-school-list .schools-table-container .table .email-col a {
  word-break: break-all;
}