/*! modules.css — opt-in feature modules (loaded after user.css)
 * Site:       Inland Adventures
 * Template:   inland (child of Cassiopeia)
 * Layout:     framed
 * Generated:  2026-06-27 by Styling Foundation Generator v0.1.0
 *
 * Token-driven: re-skin by editing the brand tokens in :root and re-running
 * the generator (or editing here directly). Build-time output — no runtime
 * dependency; safe for a developer to read, edit and hand over.
 */

/* ---- Module: hero — full-width banner block ---- */
.cc-hero {
  position: relative;
  padding: var(--cc-space-2xl) var(--cc-space-m);
  background: var(--cc-frame);
  color: var(--cc-on-frame);
  text-align: center;
  overflow: hidden;
}
/* optional background image — swap the placeholder via the editor. Sits behind
   the content; the scrim below keeps the text legible over any image. */
.cc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* frame-coloured wash: invisible over the plain frame background (no image),
     a legibility scrim once an image is present. */
  background: color-mix(in srgb, var(--cc-frame) 45%, transparent);
}
.cc-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-m);
  max-width: var(--cc-content-max);
  margin-inline: auto;
}
.cc-hero__title { margin: 0; font-size: var(--cc-h1); line-height: var(--cc-line-tight); }
.cc-hero__lead {
  margin: 0;
  max-width: var(--cc-measure);
  font-size: 1.15rem;
  color: var(--cc-on-frame);
}
.cc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cc-space-s);
}

/* ---- Module: collection — composable collection of items ---- */
/* Layout axis — one markup, a modifier switches the flow. */
.cc-collection { margin: var(--cc-space-xl) 0; }
.cc-collection__items { display: grid; gap: var(--cc-space-m); }

/* grid (default): as many ~16rem columns as fit; pin with --cols-N. */
.cc-collection--grid .cc-collection__items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.cc-collection--cols-2 .cc-collection__items { grid-template-columns: repeat(2, 1fr); }
.cc-collection--cols-3 .cc-collection__items { grid-template-columns: repeat(3, 1fr); }
.cc-collection--cols-4 .cc-collection__items { grid-template-columns: repeat(4, 1fr); }

/* row: items wrap in a flexible row. */
.cc-collection--row .cc-collection__items { display: flex; flex-wrap: wrap; }
.cc-collection--row .cc-item { flex: 1 1 16rem; }

/* gallery: image-tuned grid (denser, tighter gaps). */
.cc-collection--gallery .cc-collection__items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--cc-space-2xs);
}

/* stack: a single column. */
.cc-collection--stack .cc-collection__items { grid-template-columns: 1fr; }

/* Collapse pinned columns to one on small screens. */
@media (max-width: 48rem) {
  .cc-collection--cols-2 .cc-collection__items,
  .cc-collection--cols-3 .cc-collection__items,
  .cc-collection--cols-4 .cc-collection__items { grid-template-columns: 1fr; }
}

/* Item-content axis — the cell. Base item is a flex column; variants add chrome.
   --plain: media + title + text + actions (the first cell option). */
.cc-item { display: flex; flex-direction: column; min-width: 0; }
.cc-item--plain {
  background: var(--cc-panel);
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
}
.cc-item__media { display: block; }
/* Frame the media image. Also catch a bare <img> left directly in a plain cell
   after an editor flattens the <a class="cc-item__media"> wrapper — without this
   it keeps its natural aspect and breaks the grid / gallery alignment. */
.cc-item__media img,
.cc-item--plain > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.cc-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2xs);
  padding: var(--cc-space-m);
}
.cc-item__title { margin: 0; font-size: 1.2rem; line-height: var(--cc-line-tight); }
.cc-item__text { margin: 0; color: var(--cc-ink-soft); }
.cc-item__actions { margin-top: auto; padding-top: var(--cc-space-2xs); }

/* gallery cells are image-first: drop the card chrome, square the media. */
.cc-collection--gallery .cc-item--plain { border: 0; border-radius: var(--cc-radius); }
.cc-collection--gallery .cc-item__media img,
.cc-collection--gallery .cc-item--plain > img { aspect-ratio: 1 / 1; }

/* figure / overlay — a captioned media cell. The canonical element is <figure>,
   which is ALSO exactly what Joomla's Media Manager inserts (<figure class="image">
   with <img> + <figcaption>, plus a stray <br>) — so a hand-authored cell and the
   Media-Manager output render identically (the Manager's bare <figure> is picked
   up as a figure cell, scoped to a direct child of the items track so figures
   elsewhere in content are untouched). --figure puts the caption below the image;
   --overlay lays it over the image on a contrast scrim. Works wrapped
   (<a class="cc-item__media"><img></a>) or bare; editor-added width/height
   ATTRIBUTES are overridden by these stylesheet rules, so it frames either way. */
