/* P:HC — mobile layer.
   One media-query sheet loaded in every page's <helmet> as media="screen" — a Letter
   page is 816px wide, so without that the phone tiers would fire when printing and
   fight print.css, which owns print alone. Desktop is never touched:
   every rule sits inside a max-width query and only overrides layout geometry
   (columns, flow, absolute → static, type floors, tap targets). Inline styles are
   the page's authoring medium, so overrides carry !important by necessity. The
   user's direct-edit sheet (<style id="__om-edit-overrides">) still wins — it is
   later in the cascade.

   Hooks: elements carrying data-mob="…" opt into a named mobile treatment.
   Breakpoints: 900px (tablet reflow + wide design canvases) · 760px (phone chrome) ·
   430px (tight phone). Every selector here matches a live element — keep it that way. */

/* ============================== 900 — tablet =============================== */
@media (max-width: 900px) {
  /* iOS: a font-size under 16px on a focused field zooms the whole viewport, and
     landscape rotation inflates body text unless text-size-adjust is pinned. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  input, textarea, select { font-size: 16px !important; }
  /* the default tap flash is useful feedback; brand it rather than remove it */
  a, button, [role="button"], summary, input, textarea, select {
    -webkit-tap-highlight-color: rgba(66, 126, 227, .18);
  }

  [data-mob="hero-grid"],
  [data-mob="about-top"],
  [data-mob="teams-grid"] { grid-template-columns: minmax(0, 1fr) !important; }

  [data-mob="about-mosaic"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  [data-mob="about-mosaic"] > * { grid-area: auto !important; }
  [data-mob="about-mosaic"] > [data-mob="about-claim"] {
    grid-column: 1 / -1 !important;
    order: -1;
  }

  /* four 168px-wide doors do not fit an 88%-wide wrap below ~900 */
  [data-mob="doors-grid"] { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  [data-mob="doors-grid"] > a { width: 100% !important; box-sizing: border-box; }
}

/* =============================== 760 — phone =============================== */
@media (max-width: 760px) {

  /* ---- page shell ------------------------------------------------------- */
  html, body { overflow-x: hidden; }
  img, svg, video, canvas, iframe { max-width: 100%; }

  /* ---- fixed site header: logo · Atlas · menu -------------------------- */
  [data-mob="site-header"] { padding: 10px 16px !important; gap: 12px !important; }
  [data-mob="site-header"] nav { gap: 12px !important; }
  [data-mob="site-header"] nav a[href^="#"],
  [data-mob="site-header"] nav span[aria-hidden="true"] { display: none !important; }
  [data-mob="site-header"] nav button { padding: 11px 8px !important; }

  /* ---- home hero ------------------------------------------------------- */
  [data-mob="hero-grid"] {
    gap: 4px !important;
    padding: 8px 22px 0 !important;
    text-align: left;
  }
  [data-mob="hero-grid"] h1 { font-size: clamp(34px, 10.4vw, 46px) !important; }
  [data-mob="hero-art"] {
    min-height: 46vh;
    justify-content: flex-start !important;
  }
  [data-mob="hero-art"] img[src*="Man-HomePage"] {
    max-height: 46vh !important;
    object-position: bottom left !important;
  }

  /* ---- value banners: the authored 1440×760 canvas is replaced by a
          portrait composition in JS; only the chrome needs re-placing ---- */

  /* ---- about: statement + shy-block mosaic ---------------------------- */
  [data-mob="about-sec"] { padding: 52px 22px 64px !important; }
  [data-mob="about-top"] { gap: 26px !important; }
  [data-mob="about-mosaic"] {
    margin-top: 46px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  [data-mob="about-mosaic"] > * { height: 132px !important; max-width: none !important; margin: 0 !important; }
  [data-mob="about-mosaic"] > [data-mob="about-claim"] { height: auto !important; padding: 4px 0 8px !important; }
  [data-mob="about-mosaic"] > [data-mob="about-claim"] h2 { font-size: clamp(32px, 9vw, 42px) !important; }

  /* ---- applications / CTA -------------------------------------------- */
  [data-mob="cta-sec"] { padding: 40px 18px 68px !important; }
  [data-mob="cta-logos"] { gap: 26px !important; margin-bottom: 26px !important; }
  [data-mob="cta-tabs"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100%;
  }
  [data-mob="cta-tabs"] > button { min-width: 0 !important; padding: 14px 12px !important; }
  [data-mob="cta-tabs"] > button:first-child { grid-column: 1 / -1; }
  /* project-stream pop-up: the desktop sheet spends 112px of a 370px phone on side
     padding, and three columns leave ~90px of measure inside what's left */
  [data-mob="stream-page"] { padding: 56px 18px 32px !important; }
  [data-mob="stream-stats"] { grid-template-columns: 1fr 1fr !important; gap: 18px 14px !important; }
  [data-mob="stream-stats"] > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  [data-mob="stream-cols"] { grid-template-columns: 1fr !important; gap: 20px !important; text-align: left !important; }

  /* ---- goals mosaic: rows of flat blocks become a 2-up grid ---------- */
  [data-mob="goals-sec"] { padding: 46px 18px 54px !important; }
  [data-mob="goals-rows"] { gap: 10px !important; }
  [data-mob="goals-row"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    height: auto !important;
  }
  [data-mob="goals-row"] > * { flex: none !important; }
  [data-mob="goals-row"] > * > [data-goal-block],
  [data-mob="goals-row"] [data-goal-block] { height: 108px !important; }
  [data-mob="goals-row"] > [data-mob="goals-claim"] {
    grid-column: 1 / -1 !important;
    font-size: clamp(27px, 7.6vw, 36px) !important;
    padding: 6px 0 10px !important;
  }


  /* ---- project streams ----------------------------------------------- */
  [data-mob="streams-sec"] { min-height: 0 !important; padding: 44px 0 48px !important; }
  [data-mob="streams-frame"] { width: 100% !important; padding: 22px 16px 28px !important; }
  [data-mob="streams-row"] { flex-wrap: wrap !important; height: auto !important; }
  [data-mob="streams-row"] > * { flex: 1 1 46% !important; min-height: 82px; }
  [data-mob="streams-row"] > *:empty { display: none !important; }
  [data-mob="tile"] {
    font-size: 22px !important;
    letter-spacing: 1.2px !important;
    min-height: 74px !important;
    padding: 10px 8px !important;
    white-space: normal !important;
  }


  /* ---- teams ---------------------------------------------------------- */
  [data-mob="teams-frame"] { width: 100% !important; padding: 34px 20px 40px !important; }
  [data-mob="teams-grid"] { gap: 26px !important; }
  [data-mob="teams-mascot"] { justify-content: center !important; }
  [data-mob="teams-mascot"] > div { width: 56% !important; }
  [data-mob="teams-tabs"] { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin: 30px 0 18px !important; }
  [data-mob="teams-tabs"] > button { padding: 14px 4px !important; }
  [data-mob="teams-tabs"] svg { width: 32px !important; height: 32px !important; }
  [data-mob="teams-cards"] { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 12px !important; }
  [data-mob="teams-cards"] > * { grid-column: auto / span 1 !important; grid-row: auto !important; }
  [data-mob="teams-member"] { min-height: 340px; }
  [data-mob="teams-card"] { flex-direction: column !important; gap: 20px !important; padding: 22px 18px 26px !important; }

  /* ---- “read up on how P:HC helps” door grid ------------------------- */
  [data-mob="doors-grid"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  [data-mob="doors-grid"] > a { width: 100% !important; box-sizing: border-box; }
  [data-mob="doors-sec"] { padding: 42px 0 52px !important; }

  /* ---- join / contact + footer ---------------------------------------- */
  [data-mob="contact-sec"] { padding: 48px 0 46px !important; }
  [data-mob="contact-wrap"] { width: 100% !important; padding: 0 22px !important; box-sizing: border-box; }
  [data-mob="dept-grid"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  [data-mob="footer-grid"] { width: 100% !important; box-sizing: border-box; padding: 0 22px !important; grid-template-columns: 1fr !important; gap: 28px !important; }
  [data-mob="footer-bottom"] { width: 100% !important; box-sizing: border-box; padding: 22px 22px 0 !important; margin-top: 30px !important; flex-direction: column !important; align-items: flex-start !important; }

  /* ---- modals & sheets: full-height on a phone ------------------------ */
  [data-mob="modal"] {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    max-height: 90vh !important;
    padding: 6px !important;
  }

  /* goal detail card: the 1.68 container-query composition unfolds into flow,
     so every line is set at reading size instead of a fraction of card height */
  [data-goal-card] {
    aspect-ratio: auto !important;
    container-type: normal !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 26px 20px 24px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }
  [data-goal-card] > * {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }
  [data-goal-card] [data-goal-icon],
  [data-goal-card] [data-goal-blocks] { display: none !important; }
  [data-goal-card] [data-goal-num] { font-size: 52px !important; line-height: .85 !important; }
  [data-goal-card] [data-goal-text] { text-align: left !important; }
  [data-goal-card] [data-goal-text] h3 { font-size: 22px !important; line-height: 1.22 !important; }
  [data-goal-card] [data-goal-text] p { font-size: 15.5px !important; line-height: 1.45 !important; }
  [data-goal-card] > [role="img"] { height: 150px !important; flex: none; }
  [data-goal-card] > [data-media-slot] { height: 180px !important; }

  [data-mob="sheet"] {
    width: 100% !important;
    max-width: none !important;
    height: 94vh !important;
    max-height: 94vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
  [data-mob="sheet-sm"] {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 26px 20px 30px !important;
  }
  [data-mob="sheet-scrim"] { align-items: flex-end !important; padding: 0 !important; }
  [data-mob="sheet-grid"] { grid-template-columns: 1fr !important; }
  [data-mob="sheet-cols"] { grid-template-columns: 1fr !important; }
  [data-mob="sheet-pad"] { padding: 46px 20px 30px !important; }
  [data-mob="sheet-btnrow"] { flex-direction: column; gap: 12px !important; margin: 26px 0 22px !important; }
  [data-mob="sheet-art"] { display: none !important; }

  /* ---- tap targets ---------------------------------------------------- */
  button, [role="button"], summary { touch-action: manipulation; }
}


/* ===== 900 — landscape design canvases give out before this ================
   ValueBanners, My City and the philosophy cards are authored as wide
   compositions; below ~900 a uniform downscale drops their type under 26px, so
   each one re-composes in portrait (the JS breakpoints in phc-site-kit.jsx use
   the same 900 line). ========================================================= */
@media (max-width: 900px) {
  /* cloud cards: the sky's 10.5px caption size is a scaled-canvas artefact */
  [data-mob="cloud"] > div {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    border-radius: 22px !important;
    text-align: left !important;
  }

  /* streams explainer bands */
  [data-mob="streams-band"] { align-self: stretch !important; max-height: none !important; }
  [data-mob="streams-band"][aria-expanded="false"] { width: 74% !important; }
  [data-mob="streams-band"][aria-expanded="true"] { width: 100% !important; border-radius: 22px !important; }
  [data-mob="streams-band"] p { font-size: 14.5px !important; padding: 16px 20px !important; }

  /* ---- philosophy: one card at a time, in normal flow ---------------- */
  #philosophy {
    height: auto !important;
    min-height: 0 !important;
    padding: 26px 0 22px !important;
  }
  #philosophy > [role="region"] {
    position: relative !important;
    inset: auto !important;
    overflow: visible !important;
  }
  #philosophy [data-phil-on] { display: none !important; }
  #philosophy [data-phil-on="1"] {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 22px;
    box-sizing: border-box;
  }
  /* every authored absolute child returns to the flow, full width */
  #philosophy [data-phil-on="1"] > * {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
    text-align: left !important;
    box-sizing: border-box;
  }
  #philosophy [data-phil-on="1"] > [data-phil="title"] {
    order: 1;
    font-size: clamp(28px, 8vw, 38px) !important;
  }
  #philosophy [data-phil-on="1"] > [data-phil="panel"] {
    order: 2;
    text-align: left !important;
    font-size: 15px !important;
    padding: 20px 22px !important;
  }
  #philosophy [data-phil-on="1"] > [data-phil="ring"] {
    order: 3;
    aspect-ratio: 1 !important;
    width: min(100%, 340px) !important;
    border-width: 16px !important;
    align-self: center;
  }
  #philosophy [data-phil-on="1"] > [data-phil="ring"] > * {
    width: 76% !important;
    max-height: 74% !important;
    overflow: auto !important;
    text-align: center !important;
    font-size: 14px !important;
  }
  #philosophy [data-phil-on="1"] > [data-phil="art"] { order: 4; height: 210px !important; position: relative !important; }
  #philosophy [data-phil-on="1"] > [data-phil="art-loose"] { order: 5; height: 190px !important; background-position: bottom center !important; }
  /* decorative circles: out of the way on a phone */
  #philosophy > img { display: none !important; }
  #philosophy [data-mob="phil-chrome"] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 22px 22px 0 !important;
    flex-wrap: wrap;
    gap: 14px !important;
  }
  /* The dots are the only way to jump to a specific one of the eight cards (the arrows
     only step), so each 16px pip keeps its size and gains a ~34px hit area behind it.
     The 20px gap is what keeps those areas from overlapping (2×9px expansion + 2px). */
  #philosophy [data-mob="phil-chrome"] [role="group"] { gap: 20px !important; }
  [data-mob="phil-dot"] { position: relative; }
  [data-mob="phil-dot"]::after { content: ""; position: absolute; inset: -9px; }
  [data-mob="phil-spacer"] { height: 22px !important; }
}

