/* Styles for the React components that replace slick.js (carousel + picker). The look comes from the
   Keystone 4 stylesheets (site.css, style.css, slick-theme.css); this file only handles the mechanics. */

/* desktop carousel */
.gallery-item .slick-list { overflow: hidden; }
.gallery-item .em-track { display: flex; transition: transform .45s ease; will-change: transform; }
.gallery-item .em-slide { flex: 0 0 100%; min-width: 0; }
.gallery-item .em-slide img { display: block; width: 100%; height: auto; }

/* picker strip (the old slick DOM put these rules on .gallery-picker > div) */
.gallery-picker { position: relative; }
.gallery-picker .slick-list { overflow: hidden; }
.gallery-picker .em-picker-track { display: flex; transition: transform .45s ease; }
.gallery-picker .slides { height: 200px; text-align: center; min-width: 0; padding: 0 5px; }
.gallery-picker .slides .img { height: 80%; padding-bottom: 15px; opacity: .5; transition: opacity .2s; }
.gallery-picker .slides.selected .img, .gallery-picker .slides .img:hover { opacity: 1; }
.gallery-picker .slides img { height: 100%; max-width: 100%; margin: auto; display: block; object-fit: contain; }
.gallery-picker .slick-arrow[disabled] { cursor: default; }

/* phone feed: the img width/height attributes (for layout stability) must not fix the height;
   style.css gives these images a square box */
.feed-view img { height: auto; }

/* Text sizes the Keystone 4 content used to get from Google Docs inline styles (stripped on export):
   gallery descriptions were Arial 11pt, the About page 13.5pt, both with 1.38 line spacing. */
.gallery-description .description, .feed-text .description { font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.38; }
.gallery-description .description p, .feed-text .description p { margin: 0; }
.post { font-family: Arial, sans-serif; font-size: 13.5pt; line-height: 1.38; color: #333; }
.post p { margin: 0 0 21pt; }

/* Desktop/tablet: keep the menu bar showing all the time. The Keystone 4 header slid it out of view
   (top: -41px) and only revealed it on hover, which visitors don't discover. Phones keep the
   hamburger menu. */
@media (min-width: 768px) {
  .autohideheader #header,
  .autohideheader.active-submenu #header { top: 0; }
  .autohideheader + div { margin-top: 140px; }
  .autohideheader.active-submenu + div { margin-top: 200px; }
  /* the header's white "fade" shadow reached ~70px below it and washed out the first line of
     content; keep the fade for scrolling content, but stop it before the page starts */
  #header { box-shadow: 0 8px 14px 2px #FFFFFF; }
}

/* Desktop/tablet gallery: fit the whole page in the window, no page scrollbar.
   The main photo takes the height that's left after the header, heading, dots and picker strip;
   a description longer than that scrolls inside its own column. */
@media (min-width: 768px) {
  :root { --em-over: 422px; --em-gallery-h: max(180px, calc(100vh - var(--em-over))); }
  .autohideheader + div { margin-top: 118px; }
  .gallery-page h1.heading { margin: 4px 0 10px; }
  .gallery-container .row.gallery { max-height: calc(var(--em-gallery-h) + 34px); }
  .gallery-container .gallery-description { max-height: calc(var(--em-gallery-h) + 24px); overflow-y: auto; padding-top: 0; scrollbar-width: thin; }
  .gallery-item.slick-dotted { margin-bottom: 0; }
  .gallery-item .em-slide { display: flex; justify-content: center; }
  .gallery-item .em-slide img { width: auto; max-width: 100%; max-height: var(--em-gallery-h); }
  .gallery-item .slick-dots { position: static; margin-top: 6px; }
  .gallery-picker { margin-top: 14px; }
  .gallery-picker .slides { height: 130px; }
  .gallery-picker .slides .img { padding-bottom: 6px; }
}
/* short windows (laptops): smaller picker strip so the photo keeps more of the height */
@media (min-width: 768px) and (max-height: 760px) {
  :root { --em-over: 388px; }
  .gallery-picker { margin-top: 8px; }
  .gallery-picker .slides { height: 100px; }
}