/*
 * Phones, every page except Home (user, 4 Nov 2026: "optimise the entire
 * website for mobile"). Linked after data-tables.css on every page by
 * scripts/apply-footer.mjs. Home has its own assets/home-mobile.css.
 * Everything here is for phones (below 768px) except the last block, the
 * 11px text floor, which holds at every width.
 */

/* ---- Banners: a photo banner is 65% of the phone screen ----
   (user, 4 Nov 2026: Semiconductor Solutions showed a 230px strip; the
   banners were first made full-screen like Home's hero, then the user set
   them at about 65% of it: "they don't need to be that much big"). Long
   copy can still make a banner taller. Only banners with a photo or video;
   the dark text-only banners (Digital Solutions, Contact us, 14 Engineering
   pages) keep their own height. The copy stays at the foot of the banner
   (content.css aligns it to the bottom below 860px). */
@media (max-width: 767px) {
  .page-banner:not(.memsmart):has(> .page-banner__media img, > .page-banner__media video),
  .hero-banner:has(> .hero-banner__media img, > .hero-banner__media video) {
    min-height: 65vh !important;
    min-height: 65svh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  /* the stacked hero (About Us, R&D, Careers, Sustainability, Sectors) sized its
     copy row from a fixed aspect ratio; as a column it fills the box */
  .hero-banner:has(> .hero-banner__media img, > .hero-banner__media video) {
    display: flex;
    flex-direction: column;
  }
  .hero-banner:has(> .hero-banner__media img, > .hero-banner__media video) > .hero-banner__inner {
    flex: 1 0 auto;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    /* clear of the 77px header when long copy sets the height, as the
       page banners do (content.css: 80px + 40px) */
    padding-top: 120px !important;
  }
}

/* ---- Long card stacks on phones (4 Nov 2026) ----
   Directory and document grids go two to a row, as Home's R&D figures do;
   story cards become a finger-swipe row with the next card peeking in, as
   Home's carousels do. Same cards, same content. */
@media (max-width: 767px) {
  /* Industrial sectors index: 19 cards, 7,600px in one column */
  html body .ms-index-grid:not(.is-rail) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html body .ms-index-grid:not(.is-rail) .ms-index-card__body { gap: 8px; padding: 14px; }
  html body .ms-index-grid:not(.is-rail) .ms-index-card__title { font-size: 15px; }
  html body .ms-index-grid:not(.is-rail) .ms-index-card__lead { font-size: 13px; line-height: 1.5; }
  html body .ms-index-grid:not(.is-rail) .ms-index-card__cta { padding-top: 10px; letter-spacing: 0.1em; }

  /* Downloads: its 150px columns did not fit the 308px group, so every
     brochure sat alone on its row */
  html body .dl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html body .dl-card__media { height: 150px; padding: 40px 12px 12px; }
  html body .dl-card__body { padding: 12px; }
  html body .dl-card__title { font-size: 13px; }

  /* Sustainability: reports and policies */
  html body .handoff-page .apply-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html body .handoff-page .apply-grid .apply-card { padding: 16px; border-radius: 16px; }
  html body .handoff-page .apply-grid .apply-card__icon { width: 36px; height: 36px; margin-bottom: 12px; }
  html body .handoff-page .apply-grid .apply-card__value { font-size: 14px; line-height: 1.35; }
  html body .handoff-page .apply-grid .apply-card__cta { margin-top: 10px; font-size: 12px; }

  /* Careers, Life here: the photos two to a row under the heading */
  html body .life__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }
  html body .life__mosaic > .life__say { grid-column: 1 / -1; }
  html body .life__mosaic > figure { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; margin: 0; }
  html body .life__mosaic > figure img { width: 100%; height: 100%; object-fit: cover; }

  /* CSR stories: six portraits with their stories, a swipe row */
  html body .csr-stories__featured {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 4px 16px 10px;
    scroll-padding-inline: 16px;
  }
  html body .csr-stories__featured::-webkit-scrollbar { display: none; }
  html body .csr-stories__featured > * { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ---- Process flowcharts on the sector pages (phones) ----
   (user, 4 Nov 2026, Automotive: only part of the chart showed). The chart
   was held at 640px inside a 358px box and scrolled sideways; on a phone it
   fits the width, whole (13 of the 15 charts are taller than wide). */
@media (max-width: 767px) {
  html body .ms-flowchart { overflow-x: visible; }
  html body .ms-flowchart img { min-width: 0; width: 100%; }
  /* Speciality Chemicals: the AutoChem controller is a product cut-out on
     white; the card frame cropped its top and bottom on a phone */
  html body .pcard__frame img[src*="autochem"] { object-fit: contain !important; background: #fff; }
}

/* ---- Get in touch and footer on phones, as on Home (4 Nov 2026) ----
   Every page carries Home's contact section; on Home it has its own phone
   treatment (home-mobile.css), copied here: the same heading size and
   padding, and Years, Countries, Projects and Installations as a 2 x 2 block
   (in a row of three the third label ran to four lines). */
@media (max-width: 767px) {
  html body #contact-wrapper { padding-top: 48px; padding-bottom: 48px; }
  html body #contact-deck h2 { font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; }
  html body #impact-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
  html body #impact-metrics-row > div:first-child { display: contents; }
  html body #impact-metrics-row > * { margin-top: 0 !important; }
}

/* ---- 11px text floor, every width (4 Nov 2026) ----
   The site's smallest text is 11px, matched to Home. These labels, counts and
   badges were still 9 to 10.5px; same weight, colour and spacing, only the
   size moves. */
html body .origin-strip__year,
html body .gp-stat__label,
html body .hall__caption,
html body .jrny__where,
html body .jrny__when,
html body .jrny__year,
html body .jrny__tenure,
html body .aw-filter__n,
html body .blog-filter__n,
html body .ms-download__icon,
html body .handoff-page .vstage__node,
html body .csr-paths li span,
html body #journey-showcase-footer {
  font-size: 11px;
}