/*
 * Mobile-only layout corrections.
 *
 * Keep this file loaded last so responsive corrections and the course-date
 * card treatment win over the older stylesheet rules.
 */

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body,
  main,
  .site-shell,
  .admin-shell,
  .admin-stage,
  .admin-main,
  .admin-content,
  .main,
  .wrap,
  .page-shell,
  .card,
  .form-card,
  .ui-page,
  .ui-grid,
  .formgrid {
    min-width: 0;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  .wrap,
  .page-shell,
  .page-shell.wide,
  .page-shell.narrow {
    width: calc(100% - 28px) !important;
    max-width: none;
  }

  .public-nav.wrap {
    width: 100% !important;
    padding-inline: 14px !important;
  }

  .public-brand {
    min-width: 0;
    gap: 8px;
  }

  .public-brand .rdc-logo {
    flex: 0 0 auto;
    width: 70px !important;
    max-width: 70px;
  }

  .public-brand-copy {
    min-width: 0;
  }

  .public-brand-copy strong,
  .public-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-brand-copy strong {
    font-size: .91rem;
  }

  .public-brand-copy small {
    font-size: .54rem;
  }

  .mobile-nav {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .mobile-menu {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }

  .mobile-menu > a,
  .mobile-menu form,
  .mobile-menu button {
    min-height: 46px;
  }

  .mobile-menu > a {
    display: flex;
    align-items: center;
  }

  .site-shell main,
  .admin-main {
    overflow: hidden;
  }

  .page-header,
  .ui-page-head,
  .admin-page-head,
  .management-hero,
  .reports-hero,
  .audit-hero,
  .home-section-head,
  .admin-section-head,
  .customer-dashboard-header,
  .customer-bookings-header,
  .notifications-hero {
    min-width: 0;
  }

  .page-header h1,
  .ui-page-head h1,
  .admin-page-head h1,
  .management-hero h1,
  .reports-hero h1,
  .audit-hero h1,
  .notifications-hero h1 {
    overflow-wrap: anywhere;
  }

  .hero-actions,
  .actions,
  .confirmation-head-actions,
  .admin-hero-actions,
  .customer-header-actions,
  .customer-bookings-header-actions,
  .footer-contact-actions {
    width: 100%;
    min-width: 0;
  }

  .hero-actions .btn,
  .actions .btn,
  .confirmation-head-actions .btn,
  .admin-hero-actions .btn,
  .customer-header-actions .btn,
  .customer-bookings-header-actions .btn,
  .footer-contact-actions a {
    max-width: 100%;
  }

  .formgrid,
  .ui-grid,
  .ui-grid.three,
  .print-specs,
  .checkin-facts,
  .audit-change,
  .payment-admin-details,
  .management-form-grid,
  .reports-filter-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .formgrid > *,
  .ui-grid > *,
  .management-form-grid > *,
  .reports-filter-fields > * {
    min-width: 0;
  }

  .input,
  select.input,
  textarea.input,
  input,
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .input,
  select.input,
  textarea.input {
    font-size: 16px !important;
  }

  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    max-width: 100%;
  }

  .tablewrap,
  .report-table-wrap,
  .course-roster-table,
  .referral-specific-list,
  .referral-ledger-table,
  .referral-admin-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table,
  .report-table {
    max-width: none;
  }

  .table th,
  .table td,
  .report-table th,
  .report-table td {
    white-space: nowrap;
  }

  .card,
  .form-card,
  .ui-empty,
  .customer-panel,
  .customer-booking-card,
  .management-record-card,
  .payment-admin-card,
  .course-session-card-v2,
  .course-intro-card,
  .course-content-card,
  .course-schedule-card,
  .course-sidebar-card {
    overflow-wrap: anywhere;
  }

  .detail-facts,
  .booking-summary-list,
  .payment-facts,
  .customer-booking-card-main,
  .customer-booking-card-footer,
  .customer-next-booking,
  .customer-panel-header,
  .customer-booking-row,
  .customer-mini-notification,
  .notification-item,
  .course-session-card-v2,
  .course-attendee-pass-body,
  .course-pass-head,
  .course-pass-bottom {
    min-width: 0;
  }

  .customer-booking-copy,
  .customer-booking-card-copy,
  .customer-next-main,
  .customer-panel-header > div,
  .notification-item-content,
  .course-session-card-v2 > div,
  .course-attendee-pass-body > * {
    min-width: 0;
  }

  .customer-booking-copy strong,
  .customer-booking-copy small,
  .customer-booking-copy > span,
  .customer-mini-notification strong,
  .customer-mini-notification small,
  .customer-booking-reference,
  .notification-item h2,
  .notification-related,
  .course-session-card-v2 strong,
  .course-session-card-v2 small {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .customer-booking-card-total,
  .payment-card-total {
    min-width: 0;
  }

  .admin-sidebar {
    max-width: calc(100vw - 28px);
  }

  .admin-header,
  .admin-header-title,
  .admin-header-actions {
    min-width: 0;
  }

  .admin-header-title h1,
  .admin-header-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-main,
  .admin-content,
  .main {
    padding-inline: 10px !important;
  }

  .site-footer {
    padding-top: 30px;
  }

  .footer-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    padding: 0 0 32px;
  }

  .footer-brand,
  .footer-column,
  .footer-contact {
    min-width: 0;
  }

  .footer-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .footer-brand-lockup {
    min-width: 0;
  }

  .footer-brand p,
  .footer-contact p {
    max-width: none;
    margin-top: 4px;
  }

  .footer-column {
    gap: 8px;
    padding-top: 4px;
  }

  .footer-column h3,
  .footer-contact h3 {
    margin: 0 0 3px;
  }

  .footer-column a,
  .footer-column button,
  .footer-contact a,
  .footer-brand-cta {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .footer-contact-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .footer-contact-actions a {
    justify-content: center;
    text-align: center;
  }

  .footer-bottom .wrap {
    display: grid;
    gap: 7px;
    min-height: 0;
    padding: 13px 0 16px;
    line-height: 1.5;
  }

  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
  }

  /* Course details: keep the journey markers numbered on mobile. The
   * original list uses display:grid, so the built-in list-item counter does
   * not increment and every marker falls back to 0. */
  .course-journey-card ol {
    counter-reset: journey-step;
  }

  .course-journey-card li {
    counter-increment: journey-step;
  }

  .course-journey-card li::before {
    content: counter(journey-step) !important;
  }

  /* Checkout progress: stack each number above its label so the four steps
   * remain readable instead of colliding horizontally. */
  body.academy-platform-v3 .booking-journey-page .course-checkout-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 5px !important;
  }

  body.academy-platform-v3 .booking-journey-page .course-checkout-steps span {
    display: flex !important;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 6px 2px !important;
    font-size: .58rem !important;
    line-height: 1.15;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: normal;
  }

  body.academy-platform-v3 .booking-journey-page .course-checkout-steps b {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
  }

  /* Room-booking calendar: never split a status word into individual
   * characters inside the seven narrow day columns. */
  body.site-shell.academy-platform-v3 .booking-calendar-card {
    min-width: 0;
    overflow: hidden;
  }

  body.site-shell.academy-platform-v3 .booking-weekdays,
  body.site-shell.academy-platform-v3 .booking-calendar-grid {
    min-width: 0;
    gap: 3px !important;
  }

  body.site-shell.academy-platform-v3 .booking-calendar-day {
    min-width: 0;
    min-height: 76px;
    padding: 6px 2px;
    overflow: hidden;
  }

  body.site-shell.academy-platform-v3 .booking-calendar-day small {
    display: block !important;
    max-width: 100%;
    margin-top: 4px;
    font-size: .48rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Some mobile browsers report a tablet-sized CSS viewport while displaying
 * a narrower screenshot. Keep the footer safe in that range as well. */
@media (max-width: 820px) {
  .site-footer {
    width: 100%;
    overflow: hidden;
  }

  .site-footer > .wrap,
  .site-footer .footer-bottom .wrap {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .site-footer .footer-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-column,
  .site-footer .footer-contact {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .wrap,
  .page-shell,
  .page-shell.wide,
  .page-shell.narrow {
    width: calc(100% - 20px) !important;
  }

  .public-brand .rdc-logo {
    width: 62px !important;
    max-width: 62px;
  }

  .public-brand-copy strong {
    font-size: .84rem;
  }

  .public-brand-copy small {
    font-size: .5rem;
  }

  .admin-header {
    padding-inline: 10px !important;
  }

  .admin-header-title h1,
  .admin-header-title strong {
    max-width: 145px;
  }

  .footer-main {
    gap: 22px !important;
  }
}

/* Compact footer on phones: keep the brand and course callout full-width,
 * but place navigation groups beside each other so the footer does not
 * become an unnecessarily long single column. */
@media (max-width: 700px) {
  .site-footer .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 18px !important;
    padding-bottom: 24px;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact {
    grid-column: 1 / -1 !important;
  }

  .site-footer .footer-brand {
    gap: 6px;
  }

  .site-footer .footer-brand p {
    margin-block: 3px 6px;
    line-height: 1.45;
  }

  .site-footer .footer-brand-cta {
    min-height: 30px;
  }

  .site-footer .footer-column {
    grid-column: auto !important;
    gap: 3px;
    padding-top: 0;
  }

  .site-footer .footer-column[aria-label="Explore"] {
    grid-column: 1 !important;
    grid-row: 2;
  }

  .site-footer .footer-column[aria-label="Account"] {
    grid-column: 2 !important;
    grid-row: 2;
  }

  .site-footer .footer-column[aria-label="Legal"] {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 3px;
  }

  .site-footer .footer-column[aria-label="Legal"] h3 {
    grid-column: 1 / -1;
  }

  .site-footer .footer-column a,
  .site-footer .footer-column button {
    min-height: 30px;
    line-height: 1.25;
  }

  .site-footer .footer-contact {
    padding: 13px 14px 14px;
  }

  .site-footer .footer-contact h3 {
    margin-bottom: 5px;
  }

  .site-footer .footer-contact p {
    line-height: 1.4;
  }

  .site-footer .footer-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
  }

  .site-footer .footer-contact-actions a {
    min-height: 32px;
    flex: 1 1 145px;
  }
}

/* Course-date cards: make the date the visual anchor on tablet and phone
 * widths. The desktop treatment is defined below as well. */
@media (max-width: 1000px) {
  body.academy-platform-v3 .course-session-card-v2 {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) minmax(155px, auto);
    gap: 18px;
    align-items: center;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #c9dfe9;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f9fc 100%);
    box-shadow: 0 12px 26px rgba(19, 70, 96, .09);
  }

  body.academy-platform-v3 .course-session-card-v2::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: linear-gradient(180deg, #12a8c5, #0875ad);
  }

  body.academy-platform-v3 .course-session-date {
    position: relative;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border: 1px solid #0b83ae;
    border-radius: 15px;
    background: linear-gradient(160deg, #0879ab, #07537f);
    box-shadow: 0 8px 18px rgba(7, 83, 127, .22);
    text-align: center;
  }

  body.academy-platform-v3 .course-session-date::before {
    margin-bottom: 6px;
    color: #9eeaf4;
    content: "COURSE DATE";
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .12em;
  }

  body.academy-platform-v3 .course-session-date b {
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    white-space: nowrap;
  }

  body.academy-platform-v3 .course-session-date small {
    margin-top: 7px;
    color: #d2f4fa;
    font-size: .6rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.academy-platform-v3 .course-session-copy h3 {
    color: #0d3f5d;
    font-size: .98rem;
    line-height: 1.3;
  }

  body.academy-platform-v3 .course-session-copy > p {
    margin-top: 7px;
    color: #587388;
    font-size: .72rem;
    line-height: 1.5;
  }

  body.academy-platform-v3 .course-session-modes {
    gap: 7px;
    margin-top: 12px;
  }

  body.academy-platform-v3 .course-session-modes span {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: .64rem;
  }

  body.academy-platform-v3 .course-session-registration {
    min-width: 155px;
    justify-items: stretch;
    align-items: stretch;
  }

  body.academy-platform-v3 .course-session-registration .btn {
    min-height: 44px;
    font-size: .74rem;
    box-shadow: 0 7px 16px rgba(8, 109, 163, .2);
  }

  body.academy-platform-v3 .course-session-registration > small,
  body.academy-platform-v3 .course-session-registration > .badge {
    text-align: center;
  }
}

@media (max-width: 700px) {
  body.academy-platform-v3 .course-session-card-v2 {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  body.academy-platform-v3 .course-session-date {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "label label" "day week";
    align-items: end;
    justify-items: start;
    padding: 12px 14px;
    border-radius: 14px;
    text-align: left;
  }

  body.academy-platform-v3 .course-session-date::before {
    grid-area: label;
    margin-bottom: 6px;
  }

  body.academy-platform-v3 .course-session-date b {
    grid-area: day;
    font-size: 1.18rem;
  }

  body.academy-platform-v3 .course-session-date small {
    grid-area: week;
    align-self: end;
    margin: 0 0 2px 9px;
    font-size: .62rem;
  }

  body.academy-platform-v3 .course-session-copy {
    min-width: 0;
    padding-inline: 2px;
  }

  body.academy-platform-v3 .course-session-copy h3 {
    font-size: .94rem;
  }

  body.academy-platform-v3 .course-session-copy .course-session-time {
    margin-top: 9px;
    padding: 9px 10px;
    font-size: .7rem;
  }

  body.academy-platform-v3 .course-session-copy .course-session-availability {
    margin-top: 5px;
    font-size: .68rem;
  }

  body.academy-platform-v3 .course-session-modes {
    gap: 8px;
    margin-top: 12px;
  }

  body.academy-platform-v3 .course-session-modes span {
    padding: 7px 10px;
    font-size: .74rem;
    line-height: 1.25;
  }

  body.academy-platform-v3 .course-session-registration {
    grid-column: auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid #d8e9ee;
  }

  body.academy-platform-v3 .course-session-registration .btn {
    width: 100%;
    min-height: 48px;
    flex: none;
  }
}

/* The course-date card is intentionally also refreshed on desktop. */
@media (min-width: 1001px) {
  body.academy-platform-v3 .course-session-card-v2 {
    position: relative;
    grid-template-columns: 118px minmax(0, 1fr) minmax(150px, 190px);
    gap: 20px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #c9dfe9;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f9fc 100%);
    box-shadow: 0 12px 26px rgba(19, 70, 96, .09);
  }

  body.academy-platform-v3 .course-session-card-v2::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: linear-gradient(180deg, #12a8c5, #0875ad);
  }

  body.academy-platform-v3 .course-session-date {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border: 1px solid #0b83ae;
    border-radius: 15px;
    background: linear-gradient(160deg, #0879ab, #07537f);
    box-shadow: 0 8px 18px rgba(7, 83, 127, .22);
    text-align: center;
  }

  body.academy-platform-v3 .course-session-date::before {
    margin-bottom: 7px;
    color: #9eeaf4;
    content: "COURSE DATE";
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .12em;
  }

  body.academy-platform-v3 .course-session-date b {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    white-space: nowrap;
  }

  body.academy-platform-v3 .course-session-date small {
    margin-top: 8px;
    color: #d2f4fa;
    font-size: .64rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.academy-platform-v3 .course-session-copy h3 {
    color: #0d3f5d;
    font-size: .98rem;
    line-height: 1.3;
  }

  body.academy-platform-v3 .course-session-copy > p {
    margin-top: 7px;
    color: #587388;
    font-size: .72rem;
    line-height: 1.5;
  }

  body.academy-platform-v3 .course-session-modes {
    gap: 7px;
    margin-top: 12px;
  }

  body.academy-platform-v3 .course-session-modes span {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: .64rem;
  }

  body.academy-platform-v3 .course-session-registration {
    min-width: 0;
    justify-items: stretch;
    align-items: stretch;
  }

  body.academy-platform-v3 .course-session-registration .btn {
    min-height: 46px;
    font-size: .76rem;
    box-shadow: 0 7px 16px rgba(8, 109, 163, .2);
  }

  body.academy-platform-v3 .course-session-registration > small,
  body.academy-platform-v3 .course-session-registration > .badge {
    text-align: center;
  }
}

/* Never clip the month in the date badge (for example, "07 No"). */
body.academy-platform-v3 .course-session-date b {
  display: block;
  min-width: max-content;
  overflow: visible;
  white-space: nowrap;
}