/* ==========================================================================
   C7 — public components
   Buttons · Pills · Cards · Media · Forms · Breadcrumbs · Pagination
   Empty states · Skeletons · Accordion · Tabs · Toasts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.c7-btn {
  --btn-bg: var(--c7-brand);
  --btn-fg: var(--c7-brand-contrast);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c7-space-2);
  min-height: var(--c7-control-height);
  padding: 0 var(--c7-space-6);
  border: 1px solid var(--btn-border);
  border-radius: var(--c7-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Only compositor-friendly properties animate here — a hover must never change
     a layout property, or pointing at a button would move the page. */
  transition: transform var(--c7-duration-fast) var(--c7-ease),
    box-shadow var(--c7-duration-fast) var(--c7-ease),
    background-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease),
    border-color var(--c7-duration-fast) var(--c7-ease);
}

.c7-btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--c7-shadow-md);
}

.c7-btn:active {
  transform: translateY(0);
}

.c7-btn[disabled],
.c7-btn[aria-disabled="true"],
.c7-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.c7-btn--primary {
  --btn-bg: var(--c7-brand);
  --btn-fg: var(--c7-brand-contrast);
}

.c7-btn--primary:hover {
  --btn-bg: var(--c7-brand-hover);
}

.c7-btn--accent {
  --btn-bg: var(--c7-accent);
  --btn-fg: var(--c7-accent-contrast);
}

.c7-btn--accent:hover {
  --btn-bg: var(--c7-accent-hover);
}

.c7-btn--spark {
  --btn-bg: var(--c7-spark);
  --btn-fg: var(--c7-white);
}

.c7-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c7-brand);
  --btn-border: var(--c7-border-strong);
}

.c7-btn--outline:hover {
  --btn-bg: var(--c7-meridian-050);
  --btn-border: var(--c7-meridian-300);
}

.c7-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c7-text-strong);
  --btn-border: transparent;
}

.c7-btn--ghost:hover {
  --btn-bg: var(--c7-surface-sunken);
  box-shadow: none;
}

/* On photographs and dark bands. */
.c7-btn--on-dark {
  --btn-bg: rgb(255 255 255 / 0.12);
  --btn-fg: var(--c7-white);
  --btn-border: rgb(255 255 255 / 0.34);
  backdrop-filter: blur(10px);
}

.c7-btn--on-dark:hover {
  --btn-bg: rgb(255 255 255 / 0.2);
  --btn-border: rgb(255 255 255 / 0.5);
}

.c7-btn--lg {
  min-height: 3.5rem;
  padding-inline: var(--c7-space-8);
  font-size: var(--c7-text-base);
}

.c7-btn--sm {
  min-height: 2.375rem;
  padding-inline: var(--c7-space-4);
  font-size: var(--c7-text-xs);
}

.c7-btn--block {
  width: 100%;
}

/* On the narrowest phones a long label like "Book a free counselling session"
   plus the large button's padding is wider than the screen. Because nowrap makes
   that the button's min-content width, it pushes the whole page sideways rather
   than just overflowing itself. Letting the label wrap here is what keeps a
   320px viewport free of horizontal scroll. */
@media (max-width: 30rem) {
  .c7-btn {
    white-space: normal;
    padding-inline: var(--c7-space-4);
    text-wrap: balance;
  }

  .c7-btn--lg {
    padding-inline: var(--c7-space-5);
  }
}

.c7-btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform var(--c7-duration-base) var(--c7-ease);
}

.c7-btn:hover .c7-btn__icon--arrow {
  transform: translateX(3px);
}

/* Spinner shown while an AJAX form is in flight. */
.c7-btn__spinner {
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: c7-spin 0.7s linear infinite;
}

.c7-btn:not(.is-loading) .c7-btn__spinner {
  display: none;
}

.c7-btn.is-loading .c7-btn__label--idle {
  display: none;
}

/* A text link that behaves like a button in a card footer. */
.c7-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--c7-space-2);
  color: var(--c7-brand);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  text-decoration: none;
}

.c7-link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform var(--c7-duration-base) var(--c7-ease);
}

.c7-link-arrow:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Pills, chips, badges
   -------------------------------------------------------------------------- */
/* A pill must never be wider than what contains it.

   `white-space: nowrap` was the default, and most pills are short chips where
   that reads well. But plenty of them carry text straight out of the database —
   a university's ranking, a scholarship's funding line, a subject area — and
   those are sentences. "Top 30 globally (QS World University Rankings)" laid out
   on one line is 314px inside a 268px card, so it ran 87px past the edge and was
   sliced off mid-word by the card's `overflow: hidden`. That is what the client
   saw as data escaping the card.

   Wrapping is now the default, because a pill on two lines is untidy at worst
   while a pill that overflows is broken. `--nowrap` is there for the short
   chips — a date, a status — where a line break would read badly. */
.c7-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--c7-space-2);
  max-width: 100%;
  padding: 0.3rem var(--c7-space-3);
  border-radius: var(--c7-radius-pill);
  background: var(--c7-meridian-100);
  color: var(--c7-meridian-800);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-semibold);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: start;
}

.c7-pill--nowrap {
  white-space: nowrap;
}

.c7-pill--gold {
  background: var(--c7-gold-100);
  color: var(--c7-gold-800);
}

.c7-pill--spark {
  background: var(--c7-coral-100);
  color: var(--c7-coral-700);
}

.c7-pill--success {
  background: var(--c7-success-soft);
  color: var(--c7-success);
}

.c7-pill--danger {
  background: var(--c7-danger-soft);
  color: var(--c7-danger);
}

.c7-pill--neutral {
  background: var(--c7-surface-sunken);
  color: var(--c7-text-muted);
}

.c7-pill--on-dark {
  background: rgb(255 255 255 / 0.14);
  color: var(--c7-white);
  backdrop-filter: blur(8px);
}

.c7-pill--outline {
  background: transparent;
  border: 1px solid var(--c7-border-strong);
  color: var(--c7-text-muted);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.c7-card {
  display: flex;
  flex-direction: column;
  /* NOT `height: 100%`. A percentage height gives the card a definite cross
     size, and a flex item with a definite cross size is exempt from
     `align-items: stretch` — so the cards in one row each sized to their own
     content and the row came out ragged (measured: 137 / 137 / 137 / 160px in a
     single row, which is what the client reported as "cards ki size consistent
     nahi"). Letting the height stay `auto` lets stretch do its job, and every
     card in a row matches the tallest (measured: 178 / 178 / 178 / 178).
     `align-self: stretch` covers the case where an ancestor has overridden
     `align-items`. */
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xs);
  transition: transform var(--c7-duration-base) var(--c7-ease),
    box-shadow var(--c7-duration-base) var(--c7-ease),
    border-color var(--c7-duration-base) var(--c7-ease);
}

.c7-card:hover {
  transform: translateY(-4px);
  border-color: var(--c7-meridian-200);
  box-shadow: var(--c7-shadow-lg);
}

/* `isolation` and the inherited radius together are what stop the hover zoom
   showing a hard square edge inside the card's rounded corner. The card clips
   with `overflow: hidden`, but a transformed child is painted in its own layer
   and browsers routinely fail to clip that layer to a *rounded* ancestor — which
   is the odd shadow-like box the client saw appear inside the card on hover.
   Giving the media its own stacking context and its own radius clips the zoom
   where it actually happens. */
.c7-card__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  aspect-ratio: 16 / 10;
  background: var(--c7-ink-100);
}

.c7-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--c7-duration-slow) var(--c7-ease-out);
}

.c7-card:hover .c7-card__media img {
  transform: scale(1.06);
}

.c7-card__media--tall {
  aspect-ratio: 3 / 4;
}

.c7-card__media--square {
  aspect-ratio: 1;
}

.c7-card__badges {
  position: absolute;
  inset-block-start: var(--c7-space-3);
  inset-inline-start: var(--c7-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-2);
  z-index: 2;
}

.c7-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Without this a single long word — a course title, a ranking string — sets
     the body's min-content width and pushes the whole card wider than its
     track. */
  min-width: 0;
  gap: var(--c7-space-3);
  padding: var(--c7-space-5);
}

.c7-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c7-space-2) var(--c7-space-4);
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-medium);
}

.c7-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--c7-space-2);
}

.c7-card__meta-item svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--c7-meridian-500);
  flex: none;
}

.c7-card__title {
  font-size: var(--c7-text-xl);
  line-height: var(--c7-leading-snug);
}

