/* Small-screen fixes shared by the public site and the admin.
   Loaded after bootstrap.min.css on every page. */

/* Images and embeds never wider than their column (many have width="600" etc.) */
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* Public pages: keep the fixed top menu from covering the page title */
header + main { padding-top: 3.5rem; }

/* Site header HTML from admin Settings (a 3-column table with 400px images) */
.site-header table { width: 100% !important; }

/* Bootstrap rows with large gutters stick out past the screen edge on phones.
   clip (not hidden) so dropdown menus inside main are never cut off. */
main { overflow-x: clip; }

@media (max-width: 767.98px) {
  /* Stack the settings header table: logo, title, second image */
  .site-header table, .site-header tbody, .site-header tr, .site-header td {
    display: block;
    width: 100% !important;
  }
  .site-header td { text-align: center !important; padding: .25rem 0; }

  /* Large Bootstrap gutters (g-4, g-5) are wider than the page padding on phones */
  .row.g-4, .row.g-5 { --bs-gutter-x: 1.5rem; }
  /* rows placed straight in <main>/.album have no container padding to absorb their negative margins */
  main > .row, .album > .row { margin-left: 0; margin-right: 0; }

  /* Long headings and titles wrap instead of running off screen */
  h1, h2, h3, h4, h5, h6, p, li, td { overflow-wrap: anywhere; }

  /* Pagination / filter button rows wrap neatly */
  .btn-group, .btn-toolbar { flex-wrap: wrap; gap: .25rem; }

  /* Admin: "Sign out" sat underneath the menu button */
  header.navbar .navbar-nav { margin-right: 3.75rem; }

  /* Admin: search and other half-width form columns go full width */
  main .col-5 { width: 100%; }

  /* Admin list tables become one card per row (labels added by responsive.js) */
  table.stack-sm tr.col-labels { display: none; }
  table.stack-sm tbody tr {
    display: block;
    padding: .5rem 0;
    border-bottom: 2px solid #dee2e6;
  }
  table.stack-sm tbody td {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border: 0;
    padding: .25rem .5rem;
  }
  table.stack-sm tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    font-weight: 600;
  }
  table.stack-sm tbody td > * { min-width: 0; }
}