/*
 * Home on phones and tablets (user, 4 Nov 2026, from a phone screen recording:
 * "everything looks too heighted ... too big ... too cramped"). Loaded by the
 * Home page only (index.html), so About Us and the other pages that share the
 * R&D, Milestones and contact sections are untouched. Desktop (1024px and up)
 * keeps its layout; nothing here applies there except the hide rules for the
 * mobile-only blocks.
 */

/* ---- mobile-only blocks (rendered by the Home bundle) ---- */
.hm-mobile,
.hm-mobile-flex { display: none; }

@media (max-width: 1023px) {
  .hm-mobile { display: block; }
  .hm-mobile-flex { display: flex; }
  .hm-desk,
  .hm-dots { display: none !important; }
}

/* ---- Hero on phones (4 Nov 2026) ---- */
.hm-hero-nav { display: none; }
@media (max-width: 639px) {
  /* the visible screen, not the screen plus the browser's address bar */
  #hero-scroll-container { min-height: 100vh; min-height: 100svh; }
  /* the video fills exactly the part of the hero below the 77px header, so a
     1:2 phone clip (the designer's brief) shows whole, not cropped behind it */
  #hero-layer-bg-visual { top: 77px; height: auto; }
  /* the copy runs the full width on a phone, so the wash runs top to bottom
     (the desktop wash fades left to right and left the right side bright) */
  #hero-gradient-overlay {
    background-image: linear-gradient(180deg,
      rgba(2, 13, 30, 0.84) 0%,
      rgba(2, 13, 30, 0.62) 40%,
      rgba(2, 13, 30, 0.3) 66%,
      rgba(2, 13, 30, 0.7) 100%) !important;
  }
  #hero-cta-buttons { gap: 12px; }
  /* the copy lower on the screen (user, 4 Nov 2026: eyebrow, heading, text
     and buttons sat "very on top", 40px under the header): a share of the
     screen height below the 77px header, the same on every slide so the
     heading never jumps; on a 718px-tall phone that roughly centres the
     block above the slide bars */
  #hero-layer-content-overlay {
    padding-top: calc(77px + 11vh);
    padding-top: calc(77px + 11svh);
    /* room for the slide label and bars only (pb-32 made the hero taller
       than a short phone screen on the longest slide) */
    padding-bottom: 60px;
  }
  /* short phones (667px, iPhone SE): a smaller offset, so the longest
     slide still fits the screen with its bars */
  @media (max-height: 700px) {
    #hero-layer-content-overlay {
      padding-top: calc(77px + 8vh);
      padding-top: calc(77px + 8svh);
    }
  }
  /* slide indicator: the active slide's name over five tappable bars */
  .hm-hero-nav {
    position: absolute;
    left: 24px;
    right: 24px;
    /* close to the bottom edge (user, 4 Nov 2026: "take it more down"); the
       bar sits mid-way in its 24px tap target, about 12px off the edge */
    bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hm-hero-nav__label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
  }
  .hm-hero-nav__bars { display: flex; gap: 6px; }
  .hm-hero-nav__bar {
    flex: 1;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
  }
  /* a 3px bar inside a 24px tap target */
  .hm-hero-nav__bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    transition: background-color 0.3s ease;
  }
  .hm-hero-nav__bar[data-active]::before {
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
  }
}

/* the slide copy on phones and tablets in the section-header rhythm (user,
   4 Nov 2026: too much space between the heading, the text and the
   buttons): 20px from the heading's last line to the text, as Sectors We
   Serve has from its heading to its lead, and 24px from the text to the
   buttons. Tailwind's space-y sets a bottom margin at zero specificity.
   The two headline lines are spaced in HeroSlideContent.jsx, every width. */
@media (max-width: 1023px) {
  #hero-content-wrapper > .hm-hero-lines { margin-block-end: 12px; }
  #hero-content-wrapper > .hm-hero-lines + div { margin-block-end: 16px; }
  #hero-content-wrapper #hero-cta-buttons { padding-top: 4px; }
}