.c7-card__title a {
  color: inherit;
  text-decoration: none;
}

/* The whole card is clickable, but the anchor stays the only tab stop and screen
   readers still get a real link. */
.c7-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.c7-card--linked {
  position: relative;
}

.c7-card__text {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
  line-height: var(--c7-leading-normal);
}

/* The card's bottom row: facts on the left, the arrow on the right.

   `flex-wrap: nowrap` is the whole point. It used to wrap, so a card whose meta
   line ran long — "September, January, Ma…" on Canada, "Winter semester (Octob…"
   on Germany — pushed the arrow onto a second line while its neighbours kept
   theirs beside the text. Measured: footers 27px out of line across one row and
   three of twelve arrows dropped. The cards were the same height; it was the
   contents that sat at different heights, which is what the client saw.

   The meta is allowed to shrink and clip instead. A truncated fact reads fine;
   an arrow that moves between cards does not.

   `min-height` keeps the row the same height whether the card has meta or not —
   IELTS has no duration line, and without this its arrow sat higher than PTE's. */
.c7-card__footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-3);
  /* The footer is itself a flex item of the card body, and a flex item's
     `min-width` defaults to `auto` — its own min-content width. With a nowrap
     meta inside, that made the footer refuse to shrink: measured 293px wide in a
     267px body, which pushed MIT's arrow 45px past the card edge — its location
     ("Cambridge, Massachusetts, United States") is the longest on the site.

     `min-width: 0` alone is not enough here. The body is a *column* flex
     container, so shrinking happens on the block axis; across the inline axis
     the footer just overflowed. `width: 100%` pins it to the body's content box,
     and only then does the meta beside the arrow have a reason to give way. */
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  margin-block-start: auto;
  padding-block-start: var(--c7-space-4);
  border-block-start: 1px solid var(--c7-border-subtle);
}

.c7-card__footer .c7-card__meta {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

/* A record with nothing to state — IELTS publishes no duration — still renders
   the container. Left in the flow it is a zero-height box that drags the row's
   baseline off the one beside it. */
.c7-card__meta:empty {
  display: none;
}

.c7-card__footer .c7-card__meta-item {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The arrow never shrinks and never moves. */
.c7-card__footer .c7-link-arrow {
  flex: none;
}

.c7-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-2);
}

/* Card variant used over dark bands. */
.c7-card--glass {
  border-color: var(--c7-border-inverse);
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(14px);
  box-shadow: none;
}

.c7-card--glass .c7-card__title,
.c7-card--glass .c7-card__title a {
  color: var(--c7-white);
}

.c7-card--glass .c7-card__text {
  color: var(--c7-text-inverse-muted);
}

.c7-card--glass .c7-card__footer {
  border-block-start-color: var(--c7-border-inverse);
}

/* --- University logo card ------------------------------------------------- */
.c7-card__logo {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: var(--c7-space-2);
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-md);
  background: var(--c7-white);
}

.c7-card__logo img {
  max-width: 100%;
  max-height: 100%;
  /* `contain`, never `cover` — a cropped institutional logo looks broken. */
  object-fit: contain;
  background: transparent;
}

/* --- Feature / icon tile -------------------------------------------------- */
.c7-tile {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
  height: 100%;
  padding: var(--c7-space-6);
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  transition: transform var(--c7-duration-base) var(--c7-ease),
    box-shadow var(--c7-duration-base) var(--c7-ease);
}

.c7-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--c7-shadow-md);
}

.c7-tile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--c7-radius-md);
  background: var(--c7-meridian-100);
  color: var(--c7-meridian-700);
}

.c7-tile__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.c7-tile__icon--gold {
  background: var(--c7-gold-100);
  color: var(--c7-gold-700);
}

.c7-tile__title {
  font-size: var(--c7-text-lg);
}

.c7-tile__text {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

.c7-section--inverse .c7-tile {
  border-color: var(--c7-border-inverse);
  background: rgb(255 255 255 / 0.05);
}

.c7-section--inverse .c7-tile__title {
  color: var(--c7-white);
}

.c7-section--inverse .c7-tile__text {
  color: var(--c7-text-inverse-muted);
}

.c7-section--inverse .c7-tile__icon {
  background: rgb(255 255 255 / 0.1);
  color: var(--c7-gold-400);
}

/* --- Stat --------------------------------------------------------------- */
.c7-stat__value {
  color: var(--c7-text-strong);
  font-size: var(--c7-text-display-3);
  font-weight: var(--c7-weight-extrabold);
  letter-spacing: var(--c7-tracking-display);
  line-height: 1;
}

.c7-stat__label {
  margin-block-start: var(--c7-space-2);
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-medium);
}

.c7-section--inverse .c7-stat__value {
  color: var(--c7-gold-400);
}

.c7-section--inverse .c7-stat__label {
  color: var(--c7-text-inverse-muted);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.c7-field {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-2);
}

.c7-label {
  color: var(--c7-text-strong);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
}

.c7-label__required {
  color: var(--c7-spark);
}

.c7-input,
.c7-select,
.c7-textarea {
  width: 100%;
  min-height: var(--c7-control-height);
  padding: 0.7rem var(--c7-space-4);
  border: 1px solid var(--c7-border-strong);
  border-radius: var(--c7-radius-sm);
  background: var(--c7-surface);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-sm);
  transition: border-color var(--c7-duration-fast) var(--c7-ease),
    box-shadow var(--c7-duration-fast) var(--c7-ease);
}

.c7-input::placeholder,
.c7-textarea::placeholder {
  color: var(--c7-ink-400);
}

.c7-input:focus,
.c7-select:focus,
.c7-textarea:focus {
  outline: none;
  border-color: var(--c7-meridian-500);
  box-shadow: var(--c7-focus-ring);
}

.c7-textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: var(--c7-leading-normal);
}

.c7-select {
  appearance: none;
  padding-inline-end: var(--c7-space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23566068' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--c7-space-4) center;
  background-size: 1.1rem;
}

[dir="rtl"] .c7-select {
  background-position: left var(--c7-space-4) center;
}

.c7-field__help {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
}

.c7-field__error {
  display: flex;
  align-items: center;
  gap: var(--c7-space-2);
  color: var(--c7-danger);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-medium);
}

.c7-input.is-invalid,
.c7-select.is-invalid,
.c7-textarea.is-invalid {
  border-color: var(--c7-danger);
}

.c7-input.is-invalid:focus,
.c7-select.is-invalid:focus,
.c7-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgb(179 41 31 / 0.18);
}

.c7-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--c7-space-3);
  font-size: var(--c7-text-sm);
  cursor: pointer;
}

.c7-checkbox input {
  width: 1.15rem;
  height: 1.15rem;
  margin-block-start: 0.15rem;
  accent-color: var(--c7-meridian-700);
  flex: none;
}

/* Flexbox, not `grid-template-columns: auto-fit`.

   A grid lays its final row out in the same tracks as every other row, so a form
   whose last row holds one field leaves a two-column hole beside it — the
   contact form ended on a third-width "Subject" box with two thirds of empty
   canvas next to it, and the consultation form ended the same way. That was a
   client complaint about the admin forms in session 5 and it was never fixed on
   the public side.

   Flex items on the last row grow to share whatever width is left, so the block
   always ends flush. Same principle, and the same reason, as `.c7-grid--fill`. */
.c7-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-5);
}

.c7-form-grid > * {
  flex: 1 1 15rem;
  /* Without this a long option label sets the field's min-content width and
     pushes the row past the container. */
  min-width: 0;
}

/* A field that must own its row whatever else is beside it — a message box, an
   address. `flex-basis: 100%` rather than `grid-column: 1 / -1`, which means
   nothing outside a grid. */
.c7-form-grid__full {
  flex: 1 1 100%;
}

/* The honeypot must be reachable by nothing: not the eye, not the keyboard, not
   a screen reader. `display: none` alone is skipped by some bots. */
.c7-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Form feedback -------------------------------------------------------- */
.c7-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--c7-space-3);
  padding: var(--c7-space-4) var(--c7-space-5);
  border: 1px solid var(--c7-border);
  border-radius: var(--c7-radius-md);
  background: var(--c7-surface-sunken);
  font-size: var(--c7-text-sm);
}

.c7-notice__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.c7-notice--success {
  border-color: color-mix(in srgb, var(--c7-success) 30%, transparent);
  background: var(--c7-success-soft);
  color: var(--c7-success);
}

