/**
 * Mobile program listing refinements.
 *
 * This file owns the final mobile presentation for canonical Program listings
 * and the shared mobile listing-title contract used by Academic Programs.
 * Desktop geometry remains in internal-layout.
 */
@media (max-width: 768px) {
  /* Listing pages use the canonical 16px mobile gutter. Legacy .container-inner
   * padding is removed here so the container width remains the only horizontal
   * spacing source instead of stacking 20px padding on top of that gutter. */
  body.jci-courses-page main :is(
    .jci-container.jci-container--page,
    .jci-container.jci-container--program
  ):not(.jci-program-listing-hero__features) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Program type listing hero uses the same canonical mobile gutter as Courses.
   * Unlike Courses, its legacy `.container-inner` padding was still stacking
   * inside the 16px jci-container gutter. Remove that padding only from the
   * title and intro rows; the grey feature panel keeps its own internal padding. */
  body.jci-program-type-page .jci-program-listing-hero :is(
    .jci-program-listing-hero__title-row,
    .jci-program-listing-hero__intro
  ).jci-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Component-scoped fallback: the Courses route can be served through more than
   * one WordPress query shape under WPML. These unique component classes keep
   * layout correct even if a cached page was rendered without the helper body
   * class. */
  .jci-courses-nav-handoff .jci-container,
  .jci-courses-subject-nav.jci-container,
  #courses-results.jci-container,
  .jci-courses-industry.jci-container,
  .jci-courses-features.jci-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Final mobile Program type-nav presentation must live after the legacy
   * custom-code layer. This keeps the sticky bar opaque and the active state
   * visible without increasing specificity globally. */
  body:is(.jci-courses-page, .jci-program-type-page) .jci-program-type-menu-bar--horizontal-scroll {
    width: 100%;
    max-width: none;
    background: linear-gradient(180deg, #f5f7fa 0%, #fafbfd 52%, #ffffff 100%);
  }

  body:is(.jci-courses-page, .jci-program-type-page) .jci-program-type-menu-bar--horizontal-scroll .jci-horizontal-menu__link {
    color: var(--color-brand-navy, #041c40);
    font-weight: 500;
    text-decoration: none;
  }

  body:is(.jci-courses-page, .jci-program-type-page) .jci-program-type-menu-bar--horizontal-scroll :is(
    .jci-horizontal-menu__item.is-active,
    .jci-horizontal-menu__item.active
  ) > .jci-horizontal-menu__link,
  body:is(.jci-courses-page, .jci-program-type-page) .jci-program-type-menu-bar--horizontal-scroll .jci-horizontal-menu__link:is(.is-active, [aria-current]) {
    color: var(--color-brand-blue, #487cff);
    font-weight: 600;
    text-decoration: none;
  }

  body.jci-courses-page .jci-program-listing-hero,
  body.jci-program-type-page .jci-program-listing-hero,
  body.jci-subject-area-page .masters-hero {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  body.jci-courses-page .jci-program-listing-hero .masters-title,
  body.jci-program-type-page .jci-program-listing-hero .masters-title,
  body.jci-bachelors-page .masters-title,
  body.jci-vocational-training-page .masters-title,
  body.jci-subject-area-page .masters-title,
  body.jci-subject-area-page .masters-title-max,
  body.jci-academic-programs-page #main-content.jci-academic-programs .jci-academic-programs__header h1.jci-page-h1 {
    margin: 0;
    font-size: clamp(36px, 10vw, 44px) !important;
    line-height: .98 !important;
    letter-spacing: -.02em !important;
  }

  body.jci-courses-page .jci-program-listing-hero .masters-title,
  body.jci-program-type-page .jci-program-listing-hero .masters-title,
  body.jci-bachelors-page .masters-title,
  body.jci-vocational-training-page .masters-title,
  body.jci-subject-area-page .masters-title,
  body.jci-subject-area-page .masters-title-max {
    max-width: 100%;
  }

  /* Academic Programs keeps sentence case while the Program listing titles are
   * rendered in uppercase. Rama Slab's lowercase x-height is optically smaller
   * at the same nominal size, so use the shared listing scale with a small
   * optical correction rather than changing font/weight or uppercasing content. */
  body.jci-academic-programs-page #main-content.jci-academic-programs .jci-academic-programs__header h1.jci-page-h1 {
    font-size: clamp(39px, 10.8vw, 48px) !important;
  }

  body.jci-courses-page .jci-program-listing-hero__intro,
  body.jci-program-type-page .jci-program-listing-hero__intro {
    margin-top: 26px;
  }

  body.jci-courses-page .jci-program-listing-hero__intro h2,
  body.jci-program-type-page .jci-program-listing-hero__intro h2,
  body.jci-subject-area-page .masters-subtitle-max {
    max-width: 32rem;
    margin: 0;
    padding: 0;
    font-size: clamp(22px, 6.3vw, 28px);
    line-height: 1.12;
  }

  body.jci-courses-page .jci-program-listing-hero__intro .font18,
  body.jci-program-type-page .jci-program-listing-hero__intro .font18,
  body.jci-subject-area-page .masters-subtitle-max {
    line-height: 1.5;
  }

  /* Give the Course hero subtitle and description distinct editorial beats.
   * The legacy padtop0mobile utility intentionally remains untouched; margin
   * provides the spacing without reintroducing utility-specific overrides. */
  body.jci-courses-page .jci-program-listing-hero__intro .font18,
  body.jci-program-type-page .jci-program-listing-hero__intro .font18 {
    margin-top: 14px;
  }

  body.jci-courses-page .jci-program-listing-hero__features-shell,
  body.jci-program-type-page .jci-program-listing-hero__features-shell {
    margin-top: 26px;
  }

  body.jci-program-type-page .jci-program-listing-hero__features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    margin-top: 0;
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature {
    min-height: 58px;
    padding: 12px 0;
    border-top: 1px solid rgba(7, 27, 58, .24);
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature:last-of-type {
    border-bottom: 1px solid rgba(7, 27, 58, .24);
  }

  body.jci-program-type-page .jci-program-listing-hero__features hr {
    display: none;
  }

  /* Course hero features read as one quiet editorial panel on mobile rather
   * than a table. Keep subtle white dividers between items and use the
   * canonical mobile gutter as internal breathing room. */
  /* Keep width/gutters and surface responsibilities separate: the outer
   * canonical container owns symmetric viewport gutters, while the grey panel
   * owns only its internal padding. This prevents legacy `.container-inner`
   * geometry from shifting the surface horizontally. */
  .jci-program-listing-hero__features {
    padding: 20px 32px;
    box-sizing: border-box;
  }

  /* Courses no longer reuses the legacy `.masters-feature` item component.
   * Stack the canonical inner row on mobile while keeping the grey panel's
   * existing mobile padding and divider rhythm. */
  .jci-program-listing-hero__features--courses {
    display: block;
  }

  .jci-program-listing-hero__features--courses > .jci-program-listing-hero__features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .jci-program-listing-hero__features--courses .jci-program-listing-hero__feature {
    min-height: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .78);
  }

  .jci-program-listing-hero__features--courses .jci-program-listing-hero__feature:last-child {
    border-bottom: 0;
  }

  .jci-program-listing-hero__features--courses .jci-program-listing-hero__feature::before {
    display: none;
  }

  .jci-program-listing-hero__features--courses .jci-program-listing-hero__feature strong,
  .jci-program-listing-hero__features--courses .jci-program-listing-hero__feature span {
    display: block;
  }

  .jci-program-listing-hero__features--courses .jci-program-listing-hero__feature span {
    margin-top: 6px;
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature {
    min-height: 0;
    padding: 15px 0;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .78);
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature:last-of-type {
    border-bottom: 0;
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature::before {
    display: none;
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature strong,
  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature span {
    display: block;
  }

  body.jci-program-type-page .jci-program-listing-hero__features .masters-feature span {
    margin-top: 6px;
  }

  /* Courses mobile catalogue.
   *
   * Keep one source of truth for the mobile filter, results rhythm and the two
   * editorial blocks below the catalogue. The canonical jci-container owns the
   * 16px page gutter; this layer only removes legacy inner padding and defines
   * component spacing. */
  .jci-courses-subject-menu-bar {
    margin: 20px 0 0;
    border-top: 1px solid rgba(7, 27, 58, .16);
    border-bottom: 1px solid rgba(7, 27, 58, .16);
    background: #fff;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__disclosure {
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__disclosure-copy {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    gap: 4px;
    min-width: 0;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__disclosure-prefix {
    color: #667386;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__disclosure-value {
    display: block;
    min-width: 0;
    margin-left: 0;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__disclosure-label {
    display: block;
    overflow: hidden;
    color: var(--color-brand-blue, #487cff);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__item.is-active > .jci-horizontal-menu__link,
  .jci-courses-subject-nav .jci-horizontal-menu__link.is-active {
    position: relative;
    padding-right: 30px;
    color: var(--color-brand-blue, #487cff);
    font-weight: 650;
    text-decoration: none;
  }

  .jci-courses-subject-nav .jci-horizontal-menu__item.is-active > .jci-horizontal-menu__link::after,
  .jci-courses-subject-nav .jci-horizontal-menu__link.is-active::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
  }

  #courses-results {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 28px;
    padding-bottom: 0;
  }

  #courses-results .programs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 38px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #courses-results .jci-program-card--course-grid {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 0;
  }

  #courses-results .jci-program-card--course-grid:first-child {
    padding-top: 0;
  }

  #courses-results .jci-program-card--course-grid .jci-program-card__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  #courses-results .jci-program-card--course-grid .jci-program-card__body {
    display: block;
    flex: none;
    padding-top: 12px;
  }

  #courses-results .jci-program-card--course-grid .jci-program-card__catalog-meta {
    margin: 0;
    padding: 0;
  }


  #courses-results .jci-program-card__title {
    margin: 14px 0;
    padding: 0;
    font-size: clamp(18px, 5.2vw, 21px);
    line-height: 1.12;
  }

  #courses-results .jci-program-card__description {
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
  }

  .jci-courses-results-footer {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 100%;
    margin: 0 auto;
    padding-top: 48px;
    text-align: center;
  }

  .jci-courses-results-progress {
    justify-self: center;
    width: 100%;
    margin: 0;
    color: #667386;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }

  [data-jci-course-listing-toggle-wrap] {
    width: 100%;
    margin: 0;
    padding-top: 0;
  }

  .jci-courses-industry {
    margin-top: 0;
    padding-top: 16px;
  }

  .jci-courses-industry .font18.padtop20 {
    padding-top: 14px;
  }

  .jci-courses-industry .row.margtop40 {
    margin-top: 18px;
  }

  .jci-courses-industry__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 18px;
    object-fit: contain;
  }

  .jci-courses-features {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 24px;
    padding-bottom: 0;
  }

  .jci-courses-features > h2 {
    max-width: 34rem;
    margin: 0 0 28px;
    padding: 0;
    color: var(--color-brand-navy, #041c40);
    font-family: var(--font-rama-e, "rama-slab-e", Georgia, serif);
    font-size: clamp(36px, 10vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: left;
  }

  .jci-courses-features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    margin: 0;
  }

  .jci-courses-feature {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  .jci-courses-feature__icon {
    width: 40px;
    height: 40px;
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain;
  }

  .jci-courses-feature__content {
    display: grid;
    gap: 0;
    min-width: 0;
  }

  .jci-courses-feature__title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.25;
  }

  .jci-courses-feature__description {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .jci-courses-features ~ .jci-faqs {
    margin-top: 34px;
  }

  /* Courses FAQs use the same compact type scale as the catalogue while the
   * section heading remains clearly distinct and each summary stays a 44px
   * touch target. */
  body.jci-courses-page .jci-faqs {
    margin-bottom: 48px;
  }

  body.jci-courses-page .jci-faqs > h2 {
    margin: 0 0 14px;
    color: var(--color-brand-navy, #041c40);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }

  body.jci-courses-page .jci-faqs summary {
    min-height: 44px;
    padding: 10px 4px 10px 0;
    font-size: 14px;
    line-height: 1.35;
  }

  body.jci-courses-page .jci-faqs__answer {
    padding: 0 26px 16px 0;
  }

  body.jci-courses-page .jci-faqs__answer p {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Program-type listing spacing remains page-specific; the shared wide
   * testimonial geometry now lives with its desktop owner in internal-layout. */
  body.jci-program-type-page .jci-program-type-testimonial {
    margin-top: 64px;
    padding-bottom: 32px;
  }

  /* Program types: preserve current editorial design, but make the mobile
   * hierarchy and line-led program rows closer to the supplied layouts. */
  body.jci-program-type-page .jci-program-type-subjects .masters__wrapper .master-image,
  body.jci-program-type-page .jci-program-type-subjects .masters__wrapper.is-reverse .master-image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  body.jci-program-type-page .jci-program-type-subjects .master-content__inner > h2 {
    margin: 0 0 12px;
    font-size: clamp(25px, 7.2vw, 30px);
    line-height: 1.08;
  }

  body.jci-program-type-page .jci-program-type-subjects .sport-business__description {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
  }

  body.jci-program-type-page .jci-program-format-group + .jci-program-format-group {
    margin-top: 20px;
  }

  body.jci-program-type-page .jci-program-list__item {
    padding: 14px 0 15px;
  }

  body.jci-program-type-page .jci-program-list__main {
    min-height: 0;
    padding-block: 2px;
    align-items: start;
  }

  body.jci-program-type-page .jci-program-list__title {
    font-size: 16px;
    line-height: 1.28;
  }

  /* Subject area legacy template: remove the card-within-card feeling on
   * mobile and keep content in a readable single editorial column. */
  body.jci-subject-area-page .masters-hero.reorder {
    display: block;
  }

  body.jci-subject-area-page .masters-hero.reorder > nav {
    margin-top: 0;
  }

  body.jci-subject-area-page .masters-content.bigger {
    padding-inline: var(--layout-gutter, 20px);
  }

  body.jci-subject-area-page .row.rowmobile.container-inner {
    display: block;
    padding-inline: var(--layout-gutter, 20px);
  }

  body.jci-subject-area-page .row.rowmobile.container-inner > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  body.jci-subject-area-page .row.rowmobile .masters-title {
    margin-top: 0;
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1;
  }

  body.jci-subject-area-page .row.rowmobile .mobile.w100 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-top: 18px;
  }

  body.jci-subject-area-page .mobilehide {
    font-size: 16px;
    line-height: 1.55;
  }

}