/* Mobile layer for erdapex.com  (phones / small tablets).
   Pages are styled inline, so these rules key off the m-* classes added to the
   markup and use !important to win over the inline values. Desktop (>820px)
   is unchanged. */

@media (max-width: 820px) {
  html, body { overflow-x: clip; }

  /* nav: brand on top, links as one swipeable row */
  .m-nav { flex-wrap: wrap !important; gap: 8px 16px !important; padding: 12px 20px 8px !important; }
  .m-nav > div { width: 100%; gap: 22px !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .m-nav > div::-webkit-scrollbar { display: none; }
  .m-nav > div a { flex: 0 0 auto; padding-top: 8px !important; padding-bottom: 8px !important; }

  /* side padding + section rhythm */
  .m-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .m-sec { padding-top: 60px !important; }
  .m-sec-s { padding-top: 32px !important; }
  .m-footer { margin-top: 60px !important; }

  /* hero */
  #top { min-height: 0 !important; }
  .m-hero-top { grid-template-columns: 1fr !important; gap: 0 !important; padding-top: 24px !important; }
  .m-hero-top > :last-child { display: none !important; }      /* 01-06 mini index */
  .m-hero-main { grid-template-columns: 1fr !important; gap: 28px !important; padding-top: 48px !important; padding-bottom: 28px !important; }
  h1 { font-size: clamp(48px, 16vw, 100px) !important; }

  /* cards with big desktop padding (contact page) */
  .m-card { padding: 32px 22px !important; border-right: 0 !important; }
  .m-hdr { padding: 36px 0 28px !important; }

  /* headings */
  h2 { font-size: 30px !important; }
  .m-head { flex-wrap: wrap !important; gap: 8px 16px !important; }

  /* column grids */
  .m-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .m-stack > *, .m-g2 > *, .m-g6 > * { min-width: 0; overflow-wrap: anywhere; }
  .m-g2, .m-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .m-g6 > * { border-bottom: 1px solid rgba(242,242,243,.16); }
  .m-tabs { grid-template-columns: repeat(3, 1fr) !important; }
  .m-tl { grid-template-columns: 58px 1fr !important; gap: 14px !important; }

  /* boxed stat strip: stack, swap right borders for bottom borders */
  .m-stats { grid-template-columns: 1fr !important; gap: 0 !important; }
  .m-stats > * { border-right: 0 !important; border-bottom: 1px solid rgba(242,242,243,.16) !important; }
  .m-stats > :last-child { border-bottom: 0 !important; }

  /* 2027 calendar: table row -> compact card */
  .m-cal { grid-template-columns: 62px 1fr !important; }
  .m-cal-head { display: none !important; }
  .m-cal > :nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
  .m-cal > :nth-child(2) { grid-column: 2; grid-row: 1; padding-bottom: 4px !important; }
  .m-cal > :nth-child(3) { grid-column: 2; grid-row: 2; padding-top: 0 !important; padding-bottom: 6px !important; }
  .m-cal > :nth-child(4) { grid-column: 2; grid-row: 3; text-align: left !important; padding: 0 12px 16px !important; color: #4d8fe0 !important; }

  /* media */
  img { max-width: 100%; }
  .m-portrait { height: 340px !important; }

  /* forms: 16px stops iOS zooming on focus; comfortable tap targets */
  input, select, textarea { font-size: 16px !important; min-height: 46px; }
  button, [type="submit"] { min-height: 44px; }
}

@media (max-width: 480px) {
  /* keep the Contact button on screen: drop the two in-page anchors from the nav row */
  .m-nav a[href$="#career"], .m-nav a[href$="#awards"] { display: none !important; }
  h2 { font-size: 26px !important; }
  .m-tabs { grid-template-columns: repeat(2, 1fr) !important; }
}