.c7-notice--error {
  border-color: color-mix(in srgb, var(--c7-danger) 30%, transparent);
  background: var(--c7-danger-soft);
  color: var(--c7-danger);
}

.c7-notice--info {
  border-color: color-mix(in srgb, var(--c7-info) 30%, transparent);
  background: var(--c7-info-soft);
  color: var(--c7-meridian-800);
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.c7-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c7-space-2);
  font-size: var(--c7-text-xs);
}

.c7-breadcrumbs a {
  color: inherit;
  opacity: 0.85;
  text-decoration: none;
}

.c7-breadcrumbs a:hover {
  opacity: 1;
  text-decoration: underline;
}

.c7-breadcrumbs__sep {
  opacity: 0.5;
}

.c7-breadcrumbs [aria-current="page"] {
  font-weight: var(--c7-weight-semibold);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.c7-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--c7-space-2);
  margin-block-start: var(--c7-space-10);
}

.c7-pagination__link {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--c7-space-3);
  border: 1px solid var(--c7-border);
  border-radius: var(--c7-radius-sm);
  background: var(--c7-surface);
  color: var(--c7-text);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-medium);
  text-decoration: none;
  transition: border-color var(--c7-duration-fast) var(--c7-ease),
    background-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease);
}

.c7-pagination__link:hover {
  border-color: var(--c7-meridian-300);
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
}

.c7-pagination__link[aria-current="page"] {
  border-color: var(--c7-meridian-800);
  background: var(--c7-meridian-800);
  color: var(--c7-white);
}

.c7-pagination__link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.c7-pagination__gap {
  padding-inline: var(--c7-space-2);
  color: var(--c7-text-muted);
}

.c7-pagination__summary {
  margin-block-start: var(--c7-space-4);
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
  text-align: center;
}

.c7-pagination__summary strong {
  color: var(--c7-text-strong);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.c7-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c7-space-4);
  max-width: 32rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--c7-space-6);
  border: 1px dashed var(--c7-border-strong);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  text-align: center;
}

.c7-empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--c7-meridian-100);
  color: var(--c7-meridian-600);
}

.c7-empty__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.c7-empty__title {
  font-size: var(--c7-text-xl);
}

.c7-empty__text {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

/* --------------------------------------------------------------------------
   Loading — skeletons and overlays
   -------------------------------------------------------------------------- */
.c7-skeleton {
  border-radius: var(--c7-radius-sm);
  background: linear-gradient(
    90deg,
    var(--c7-ink-100) 25%,
    var(--c7-ink-050) 37%,
    var(--c7-ink-100) 63%
  );
  background-size: 400% 100%;
  animation: c7-shimmer 1.4s ease infinite;
}

.c7-skeleton--text {
  height: 0.85rem;
  margin-block-end: var(--c7-space-2);
}

.c7-skeleton--title {
  height: 1.4rem;
  width: 70%;
}

.c7-skeleton--media {
  aspect-ratio: 16 / 10;
  border-radius: var(--c7-radius-lg) var(--c7-radius-lg) 0 0;
}

/* Results region during an AJAX filter change: dimmed and inert, but the layout
   is held so the page does not jump under the reader's cursor. */
.c7-results {
  position: relative;
  transition: opacity var(--c7-duration-base) var(--c7-ease);
}

.c7-results.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

.c7-results__spinner {
  position: absolute;
  inset-block-start: var(--c7-space-10);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid var(--c7-meridian-200);
  border-top-color: var(--c7-meridian-700);
  border-radius: 50%;
  animation: c7-spin 0.8s linear infinite;
}

.c7-results.is-loading .c7-results__spinner {
  display: block;
}

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */
.c7-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
}

.c7-accordion__item {
  overflow: hidden;
  border: 1px solid var(--c7-border);
  border-radius: var(--c7-radius-md);
  background: var(--c7-surface);
  transition: border-color var(--c7-duration-fast) var(--c7-ease),
    box-shadow var(--c7-duration-fast) var(--c7-ease);
}

.c7-accordion__item[open] {
  border-color: var(--c7-meridian-300);
  box-shadow: var(--c7-shadow-sm);
}

.c7-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-4);
  width: 100%;
  padding: var(--c7-space-5);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-base);
  font-weight: var(--c7-weight-semibold);
  text-align: start;
  cursor: pointer;
  list-style: none;
}

.c7-accordion__trigger::-webkit-details-marker {
  display: none;
}

.c7-accordion__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--c7-meridian-600);
  transition: transform var(--c7-duration-base) var(--c7-ease);
}

.c7-accordion__item[open] .c7-accordion__chevron {
  transform: rotate(180deg);
}

.c7-accordion__panel {
  padding: 0 var(--c7-space-5) var(--c7-space-5);
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
  line-height: var(--c7-leading-relaxed);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.c7-toasts {
  position: fixed;
  inset-block-end: var(--c7-space-6);
  inset-inline-end: var(--c7-space-6);
  z-index: var(--c7-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
  width: min(24rem, calc(100vw - 2 * var(--c7-space-6)));
  pointer-events: none;
}

.c7-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--c7-space-3);
  padding: var(--c7-space-4) var(--c7-space-5);
  border: 1px solid var(--c7-border);
  border-radius: var(--c7-radius-md);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-lg);
  font-size: var(--c7-text-sm);
  pointer-events: auto;
  animation: c7-toast-in var(--c7-duration-base) var(--c7-ease-out) both;
}

.c7-toast--success {
  border-inline-start: 3px solid var(--c7-success);
}

.c7-toast--error {
  border-inline-start: 3px solid var(--c7-danger);
}

.c7-toast__close {
  margin-inline-start: auto;
  color: var(--c7-text-muted);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes c7-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes c7-shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

@keyframes c7-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The spinner keyframes still run under reduced motion — a spinner that does not
   spin reads as a frozen page. Everything decorative is stilled instead. */
@media (prefers-reduced-motion: reduce) {
  .c7-skeleton {
    animation: none;
  }

  .c7-toast {
    animation: none;
  }
}

/* ==========================================================================
   Price and offer
   --------------------------------------------------------------------------
   Shown on a card and on a detail page. The payable figure is the loudest
   thing in the block; the crossed-out price is deliberately quiet, because a
   large struck-through number is the visual language of a fake discount and
   this one is real.
   ========================================================================== */
.c7-price {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-1);
}

.c7-price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--c7-space-2);
  margin: 0;
}

.c7-price__now {
  font-family: var(--c7-font-serif);
  font-size: var(--c7-text-2xl);
  font-weight: var(--c7-weight-bold);
  line-height: 1.1;
  color: var(--c7-text-strong);
}

.c7-price--sm .c7-price__now {
  font-size: var(--c7-text-lg);
}

.c7-price__was {
  font-size: var(--c7-text-sm);
  color: var(--c7-text-muted);
  text-decoration-thickness: 1px;
}

.c7-price__saving {
  align-self: center;
}

.c7-price__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  color: var(--c7-gold-700);
}

.c7-price__until {
  font-weight: var(--c7-weight-regular);
  color: var(--c7-text-muted);
}

.c7-price__note {
  margin: 0;
  font-size: var(--c7-text-sm);
  color: var(--c7-text-muted);
}

/* --------------------------------------------------------------------------
   Record thumbnail — the record's own picture, on its own page

   The picture the client chooses for a record is the one they then see on every
   listing card, and it was the one picture that never appeared on the record's
   own page: the detail templates rendered the wide banner and nothing else.

   Sized in the aside column (20rem), so 16/10 is a 200px-tall figure that sits
   above "At a glance" without pushing the sticky panel out of the viewport.
   -------------------------------------------------------------------------- */
.c7-thumb {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-ink-100);
  box-shadow: var(--c7-shadow-xs);
}

.c7-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ==========================================================================
   Course card — one priced course inside a test (IELTS Academic – Self Prep)
   --------------------------------------------------------------------------
   The client's reference card (change request §3): picture, pill, title,
   duration and access period, a brand strip with the rating, then the price
   and two buttons. Cards in a row stretch to the tallest, and the price row is
   pushed to the bottom so every card's buttons line up.
   ========================================================================== */