/* ---- swipe rail: track, arrows, counter ---- */
.hm-rail__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  scrollbar-width: none;
  /* bleed to the screen edges so the next card peeks in */
  margin-inline: -24px;
  padding: 4px 24px 10px;
}
.hm-rail__track::-webkit-scrollbar { display: none; }
.hm-rail__track > * {
  flex: 0 0 84%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .hm-rail__track > * { flex-basis: calc((100% - 62px) / 2); }
}
.hm-rail__nav {
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.hm-rail .hm-rail__nav { display: flex; }
/* the site's slider arrows (card-rails.css .memrail__btn), phone size */
.hm-rail__btn {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0a2740;
  color: #fff;
  box-shadow: 0 6px 16px rgba(10, 39, 64, 0.22);
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.hm-rail__btn:hover:not(:disabled) { background: #007cc3; }
.hm-rail__btn:disabled { opacity: 0.32; cursor: default; }
.hm-rail__btn:focus-visible { outline: 2px solid #007cc3; outline-offset: 3px; }
.hm-rail__count {
  min-width: 64px;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* ---- rail card: photo, label, title, line, link (dark navy, as the Home
   case-study cards) ---- */
.hm-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #03152f;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(3, 21, 47, 0.12);
}
.hm-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0a2740;
}
.hm-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.hm-card__tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #38bdf8;
}
.hm-card__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.hm-card__text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-card__cta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #38bdf8;
}

/* ---- Sectors We Serve (a swipe rail below 1024px, 4 Nov 2026) ---- */
@media (max-width: 1023px) {
  #industries .hm-sector-card { height: 460px; }
  #industries-section-header { margin-bottom: 28px; }
}
@media (max-width: 767px) {
  #industries .hm-sector-card { height: 400px; }
}

/* ---- Integrated Water Solutions ---- */
@media (max-width: 1023px) {
  #capabilities-explorer .hm-head { margin-bottom: 28px; }
  #capabilities-explorer .hm-tabwrap { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  /* the four tabs as a 2 x 2 set of buttons instead of a row that runs off
     the screen */
  #capabilities-explorer .hm-tabwrap > div { overflow: visible; border-bottom: 0; }
  #capabilities-explorer .hm-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    width: 100%;
    padding-bottom: 0;
  }
  #capabilities-explorer .hm-tabs > button,
  #capabilities-explorer .hm-tiers > button {
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
  }
  #capabilities-explorer .hm-tabs > button[data-active],
  #capabilities-explorer .hm-tiers > button[data-active] {
    border-color: rgba(0, 124, 195, 0.45);
    background: #f0f7fc;
  }
  #capabilities-explorer .hm-tabs > button > span:last-of-type { font-size: 12px; letter-spacing: 0.06em; line-height: 1.25; }
  #capabilities-explorer .hm-tab-line,
  #capabilities-explorer .hm-tier-line { display: none; }
  #capabilities-explorer .hm-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 18px;
    overflow: visible;
  }
  #capabilities-explorer .hm-tiers > button { padding: 9px 8px; align-items: center; }
  #capabilities-explorer .hm-tiers > button > span:first-child { font-size: 11px; flex: none; }
  #capabilities-explorer .hm-tiers > button > span:nth-child(2) { font-size: 11px; letter-spacing: 0.04em; line-height: 1.25; }
}
/* narrow phones: the tier labels need the room the A / B / C letter takes */
@media (max-width: 420px) {
  #capabilities-explorer .hm-tiers > button > span:first-child { display: none; }
  #capabilities-explorer .hm-tiers > button { justify-content: center; text-align: center; }
}

/* ---- R&D: the four figures two to a row ---- */
@media (max-width: 1023px) {
  #research-leadership .rdl__layout { gap: 28px; }
}
@media (max-width: 560px) {
  html body #research-leadership .rdl__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #research-leadership .rdlcard { padding: 14px 14px 16px; border-radius: 16px; min-height: 0; }
  #research-leadership .rdlcard__label { font-size: 11px; letter-spacing: 0.08em; line-height: 1.3; }
  #research-leadership .rdlcard__value { margin-top: 10px; font-size: 24px; }
  #research-leadership .rdlcard__sub { margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; line-height: 1.3; }
}

/* ---- Milestones: phone layout and step count live in milestones.css (shared
   with About Us) since 4 Nov 2026 ---- */

/* ---- Sustainability: the figures below the image, not on top of it ---- */
@media (max-width: 767px) {
  #sustainability-visual-banner { flex-direction: column; min-height: 0; }
  #sustainability-visual-banner > img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
  }
  #sustainability-visual-banner .sustain-banner__overlay { display: none; }
  #sustainability-stats-stack {
    margin: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    padding: 20px;
    background: #03152f;
  }
}

/* ---- Social Responsibility and the contact figures: two to a row ---- */
@media (max-width: 767px) {
  #csr-main-visual-grid { gap: 20px; padding-bottom: 32px; }
  #csr .csr-impact-strip--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
    padding-top: 32px;
  }
  /* the three side stories as a row of small tiles under the big card,
     instead of three 145px rows; the big card shows each story in full as
     it rotates in */
  #csr-vertical-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  #csr-vertical-pillars > div { flex-direction: column; min-height: 0; padding: 6px; }
  #csr-vertical-pillars > div > div:first-child { width: 100%; aspect-ratio: 4 / 3; }
  #csr-vertical-pillars > div > div:last-child { padding: 8px 2px 4px; justify-content: flex-start; }
  #csr-vertical-pillars > div > div:last-child > span,
  #csr-vertical-pillars > div > div:last-child > p { display: none; }
  #csr-vertical-pillars h4 { font-size: 13px; line-height: 1.3; }
  /* Ion Foundation logo (user, 4 Nov 2026: cut on a phone): its own white
     tile above the drawing, in a wider cut-out, so no browser can clip it */
  #csr-hero-card .csr-hero-logo {
    top: 14px;
    right: 14px;
    width: 112px;
    padding: 6px 8px;
    box-sizing: content-box;
    background: #fff;
    border-radius: 10px;
    z-index: 30;
  }
  #csr-hero-card .csr-hero-illustration {
    clip-path: polygon(0 0, 54% 0, 54% 20%, 100% 20%, 100% 76%, 0 76%);
  }
  /* the We Care card's three figures: labels on two lines, not four */
  #csr .csr-hero-statrow__label { font-size: 11px; letter-spacing: 0.06em; }
  /* Years, Countries, Projects and Installations as a 2 x 2 block (the
     third label ran to four lines in a row of three) */
  #impact-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
  #impact-metrics-row > div:first-child { display: contents; }
  #impact-metrics-row > * { margin-top: 0 !important; }
}