/*
 * mobile.css — ASB Group Website
 * Phone handling for a few of our own blocks. Everything else is handled by
 * the HTML5UP template's own responsive CSS.
 *
 * The hero-menu rules that opened this file are gone: .hero-menu was the row
 * of links the dot-burst menu replaced, and it is in no page any more.
 */

@media screen and (max-width: 736px) {
  /* ── Short Talks gallery — title always visible on mobile ────── */
  .gallery.style2.medium article .caption {
    opacity: 1 !important;
    transform: none !important;
  }

  /* The paragraph under "Who Works On What" used to be hidden here. It is the
     only thing on the page that says what the diagram is, and hiding it saved
     nothing -- the empty space it was meant to reclaim came from the diagram's
     own min-height, which is fixed where it belongs, in the frame's stylesheet. */
   /* ── Who Works On What — close gap on mobile ─────────────────── */
  #who-works-on-what .inner {
    padding-bottom: 0 !important;
  }
  #who-works-on-what p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* ── Visualisations — scrollable ─────────────────────────────── */
  /* .network-block lived in the diagram's own document, which loads no
     stylesheet from here, so the rules that used to target it did nothing at
     all. That handling now sits in Data Viz/who-works-on-what.html. */
  .connects-block {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Alumni grid — 2 cols on phone ───────────────────────────── */
  .alumni-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

 /* ── Gallery — one video per row ─────────────────────────────── */
  /* main.js decides whether the strip scrolls from the user agent -- its
     browser.mobile flag -- so a narrow desktop window, and a phone viewport in
     a desktop browser's responsive mode, get the desktop build: the inner is
     given overflow hidden inline, which cannot be swiped, and a 5rem arrow
     overlay is injected over each end of a tile barely wider than the screen.
     The overlays covered the Watch button and there was no way to reach the
     other videos. Stacked there is nothing to scroll sideways: each video is
     one full-width row, whatever the browser claims to be. The !important
     beats main.js's inline styles on .inner. */
  .gallery.style2 > .inner {
    display: block !important;
    overflow: visible !important;
  }

  .gallery.style2 article {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.25rem !important;
  }

  .gallery.style2 article:last-child {
    margin-bottom: 0 !important;
  }

  .gallery.style2 > .forward,
  .gallery.style2 > .backward {
    display: none !important;
  }
  /* The caption stays visible, as it does on every other width. It used to be
     opacity 0 until the tile was tapped, with the heading inside it set to
     opacity 1 to show through -- which cannot work: a parent at opacity 0
     takes its whole subtree with it, whatever the child asks for. The tiles
     showed as bare photographs with no text at all. */
  .gallery.style2 article .caption {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* In flow, above the description. It used to be positioned absolutely at
     top: 50% -- which made sense when the caption was hidden and the heading
     was the only thing showing over the photograph. With the caption visible
     the two sat on top of each other. */
  .gallery.style2 article .caption h3 {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    margin-bottom: 0.35rem !important;
    padding: 0 !important;
  }

  .gallery.style2 article .caption p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
  /* Details stays. It is the only way into a theme's publications from here,
     and it was hidden on mobile -- which left the tile with nothing to act on.
     0.65rem is 9.5px on a phone, and the button was 19px tall: too small to
     read and too small to hit, so it is bigger as well as present. */
  .gallery.style2 article .caption .button {
    font-size: 0.78rem !important;
    padding: 0.55rem 1.1rem !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .gallery.style2 article .caption ul.actions {
    display: flex !important;
    justify-content: center !important;
    margin-top: 0.6rem !important;
  }

  /* The photographs behind these are mid-tone, so the heading needs a shadow
     to stay legible. */
  .gallery.style2 article .caption h3 {
    text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5) !important;
  }
}