.c7-pack {
  /* Positioned so the screen-reader labels inside (absolutely positioned,
     visually hidden) stay inside the carousel that clips the card. Without
     it they escaped the scroller and widened the whole page on a phone. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xs);
  transition: transform var(--c7-duration-base) var(--c7-ease),
    box-shadow var(--c7-duration-base) var(--c7-ease);
}

.c7-pack:hover,
.c7-pack:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--c7-shadow-md);
}

.c7-pack__media {
  display: grid;
  place-items: center;
  aspect-ratio: 20 / 13;
  margin: var(--c7-space-4) var(--c7-space-4) 0;
  overflow: hidden;
  border-radius: var(--c7-radius-md);
  background: var(--c7-gradient-brand);
}

.c7-pack__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c7-pack__media-fallback {
  color: var(--c7-white);
  font-family: var(--c7-font-serif);
  font-size: var(--c7-text-3xl);
  font-weight: var(--c7-weight-bold);
  text-transform: uppercase;
}

.c7-pack__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--c7-space-3);
  padding: var(--c7-space-4) var(--c7-space-5) var(--c7-space-5);
}

.c7-pack__pill {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
  font-size: var(--c7-text-2xs);
  font-weight: var(--c7-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c7-pack__title {
  margin: 0;
  color: var(--c7-text-strong);
  font-size: var(--c7-text-lg);
  line-height: 1.3;
}

.c7-pack__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-2) var(--c7-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

.c7-pack__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.c7-pack__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-3);
  padding-block: var(--c7-space-3);
  border-block: 1px solid var(--c7-border-subtle);
}

.c7-pack__brand-logo img {
  display: block;
  height: 2.2rem;
  width: auto;
  max-width: 8rem;
  object-fit: contain;
}

.c7-pack__tagline {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
  text-align: end;
}

.c7-pack__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

/* Five stars, filled to the rating: the gold layer is clipped to its share. */
.c7-pack__stars {
  --c7-rating: 5;
  position: relative;
  display: inline-block;
  color: var(--c7-ink-200, #d9dde3);
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1;
}

.c7-pack__stars::before {
  content: "★★★★★";
  position: absolute;
  inset: 0;
  width: calc(var(--c7-rating) / 5 * 100%);
  overflow: hidden;
  color: var(--c7-gold-500);
  white-space: nowrap;
}

.c7-pack__rating-value {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

.c7-pack__foot {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-4);
  margin-block-start: auto;
}

.c7-pack__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c7-space-3);
}

.c7-pack__actions .c7-btn {
  justify-content: center;
}

/* Three across on a desktop, as the client's reference shows — not the
   carousel's default four, which squeezes a card with two buttons. */
.c7-carousel--three .c7-carousel__track {
  --carousel-cols: 3;
}

@media (max-width: 56rem) {
  .c7-carousel--three .c7-carousel__track {
    --carousel-cols: 2;
  }
}

@media (max-width: 38rem) {
  .c7-carousel--three .c7-carousel__track {
    --carousel-cols: 1;
  }
}

/* ==========================================================================
   Popups — homepage enquiry and offers (change requests §8, §9)
   --------------------------------------------------------------------------
   Centred over a dimmed page on a wide screen. On a phone it is a bottom
   sheet with no backdrop and no scroll lock, because the client asked that it
   never stop a visitor scrolling. Either way the panel scrolls inside itself
   if the form is taller than the screen.
   ========================================================================== */
.c7-popup {
  position: fixed;
  inset: 0;
  z-index: var(--c7-z-modal);
  display: grid;
  place-items: center;
  padding: var(--c7-space-4);
  pointer-events: none;
}

.c7-popup[hidden] {
  display: none;
}

.c7-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(4 18 27 / 0.55);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--c7-duration-base) var(--c7-ease);
}

.c7-popup__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--c7-radius-xl, 1.25rem);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xl);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: auto;
  transition: opacity var(--c7-duration-base) var(--c7-ease),
    transform var(--c7-duration-base) var(--c7-ease);
}

.c7-popup__panel:focus {
  outline: none;
}

.c7-popup.is-open .c7-popup__backdrop {
  opacity: 1;
}

.c7-popup.is-open .c7-popup__panel {
  opacity: 1;
  transform: none;
}

.c7-popup__close {
  position: absolute;
  inset-block-start: var(--c7-space-3);
  inset-inline-end: var(--c7-space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--c7-shadow-sm);
  color: var(--c7-text-strong);
}

.c7-popup__close:hover,
.c7-popup__close:focus-visible {
  background: var(--c7-white);
  color: var(--c7-meridian-800);
}

.c7-popup__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.c7-popup__media {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--c7-gradient-brand);
}

.c7-popup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c7-popup__body {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
  padding: var(--c7-space-6);
}

.c7-popup__head {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
  padding: var(--c7-space-6) var(--c7-space-6) var(--c7-space-5);
  background: var(--c7-gradient-brand);
  color: var(--c7-white);
}

.c7-popup__head > * {
  position: relative;
}

.c7-popup__head .c7-meridian-lines {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.c7-popup__head .c7-popup__title {
  color: var(--c7-white);
}

.c7-popup__head .c7-popup__text,
.c7-popup__head .c7-popup__valid {
  color: rgb(255 255 255 / 0.8);
}

/* On the gradient the close button would sit on navy; keep it a white disc. */
.c7-popup__media + .c7-popup__head {
  padding-block-start: var(--c7-space-5);
}

.c7-popup__title {
  margin: 0;
  padding-inline-end: var(--c7-space-8);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-2xl);
  line-height: 1.2;
}

.c7-popup__offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c7-space-3);
  margin: 0;
}

.c7-popup__discount {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--c7-gold-500);
  color: var(--c7-meridian-950);
  font-weight: var(--c7-weight-bold);
}

.c7-popup__valid {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

.c7-popup__text {
  margin: 0;
  color: var(--c7-text-muted);
}

.c7-popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
}

.c7-popup__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-3);
}

.c7-popup__row > * {
  flex: 1 1 12rem;
  min-width: 0;
}

.c7-popup__optional {
  color: var(--c7-text-muted);
  font-weight: var(--c7-weight-regular);
}

