/* =====================================================================
   MOBILE IMPROVEMENTS
   Everything in this file applies to phones only. Nothing here changes
   the site on a desktop or a tablet.

   It is deliberately kept separate from site.css so you can find it,
   change it, or delete it without touching the Webflow styles. Delete
   this file and mobile.js and the site goes back exactly as it was.
   ===================================================================== */

@media (max-width: 767px) {

  /* ---- Swipeable rows -------------------------------------------------
     Long stacks of cards become one row you swipe sideways, so a page of
     six portfolio pieces is one screen instead of six. The class is added
     by mobile.js, so without JavaScript the cards simply stack as before. */

  .m-swipe {
    display: flex !important;
    /* Always sideways. Below 480px the old stylesheet stacks some of these
       rows in a column, which left nothing to swipe. Jag found it, 11 Sep. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 0.9rem;
    padding: 0 1.25rem 0.5rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    scrollbar-width: none;
  }
  .m-swipe::-webkit-scrollbar { display: none; }

  .m-swipe > * {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: center;
  }

  /* two-up rows read better a bit wider, there is no third card to hint at */
  .m-swipe.m-swipe-few > * { flex-basis: 88%; }

  /* Recent projects on a phone: one card, no carousel, and tapping it
     goes to the work page. Jag, 11 Sep: it is a teaser for the work page,
     not a second portfolio. mobile.js makes the card tappable. */
  .section_work .div-block-2 > .card_scroll:nth-child(n + 2) { display: none; }
  .section_work .div-block-2 > .card_scroll { cursor: pointer; }

  /* The recent projects section is two columns, words left and cards
     right, on anything wider than 479px, so on bigger phones the cards
     were squeezed into a narrow right-hand column. On phones it now
     stacks: heading, text and button first, then the cards, then the
     dots underneath them. */
  .grid-2 {
    display: flex !important;
    flex-direction: column;
  }
  .grid-2 > .projects-text { width: 100%; }

  /* Each card's text box is a fixed 300px tall at this size, which cut
     longer descriptions off mid-sentence. Inside a swipe row it grows to
     fit, and every card in the row matches the tallest. */
  .m-swipe { align-items: stretch; }
  .m-swipe .card_scroll { height: auto; }
  .m-swipe .wrapper_contant { height: auto; }

  /* ---- The dots under each row ---------------------------------------- */

  .m-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
  }
  .m-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .m-dot.is-on { opacity: 0.9; transform: scale(1.35); }

  .m-swipe-hint {
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.5;
    margin: 0.55rem 0 0;
  }

  /* ---- Readability -----------------------------------------------------
     A few descriptions were rendering at 13px, which is small enough that
     people zoom rather than read. */

  .card_scroll p,
  .wrapper-text p,
  .wrapper_contant p,
  .card-description {
    font-size: 15px;
    line-height: 1.55;
  }

  /* ---- Pricing cards ---------------------------------------------------
     Each plan lists seven features written as full sentences, which on a
     phone made the pricing section a quarter of the whole page. The first
     three show, the rest are behind a button. Nothing is removed. */

  .feature-list.m-clamped > .feature-wrap:nth-child(n + 4) { display: none; }

  .m-more {
    appearance: none;
    display: block;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.7rem 1rem;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 2px;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0.85;
  }
  .m-more:hover { opacity: 1; }

  /* ---- The map ---------------------------------------------------------
     450px of map on a phone is most of the screen for something nobody
     came here to look at. */

  .mapdiv iframe { height: 260px !important; }

  /* ---- FAQ rows -------------------------------------------------------
     The questions were centred, which on a narrow screen means every one
     that runs to two lines sits in a ragged pyramid. Left aligned reads
     faster, and the rows get tightened up. */

  .faq_question {
    text-align: left;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
  .faq_question h3 { text-align: left; }
  .faq_accordion { margin-bottom: 0; }

  /* ---- Tap targets -----------------------------------------------------
     The social icons were 32px squares. Anything under about 44px is
     fiddly with a thumb, so they get padding rather than a bigger icon. */

  .socialmedialink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    margin: -7px;
  }

  /* Menu links get a proper row height once the menu is open. */
  .navbar_menu .w-nav-link {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
}

/* Respect people who have asked their phone to reduce motion. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .m-swipe { scroll-behavior: auto; }
  .m-dot { transition: none; }
}