/* /lambton-shores is set on magazine.css, the Bright's Grove sheet, and shares
   its bg- components. This file carries only what that page never needed: the
   library branch picker, a fourth heading level for the stop cards inside the
   photo rows, and the spacing between the stacked story rows in Forest.
   Nothing here touches the shared header, footer or bottom bar. */
[hidden] { display: none !important; }

.bg-guide :where(h4) { margin: 0; font-size: inherit; font-weight: inherit; }

/* The Forest stories, one row after another, and the small photo-left rows
   (the fair, Twin Pines) that close a chapter. */
.ls-stories { display: grid; gap: 4rem; margin-top: 3rem; }
.ls-row { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--color-line); }
@media (min-width: 64rem) {
  .ls-stories { gap: 5rem; margin-top: 4rem; }
  .ls-row { margin-top: 4rem; }
}

/* The small side photos (Esli Dodge, the fair postcard, the Arkona museum
   path and orchard, Twin Pines) are capped at 300px only once the page has
   columns for them. On a phone every photo fills the column. */
@media (min-width: 48rem) { .ls-fig-sm { max-width: 300px; } }

/* On a phone those photo-left rows stack, and a photo that comes before its
   heading reads as belonging to the block above it (the Esli Dodge lake sat
   under the Forest Library links). Below 48rem the label and heading lead,
   the photo follows, then the copy; the wide-screen grid is untouched. */
@media (max-width: 47.99rem) {
  .ls-photo-row { display: flex; flex-direction: column; gap: 0; }
  .ls-photo-row > div { display: contents; }
  .ls-photo-row > div > * { order: 3; }
  .ls-photo-row > div > .bg-label { order: 0; }
  .ls-photo-row > div > h3 { order: 1; }
  .ls-photo-row > .ls-fig-sm { order: 2; margin-top: 1.25rem; }
  .ls-photo-row > div > h3 + p { margin-top: 1.25rem; }
}

/* Arkona's photo column holds three photographs. Beside the copy on a wide
   screen that is a rail; stacked below 64rem it was a screen and a half of
   pictures before the first sentence. The fossils lead, the copy follows, and
   the museum path and the orchard (the Little Apple paragraph's photo) close
   the chapter ahead of the Rock Glen stop. */
@media (max-width: 63.99rem) {
  #arkona .bg-weir-grid { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); }
  #arkona .bg-weir-grid > *, #arkona .bg-weir-photo > figure { grid-area: auto; }
  #arkona .bg-weir-photo { display: contents; }
  #arkona .bg-weir-title { order: 0; }
  #arkona .bg-weir-photo > figure:first-child { order: 1; }
  #arkona .bg-weir-body { order: 2; }
  #arkona .bg-weir-photo > figure + figure { order: 3; margin-top: 0; }
  #arkona .bg-weir-prompt { order: 4; }
}

/* The library branch picker: a thumb-sized native select in the guide's type. */
.ls-field { display: block; margin-top: 1.25rem; }
.ls-select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: .5rem;
  padding: 0 2.75rem 0 .875rem;
  border: 1px solid var(--color-line);
  border-radius: 0;
  background: #fff url("/assets/sarnia-editorial/icons/caret-down.svg") no-repeat right .875rem center / 18px 18px;
  color: var(--color-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}
.ls-select:focus-visible { outline: 2px solid var(--color-lake); outline-offset: 2px; }

/* Two utilities the page uses that the compiled magazine.css does not carry
   (it holds only the classes Bright's Grove uses), written the way Tailwind
   would have emitted them. */
.bg-guide .gap-x-8 { column-gap: 2rem; }
.bg-guide .max-w-\[720px\] { max-width: 720px; }