.c7-popup__success {
  display: flex;
  align-items: flex-start;
  gap: var(--c7-space-3);
  padding: var(--c7-space-4);
  border-radius: var(--c7-radius-md);
  background: var(--c7-success-050, #e9f6ee);
  color: var(--c7-success-700, #1c6b3a);
}

.c7-popup__success p {
  margin: 0;
}

.c7-popup__success svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* The panel may still scroll on a very short screen, but it never shows a
   browser scrollbar: a grey gutter down the side of a branded card is the
   first thing that makes it look unfinished. */
.c7-popup__panel,
.c7-popup__body {
  scrollbar-width: none;
}

.c7-popup__panel::-webkit-scrollbar,
.c7-popup__body::-webkit-scrollbar {
  display: none;
}

/* A wide screen: heading on the left, form on the right. Side by side the
   whole popup is about 34rem tall, so it fits a 1366×650 laptop without any
   scrolling at all — stacked it was 47rem and needed a scrollbar. */
@media (min-width: 56rem) {
  .c7-popup__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "media body"
      "head body";
    width: min(58rem, 100%);
    overflow: hidden;
  }

  .c7-popup__media {
    grid-area: media;
    aspect-ratio: 16 / 10;
  }

  .c7-popup__head {
    grid-area: head;
    grid-row: 1 / -1;
    justify-content: center;
    padding: var(--c7-space-10) var(--c7-space-8);
  }

  .c7-popup__media + .c7-popup__head {
    grid-row: 2;
    justify-content: flex-start;
    padding-block: var(--c7-space-6);
  }

  .c7-popup__head .c7-popup__title {
    padding-inline-end: 0;
    font-size: var(--c7-text-3xl, 1.9rem);
  }

  .c7-popup__body {
    grid-area: body;
    justify-content: center;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: var(--c7-space-8) var(--c7-space-8) var(--c7-space-6);
  }

  /* The close button sits on the white form side. */
  .c7-popup__close {
    background: var(--c7-meridian-050);
    box-shadow: none;
  }
}

/* A short laptop screen: tighten the form rather than scroll it. */
@media (min-width: 56rem) and (max-height: 44rem) {
  .c7-popup__body {
    padding-block: var(--c7-space-6) var(--c7-space-5);
  }

  .c7-popup__form {
    gap: var(--c7-space-2);
  }

  .c7-popup .c7-input,
  .c7-popup .c7-select {
    min-height: 2.6rem;
    padding-block: 0.45rem;
  }

  .c7-popup .c7-textarea {
    min-height: 3rem !important;
  }
}

@media (max-width: 40rem) {
  .c7-popup {
    place-items: end center;
    padding: 0;
  }

  /* No backdrop on a phone: the page behind stays usable and scrollable. */
  .c7-popup__backdrop {
    display: none;
  }

  .c7-popup__panel {
    width: 100%;
    max-height: 82dvh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    transform: translateY(100%);
  }

  .c7-popup__body {
    padding: var(--c7-space-5);
  }

  .c7-popup__title {
    font-size: var(--c7-text-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c7-popup__panel,
  .c7-popup__backdrop {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Country page — Universities / Courses / Scholarships tabs (September 2026)
   -------------------------------------------------------------------------- */
.c7-explore {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-2);
  margin-block: 0 var(--c7-space-10);
}

.c7-explore__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--c7-space-2);
  padding: 0.55rem 1rem;
  border: 1px solid var(--c7-border);
  border-radius: 999px;
  background: var(--c7-surface);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  text-decoration: none;
  transition: border-color var(--c7-duration-fast) var(--c7-ease),
    background-color var(--c7-duration-fast) var(--c7-ease);
}

.c7-explore__tab:hover,
.c7-explore__tab:focus-visible {
  border-color: var(--c7-meridian-600);
  background: var(--c7-meridian-050);
}

.c7-explore__count {
  min-width: 1.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
  font-size: var(--c7-text-2xs);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Services page — icon grid, four across on a desktop and two on a phone
   (change request §4)
   -------------------------------------------------------------------------- */
.c7-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

@media (max-width: 64rem) {
  .c7-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .c7-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c7-tile--service {
  align-items: center;
  text-align: center;
}

.c7-tile--service .c7-tile__icon {
  width: 3.5rem;
  height: 3.5rem;
}

@media (max-width: 30rem) {
  .c7-tile--service {
    padding: var(--c7-space-4);
  }

  .c7-tile--service .c7-tile__text {
    display: none;
  }

  .c7-tile--service .c7-tile__title {
    font-size: var(--c7-text-base);
  }
}

/* ==========================================================================
   University / Course finder (change request §5)
   --------------------------------------------------------------------------
   The table scrolls sideways inside its own box; the header row sticks while
   it scrolls down, and on a narrower screen the ranking and University /
   College columns stay frozen at the left.
   ========================================================================== */
/* Six filters: three to a row on a desktop, two on a tablet, one on a phone —
   always full rows, never one filter stranded beside empty space. */
.c7-filters__grid--finder {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 56rem) {
  .c7-filters__grid--finder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 38rem) {
  .c7-filters__grid--finder {
    grid-template-columns: 1fr;
  }
}

.c7-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c7-space-2);
}

.c7-finder {
  position: relative;
  max-height: 75vh;
  overflow: auto;
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xs);
  overscroll-behavior-x: contain;
}

.c7-finder:focus-visible {
  outline: 2px solid var(--c7-meridian-600);
  outline-offset: 2px;
}

.c7-finder__table {
  width: 100%;
  min-width: 68rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--c7-text-sm);
}

.c7-finder__table th,
.c7-finder__table td {
  padding: var(--c7-space-3) var(--c7-space-4);
  border-block-end: 1px solid var(--c7-border-subtle);
  text-align: start;
  vertical-align: top;
  background: var(--c7-surface);
}

.c7-finder__table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--c7-meridian-900, #132b48);
  color: var(--c7-white);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-semibold);
  white-space: nowrap;
}

.c7-finder__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}

.c7-finder__sort svg {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
}

/* The course name is the longest cell after the university; without a floor
   it wrapped to one word per line. */
.c7-finder__table tbody td:nth-child(3) {
  min-width: 12rem;
}

.c7-finder__sort:hover,
.c7-finder__sort:focus-visible,
.c7-finder__sort.is-active {
  color: var(--c7-gold-400);
}

.c7-finder__table tbody tr:hover > * {
  background: var(--c7-meridian-050);
}

.c7-finder__table tbody th {
  font-weight: var(--c7-weight-semibold);
  color: var(--c7-text-strong);
}

.c7-finder__table tbody th a {
  color: var(--c7-meridian-800);
}

.c7-finder__rank {
  width: 5.5rem;
  text-align: center !important;
}

.c7-finder__uni {
  min-width: 14rem;
}

.c7-finder__country,
.c7-finder__sub {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-regular);
}

.c7-finder__num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The University / College column stays frozen while the table scrolls
   sideways (the client's mobile requirement); the ranking beside it slides
   under it. */
@media (max-width: 64rem) {
  .c7-finder__table .c7-finder__uni {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 11rem;
    max-width: 11rem;
    box-shadow: 1px 0 0 var(--c7-border-subtle), 6px 0 8px -6px rgb(0 0 0 / 0.18);
  }

  .c7-finder__table thead .c7-finder__uni {
    z-index: 3;
  }
}

/* --------------------------------------------------------------------------
   Course finder — "On request" cells and side-by-side comparison
   -------------------------------------------------------------------------- */
.c7-finder__ask {
  color: var(--c7-text-muted);
  font-style: italic;
  font-size: var(--c7-text-xs);
}

.c7-finder-hint {
  display: flex;
  align-items: center;
  gap: var(--c7-space-2);
  margin: var(--c7-space-8) 0 var(--c7-space-3);
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

.c7-finder-hint svg {
  flex: none;
  color: var(--c7-gold-600);
}

/* The tick box that sits under each university name. */
.c7-compare-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--c7-space-2);
  padding: 0.2rem 0.6rem 0.2rem 0.3rem;
  border: 1px solid var(--c7-border);
  border-radius: var(--c7-radius-pill);
  background: var(--c7-surface);
  color: var(--c7-text-muted);
  font-size: 0.72rem;
  font-weight: var(--c7-weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--c7-duration-fast) var(--c7-ease),
    background-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease);
}

.c7-compare-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.c7-compare-toggle__box {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #9aa9b6;
  border-radius: 50%;
  color: transparent;
  transition: background-color var(--c7-duration-fast) var(--c7-ease),
    border-color var(--c7-duration-fast) var(--c7-ease),
    transform var(--c7-duration-fast) var(--c7-ease-spring);
}

.c7-compare-toggle__box svg {
  width: 0.62rem;
  height: 0.62rem;
  stroke-width: 3;
}

.c7-compare-toggle:hover {
  border-color: var(--c7-meridian-600);
  color: var(--c7-meridian-800);
}

.c7-compare-toggle:has(input:focus-visible) {
  outline: 2px solid var(--c7-focus);
  outline-offset: 2px;
}

.c7-compare-toggle:has(input:checked) {
  border-color: var(--c7-gold-500);
  background: var(--c7-gold-100);
  color: var(--c7-gold-800);
}

.c7-compare-toggle:has(input:checked) .c7-compare-toggle__box {
  border-color: var(--c7-gold-500);
  background: var(--c7-gold-500);
  color: #04121b;
  transform: scale(1.08);
}

.c7-compare-toggle.is-muted {
  opacity: 0.55;
}

.c7-compare-toggle.is-refused {
  animation: c7-compare-shake 0.4s var(--c7-ease);
}

@keyframes c7-compare-shake {
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.c7-finder__table tbody tr.is-compared > * {
  background: var(--c7-gold-100);
}

/* The floating selection bar. */
.c7-compare-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: var(--c7-space-4);
  z-index: calc(var(--c7-z-drawer) - 1);
  display: flex;
  justify-content: center;
  padding-inline: var(--c7-space-4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--c7-duration-base) var(--c7-ease-out),
    transform var(--c7-duration-base) var(--c7-ease-out);
}

.c7-compare-bar[hidden] {
  display: none;
}

.c7-compare-bar.is-shown {
  opacity: 1;
  transform: none;
}

.c7-compare-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--c7-space-4);
  width: min(60rem, 100%);
  padding: var(--c7-space-3) var(--c7-space-3) var(--c7-space-3) var(--c7-space-5);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--c7-radius-pill);
  background: var(--c7-gradient-brand);
  box-shadow: var(--c7-shadow-xl);
  color: var(--c7-white);
  pointer-events: auto;
}

.c7-compare-bar__count {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--c7-space-2);
  margin: 0;
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  white-space: nowrap;
}

.c7-compare-bar__count svg {
  color: var(--c7-gold-400);
}

.c7-compare-bar.is-warning .c7-compare-bar__count {
  color: var(--c7-gold-300);
  white-space: normal;
}