/* ============================ 430 — tight phone ============================ */
@media (max-width: 430px) {
  [data-mob="about-mosaic"],
  [data-mob="goals-row"],
  [data-mob="doors-grid"] { grid-template-columns: 1fr 1fr !important; }
  [data-mob="cta-tabs"] { grid-template-columns: 1fr !important; }
  [data-mob="cta-tabs"] > button:first-child { grid-column: auto; }
  [data-mob="streams-row"] > * { flex: 1 1 100% !important; }
  [data-mob="hero-grid"] { padding: 8px 18px 0 !important; }
  [data-mob="contact-wrap"], [data-mob="footer-grid"], [data-mob="footer-bottom"] { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ===== touch targets on the sub-pages ======================================
   The record pages were built fluid already; what a phone still needs from
   them is finger-sized hit areas on the small navigational marks. Geometry is
   untouched — the hit area grows behind the mark via ::after. An expansion is
   only safe if it stays inside the gap between neighbours, so where a rail is
   too tight the gap is widened in the same rule. Atlas owns its own -8px
   expansion for [data-mm]/[data-tx] and needs nothing here. ================ */
@media (max-width: 900px) {
  /* Community's rail: 12px diamonds (21px box) in a JS-set 14px gap. Widening the
     gap to 24px is what makes a 41px hit area possible without neighbours stealing
     taps — the two numbers have to move together. */
  [data-mob="rail"] { gap: 24px !important; }
  [data-node] { position: relative; }
  [data-node]::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  [data-disclose] { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  [data-mob="vb-dot"] { width: 40px !important; height: 40px !important; }
  [data-mob="cta-logos"] > button { min-height: 44px !important; padding: 8px 4px !important; }

  /* Videos' reading room: an inline flex row whose rail is clamp(230px,22vw,290px) —
     the 230px FLOOR is the fault, not the 22vw, so at 375px the rail keeps 230px and
     leaves the article 145px (101px inside its padding), narrow enough that the word
     "Screening" paints outside its box. The rail stacks above the article and the floor
     is released; same recomposition as hero-grid / teams-grid. */
  [data-mob="reader"] { flex-direction: column !important; }
  [data-mob="reader-rail"] {
    position: static !important;
    align-self: stretch !important;
    width: auto !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid #26314A !important;
    padding: 20px clamp(18px, 5vw, 40px) 22px !important;
  }
  [data-mob="reader-body"] {
    align-self: stretch !important;
    max-width: none !important;
    padding: 26px clamp(18px, 5vw, 40px) 84px !important;
  }
  /* the sub-page header's back arrow and side links are inline text; grow the hit area */
  [data-mob="page-header"] a { min-height: 44px; display: inline-flex; align-items: center; }
}