/* American Camino Outfitters - photo-story slideshow (mod_custom layout aco-slideshow).
   (C) 2026 interGen. GPL v2 or later.
   Slides are plain HTML in the module: .ww-slide > .ww-text + .ww-photos (img, optional .ww-tall / .ww-wide / .ww-cut).
   Desktop: one screen tall, text card left, photo collage right. Below 992px they stack, the nav moves above the
   slides and the track follows the active slide's height. */

/* ---------- Frame ---------- */
/* In a main-grid position the section breaks out to the full viewport width; in a sidebar it stays in its column */
body:has(.site-grid > .grid-child .ww-show) .site-grid { overflow-x: clip; }
/* Cassiopeia's main-grid positions are flex rows: wrap so the slideshow takes a row of its own */
.site-grid > .grid-child:has(.ww-show) { flex-wrap: wrap; }
.site-grid > .grid-child .ww-show { flex: 0 0 auto; width: 100vw; margin-inline: calc(50% - 50vw); }

.ww-show { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 56px; background: #f4eee2; color: #1b2433; }
.ww-bg { position: absolute; inset: 0; z-index: -1; }
.ww-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.ww-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244, 238, 226, .55), rgba(244, 238, 226, .2) 40%, rgba(244, 238, 226, .7)); }
.ww-show .container { --gutter-x: 1.5rem; }
.ww-eyebrow { margin-bottom: 1rem; }

/* ---------- Track: native horizontal scroll with snap, so phones swipe for free ---------- */
.ww-track { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; transition: height .35s ease; }
.ww-track::-webkit-scrollbar { display: none; }
.ww-track:focus-visible { outline: 3px solid #1e355d; outline-offset: 6px; border-radius: 4px; }
.ww-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 28px 14px 36px; }