.c7-compare-bar__chips {
  display: flex;
  flex: 1 1 auto;
  gap: var(--c7-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.c7-compare-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  max-width: 15rem;
  padding: 0.25rem 0.3rem 0.25rem 0.75rem;
  border-radius: var(--c7-radius-pill);
  background: rgb(255 255 255 / 0.1);
  font-size: var(--c7-text-xs);
  animation: c7-chip-in 0.35s var(--c7-ease-spring);
}

@keyframes c7-chip-in {
  from { opacity: 0; transform: scale(0.85); }
}

.c7-compare-bar__chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.78);
}

.c7-compare-bar__chip-text strong {
  color: var(--c7-white);
}

.c7-compare-bar__remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  color: var(--c7-white);
  font-size: 1rem;
  line-height: 1;
}

.c7-compare-bar__remove:hover,
.c7-compare-bar__remove:focus-visible {
  background: rgb(255 255 255 / 0.18);
}

.c7-compare-bar__actions {
  display: flex;
  flex: none;
  gap: var(--c7-space-2);
}

.c7-compare-bar .c7-btn--ghost {
  color: var(--c7-white);
}

.c7-compare-bar .c7-btn--ghost:hover {
  background: rgb(255 255 255 / 0.12);
}

.c7-compare-bar [data-compare-open].is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The floating WhatsApp / call buttons move up out of the bar's way. */
.c7-quick {
  transition: transform var(--c7-duration-base) var(--c7-ease-out);
}

body.has-compare-bar .c7-quick {
  transform: translateY(-5.5rem);
}

@media (max-width: 48rem) {
  .c7-compare-bar {
    inset-block-end: var(--c7-space-3);
    padding-inline: var(--c7-space-3);
  }

  .c7-compare-bar__inner {
    flex-wrap: wrap;
    gap: var(--c7-space-2) var(--c7-space-3);
    padding: var(--c7-space-3) var(--c7-space-4);
    border-radius: var(--c7-radius-lg);
  }

  .c7-compare-bar__chips {
    display: none;
  }

  .c7-compare-bar__count {
    flex: 1 1 auto;
  }
}

/* The comparison dialog. */
.c7-compare {
  position: fixed;
  inset: 0;
  z-index: var(--c7-z-modal);
  display: grid;
  place-items: center;
  padding: var(--c7-space-6);
}

.c7-compare[hidden] {
  display: none;
}

html.c7-compare-lock {
  overflow: hidden;
}

.c7-compare__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(4 18 27 / 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--c7-duration-base) var(--c7-ease);
}

.c7-compare__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(64rem, 100%);
  max-height: calc(100dvh - 3rem);
  overflow: hidden;
  border-radius: var(--c7-radius-xl);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xl);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity var(--c7-duration-base) var(--c7-ease-out),
    transform var(--c7-duration-base) var(--c7-ease-out);
}

.c7-compare__panel:focus {
  outline: none;
}

.c7-compare.is-open .c7-compare__backdrop {
  opacity: 1;
}

.c7-compare.is-open .c7-compare__panel {
  opacity: 1;
  transform: none;
}

.c7-compare__head {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-4);
  overflow: hidden;
  padding: var(--c7-space-5) var(--c7-space-6);
  background: var(--c7-gradient-brand);
  color: var(--c7-white);
}

.c7-compare__head > * {
  position: relative;
}

.c7-compare__head .c7-meridian-lines {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.c7-compare__head .c7-eyebrow {
  margin: 0 0 0.2rem;
}

.c7-compare__title {
  margin: 0;
  color: var(--c7-white);
  font-size: var(--c7-text-2xl);
}

.c7-compare__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--c7-white);
  transition: background-color var(--c7-duration-fast) var(--c7-ease);
}

.c7-compare__close:hover,
.c7-compare__close:focus-visible {
  background: rgb(255 255 255 / 0.24);
}

.c7-compare__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.c7-compare__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.c7-compare__table {
  width: 100%;
  min-width: calc(11rem + var(--compare-cols, 3) * 13rem);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--c7-text-sm);
  table-layout: fixed;
}

.c7-compare__table th,
.c7-compare__table td {
  padding: var(--c7-space-3) var(--c7-space-5);
  border-block-end: 1px solid var(--c7-border-subtle);
  text-align: start;
  vertical-align: top;
  background: var(--c7-surface);
}

.c7-compare__table tbody tr:nth-child(even) > * {
  background: #f7f9fb;
}

.c7-compare__table tbody th,
.c7-compare__corner {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  width: 11rem;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 1px 0 0 var(--c7-border-subtle);
}

.c7-compare__table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  border-block-end: 2px solid var(--c7-gold-400);
}

.c7-compare__table thead .c7-compare__corner {
  z-index: 3;
}

.c7-compare__country {
  display: block;
  color: var(--c7-gold-700);
  font-size: 0.72rem;
  font-weight: var(--c7-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c7-compare__uni {
  display: block;
  margin-block: 0.2rem 0.4rem;
  color: var(--c7-text-strong);
  font-size: var(--c7-text-base);
  font-weight: var(--c7-weight-bold);
  line-height: 1.3;
  text-decoration: none;
}

a.c7-compare__uni:hover {
  color: var(--c7-meridian-700);
  text-decoration: underline;
}

.c7-compare__remove {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
}

.c7-compare__remove:hover,
.c7-compare__remove:focus-visible {
  color: #c2410c;
}

.c7-compare__table td {
  color: var(--c7-text-strong);
  font-variant-numeric: tabular-nums;
}

.c7-compare__table tbody td.is-best {
  background: var(--c7-gold-100);
}

.c7-compare__badge {
  display: inline-block;
  margin-inline-start: var(--c7-space-2);
  padding: 0.1rem 0.5rem;
  border-radius: var(--c7-radius-pill);
  background: var(--c7-gold-500);
  color: #04121b;
  font-size: 0.66rem;
  font-weight: var(--c7-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.c7-compare__none {
  color: var(--c7-text-muted);
}

.c7-compare__foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-3) var(--c7-space-6);
  padding: var(--c7-space-4) var(--c7-space-6);
  border-block-start: 1px solid var(--c7-border-subtle);
  background: var(--c7-surface);
}

.c7-compare__foot p {
  flex: 1 1 20rem;
  margin: 0;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
}

@media (max-width: 40rem) {
  .c7-compare {
    place-items: end stretch;
    padding: 0;
  }

  .c7-compare__panel {
    width: 100%;
    max-height: 92dvh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    transform: translateY(40px);
  }

  .c7-compare__head,
  .c7-compare__foot {
    padding-inline: var(--c7-space-4);
  }

  .c7-compare__title {
    font-size: var(--c7-text-xl);
  }

  .c7-compare__table {
    min-width: calc(7.5rem + var(--compare-cols, 3) * 10.5rem);
  }

  .c7-compare__table th,
  .c7-compare__table td {
    padding: var(--c7-space-3);
  }

  .c7-compare__table tbody th,
  .c7-compare__corner {
    width: 7.5rem;
  }

  .c7-compare__foot .c7-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c7-compare-bar,
  .c7-compare__panel,
  .c7-compare__backdrop,
  .c7-compare-toggle__box {
    transition: none;
  }

  .c7-compare-bar__chip,
  .c7-compare-toggle.is-refused {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Course (package) page and the card's "View details" link
   -------------------------------------------------------------------------- */
.c7-pack__title a {
  color: inherit;
  text-decoration: none;
}

.c7-pack__title a:hover {
  color: var(--c7-meridian-700);
}

.c7-pack__details {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  color: var(--c7-meridian-800);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  text-decoration: none;
}

.c7-pack__details svg {
  transition: transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-pack__details:hover {
  color: var(--c7-gold-700);
}

.c7-pack__details:hover svg {
  transform: translateX(3px);
}

.c7-pack-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--c7-space-3);
  margin: 0 0 var(--c7-space-10);
  padding: 0;
  list-style: none;
}

.c7-pack-facts li {
  display: flex;
  align-items: center;
  gap: var(--c7-space-3);
  padding: var(--c7-space-4);
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-md);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xs);
}

.c7-pack-facts li > svg {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.6rem;
  border-radius: var(--c7-radius-sm);
  background: var(--c7-gold-100);
  color: var(--c7-gold-700);
}

.c7-pack-facts small {
  display: block;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
}

.c7-pack-facts strong {
  color: var(--c7-text-strong);
  font-size: var(--c7-text-base);
}

.c7-pack-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c7-space-2) var(--c7-space-4);
  margin-block-start: var(--c7-space-10);
  padding: var(--c7-space-5);
  border-radius: var(--c7-radius-md);
  background: var(--c7-meridian-050);
  color: var(--c7-text);
}

