/*
 * SPDX-FileCopyrightText: 2026 soundminds.ai
 *
 * SPDX-License-Identifier: Apache-2.0
 *
 * Extra styles for the RelyLoop public site — primarily the Guides pages
 * (feat_website_walkthrough_guides). Keeps the walkthrough video and the
 * screenshots fluid-width so nothing overflows at phone widths. No JS, no
 * media queries — max-width:100% is sufficient for both web and mobile.
 */

/* Responsive walkthrough video — never wider than its column. */
.walkthrough-video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0.4rem;
  margin: 0.5rem 0;
  background: #000;
}

/* The always-visible iOS-Safari fallback link below the video. */
.walkthrough-video-download {
  font-size: 0.85em;
  opacity: 0.75;
  margin-top: 0.25rem;
}

/* Screenshots inside a walkthrough/in-depth page never overflow. glightbox
 * wraps each in a zoomable anchor; this keeps the inline render fluid. */
.md-content img {
  max-width: 100%;
  height: auto;
}

/* Card-grid thumbnails on the Walkthroughs index — fixed aspect, cover crop,
 * so the card heights stay even regardless of source screenshot dimensions. */
.md-typeset .grid.cards img {
  width: 100%;
  height: auto;
  border-radius: 0.3rem;
}

/* ---------------------------------------------------------------------------
 * Top-nav tabs at laptop widths.
 *
 * Material shows the horizontal `navigation.tabs` bar only at >= 76.25em
 * (~1220px) and collapses to the hamburger drawer below that — so a typical
 * 13" laptop window (~1200px) falls just under the line and sees the drawer.
 * Lower the threshold to 60em (~960px) so the top-level menu sits across the
 * top on standard laptops; phones (<60em) keep the hamburger.
 *
 * We deliberately do NOT force the desktop primary sidebar in this band — at
 * <76.25em Material's nav tree is structured for the slide-in drawer, and
 * forcing it into a static column leaves a broken, near-empty rail. Instead we
 * KEEP the hamburger so the section sub-pages (the Walkthroughs deck list,
 * etc.) stay reachable; the tabs give the across-the-top look, the hamburger
 * covers the deeper tree. At >= 76.25em Material's own rules take over (tabs +
 * static sidebar, no hamburger) exactly as before.
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
  .md-tabs {
    display: block;
  }
}