/* ---------- Text card: aged paper with two tacks (drawn here so editors only write the text) ---------- */
.ww-text { position: relative; padding: 52px 36px 32px; background: #f8f0de url(../images/textures/paper.jpg); background-blend-mode: multiply; box-shadow: 0 12px 24px rgba(20, 37, 66, .16), inset 0 0 48px rgba(150, 115, 60, .16); transform: rotate(-1deg); font-size: 1.05rem; line-height: 1.6; }
.ww-text::before, .ww-text::after { content: ""; position: absolute; top: 16px; left: 22px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ef9a9c 0, #b2292e 50%, #701a1d 100%); box-shadow: 1px 3px 3px rgba(0, 0, 0, .3); }
.ww-text::after { left: auto; right: 22px; }
.ww-text > :last-child { margin-bottom: 0; }
.ww-text h2, .ww-text h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; line-height: .95; color: #1e355d; }
.ww-text h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: .6em; }
.ww-text h2 em, .ww-text h3 em { font-style: italic; font-weight: 600; color: #b2292e; }
.ww-text a { color: #b2292e; font-weight: 600; }
.ww-quote { font-family: "Kalam", "Comic Neue", cursive; font-size: 1.5rem; line-height: 1.3; color: #b2292e; }
.ww-credit { font-size: .85rem; color: #6b7b95; }

/* Title slides (first and last): bigger heading, no card tilt */
.ww-slide--title .ww-text { transform: none; text-align: center; }
.ww-title { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom: .3em; }
.ww-with { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; color: #1e355d; }
.ww-date { display: inline-block; border: 2px solid #b2292e; color: #b2292e; padding: 4px 14px; border-radius: 4px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }

/* ---------- Photo collage ---------- */
/* Stacked (below 992px) the cells are 4:3 and the collage grows with the photo count. .ww-photos is the
   size container, so the row height is resolved on the images themselves. On desktop see the fixed-height block below. */
.ww-photos { --cols: 3; --gap: 14px; --row: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * .75); container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--gap); }
.ww-photos:not(:has(> :nth-child(5))) { --cols: 2; }
.ww-photos:has(> :nth-child(10)) { --cols: 4; --gap: 12px; }
.ww-photos img { width: 100%; height: var(--row); min-height: 0; object-fit: cover; border: 6px solid #fff; box-shadow: 0 8px 18px rgba(20, 37, 66, .22); background: #fff; cursor: zoom-in; transition: transform .2s ease; }
.ww-photos img:nth-child(odd) { transform: rotate(-1.2deg); }
.ww-photos img:nth-child(3n) { transform: rotate(1.4deg); }
.ww-photos img:hover { transform: scale(1.03); z-index: 1; position: relative; }
.ww-photos .ww-tall { grid-row: span 2; height: calc(var(--row) * 2 + var(--gap)); }
.ww-photos .ww-wide { grid-column: span 2; }
/* Two columns have no room for spans: keep a clean 2x2 */
.ww-slide:not(.ww-slide--title) > .ww-photos:has(> :nth-child(2)):not(:has(> :nth-child(5))) :is(.ww-tall, .ww-wide) { grid-row: auto; grid-column: auto; height: var(--row); }
/* Transparent cut-outs (ovals, logos, patches) keep their own shape and shadow */
.ww-photos .ww-cut { object-fit: contain; border: 0; box-shadow: none; background: none; }
/* A single image (maps) shows whole rather than cropped. A fixed height (not auto) so a lazy image
   that has not loaded yet still takes its size from the width/height attributes. */
.ww-photos:not(:has(> :nth-child(2))) { display: flex; justify-content: center; }
.ww-photos:not(:has(> :nth-child(2))) img { width: auto; max-width: 100%; height: 420px; object-fit: contain; }
.ww-slide--title .ww-photos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.ww-slide--title .ww-photos img { width: auto; max-width: 46%; height: 200px; object-fit: contain; transform: none; cursor: default; }
.ww-slide--title .ww-photos img:hover { transform: none; }

/* Desktop: the slideshow is exactly one screen tall. The track takes what the nav leaves, every slide fills
   the track, and the collage rows share the slide's height (so a short window just gives smaller photos). */
@media (min-width: 992px) {
  .ww-show { display: flex; flex-direction: column; height: 100vh; height: 100svh; padding: 28px 0 24px; }
  .ww-show > .container { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .ww-track { flex: 1; min-height: 0; }
  .ww-slide { height: 100%; grid-template-rows: minmax(0, 1fr); padding: 20px 14px 28px; }
  .ww-text { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .ww-photos { height: 100%; grid-auto-rows: minmax(0, 1fr); }
  .ww-photos img, .ww-photos .ww-tall, .ww-slide:not(.ww-slide--title) > .ww-photos:has(> :nth-child(2)):not(:has(> :nth-child(5))) :is(.ww-tall, .ww-wide) { height: 100%; }
  .ww-photos:not(:has(> :nth-child(2))) img { height: 100%; }
  .ww-slide--title .ww-photos { height: auto; }
  .ww-slide--title .ww-photos img { height: min(300px, 38vh); }
}

/* ---------- Controls ---------- */
.ww-nav { display: flex; align-items: center; gap: 20px; width: 100%; max-width: 560px; margin: 8px auto 0; }
.ww-btn { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #b2292e; color: #fff; box-shadow: 0 6px 14px rgba(20, 37, 66, .3); transition: background .2s ease, transform .2s ease, opacity .2s ease; }
.ww-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ww-btn:hover, .ww-btn:focus-visible { background: #8e1f23; transform: scale(1.06); }
.ww-btn:focus-visible { outline: 3px solid #1e355d; outline-offset: 3px; }
.ww-btn:disabled { opacity: .35; transform: none; background: #b2292e; cursor: default; }
.ww-progress { flex: 1; text-align: center; }
.ww-count { margin: 0 0 6px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .12em; color: #1e355d; }
.ww-bar { height: 4px; border-radius: 2px; background: rgba(30, 53, 93, .18); overflow: hidden; }
.ww-bar span { display: block; height: 100%; width: 0; background: #b2292e; transition: width .35s ease; }

/* ---------- Photo zoom ---------- */
.ww-zoom { max-width: min(94vw, 1200px); max-height: 92vh; padding: 0; border: 8px solid #fff; border-radius: 4px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); overflow: visible; }
.ww-zoom::backdrop { background: rgba(20, 37, 66, .85); }
.ww-zoom img { display: block; max-width: 100%; max-height: calc(92vh - 16px); width: auto; height: auto; }
.ww-zoom form { position: absolute; top: -20px; right: -20px; z-index: 1; }
.ww-zoom-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #b2292e; color: #fff; font-size: 26px; line-height: 1; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }

/* ---------- Stacked (tablet and phone) ---------- */
@media (max-width: 991.98px) {
  .ww-show { padding: 32px 0 36px; }
  /* Nav above the slides: the slides change height, the buttons stay put */
  .ww-show > .container { display: flex; flex-direction: column; }
  .ww-eyebrow { order: -2; }
  .ww-nav { order: -1; margin: 0 auto 4px; }
  .ww-track { align-items: flex-start; }
  .ww-slide { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px 6px 24px; align-items: start; }
  .ww-text { padding: 48px 24px 26px; transform: none; font-size: 1rem; }
  .ww-photos, .ww-photos:not(:has(> :nth-child(5))) { --cols: 3; --gap: 10px; }
  .ww-photos img:hover { transform: none; }
}
@media (max-width: 575.98px) {
  .ww-photos, .ww-photos:not(:has(> :nth-child(5))), .ww-photos:has(> :nth-child(10)) { --cols: 2; --gap: 10px; }
  .ww-photos img { border-width: 4px; }
  .ww-slide--title .ww-photos img { height: 150px; }
  .ww-btn { width: 46px; height: 46px; }
  .ww-zoom form { top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-track, .ww-bar span, .ww-btn, .ww-photos img { transition: none; }
}