.c7-pack-note a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--c7-meridian-800);
  font-weight: var(--c7-weight-semibold);
}

.c7-pack-buy {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
}

.c7-pack-buy__image {
  width: 100%;
  aspect-ratio: 800 / 520;
  object-fit: cover;
  border-radius: var(--c7-radius-md);
}

.c7-pack-buy .c7-panel__title {
  margin: 0;
}

.c7-btn--outline-light {
  border: 1px solid rgb(255 255 255 / 0.4);
  background: transparent;
  color: var(--c7-white);
}

.c7-btn--outline-light:hover,
.c7-btn--outline-light:focus-visible {
  border-color: var(--c7-white);
  background: rgb(255 255 255 / 0.1);
  color: var(--c7-white);
}

/* A price on the navy brand panel (a course page, a test page) reads in white. */
.c7-panel--brand .c7-price__now {
  color: var(--c7-white);
}

.c7-panel--brand .c7-price__was,
.c7-panel--brand .c7-price__note,
.c7-panel--brand .c7-price__until {
  color: rgb(255 255 255 / 0.7);
}

.c7-panel--brand .c7-price__offer {
  color: var(--c7-gold-300);
}

/* --------------------------------------------------------------------------
   WhatsApp — the enquiry card on detail pages, and the button that follows a
   sent form
   -------------------------------------------------------------------------- */
.c7-btn--whatsapp {
  justify-content: center;
  border: 0;
  background: linear-gradient(135deg, #1faa59 0%, #128c4a 100%);
  box-shadow: 0 8px 20px -8px rgb(18 140 74 / 0.55);
  color: #fff;
}

.c7-btn--whatsapp:hover,
.c7-btn--whatsapp:focus-visible {
  background: linear-gradient(135deg, #22b862 0%, #0f7a40 100%);
  color: #fff;
}

.c7-btn--whatsapp svg {
  width: 1.15rem;
  height: 1.15rem;
}

[data-form-success] .c7-btn--whatsapp,
.c7-popup__success + .c7-btn--whatsapp {
  margin-block-start: var(--c7-space-3);
}

.c7-wa-card {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-4);
  margin-block-start: var(--c7-space-5);
  padding: var(--c7-space-5);
  border: 1px solid rgb(18 140 74 / 0.18);
  border-radius: var(--c7-radius-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(31 170 89 / 0.10), transparent 60%),
    var(--c7-surface);
  box-shadow: var(--c7-shadow-sm);
}

.c7-wa-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--c7-space-3);
}

.c7-wa-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1faa59 0%, #128c4a 100%);
  color: #fff;
}

.c7-wa-card__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.c7-wa-card__title {
  margin: 0;
  color: var(--c7-text-strong);
  font-size: var(--c7-text-base);
  font-weight: var(--c7-weight-bold);
}

.c7-wa-card__text {
  margin: 0.15rem 0 0;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

.c7-wa-form {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
  animation: c7-wa-open 0.3s var(--c7-ease-out);
}

.c7-wa-form[hidden] {
  display: none;
}

@keyframes c7-wa-open {
  from { opacity: 0; transform: translateY(-6px); }
}

.c7-wa-card.is-open [data-whatsapp-open] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .c7-wa-form {
    animation: none;
  }
}

/* ==========================================================================
   Comparison tables — never a sideways scrollbar (client review, Sept 2026)
   --------------------------------------------------------------------------
   A wide screen shows the table itself, fitted to the page: headings wrap
   onto two lines instead of forcing the table wider. Below 64rem each row
   becomes a card — the university and its compare toggle on top, the other
   columns as label / value pairs — so there is nothing to scroll sideways.
   ========================================================================== */
.c7-finder {
  overflow-x: hidden;
  overflow-y: auto;
}

.c7-finder__table {
  min-width: 0;
  table-layout: auto;
}

.c7-finder__table th,
.c7-finder__table td {
  padding: var(--c7-space-3);
  overflow-wrap: anywhere;
}

.c7-finder__table thead th {
  white-space: normal;
  line-height: 1.3;
  vertical-align: bottom;
}

.c7-finder__table .c7-finder__uni {
  min-width: 11rem;
}

.c7-finder__table tbody td.c7-finder__course {
  min-width: 9rem;
}

.c7-finder__rank {
  width: 4.5rem;
}

@media (max-width: 64rem) {
  .c7-finder {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .c7-finder__table,
  .c7-finder__table tbody,
  .c7-finder__table tr,
  .c7-finder__table td,
  .c7-finder__table tbody th {
    display: block;
    width: 100%;
  }

  /* The sort links stay reachable as a row of chips above the cards. */
  .c7-finder__table thead {
    display: block;
    margin-block-end: var(--c7-space-4);
  }

  .c7-finder__table thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c7-space-2);
  }

  .c7-finder__table thead th {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c7-text-strong);
  }

  .c7-finder__table thead th:not([aria-sort]) {
    display: none;
  }

  .c7-finder__table thead .c7-finder__sort {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius-pill);
    background: var(--c7-surface);
    font-size: var(--c7-text-xs);
  }

  .c7-finder__table thead .c7-finder__sort.is-active {
    border-color: var(--c7-meridian-800);
    background: var(--c7-meridian-800);
    color: var(--c7-white);
  }

  .c7-finder__table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--c7-space-4);
  }

  .c7-finder__table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid var(--c7-border-subtle);
    border-radius: var(--c7-radius-lg);
    background: var(--c7-surface);
    box-shadow: var(--c7-shadow-sm);
  }

  .c7-finder__table tbody tr > * {
    border: 0;
    background: transparent !important;
  }

  .c7-finder__table tbody th.c7-finder__uni {
    position: static;
    grid-column: 1 / -1;
    order: -2;
    max-width: none;
    min-width: 0;
    padding: var(--c7-space-4) var(--c7-space-4) var(--c7-space-3);
    border-block-end: 1px solid var(--c7-border-subtle);
    background: linear-gradient(180deg, var(--c7-meridian-050), transparent) !important;
    box-shadow: none;
    font-size: var(--c7-text-base);
  }

  .c7-finder__table tbody td.c7-finder__course {
    grid-column: 1 / -1;
    order: -1;
    min-width: 0;
    font-weight: var(--c7-weight-semibold);
  }

  .c7-finder__table tbody td {
    padding: var(--c7-space-2) var(--c7-space-4);
    text-align: start !important;
    font-size: var(--c7-text-sm);
  }

  .c7-finder__table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 0.1rem;
    color: var(--c7-text-muted);
    font-size: 0.68rem;
    font-weight: var(--c7-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .c7-finder__table tbody td.c7-finder__inr {
    grid-column: 1 / -1;
    padding-block: var(--c7-space-3) var(--c7-space-4);
    border-block-start: 1px dashed var(--c7-border-subtle);
    color: var(--c7-meridian-800);
    font-size: var(--c7-text-base);
    font-weight: var(--c7-weight-bold);
  }

  .c7-finder__table tbody tr.is-compared {
    border-color: var(--c7-gold-500);
    box-shadow: 0 0 0 2px var(--c7-gold-300), var(--c7-shadow-sm);
  }
}

/* The side-by-side dialog on a phone: each row's label runs across the top,
   the options sit beneath it side by side — no sideways scrolling. */
@media (max-width: 40rem) {
  .c7-compare__scroll {
    overflow-x: hidden;
  }

  .c7-compare__table {
    min-width: 0;
    table-layout: auto;
  }

  .c7-compare__table thead tr,
  .c7-compare__table tbody tr {
    display: grid;
    grid-template-columns: repeat(var(--compare-cols, 3), minmax(0, 1fr));
  }

  .c7-compare__table thead .c7-compare__corner {
    display: none;
  }

  .c7-compare__table tbody th {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    padding: var(--c7-space-2) var(--c7-space-3) 0;
    border: 0;
    box-shadow: none;
    background: transparent !important;
  }

  .c7-compare__table th,
  .c7-compare__table td {
    padding: var(--c7-space-2) var(--c7-space-3);
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: var(--c7-text-xs);
  }

  .c7-compare__table tbody tr {
    border-block-end: 1px solid var(--c7-border-subtle);
  }

  .c7-compare__table tbody td {
    border: 0;
  }

  .c7-compare__uni {
    font-size: var(--c7-text-sm);
  }

  .c7-compare__badge {
    display: block;
    width: max-content;
    margin: 0.25rem 0 0;
  }
}

