/* Home page on phones and tablets (touch screens up to 900px wide, or any window
   narrower than 601px). With a mouse or trackpad the page is untouched, including
   fullPage's one-section-at-a-time scrolling. */

/* Where fullPage hands scrolling back to the browser (touch screens and very small
   windows; body.fp-responsive), the page still moves one section at a time: each
   section fills the screen and scrolling snaps to the next one. A section taller than
   the screen (the projects grid on a phone) scrolls through first, then snaps on. */
html:has(body.fp-responsive) { scroll-snap-type: y mandatory; }
body.fp-responsive #mainpage > .section { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100svh; }
@media (hover: none) and (pointer: coarse), (max-width: 600px) {
  /* Sections fade their content in only once fullPage marks them active, which can lag
     behind native scrolling on a tall screen; show it as soon as it scrolls into view. */
  body.fp-responsive #mainpage .section .anim :is(.anim-1, .anim-2, .anim-3, .anim-4, .zoomout-1, .fade-1, .fade-2, .fade-3, .fade-4),
  body.fp-responsive #mainpage .section .anim.translateUp,
  body.fp-responsive #mainpage .section .anim.translateDown { opacity: 1; transform: none; }
  /* With the sections stacked, the "next section" arrows sit on top of the content below
     them, and the "last updated" note would repeat right under itself */
  body.fp-responsive #mainpage .section:not(.section-home) .section-footer.scrolldown { display: none; }
  body.fp-responsive #mainpage .section[data-section="projects"] .last-updated-banner { display: none; }
}

@media (max-width: 900px) and (hover: none) and (pointer: coarse), (max-width: 600px) {
  /* Fixed social row and "Think" mark sat over the content while scrolling;
     the same links are in the Contact section. */
  body.fp-responsive .page-footer .footer-left,
  body.fp-responsive .page-footer .footer-right { display: none; }

  /* The faint "GUJR / Think" backdrop sits at the bottom of the screen, as on desktop,
     instead of across the middle where it ran into the hero text */
  .page-cover .cover-bg-mask img.center-v { object-position: center bottom; }
  .page-cover .cover-bg.bg-img { background-position: center bottom !important; }

  /* Hero: name and tagline inside the screen, client logos readable */
  #mainpage .section-home .section-wrapper { min-height: calc(100svh - 32px) !important; }
  #mainpage .section-home .section-wrapper { display: flex; flex-direction: column; justify-content: center; }
  #mainpage .section-home .section-content .row { justify-content: center; margin: 0; }
  #mainpage .section-home .center-title { width: 92%; max-width: 640px; margin: 0 auto; }
  #mainpage .section-home .section-content br { display: none; }
  #mainpage .section-home .section-content .row ~ .row { margin-top: 3rem; }
  #mainpage .section-home .section-content .row ~ .row .center-title { width: 100%; }

  /* The "last updated" note shows once, at the top of About */
  #mainpage .section[data-section="projects"] .last-updated-banner { display: none; }
  #mainpage .last-updated-banner .last-updated-banner-text { font-size: .75rem; }

  /* About: the process diagram as text */
  #mainpage .section[data-section="about"] .section-wrapper { padding-left: 16px; padding-right: 16px; }
  .hm-about { display: block; text-align: left; color: #fff; font-family: "Open Sans", sans-serif; max-width: 640px; margin: 0 auto; }
  .hm-about p { opacity: 1; }
  .hm-about > p { font-size: 15px; line-height: 1.6; margin: 0 0 1.75rem; }
  .hm-about ul { list-style: none; margin: 0; padding: 0; }
  .hm-about li { list-style: none !important; }
  .hm-about li::marker { content: none; }
  /* Two phases, as the brackets group the five stages on desktop */
  .hm-phase { border-top: 1px solid rgba(255, 255, 255, .55); padding-top: .9rem; margin-bottom: 1.75rem; }
  .hm-phase-title { font-size: 13px; letter-spacing: .03em; color: #cfcfcf; background: #232323; padding: .55rem .8rem; margin: 0 0 1.1rem; text-align: center; }
  .hm-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 14px; align-items: start; }
  .hm-step h4 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 .7rem; padding-top: .6rem; position: relative; }
  .hm-step h4::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: #d33d45; }
  .hm-step h4 em { font-style: normal; color: #d33d45; margin-right: .25rem; }
  .hm-step li { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-items: start; font-size: 13px; line-height: 1.35; margin-bottom: .55rem; }
  .hm-step li img { width: 20px; height: 20px; object-fit: contain; }
  .hm-about br.hd { display: none; }
  .hm-step li small { grid-column: 2; display: block; font-size: 11.5px; color: #a8a8a8; line-height: 1.4; margin-top: .2rem; }
  .hm-step li small span:not(:last-child)::after { content: ","; }

  /* Contact: the three link icons in one row */
  #mainpage .section-contact ul.social .big-icon { padding: 24px 22px; }

  /* Projects: tabs in one row, no empty placeholder cards */
  #mainpage .section[data-section="projects"] .container > .row { flex-wrap: nowrap; margin: 0; justify-content: space-between; }
  #mainpage .section[data-section="projects"] .container > .row > [class*="col-"] { flex: 1 1 0; max-width: none; padding: 0 2px; text-align: center; }
  #mainpage .section[data-section="projects"] .container > .row label { margin: 0; padding: .4rem .1rem .5rem; font-size: 11px; letter-spacing: .04em; line-height: 1.3; display: block; }
  #mainpage .section[data-section="projects"] .container > .row label .fa { font-size: 16px; margin-bottom: .25rem; }
  #mainpage .section[data-section="projects"] .tagged.invisible { display: none; }
  #mainpage .section[data-section="projects"] .tagged { margin-bottom: 1.75rem !important; }
  #mainpage .section[data-section="projects"] .img-avatar-beta .legend p { margin-bottom: 0; }

  /* Arts: ragged right reads better than justified text on a narrow column */
  #mainpage .section[data-section="art-intro"] .section-content.reduced { width: 100% !important; max-width: 560px; padding: 0 16px; }
  #mainpage .section[data-section="art-intro"] .title-desc p { text-align: left !important; }
}

@media (min-width: 600px) and (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .hm-phase:last-child .hm-steps { grid-template-columns: 1fr 1fr 1fr; }
  .hm-step li { font-size: 14px; }
  #mainpage .section[data-section="projects"] .container > .row label { font-size: 13px; }
}