.cc-collection__items > br { display: none; }

.cc-item--figure,
.cc-item--overlay,
.cc-collection__items > figure {
  margin: 0;
  min-width: 0;
  background: var(--cc-panel);
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
}
.cc-item--figure img,
.cc-item--overlay img,
.cc-collection__items > figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* caption below the image (figure, and the Media-Manager figure). The :not()
   keeps this off an --overlay figure — without it this selector is more specific
   than the overlay rule below and would win the caption colour. */
.cc-item--figure figcaption,
.cc-collection__items > figure:not(.cc-item--overlay) figcaption {
  padding: var(--cc-space-2xs) var(--cc-space-m) var(--cc-space-s);
  color: var(--cc-ink-soft);
  font-size: 0.95rem;
}
/* caption over the foot of the image, on a scrim so it stays legible over any
   photo (contrast-safe regardless of the image). */
.cc-item--overlay { position: relative; }
.cc-item--overlay figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--cc-space-l) var(--cc-space-m) var(--cc-space-s);
  color: var(--cc-on-frame);
  font-size: 0.95rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--cc-frame) 88%, transparent), transparent);
}
/* gallery: square media, drop the card chrome (matches plain gallery cells). */
.cc-collection--gallery .cc-item--figure,
.cc-collection--gallery .cc-item--overlay,
.cc-collection--gallery .cc-collection__items > figure { border: 0; border-radius: var(--cc-radius); }
.cc-collection--gallery .cc-item--figure img,
.cc-collection--gallery .cc-item--overlay img,
.cc-collection--gallery .cc-collection__items > figure img { aspect-ratio: 1 / 1; }

/* Item-content variants — more cell options, each works in ANY layout (orthogonal
   to the layout axis). Pulled from the four-site audit: icon / stat / testimonial
   / price all appear in real sections. */

/* icon: centred icon + title + text. The icon inherits currentColor → accent. */
.cc-item--icon { align-items: center; text-align: center; gap: var(--cc-space-2xs); padding: var(--cc-space-m); }
.cc-item__icon { width: 3rem; height: 3rem; color: var(--cc-accent); }
.cc-item__icon svg,
.cc-item__icon img { display: block; width: 100%; height: 100%; }

/* stat: a big number + a label. */
.cc-item--stat { align-items: center; text-align: center; padding: var(--cc-space-m); }
.cc-item__stat-num { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; line-height: 1; color: var(--cc-accent); }
.cc-item__stat-label { margin-top: var(--cc-space-3xs); color: var(--cc-ink-soft); }

/* testimonial: rating + quote + attribution. */
.cc-item--testimonial {
  gap: var(--cc-space-2xs);
  padding: var(--cc-space-m);
  background: var(--cc-panel);
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-radius-lg);
}
.cc-item__rating { color: var(--cc-accent); letter-spacing: 0.1em; }
.cc-item__quote { margin: 0; font-style: italic; }
.cc-item__cite { font-style: normal; font-weight: 600; color: var(--cc-ink-soft); }

/* price: a headline price + a spec line + an action. */
.cc-item--price {
  gap: var(--cc-space-2xs);
  padding: var(--cc-space-m);
  background: var(--cc-panel);
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-radius-lg);
}
.cc-item__price { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--cc-accent); }
.cc-item__spec { color: var(--cc-ink-soft); font-size: 0.95rem; }

/* ---- Module: popup — lightbox overlay for collection media (needs js/modules.js) ---- */
.cc-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-xl) var(--cc-space-2xl);
  background: color-mix(in srgb, var(--cc-frame) 90%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cc-transition), visibility var(--cc-transition);
}
.cc-popup.is-open { opacity: 1; visibility: visible; }

/* image + caption stack, centred in the overlay */
.cc-popup__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-s);
  max-width: 100%;
  max-height: 100%;
}
.cc-popup__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  /* subtle zoom-in on open, and a fade between slides (JS toggles opacity) */
  transform: scale(0.96);
  transition: transform var(--cc-transition), opacity var(--cc-transition);
}
.cc-popup.is-open .cc-popup__img { transform: scale(1); }
.cc-popup__caption {
  max-width: 60ch;
  text-align: center;
  color: var(--cc-on-frame);
  font-size: 0.95rem;
  line-height: var(--cc-line-tight);
}
.cc-popup__caption:empty { display: none; }

