/* ==========================================================================
   Jobson Garden — Gallery slider (2026-10-10)
   Full-screen photo with a big title; a row of cards on the right. On the
   next slide the first card grows out of the row until it is the new
   full-screen photo, the old photo sinks and darkens, the old title slides
   away, the row shifts one place, the counter rolls and the new title rises
   in line by line. Script: assets/js/gallery-slider.js. Markup:
   sections/gallery-slider.php.
   ========================================================================== */

.gs {
  --gs-ease: cubic-bezier(0.77, 0, 0.18, 1);
  --gs-card-w: clamp(7.5rem, 11.5vw, 11rem);
  --gs-card-h: calc(var(--gs-card-w) * 1.36);
  --gs-gap: clamp(0.75rem, 1.3vw, 1.25rem);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: #142016;
  color: #fff;
  isolation: isolate;
}

/* The photo runs under the floating header, as on the other cover pages. */
body.page-gallery #main:has(.gs) { padding-top: 0; }

/* ---- photos ---- */
.gs__bgs { position: absolute; inset: 0; z-index: 0; }
.gs__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1d2a20 center / cover no-repeat;
  will-change: transform, filter;
}
.gs__bg img, .gs__bg picture { display: block; width: 100%; height: 100%; }
.gs__bg img { object-fit: cover; }
.gs__bg.is-flying { inset: auto; z-index: 2; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.gs__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 20, 12, 0.72) 0%, rgba(10, 20, 12, 0.35) 42%, rgba(10, 20, 12, 0.05) 70%),
    linear-gradient(0deg, rgba(10, 20, 12, 0.55) 0%, rgba(10, 20, 12, 0) 35%),
    linear-gradient(180deg, rgba(10, 20, 12, 0.45) 0%, rgba(10, 20, 12, 0) 22%);
}

/* ---- text ---- */
.gs__text {
  position: absolute;
  z-index: 4;
  left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  top: 50%;
  transform: translateY(-46%);
  width: min(36rem, 44vw);
}
.gs__eyebrow {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.gs__eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent); }
.gs__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.9vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
}
.gs__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.gs__line > span { display: inline-block; }
.gs__desc {
  margin: 1.1rem 0 1.5rem;
  max-width: 30rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.gs__cta {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.35rem 1.1rem 0.35rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.gs__cta i {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: var(--primary);
  font-style: normal; font-size: 0.9rem;
}
.gs__cta:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.gs__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- cards ---- */
.gs__cards {
  position: absolute;
  z-index: 4;
  left: 52%;
  right: 0;
  top: 50%;
  transform: translateY(-38%);
  height: calc(var(--gs-card-h) + 2rem);
  overflow: hidden;
  padding-top: 1rem;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.gs__track { position: relative; display: flex; gap: var(--gs-gap); }
.gs__card {
  position: relative;
  flex: none;
  width: var(--gs-card-w);
  height: var(--gs-card-h);
  padding: 0;
  border: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  cursor: pointer;
  background: #1d2a20;
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.7);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.gs__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs__card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8, 16, 10, 0.78) 0%, rgba(8, 16, 10, 0) 55%);
}
.gs__card-text { position: absolute; z-index: 1; left: 0.7rem; right: 0.6rem; bottom: 0.7rem; display: grid; gap: 0.2rem; }
.gs__card-text small {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.gs__card-text b {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em;
}
@media (hover: hover) {
  .gs__card:hover { transform: translateY(-8px); box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.8); }
}
.gs__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- controls ---- */
.gs__controls {
  position: absolute;
  z-index: 5;
  left: 52%;
  right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gs__btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.gs__btn svg { width: 1rem; height: 1rem; }
.gs__btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.gs__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gs__bar { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.gs__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
.gs__count {
  position: relative;
  height: 1.1em;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: right;
}
.gs__count b { display: block; font-weight: 700; }
.gs__count b + b { position: absolute; right: 0; top: 0; }

/* The floating WhatsApp button sits bottom-right on screens wider than
   768px: keep the counter clear of it. */
@media (min-width: 769px) {
  .gs__controls { right: max(calc(var(--gutter) + 4.75rem), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
}

/* ---- phones and portrait tablets: text up top, cards along the bottom ---- */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .gs { --gs-card-w: clamp(6.6rem, 17vw, 10.5rem); min-height: 36rem; }
  .gs__shade {
    background:
      linear-gradient(180deg, rgba(10, 20, 12, 0.6) 0%, rgba(10, 20, 12, 0.15) 32%, rgba(10, 20, 12, 0.25) 55%, rgba(10, 20, 12, 0.85) 100%);
  }
  .gs__text { top: clamp(6.5rem, 13vh, 9rem); transform: none; width: auto; right: var(--gutter); max-width: 40rem; }
  .gs__title { font-size: clamp(2.3rem, 9vw, 4.4rem); }
  .gs__desc { font-size: clamp(0.9rem, 2vw, 1.05rem); margin: 0.8rem 0 1.1rem; }
  .gs__cards { left: var(--gutter); top: auto; bottom: calc(clamp(2rem, 5vh, 3.5rem) + 4.5rem); transform: none; }
  .gs__controls { left: var(--gutter); bottom: clamp(2rem, 5vh, 3.5rem); }
}
/* the bottom menu bar (768px and below) takes the bottom of the screen */
@media (max-width: 768px) {
  .gs__cards { bottom: 9.6rem; }
  .gs__controls { right: var(--gutter); bottom: 6rem; }
  .gs__btn { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .gs__desc { display: none; }
}
/* low landscape phones: smaller title, cards a touch smaller */
@media (max-height: 520px) and (orientation: landscape) {
  .gs { min-height: 22rem; --gs-card-w: 6.5rem; }
  .gs__title { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .gs__desc { display: none; }
  .gs__controls { bottom: 1rem; }
}

/* No white strip between the slider and the footer (2026-10-13): the footer's
   usual top margin only suited the photo grid that used to sit above it. */
body.page-gallery .site-footer { margin-top: 0; }