/* --------------------------------------------------------------------------
   University / Course comparison — its own page
   -------------------------------------------------------------------------- */
.c7-cmp-picker {
  padding: var(--c7-space-6);
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-sm);
}

.c7-cmp-picker__slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--c7-space-4);
}

.c7-cmp-picker__slot .c7-label {
  display: flex;
  align-items: center;
  gap: var(--c7-space-2);
}

.c7-cmp-picker__num {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--c7-gradient-accent);
  color: #04121b;
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-bold);
}

.c7-cmp-picker__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-3);
  margin-block-start: var(--c7-space-5);
}

.c7-cmp-empty {
  margin-block-start: var(--c7-space-8);
}

.c7-cmp {
  margin-block-start: var(--c7-space-8);
  overflow: hidden;
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-xl);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-md);
}

/* On the page the table fits the width it has — no sideways scrolling. */
.c7-cmp__table {
  min-width: 0;
  table-layout: fixed;
}

.c7-cmp__table thead th {
  position: static;
  background: var(--c7-meridian-050);
}

.c7-cmp__table .c7-compare__corner {
  width: 13rem;
}

.c7-cmp__table td,
.c7-cmp__table th {
  overflow-wrap: anywhere;
  /* A long word breaks at a syllable, with a hyphen, never mid-letter. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

.c7-cmp .c7-compare__foot {
  border-block-start: 1px solid var(--c7-border-subtle);
}

@media (max-width: 56rem) {
  .c7-cmp-picker__slots {
    grid-template-columns: 1fr;
  }
}

/* A phone: each row's label runs across the top, the options sit beneath it. */
@media (max-width: 40rem) {
  .c7-cmp-picker {
    padding: var(--c7-space-4);
  }

  .c7-cmp__table thead tr,
  .c7-cmp__table tbody tr {
    display: grid;
    grid-template-columns: repeat(var(--compare-cols, 3), minmax(0, 1fr));
  }

  .c7-cmp__table thead .c7-compare__corner {
    display: none;
  }

  .c7-cmp__table tbody th {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    padding: var(--c7-space-3) var(--c7-space-3) 0;
    border: 0;
    box-shadow: none;
    background: transparent !important;
  }

  .c7-cmp__table th,
  .c7-cmp__table td {
    padding: var(--c7-space-2) var(--c7-space-3);
    font-size: var(--c7-text-xs);
  }

  .c7-cmp__table tbody tr {
    border-block-end: 1px solid var(--c7-border-subtle);
  }

  .c7-cmp__table tbody td {
    border: 0;
  }

  .c7-cmp .c7-compare__badge {
    display: block;
    width: max-content;
    margin: 0.25rem 0 0;
  }
}

/* Comparison page: the comparison dims briefly while a new choice loads in place. */
[data-comparison-result] {
    transition: opacity 0.2s ease;
}

[data-comparison-result].is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   The two tools under the hero — Course Finder and Course Comparison.

   The same gold-on-navy language as the menu's feature buttons, at homepage
   scale: two cards side by side on a desktop, stacked on a phone.
--------------------------------------------------------------------------- */
.c7-section--tools {
  padding-block: var(--c7-space-9);
}

.c7-tools {
  display: grid;
  gap: var(--c7-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.c7-tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--c7-space-5);
  padding: var(--c7-space-6) var(--c7-space-6);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--c7-radius-lg);
  background: var(--c7-gradient-brand);
  box-shadow: var(--c7-shadow-md);
  color: var(--c7-white);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--c7-duration-fast) var(--c7-ease),
    box-shadow var(--c7-duration-fast) var(--c7-ease),
    border-color var(--c7-duration-fast) var(--c7-ease);
}

.c7-tool:hover,
.c7-tool:focus-visible {
  transform: translateY(-3px);
  border-color: var(--c7-accent);
  box-shadow: var(--c7-shadow-lg);
  color: var(--c7-white);
}

.c7-tool__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--c7-radius-md);
  background: var(--c7-gradient-accent, linear-gradient(135deg, #edbb5b, #d99f34));
  color: var(--c7-brand-900, #12263f);
}

.c7-tool__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.c7-tool__text {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.c7-tool__label {
  font-family: var(--c7-font-display, inherit);
  font-size: var(--c7-text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.c7-tool__desc {
  color: rgb(255 255 255 / 0.78);
  font-size: var(--c7-text-sm);
  line-height: 1.4;
}

.c7-tool__arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: auto;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--c7-white);
  transition: background var(--c7-duration-fast) var(--c7-ease),
    transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-tool:hover .c7-tool__arrow,
.c7-tool:focus-visible .c7-tool__arrow {
  background: var(--c7-gradient-accent, linear-gradient(135deg, #edbb5b, #d99f34));
  color: var(--c7-brand-900, #12263f);
  transform: translateX(3px);
}

.c7-tool__arrow svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 40rem) {
  .c7-tool {
    gap: var(--c7-space-4);
    padding: var(--c7-space-5);
  }

  .c7-tool__icon {
    width: 3rem;
    height: 3rem;
  }
}

/* ---------------------------------------------------------------------------
   Country-wise courses — the strip of other countries above the filters.
--------------------------------------------------------------------------- */
.c7-countrybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c7-space-3) var(--c7-space-4);
  margin-block-end: var(--c7-space-6);
  padding: var(--c7-space-4) var(--c7-space-5);
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xs, 0 1px 2px rgb(18 38 63 / 0.06));
}

.c7-countrybar__label {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c7-countrybar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-2);
}

.c7-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c7-border-subtle);
  border-radius: 999px;
  background: var(--c7-bg);
  color: var(--c7-text);
  font-size: var(--c7-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--c7-duration-fast) var(--c7-ease),
    background var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease),
    transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-chip:hover,
.c7-chip:focus-visible {
  transform: translateY(-1px);
  border-color: transparent;
  background: var(--c7-gradient-brand);
  color: var(--c7-white);
}

.c7-countrybar__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-4);
  margin-block-start: var(--c7-space-8);
}

@media (max-width: 40rem) {
  .c7-countrybar {
    flex-direction: column;
    align-items: flex-start;
  }

  .c7-countrybar__cta .c7-btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   A service in four lines — the tick list above the prose.
--------------------------------------------------------------------------- */
.c7-points {
  display: grid;
  gap: var(--c7-space-3);
  margin: 0 0 var(--c7-space-8);
  padding: var(--c7-space-5) var(--c7-space-6);
  border: 1px solid var(--c7-border-subtle);
  border-inline-start: 3px solid var(--c7-accent);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  list-style: none;
}

.c7-points__item {
  display: flex;
  gap: var(--c7-space-3);
  align-items: flex-start;
  line-height: 1.5;
}

.c7-points__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-block-start: 0.1rem;
  border-radius: 50%;
  background: var(--c7-gradient-accent, linear-gradient(135deg, #edbb5b, #d99f34));
  color: var(--c7-brand-900, #12263f);
}

.c7-points__mark svg {
  width: 0.85rem;
  height: 0.85rem;
}

.c7-points__text {
  display: block;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
}

/* On a phone the country strip scrolls sideways in one row rather than
   stacking into a wall of chips above the results. */
@media (max-width: 48rem) {
  .c7-countrybar {
    padding: var(--c7-space-3) 0 var(--c7-space-3) var(--c7-space-4);
  }

  .c7-countrybar__list {
    flex-wrap: nowrap;
    width: 100%;
    padding-inline-end: var(--c7-space-4);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .c7-countrybar__list::-webkit-scrollbar {
    display: none;
  }

  .c7-countrybar__list .c7-chip {
    flex: none;
    scroll-snap-align: start;
  }
}

/* A second, quieter link on a listing card — "24 courses in Australia". */
.c7-card__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: var(--c7-space-3);
  padding-block-start: var(--c7-space-3);
  border-block-start: 1px solid var(--c7-border-subtle);
  width: 100%;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.c7-card__aside-link:hover,
.c7-card__aside-link:focus-visible {
  color: var(--c7-brand-700, var(--c7-text-strong));
}

.c7-card__aside-link svg {
  transition: transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-card__aside-link:hover svg {
  transform: translateX(3px);
}