/* 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; }
/* The About page now uses the same text size and spacing as the gallery descriptions (Simon, 28 Oct), so the
   site reads the same throughout. Paragraphs get an even gap (the blank paragraphs from Google Docs are dropped). */
.post { font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.38; color: #333; }
.post p { margin: 0 0 1em; }

/* 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: 432px; --em-gallery-h: max(180px, calc(100vh - var(--em-over))); }
  .autohideheader + div { margin-top: 128px; }
  .gallery-page .heading.h1 { 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: 398px; }
  .gallery-picker { margin-top: 8px; }
  .gallery-picker .slides { height: 100px; }
}

/* No movement on hover (desktop/tablet). The Keystone 4 header pushed the page down when the mouse went
   over the header (".autohideheader:hover + div", which outranks the rules above), animated over .4s.
   With the menu always showing, keep the page where it is. */
@media (min-width: 768px) {
  .autohideheader + div,
  .autohideheader:hover + div { margin-top: 128px; transition: none; }
  .autohideheader.active-submenu + div,
  .autohideheader:hover.active-submenu + div { margin-top: 210px; transition: none; }
  .autohideheader #header,
  .autohideheader:hover #header { top: 0; transition: none; }
}

/* SEO (Oct 2026): the piece's name is the page's <h1> and the category line above it a <div class="h1">.
   Make the h1 look exactly like the old title text. */
.gallery-description h1.title { display: inline; font-size: inherit; line-height: inherit; margin: 0; }


/* Content pages (About): the page title as heading, and an optional photo beside the text */
.content-page h1.heading { margin: 4px 0 18px; }
.content-page .page-photo { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 18px; }
@media (min-width: 768px) { .content-page .page-photo { float: right; width: 40%; margin: 4px 0 16px 24px; } }
.content-page .post::after { content: ''; display: table; clear: both; }

/* USA / Australia flags (Oct 2026): top right of the white header on desktop, last line of the phone menu.
   This site's flag in full colour with a fine frame; the other one softened until hovered. */
.region-switch { display: inline-flex; align-items: center; gap: 10px; line-height: 0; }
.region-switch .flag { display: inline-block; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  transition: opacity .2s, filter .2s; }
.region-switch .flag svg { display: block; height: 13px; width: auto; }
.region-switch a.flag { opacity: .45; filter: saturate(.5); }
.region-switch a.flag:hover, .region-switch a.flag:focus { opacity: 1; filter: none; }
.region-switch .flag.current { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.18); }
.under-title { position: relative; }
.region-switch-desktop { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.navbar-nav > li.region-switch-phone { display: none; }
@media (max-width: 767px) {
  .region-switch-desktop { display: none; }
  .navbar-nav > li.region-switch-phone { display: block; padding: 14px 15px; }
  .region-switch .flag svg { height: 16px; }
}

/* A little more air between the menu bar and "EVA MARTIN" on desktop (Simon, 28 Oct): +10px, with the page
   below moved down to match (margins above and --em-over). */
@media (min-width: 768px) {
  #header .under-title header { padding-top: calc(0.25em + 10px); }
}