/* ==========================================================================
   CrysMed — Careers page, mobile & tablet layer (2026-10-09)
   Loaded last on careers.html, after careers.css. Pairs with js/mobile-careers.js.

   Same approach as the home page (crysmed-audit/APPROACH.md): app-style patterns modelled on
   1mg.com's mobile web app, in CrysMed's colours. Content, order and links unchanged.
   DESKTOP IS UNTOUCHED: every rule sits below 1024px or applies to touch tablets in landscape
   (1024–1366px, hover:none + pointer:coarse). PCs/laptops with a mouse never match.
   ========================================================================== */

/* ======================================================================
   Role filters ("Find your place at CrysMed")
   Was 8 fields of mismatched widths wrapping in ragged rows (and stacked down the whole
   screen on phones) before any result.
   Phones: keyword search + "Filters" button; the button opens the form as a bottom sheet.
   Tablets: one tidy, equal-width grid — keyword + Search on top, filters below.
   ====================================================================== */
@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .roles-search { display: grid; gap: 10px; margin-bottom: 16px; }
  .roles-search > .roles-search__field,
  .roles-search > .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    border-radius: 12px;
  }
  .roles-search .roles-search__field { font-size: 14px; }
  .roles-search .roles-search__field input { font-size: 14px; }
  .roles-search > .btn { justify-content: center; font-size: 14px; }
}

/* Tablets: 4 equal columns. Row 1 = keyword (3 cols) + Search; rows 2–3 = the 7 filters. */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .roles-search { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .roles-search > .roles-search__field--grow { grid-column: 1 / 4; grid-row: 1; }
  .roles-search > .btn[type="submit"] { grid-column: 4; grid-row: 1; }
  .roles-filter-btn,
  .roles-search .m-sheet-head { display: none; } /* phone-only sheet parts */
}

/* Phones */
@media (max-width: 599.98px) {
  .roles-search { grid-template-columns: minmax(0, 1fr) auto; }
  .roles-search > .roles-search__field--grow { grid-column: 1; grid-row: 1; }
  .roles-search .roles-search__field--grow input { font-size: 16px; } /* no iOS zoom on focus */
  /* everything except the keyword field lives in the sheet */
  .roles-search:not(.is-open) > :not(.roles-search__field--grow):not(.roles-filter-btn) { display: none; }

  .roles-filter-btn {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--white);
    color: var(--ink-900);
    font: inherit;
    font-size: 14px;
    font-weight: var(--fw-semibold);
  }
  .roles-filter-btn svg { color: var(--brand-700); }
  .roles-filter-btn__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    color: var(--white);
    font-size: 11px;
    line-height: 20px;
    text-align: center;
  }
  .roles-filter-btn__count[hidden] { display: none; }

  /* The form as a bottom sheet */
  .roles-search.is-open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: 88vh;
    margin: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(20, 24, 28, .18);
  }
  .roles-search.is-open > * { grid-column: 1 / -1; grid-row: auto; }
  .roles-search.is-open > [name="workType"],
  .roles-search.is-open > [name="minExperienceYears"],
  .roles-search.is-open > [name="salaryMin"],
  .roles-search.is-open > [name="salaryMax"] { grid-column: auto; }
  .roles-search.is-open > .roles-search__field { min-height: 48px; font-size: 16px; }
  .roles-search.is-open > .btn[type="submit"] { min-height: 48px; font-size: 15px; }
  .roles-search.is-open > .roles-filter-btn { display: none; }

  .roles-search .m-sheet-head {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .roles-search:not(.is-open) .m-sheet-head { display: none; }
  .m-sheet-title { margin: 0; font-size: 18px; font-weight: var(--fw-bold); color: var(--ink-900); }
  .m-sheet-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-900);
  }
  .m-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(20, 24, 28, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .m-sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
}
@media (min-width: 600px) { .m-sheet-backdrop { display: none; } }

/* ======================================================================
   Hero — portrait tablets: copy left, photo right (was photo stacked above copy, 789px tall)
   ====================================================================== */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .careers-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; }
  .careers-hero__media { order: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 599.98px) {
  .careers-hero .container { padding-block: 16px 20px; }
  .careers-hero__media { aspect-ratio: 16 / 9; }
  .careers-hero__cta .btn { min-height: 44px; }
}

/* ======================================================================
   "Explore team pathways" — phones: compact horizontal cards (photo left, text right)
   instead of 3 stacked cards with 245px photos (~1,045px → ~360px)
   ====================================================================== */
@media (max-width: 599.98px) {
  .pathway-grid { gap: 10px; }
  .pathway-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 10px;
    border-radius: 14px;
  }
  .pathway-card img {
    grid-row: 1 / 4;
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1 !important; /* the markup sets an inline 4:3 */
    border-radius: 10px;
  }
  .pathway-card b { margin: 2px 0 2px; font-size: 14px; line-height: 19px; }
  .pathway-card span { margin: 0 0 6px; font-size: 12px; line-height: 17px; }
  .pathway-card em { margin: 0; align-self: end; font-size: 12px; }
}

/* ======================================================================
   "We work with care…" + hiring process — phones: shorter photo, hiring steps as a swipeable
   row, tighter spacing (same content)
   ====================================================================== */
@media (max-width: 599.98px) {
  .mission-split { gap: 14px; }
  .mission-split img { aspect-ratio: 16 / 9 !important; }
  .mission-split__copy h2 { font-size: 20px; line-height: 1.25; }
  .mission-checklist { margin-bottom: 8px; }
  .mission-checklist li { font-size: 14px; }

  .journey-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 2px 16px 6px;
    scroll-padding-inline: 16px;
  }
  .journey-row::-webkit-scrollbar { display: none; }
  .journey-step { flex: 0 0 132px; scroll-snap-align: start; }
  .journey-step b { font-size: 13px; }
  .journey-step span { font-size: 12px; line-height: 16px; }
  .offer-note, .fraud-notice { font-size: 13px; }
}

/* ======================================================================
   Talent network form — phones: 16px inputs (no iOS zoom), 48px tall, full-width button
   ====================================================================== */
@media (max-width: 599.98px) {
  .talent-band .container { padding-block: 28px; }
  .talent-band__grid { gap: 16px; }
  .talent-form { gap: 12px; }
  .talent-form__row { gap: 12px; }
  .talent-form .field :is(input:not([type="checkbox"]):not([type="file"]), select) {
    min-height: 48px;
    font-size: 16px;
  }
  .talent-form__consent input { width: 20px; height: 20px; flex: none; }
  .talent-form__actions .btn { width: 100%; min-height: 48px; justify-content: center; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-sheet-backdrop { transition: none; }
}