/* position counter (e.g. 2 / 4), top-left opposite the close button */
.cc-popup__count {
  position: absolute;
  top: var(--cc-space-m);
  left: var(--cc-space-m);
  color: var(--cc-on-frame);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.cc-popup__count:empty { display: none; }

.cc-popup__close,
.cc-popup__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-frame) 55%, transparent);
  color: var(--cc-on-frame);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cc-transition);
}
.cc-popup__close { top: var(--cc-space-m); right: var(--cc-space-m); }
.cc-popup__nav--prev { left: var(--cc-space-m); top: 50%; transform: translateY(-50%); }
.cc-popup__nav--next { right: var(--cc-space-m); top: 50%; transform: translateY(-50%); }
.cc-popup__close:hover,
.cc-popup__close:focus-visible,
.cc-popup__nav:hover,
.cc-popup__nav:focus-visible { background: var(--cc-accent); color: var(--cc-on-accent); }

/* Any image in a popup collection is clickable. Two activation hooks: the
   data-cc-popup attribute, or the .cc-collection--popup class — prefer the class
   for content pasted into a CMS, since editors can strip data-* attributes. */
.cc-collection[data-cc-popup] img,
.cc-collection--popup img { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .cc-popup { transition: none; }
  .cc-popup__img { transition: none; transform: none; }
}

@media print { .cc-popup { display: none; } }

/* ---- Module: slideshow — one-at-a-time collection layout (scroll-snap; js/modules.js adds controls) ---- */
.cc-collection--slideshow { position: relative; }
.cc-collection--slideshow .cc-collection__items {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* controls replace the scrollbar; -webkit below */
  -webkit-overflow-scrolling: touch;
}
.cc-collection--slideshow .cc-collection__items::-webkit-scrollbar { width: 0; height: 0; }
.cc-collection--slideshow .cc-item {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

/* prev / next buttons (added by JS) */
.cc-slideshow__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cc-frame) 55%, transparent);
  color: var(--cc-on-frame);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cc-transition);
}
.cc-slideshow__btn--prev { left: var(--cc-space-s); }
.cc-slideshow__btn--next { right: var(--cc-space-s); }
.cc-slideshow__btn:hover,
.cc-slideshow__btn:focus-visible { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-slideshow__btn[disabled] { opacity: 0.4; cursor: default; }

/* pagination dots (added by JS) */
.cc-slideshow__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cc-space-2xs);
  margin-top: var(--cc-space-s);
}
.cc-slideshow__dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cc-rule-strong);
  cursor: pointer;
  transition: background var(--cc-transition);
}
.cc-slideshow__dot[aria-current="true"] { background: var(--cc-accent); }

/* autoplay pause/play toggle (added by JS only when --autoplay is set) */
.cc-slideshow__play {
  position: absolute;
  top: var(--cc-space-s);
  right: var(--cc-space-s);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cc-frame) 55%, transparent);
  color: var(--cc-on-frame);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cc-transition);
}
.cc-slideshow__play:hover,
.cc-slideshow__play:focus-visible { background: var(--cc-accent); color: var(--cc-on-accent); }

@media (prefers-reduced-motion: reduce) {
  .cc-collection--slideshow .cc-collection__items { scroll-behavior: auto; }
}

/* print: drop the controls and linearise so every slide prints, not just slide 1 */
@media print {
  .cc-slideshow__btn,
  .cc-slideshow__dots,
  .cc-slideshow__play { display: none; }
  .cc-collection--slideshow .cc-collection__items { display: block; overflow: visible; }
  .cc-collection--slideshow .cc-item { break-inside: avoid; margin-bottom: var(--cc-space-m); }
}

/* ---- Module: back-to-top — scroll-to-top button (needs js/modules.js) ---- */
.cc-to-top {
  position: fixed;
  right: var(--cc-space-m);
  bottom: var(--cc-space-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  text-decoration: none;
  box-shadow: var(--cc-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--cc-transition), transform var(--cc-transition),
    visibility var(--cc-transition);
}
.cc-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.cc-to-top:hover,
.cc-to-top:focus-visible { background: var(--cc-accent-hover); color: var(--cc-on-accent); }
@media (prefers-reduced-motion: reduce) {
  .cc-to-top { transition: none; }
}

@media print { .cc-to-top { display: none; } }