/* =============================================================================
   ttl-mobile.css  —  the safety net under the viewport tag
   -----------------------------------------------------------------------------
   Loaded by ttl-seo.php, and only when $TTL_SEO_VIEWPORT is true. The two are
   a pair: the tag tells a phone to render the page at its real width, and this
   stops the parts of the site that were built at fixed pixel widths from
   hanging off the side when it does.

   Deliberately NARROW in scope. Everything here is inside a max-width media
   query, so a desktop browser downloads it and applies none of it -- the
   desktop layout is untouched, byte for byte. If a page still looks wrong on a
   phone, set $TTL_SEO_VIEWPORT back to false and both the tag and this file
   are gone in one edit.

   It fixes the shape of things, not the design. Anything that needs real
   responsive work still needs it; this is what stops the site being judged
   not-mobile-friendly while that happens.
   ============================================================================= */

@media (max-width: 900px) {

  /* -------------------------------------------------------------------------
     THE UNIVERSAL RULE
     Nothing may be wider than the screen. Fixed widths in inline styles and in
     the old stylesheets are overridden; anything already narrower is left
     exactly as it is, because max-width only ever takes width away.
     ---------------------------------------------------------------------- */
  img, video, iframe, embed, object, canvas, svg, table, pre {
    max-width: 100% !important;
    height: auto;
  }
  iframe, video { aspect-ratio: 16 / 9; }

  /*  A table cannot always be made narrow honestly -- a schedule with six
      columns is six columns. It scrolls inside its own box instead, which
      keeps the PAGE from scrolling sideways. That is the difference between
      a wide table and a broken layout. */
  .table-responsive, .ttl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* -------------------------------------------------------------------------
     THE OLD FIXED WIDTHS
     The blocks named in the note in ttl-seo.php: 304px sidebars, 675px text
     columns, and the container widths around them.
     ---------------------------------------------------------------------- */
  .layout, .container, .content, .main, .wrapper,
  .left_side, .right_side, .sidebar, .side_bar,
  .col_left, .col_right, .content_left, .content_right {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }

  /*  Two columns become one. Floats are cleared above; this catches the
      table-based and flex-based versions of the same idea. */
  .row, .cols, .two-col, .three-col { display: block !important; }
  .row > *, .cols > * { width: auto !important; float: none !important; }

  /* -------------------------------------------------------------------------
     READABILITY
     Type that was sized for a 1200px column, on a 390px screen.
     ---------------------------------------------------------------------- */
  body { -webkit-text-size-adjust: 100%; }
  h1 { font-size: clamp(22px, 6.2vw, 34px) !important; line-height: 1.18; }
  h2 { font-size: clamp(19px, 5.2vw, 26px) !important; line-height: 1.22; }
  h3 { font-size: clamp(17px, 4.6vw, 21px) !important; }

  /*  Long unbroken strings -- course ids, exam codes, URLs printed as text --
      are the usual cause of a page that scrolls sideways for one word. */
  body { overflow-wrap: break-word; word-wrap: break-word; }

  /* -------------------------------------------------------------------------
     TARGETS
     Anything meant to be pressed gets a finger-sized box. Apple's own number
     is 44px and it is the right one.
     ---------------------------------------------------------------------- */
  a.btn, button, input[type="submit"], input[type="button"], .button, .btn {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  input, select, textarea {
    max-width: 100%;
    /*  Under 16px, Safari zooms the whole page when the field is focused and
        does not zoom back out. It is the single most common reason a mobile
        form feels broken. */
    font-size: 16px !important;
  }

  /* -------------------------------------------------------------------------
     LAST RESORT
     If something still pushes the page wide, the page scrolls its own content
     rather than showing a strip of blank paper beside every screenful.
     ---------------------------------------------------------------------- */
  html, body { max-width: 100%; overflow-x: hidden; }
}

@media (max-width: 560px) {
  /*  Below this a two-across grid of cards is two half-cards. One across. */
  .course-card, .card, .tile { width: auto !important; float: none !important; }
}