/* Styles for /more/gallery/: gallery, gallery-page.
   Search for "── <name> ──" to find a part.
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */

/* ── gallery ── */
/* Photo gallery.
   Used on: /more/gallery/.
   Forum Homini website, */
.gallery[data-c-gallery] {
  --grid-gap: var(--s-4);
}
/* ── Chips: sticky under the header on every width; a chip row on phone (§6.4) ─────────────────── */
.gallery__chips[data-c-gallery] {
  position: sticky;
  inset-block-start: calc(var(--header-offset, var(--header-h)) + var(--bar2-h, 0px));
  z-index: var(--z-sticky);
  margin-block-end: var(--s-7);
  padding-block: var(--s-2);
  background: var(--bg);
  box-shadow: 0 1px 0 var(--rule);
}
/* (6 Nov 2026) display was flex; always overridden by css/site.css, so its value is here now */
.gallery__chip-row[data-c-gallery] {
  position: relative;
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery__chip-row[data-c-gallery]::-webkit-scrollbar {
  display: none;
}
.gallery__chip-row[data-c-gallery] li[data-c-gallery] {
  flex: none;
  scroll-snap-align: start;
}
.gallery__chip-row[data-c-gallery] .chip[data-c-gallery] {
  background: var(--bg);
}

@media (max-width: 640px) {
  .gallery__chips[data-c-gallery] {
    margin-inline: calc(-1 * var(--margin));
  }
  .gallery__chip-row[data-c-gallery] {
    padding-inline: var(--margin);
    scroll-padding-inline: var(--margin);
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        black var(--fade-start),
        black calc(100% - var(--fade-end)),
        transparent);
    mask-image:
      linear-gradient(
        to right,
        transparent,
        black var(--fade-start),
        black calc(100% - var(--fade-end)),
        transparent);
  }
  @supports (animation-timeline: scroll()) {
    .gallery__chip-row[data-c-gallery] {
      animation: gallery-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
}

/* ── Sections ─────────────────────────────────────────────────────────────────────────────────────── */

.gallery__section[data-c-gallery] {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
  padding-block: var(--s-6) var(--s-8);
}
/* a short part is drawn at once: the 1400 px kept for a long part would stand empty above the footer */
.gallery__section--short[data-c-gallery] {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.gallery__section[data-c-gallery] + .gallery__section[data-c-gallery] {
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s-8);
}
.gallery__title[data-c-gallery] {
  margin-block-end: var(--s-6);
}
/* (27 Oct 2026) every part of the gallery as tiles at the top, and the way back up to them under each part's title */
.gallery__top[data-c-gallery] {
  margin-block-end: 0;
}
/* a part's first suite heading comes straight under "All parts" (no section-sized gap there) */
.gallery__back[data-c-gallery] + .gallery__sub[data-c-gallery] {
  margin-block-start: var(--gap-item, var(--s-3));
}
.gallery__top[data-c-gallery] .gt {
  margin-block-start: calc(var(--gap-heading, var(--s-4)) + var(--s-4));
}
.gallery__back[data-c-gallery],
.gallery__back[data-c-gallery]:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block: calc(-1 * var(--s-4)) var(--s-5);
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.gallery__back[data-c-gallery] svg[data-c-gallery] {
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  padding: 3px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
/* each suite's own small heading inside "The suites": the heading face, one size down from the section title, in gold */
.gallery__sub[data-c-gallery] {
  margin-block: var(--gap-section, var(--s-8)) var(--gap-heading, var(--s-4));
  font-family: var(--face-display);
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.15;
  color: #e6c27a;
}
.gallery__title[data-c-gallery] + .gallery__sub[data-c-gallery] {
  margin-block-start: 0;
}
.gallery__grid[data-c-gallery] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 641px) {
  .gallery[data-c-gallery] {
    --grid-gap: var(--s-5);
  }
  /* (owner, 2 Nov 2026: "They must all be as big as we have under lounge … three in a row"): every part, every group, three in a row */
  .gallery__grid[data-c-gallery] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--s-6);
  }
}
.gallery__item[data-c-gallery] {
  margin: 0;
  max-inline-size: 400px;
}
.gallery__link[data-c-gallery] {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gallery__link[data-c-gallery] .photo {
  max-inline-size: 100%;
}
.gallery__link[data-c-gallery] .photo__img {
  transform-origin: 50% 50%;
}
/* ── Original photo titles (N-GAL-01) ─────────────────────────────────────────────────────────────── */
.gallery__refs[data-c-gallery] {
  margin-block-start: var(--s-6);
  max-inline-size: var(--measure-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--caption);
}
.gallery__refs[data-c-gallery] summary[data-c-gallery] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  font-family: var(--face-text);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  list-style: none;
}
.gallery__refs[data-c-gallery] summary[data-c-gallery]::-webkit-details-marker {
  display: none;
}
.gallery__refs[data-c-gallery] summary[data-c-gallery]::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: -45deg;
  translate: 0 -0.05em;
}
.gallery__refs[data-c-gallery][open] summary[data-c-gallery]::before {
  rotate: 45deg;
  translate: 0 -0.2em;
}
.gallery__refs[data-c-gallery] p[data-c-gallery] {
  padding-block: var(--s-2) var(--s-3);
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .gallery__link[data-c-gallery] .photo__img {
      transition: transform var(--t-reveal) var(--ease-settle);
    }
    .gallery__link[data-c-gallery]:hover .photo__img {
      transform: scale(1.04);
    }
  }
}
/* the gallery's drop-down: one slim gold-ringed bar, centred, the same 36 px as every slim button */
.gallery__pick[data-c-gallery] {
  display: flex;
  justify-content: center;
  margin-block: 0 calc(-1 * var(--s-4));
}
.gallery__select[data-c-gallery] {
  appearance: none;
  -webkit-appearance: none;
  inline-size: min(100%, 22rem);
  block-size: 36px;
  padding-inline: var(--s-5) 2.6rem;
  border: 1px solid rgb(201 149 63 / 0.7);
  border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f3d792' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.1rem center;
  color: #f3d792;
  font-family: var(--face-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.gallery__select[data-c-gallery] option[data-c-gallery] {
  background: #120d09;
  color: #f6efe4;
}
.gallery__select[data-c-gallery]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}

/* ── gallery-page ── */
/* Gallery page.
   Used on: /more/gallery/.
   Forum Homini website, */
.gallery-page[data-c-gallery-page] {
  padding-block: var(--s-6) var(--s-8);
}
/* (owner, 25 Oct 2026, gap G: "Gallery: after the last photos … close it to the normal space"): the last group of photos adds
     no room of its own at the bottom; the page's own space is the gap before the social links */
.gallery-page[data-c-gallery-page] .gallery__section:last-child {
  padding-block-end: 0;
}
@media (min-width: 641px) {
  .gallery-page[data-c-gallery-page] {
    padding-block-start: var(--s-7);
  }
}