/* WoodAge SEO visual carousel
   Crawlable, no-JS image rail for page-specific visual references. */

.wa-visual-carousel {
  /* Align with the page content column (--wa-maxw, 900px) so the carousel never
     runs wider than the body text — matches the material-lifespan-ncr look and
     keeps every page consistent. */
  max-width: var(--wa-maxw, 900px);
  margin: var(--s-7, 48px) auto;
  padding: 0 var(--s-5, 24px);
}

.wa-visual-carousel__inner {
  border: 1px solid var(--wa-line, #E7E3DC);
  background: var(--wa-bg-warm, #FAF7F2);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--wa-radius, 0);
  box-shadow: var(--wa-elev-1, 0 1px 2px rgba(28,25,20,.05), 0 4px 12px rgba(28,25,20,.05));
}

.wa-visual-carousel h2 {
  margin: 0 0 var(--s-2, 8px);
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--wa-ink, #262320);
}

.wa-visual-carousel__intro {
  max-width: 70ch;
  margin: 0 0 var(--s-4, 16px);
  color: var(--wa-ink-soft, #4D4842);
  font-size: 15px;
  line-height: 1.6;
}

.wa-visual-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4, 16px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding-bottom: 4px;
}

.wa-visual-carousel figure {
  min-width: 0;
  margin: 0;
  background: var(--wa-card, #fff);
  border: 1px solid var(--wa-line, #E7E3DC);
  border-radius: var(--wa-radius-sm, 0);
  overflow: hidden;
  scroll-snap-align: start;
}

.wa-visual-carousel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wa-gray, #F1F1F1);
}

.wa-visual-carousel figcaption {
  min-height: 76px;
  padding: var(--s-3, 12px) var(--s-3, 12px) var(--s-4, 16px);
  color: var(--wa-ink-soft, #4D4842);
  font-size: 13.5px;
  line-height: 1.5;
}

.wa-visual-carousel__note {
  margin: 14px 0 0;
  color: #5F5F5F;
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .wa-visual-carousel {
    padding: 0 16px;
  }

  .wa-visual-carousel__track {
    grid-template-columns: none;
    grid-auto-columns: min(86vw, 360px);
  }

  .wa-visual-carousel figcaption {
    min-height: 92px;
  }
}

/* ── Interactive image trigger (hover affordance + click-to-zoom) ──
   Progressive enhancement: the trigger is an <a href="{image}"> so a no-JS
   click still opens the image. visual-carousel-lightbox.js adds .wa-vc-enhanced
   to upgrade it to an in-page lightbox. */
.wa-vc-trigger {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
}
.wa-vc-enhanced .wa-vc-trigger { cursor: zoom-in; }
.wa-vc-trigger::after {            /* hover darken veil */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 29, 0);
  transition: background 0.2s ease;
  pointer-events: none;
}
.wa-vc-trigger .wa-vc-zoom {       /* magnify badge, fades in on hover */
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(29, 29, 29, 0.62);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.wa-vc-trigger:hover::after,
.wa-vc-trigger:focus-visible::after { background: rgba(29, 29, 29, 0.18); }
.wa-vc-trigger:hover .wa-vc-zoom,
.wa-vc-trigger:focus-visible .wa-vc-zoom { opacity: 1; }
.wa-vc-trigger:focus-visible { outline: 2px solid var(--wa-yellow, #DCA44B); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .wa-vc-enhanced .wa-vc-trigger img { transition: transform 0.35s ease; }
  .wa-vc-enhanced .wa-vc-trigger:hover img,
  .wa-vc-enhanced .wa-vc-trigger:focus-visible img { transform: scale(1.05); }
}

/* ── Lightbox overlay (built by visual-carousel-lightbox.js) ── */
.wa-vc-lightbox[hidden] { display: none; }
.wa-vc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-vc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.9);
}
.wa-vc-lightbox__stage {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
}
.wa-vc-lightbox__figure { margin: 0; }
.wa-vc-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
  background: #1d1d1d;
}
.wa-vc-lightbox__cap {
  color: #f1f1f1;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 6px 0;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.wa-vc-lightbox__btn {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.wa-vc-lightbox__btn:hover,
.wa-vc-lightbox__btn:focus-visible {
  background: var(--wa-yellow, #DCA44B);
  color: #1d1d1d;
  outline: none;
}
.wa-vc-lightbox__close { top: -10px; right: -10px; }
.wa-vc-lightbox__prev { left: -10px; top: 50%; transform: translateY(-50%); }
.wa-vc-lightbox__next { right: -10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 760px) {
  .wa-vc-lightbox__close { top: 6px; right: 6px; }
  .wa-vc-lightbox__prev { left: 4px; }
  .wa-vc-lightbox__next { right: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .wa-vc-lightbox:not([hidden]) .wa-vc-lightbox__img,
  .wa-vc-lightbox:not([hidden]) .wa-vc-lightbox__cap { animation: wa-vc-fade 0.2s ease; }
}
@keyframes wa-vc-fade { from { opacity: 0; } to { opacity: 1; } }