/* Shared public interface rules. Keep photographs and factual content in their existing layers. */
:root {
  --control-height: 50px;
  --control-radius: 11px;
  --control-border: #b9cbe0;
  --panel-gap: 24px;
}

/* Headings introduce the task without pushing it far below the opening screen. */
.page-heading.shell, .journey-opening, .prep-opening {
  padding: 32px 36px;
  margin-top: 24px;
  margin-bottom: 28px;
  border-radius: 24px;
}
.page-heading h1, .journey-opening h1, .prep-opening h1 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.14;
  letter-spacing: -.04em;
}
.page-heading p { margin-top: 14px; line-height: 1.65; max-width: 720px; }
.page-heading .eyebrow { margin-bottom: 12px; }
.section-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.18; }
.profile-title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.16; }
.profile-top { padding: 30px 32px; gap: 32px; }
.header .nav-links a.button, .header .nav-links a.button[aria-current=page] { color: #fff; }
.header .nav-links a.button:hover { color: #fff; }

/* A label, a control and its help text always share the same left edge. */
:is(.filter-bar, .programme-filters, .quick-finder, .finder-filter-line, .journey-panel, .prep-choice, .prep-panel, .enquiry-layout) .field label {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #304b67;
}
:is(.filter-bar, .programme-filters, .quick-finder, .finder-filter-line, .journey-panel, .prep-choice, .prep-panel, .enquiry-layout) .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  margin: 0;
  background: #fff;
  color: #17324f;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 1px 2px #15335304;
}
:is(.enquiry-layout, .journey-panel, .prep-panel) .field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #66798c; opacity: 1; }
.field-help { font-size: 13px; line-height: 1.6; margin: 7px 0 0; color: #536b80; }
.field :is(input, select, textarea):disabled { background: #eef3f8; color: #587084; cursor: not-allowed; }
.filter-bar, .programme-filters { padding: 22px; gap: 18px; border-radius: 18px; background: #e5edf9; }
.programme-filters { grid-template-columns: minmax(0, 1.65fr) repeat(4, minmax(0, 1fr)); }
.filter-bar .field, .programme-filters .field { grid-column: auto; }
.journey-add { gap: 20px; }
.journey-sidebar #journey-preferences { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.journey-sidebar #journey-preferences .field { margin: 0; }
.journey-sidebar #journey-preferences > :is(.button, .journey-check, p) { grid-column: 1 / -1; }
.prep-fields { gap: 4px 20px; }

/* Enquiries have their own composition, rather than inheriting a search-filter panel. */
.enquiry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; align-items: start; padding-bottom: 56px; }
.enquiry-layout .apply-panel { margin: 0; padding: 30px; min-width: 0; border-radius: 22px; background: #fcfdff; }
.enquiry-layout .apply-panel > .eyebrow { margin-bottom: 10px; }
.enquiry-layout .apply-panel > h2 { font-size: 27px; line-height: 1.25; margin: 0; }
.enquiry-layout .enquiry-intro { margin: 12px 0 24px; color: #526981; font-size: 15px; line-height: 1.6; }
.enquiry-fieldset { min-width: 0; padding: 24px; margin: 24px 0 0; background: #edf3fa; border: 1px solid #d8e3f0; border-radius: 16px; }
.enquiry-fieldset legend { color: #1c3855; font-size: 15px; font-weight: 650; padding: 0 8px; margin-left: -8px; line-height: 1.5; }
.enquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.enquiry-extra-fields:empty { display: none; }
.enquiry-extra-fields:not(:empty) { display: grid; gap: 20px; margin-top: 22px; padding-top: 22px; border-top: 1px solid #d5e1ee; }
.journey-enquiry-preferences { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.enquiry-actions { display: grid; justify-items: start; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #d9e3ef; }
.enquiry-actions .button { min-height: 50px; padding: 13px 24px; border-radius: 12px; }
:is(.enquiry-layout, .journey-panel, .prep-panel) .button:hover { transform: none; }
.enquiry-layout .no-script-enquiry { margin: 24px 0 0; }
.enquiry-layout .enquiry-actions p { margin: 0; max-width: 590px; color: #526a81; font-size: 13px; line-height: 1.7; }
.enquiry-layout .selected-plan { margin: 24px 0 0; padding: 20px; border: 1px solid #c9d8bd; }
.selected-choice { gap: 16px; align-items: start; }
.selected-choice > span { min-width: 0; overflow-wrap: anywhere; }
.selected-choice .text-action { min-height: 44px; flex: 0 0 auto; }
.enquiry-layout .enquiry-review { margin-top: 28px; padding: 24px; scroll-margin-top: calc(var(--header-height, 100px) + 24px); }
.enquiry-layout .enquiry-review h3 { font-size: 23px; }
.enquiry-layout .enquiry-review pre { margin: 20px 0; padding: 18px; line-height: 1.6; }
.enquiry-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.enquiry-layout .enquiry-review-actions :is(#copy-enquiry, #edit-enquiry) { margin: 0; }
.enquiry-review-actions .button { border-radius: 11px; }
.enquiry-review-actions .text-action { min-height: 44px; padding: 10px 0; }
.enquiry-aside { background: linear-gradient(145deg, #173455, #122540); border: 1px solid #355373; padding: 26px; border-radius: 22px; color: #e4edf8; }
.enquiry-aside > h2 { color: #fff; font-size: 23px; line-height: 1.3; margin: 0 0 14px; }
.enquiry-aside > p { font-size: 14px; line-height: 1.7; color: #c7d8e9; margin: 0 0 20px; }
.enquiry-aside .eyebrow { color: #c0d6ed; margin-bottom: 12px; }
.enquiry-aside .consultation-next { margin: 24px 0; }
.enquiry-aside .responsibility-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.enquiry-aside .responsibility-grid article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 5px 12px; padding-top: 20px; border-color: #48627a; }
.enquiry-aside .responsibility-grid article > span { grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; background: #d9e8f518; border: 1px solid #adc9e34d; border-radius: 9px; color: #e1efb6; letter-spacing: 0; font-size: 12px; }
.enquiry-aside .responsibility-grid h3 { color: #fff; font-size: 16px; line-height: 1.4; margin: 0; }
.enquiry-aside .responsibility-grid p { grid-column: 2; color: #c1d3e5; font-size: 13px; line-height: 1.65; margin: 0; }
.enquiry-aside .contact-direct { border-top: 1px solid #48627a; padding-top: 22px; display: grid; gap: 12px; }
.enquiry-aside .contact-direct a { min-height: 44px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #eff6ff; overflow-wrap: anywhere; }
.enquiry-aside .contact-direct img { width: 21px; height: 21px; flex: 0 0 21px; filter: invert(1); }
.enquiry-aside .contact-direct small { font-size: 12px; color: #c1d3e5; }

/* One grid governs programme rows at each breakpoint, including expanded details. */
.programme-result { grid-template-columns: 220px minmax(0, 1fr) 150px 180px; grid-template-areas: "photo identity price actions" ". details details details"; gap: 20px; padding: 24px; border-radius: 20px; align-items: center; }
.programme-result .programme-photograph { grid-area: photo; margin: 0; align-self: start; }
.programme-result .programme-identity { grid-area: identity; min-width: 0; align-self: start; }
.programme-result .programme-price { grid-area: price; padding: 0; min-width: 0; align-self: start; }
.programme-result .programme-actions { grid-area: actions; display: flex; flex-direction: column; gap: 10px; max-width: none; min-width: 0; align-self: start; }
.programme-result > details { grid-area: details; margin: 0; padding-top: 14px; }
.programme-result .programme-identity h3 { font-size: 22px; line-height: 1.3; margin: 8px 0; }
.programme-result .programme-actions :is(.button, button) { width: 100%; margin: 0; border-radius: 11px; }
.programme-result .programme-actions .text-link { margin: 0; }
.programme-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin-top: 12px; }
.programme-detail-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
.programme-result summary { min-height: 40px; display: flex; align-items: center; }
.programme-result summary::before { content: "+"; font-size: 18px; margin-right: 9px; }
.programme-result details[open] summary::before { content: "−"; }

/* University identity and actions retain their alignment when names wrap. */
.card-top:has(.university-logo[data-logo-shape=seal]) { grid-template-columns: 56px minmax(0, 1fr) !important; align-items: center; gap: 14px !important; }
.card-top:has(.university-logo[data-logo-shape=seal]) .university-logo { width: 56px !important; height: 56px !important; }
.card-top h3 { min-width: 0; min-height: 0; overflow-wrap: break-word; }
.card-body { flex: 1; padding: 24px; gap: 16px; }
.card-fee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.card-fee > div { min-width: 0; }
.card-fee strong { font-size: 23px; line-height: 1.35; }
.card-fee .card-link { font-size: 14px; white-space: normal; text-align: right; }
.card-tools { margin: 0; padding: 14px 24px 18px; align-items: center; gap: 12px; }
.card-tools > button { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 44px; }
.shortlist-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.shortlist-row > div { min-width: 0; }
.shortlist-row h3 { overflow-wrap: break-word; }
.shortlist-row img, .shortlist-row img.programme-emblem { display: block; width: 80px !important; min-width: 0 !important; height: 64px !important; }
.dialog-actions { gap: 12px; }
.dialog-actions .button { border-radius: 12px; }
.comparison-item > img:not(.programme-emblem) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--photo-focus, center); }
.comparison-item h3 { min-height: 0; line-height: 1.35; }
.comparison-item dl { margin: 16px 0; }

@media (max-width: 1199px) {
  .programme-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .programme-filters .field:first-child { grid-column: 1 / -1; }
  .enquiry-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
  .enquiry-layout .apply-panel { padding: 26px; }
  .enquiry-fieldset { padding: 20px; }
  .enquiry-grid { gap: 20px 16px; }
  .programme-result { grid-template-columns: 170px minmax(0, 1fr) 150px; grid-template-areas: "photo identity price" "photo actions actions" ". details details"; gap: 18px; }
  .programme-result .programme-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .programme-result .programme-actions :is(.button, button) { width: auto; }
}
@media (min-width: 1200px) { .guides-hub .guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 1000px) {
  .enquiry-layout { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 28px; }
  .enquiry-aside > h2, .enquiry-aside > p, .enquiry-aside .contact-direct { grid-column: 1; }
  .enquiry-aside .consultation-next { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .enquiry-aside .responsibility-grid article:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 760px) {
  .page-heading.shell, .journey-opening, .prep-opening { padding: 25px 23px; margin-top: 20px; margin-bottom: 22px; border-radius: 20px; }
  .page-heading h1, .journey-opening h1, .prep-opening h1 { font-size: clamp(29px, 7.8vw, 36px); }
  .page-heading p { font-size: 16px; margin-top: 12px; }
  .profile-top { padding: 24px 22px; gap: 20px; }
  .profile-title { font-size: clamp(29px, 7.8vw, 38px); }
  .filter-bar, .programme-filters { padding: 18px; gap: 18px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar .field:first-child, .programme-filters .field:first-child { grid-column: 1 / -1; }
  .filter-bar .field:last-child { grid-column: auto; }
  .enquiry-layout { gap: 22px; padding-bottom: 36px; }
  .enquiry-layout .apply-panel { padding: 22px; border-radius: 20px; }
  .enquiry-layout .apply-panel > h2 { font-size: 25px; }
  .enquiry-fieldset { padding: 19px 16px; margin-top: 24px; border-radius: 13px; }
  .enquiry-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .enquiry-extra-fields:not(:empty) { margin-top: 20px; padding-top: 20px; }
  .enquiry-actions { margin-top: 24px; padding-top: 22px; gap: 16px; justify-items: stretch; }
  .enquiry-actions .button { width: 100%; }
  .enquiry-layout .enquiry-review { padding: 20px 16px; }
  .enquiry-review-actions { flex-direction: column; align-items: stretch; }
  .enquiry-layout .enquiry-review-actions .button { width: 100%; }
  .enquiry-aside { display: block; padding: 24px; }
  .enquiry-aside .consultation-next { margin: 24px 0; }
  .enquiry-aside .responsibility-grid article:first-child { border-top: 1px solid #48627a; padding-top: 20px; }
  .programme-result { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "identity" "price" "actions" "details"; padding: 20px; gap: 18px; }
  .programme-result .programme-actions { gap: 10px; }
  .programme-result .programme-actions :is(.button, button) { width: auto; flex: 1 1 auto; }
  .programme-result .programme-prepare-link { flex: 0 0 100%; text-align: left; }
  .card-body { padding: 22px; }
  .card-tools { padding: 14px 22px 18px; }
  .shortlist-row { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px; }
  .shortlist-row img, .shortlist-row img.programme-emblem { width: 56px !important; height: 56px !important; grid-column: 1; grid-row: 1; }
  .shortlist-row > div { grid-column: 2; grid-row: 1; }
  .shortlist-row > button { grid-column: 2; justify-self: start; padding: 8px 12px; }
}
@media (max-width: 420px) {
  .filter-bar, .programme-filters { grid-template-columns: minmax(0, 1fr); }
  .filter-bar .field, .programme-filters .field { grid-column: 1; }
  .enquiry-layout .apply-panel { padding: 19px 17px; }
  .enquiry-fieldset { padding: 18px 14px; }
  .card-fee { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card-fee .card-link { justify-self: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .enquiry-layout .button { transition: none; transform: none; } }