/* ==========================================================================
   gallery.css: the Default FWRE design's AUTONOMOUS gallery PICTURE skin.

   Forked from the shared demo-gallery.css floor and retokenized to speak ONLY this
   design's own --fwre-* tokens (design-tokens.css): ZERO --demo-* (the outer
   demo/website theme's vocabulary). Loaded for `default` via the gallery enqueue's
   fwre_design_owns_skin('gallery') guard; agency keeps the demo-gallery.css floor.

   STRUCTURE is the live FW Gallery component (fwre-grid-*), ported from
   fwg/components/com_fwgallery/assets/css/fwre-design-styles.css, see
   docs/gallery-parity.md (lessons l-0002 / l-0040: a PICTURE region mirrors the
   live product's markup, never a re-imagined design). Tokens only, scoped under
   .fwre-stage (inside #fwre). The 6 fwre-design-<template> variants reproduce each
   live template's structural character (standard / classic / beauty / pinterest /
   polaroid / fancy).
   ========================================================================== */

.fwre-stage { color: var(--fwre-black); }
.fwre-galleries-title    { font-size: var(--fwre-text-4xl);  font-weight: var(--fwre-weight-bold); margin: 0 0 var(--fwre-space-4); color: var(--fwre-black); }
.fwre-galleries-subtitle { font-size: var(--fwre-text-xl); font-weight: var(--fwre-weight-semibold); margin: var(--fwre-space-28) 0 var(--fwre-space-12); color: var(--fwre-black); }
.fwre-galleries-intro    { color: var(--fwre-grey-dark-deep); margin: 0 0 var(--fwre-space-16); max-width: 65ch; }
.fwre-gf-counter         { display: flex; flex-wrap: wrap; gap: var(--fwre-space-16); color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-md); margin: 0 0 var(--fwre-space-18); }
.fwre-gf-counter-item    { display: inline-flex; align-items: center; gap: .35em; /* hold: off-scale (decisions r2) */ }

/* --- the grid (live: display:grid; columns from .fwre-grid-columns-N) --- */
.fwre-grid-wrapper   { margin: 0 0 1.5rem; /* hold: off-scale (decisions r2) */ }
.fwre-grid-container { display: grid; gap: var(--fwre-space-16); grid-template-columns: repeat(4, 1fr); }
.fwre-grid-columns-2 { grid-template-columns: repeat(2, 1fr); }
.fwre-grid-columns-3 { grid-template-columns: repeat(3, 1fr); }
.fwre-grid-columns-4 { grid-template-columns: repeat(4, 1fr); }
.fwre-grid-columns-5 { grid-template-columns: repeat(5, 1fr); }
.fwre-grid-columns-6 { grid-template-columns: repeat(6, 1fr); }

/* --- the tile: image on top, info below (live: .fwre-grid-item is flex column) --- */
.fwre-grid-item {
  display: flex; flex-flow: column nowrap;
  background: var(--fwre-white); border: 1px solid var(--fwre-grey-border);
  border-radius: var(--fwre-radius-card); overflow: hidden;
  transition: border-color var(--fwre-fast) var(--fwre-ease), box-shadow var(--fwre-fast) var(--fwre-ease);
}
.fwre-grid-item:hover { border-color: var(--fwre-grey); box-shadow: var(--fwre-shadow); }

/* image-wrapper holds a 4:3 box; image is absolute + object-fit:cover (live anatomy) */
.fwre-grid-item-image-wrapper { display: block; position: relative; overflow: hidden; }
.fwre-grid-item-image-wrapper::before { content: ''; display: block; padding-top: 72%; }
.fwre-grid-item-image { position: absolute; inset: 0; overflow: hidden; }
.fwre-grid-item-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--fwre-ease);
}
.fwre-grid-item:hover .fwre-grid-item-image img { transform: scale(1.045); }
.fwre-grid-item--video .fwre-grid-item-image { background: #000; }
/* Live FW Gallery video tile = `.fwre-video-plugin` wrapping the embed iframe (fills the tile). */
.fwre-video-plugin { position: absolute; inset: 0; background: #000; }
.fwre-video-plugin iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fwre-watermark {
  position: absolute; right: .5rem; bottom: .5rem; font-size: var(--fwre-text-xs); color: var(--fwre-white);
  background: rgba(0,0,0,.45); padding: var(--fwre-space-2) var(--fwre-space-6); border-radius: 3px; pointer-events: none;
}

/* placeholder for a category with no resolvable cover (imageless demo-scaffold categories) */
.fwre-grid-item-image--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--fwre-grey-light);
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,.02) 10px 20px);
  color: var(--fwre-grey-dark-deep);
}
.fwre-grid-item-image--placeholder [fwk-icon] { font-size: 2rem; /* hold: off-scale (decisions r2) */ opacity: .5; }

/* info column (live: .fwre-grid-item-info, name / stats / description / tags) */
.fwre-grid-item-info { display: flex; flex-flow: column nowrap; gap: var(--fwre-space-6); padding: var(--fwre-space-12) var(--fwre-space-12) var(--fwre-space-14); flex: 1 1 auto; }
.fwre-grid-item-name a { color: var(--fwre-black); font-weight: var(--fwre-weight-semibold); text-decoration: none; }
.fwre-grid-item-name a:hover { color: var(--fwre-green); }
.fwre-grid-item-stats { display: flex; flex-wrap: wrap; gap: var(--fwre-space-10); color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-base); }
.fwre-grid-item-stats > span { display: inline-flex; align-items: center; gap: .3em; /* hold: off-scale (decisions r2) */ }
.fwre-grid-item-meta { display: flex; flex-wrap: wrap; gap: var(--fwre-space-10); color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-sm); }
.fwre-grid-item-meta-item { display: inline-flex; align-items: center; gap: .3em; /* hold: off-scale (decisions r2) */ }
.fwre-grid-item-rating { color: var(--fwre-green); font-size: var(--fwre-text-md); }
.fwre-grid-item-rating .fwre-votes { color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-sm); }
.fwre-grid-item-description { color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-md); line-height: 1.45; }
.fwre-gallery-info-tags { font-size: var(--fwre-text-base); color: var(--fwre-grey-dark-deep); }
.fwre-gallery-info-tags a { color: var(--fwre-green); text-decoration: none; }
.fwre-gallery-info-tags a:hover { text-decoration: underline; }
.fwre-grid-item-audio { width: 100%; margin-top: var(--fwre-space-4); }

/* more-block + pager (live: .fwre-more-block / pagination) */
.fwre-more-block { text-align: center; margin-top: var(--fwre-space-18); }
.fwre-more-link {
  display: inline-flex; align-items: center; gap: .4em; /* hold: off-scale (decisions r2) */ cursor: pointer;
  padding: var(--fwre-space-8) var(--fwre-space-18); border-radius: var(--fwre-radius);
  background: var(--fwre-grey-light); color: var(--fwre-black);
  border: 1px solid var(--fwre-grey-border); font-size: var(--fwre-text-md);
}
.fwre-more-link:hover { border-color: var(--fwre-grey); }
.fwre-more-count { color: var(--fwre-grey-dark-deep); }
.fwre-pagination { display: flex; gap: var(--fwre-space-5); justify-content: center; margin-top: var(--fwre-space-18); }
.fwre-page {
  min-width: 2rem; height: 2rem; padding: 0 var(--fwre-space-8); cursor: pointer;
  background: var(--fwre-grey-light); color: var(--fwre-black);
  border: 1px solid var(--fwre-grey-border); border-radius: var(--fwre-radius-sm); font-size: var(--fwre-text-md);
}
.fwre-page.is-active { background: var(--fwre-green); color: var(--fwre-white); border-color: var(--fwre-green); }

/* ==========================================================================
   Design variants: each fwre-design-<template> reproduces a live template's
   structural character (skin via demo tokens).
   ========================================================================== */

/* classic (Grid): tighter, borderless tiles, centered captions */
.fwre-design-classic .fwre-grid-container { gap: var(--fwre-space-10); }
.fwre-design-classic .fwre-grid-item { background: transparent; border: 0; border-radius: var(--fwre-radius-sm); }
.fwre-design-classic .fwre-grid-item-info { padding: var(--fwre-space-8) var(--fwre-space-4); text-align: center; gap: var(--fwre-space-4); }

/* beauty (Editorial): generous whitespace, larger imagery, refined captions */
.fwre-design-beauty .fwre-grid-container { gap: var(--fwre-space-26); }
.fwre-design-beauty .fwre-grid-item { background: transparent; border: 0; }
.fwre-design-beauty .fwre-grid-item-image-wrapper::before { padding-top: 66%; }
.fwre-design-beauty .fwre-grid-item-info { padding: var(--fwre-space-12) var(--fwre-space-2); text-align: center; }
.fwre-design-beauty .fwre-grid-item-name a { font-size: var(--fwre-text-xl); font-weight: var(--fwre-weight-bold); letter-spacing: .01em; }

/* pinterest (Masonry): CSS columns, natural image heights */
.fwre-design-pinterest .fwre-grid-container { display: block; column-gap: var(--fwre-space-16); }
.fwre-design-pinterest .fwre-grid-columns-2 { column-count: 2; }
.fwre-design-pinterest .fwre-grid-columns-3 { column-count: 3; }
.fwre-design-pinterest .fwre-grid-columns-4 { column-count: 4; }
.fwre-design-pinterest .fwre-grid-columns-5 { column-count: 5; }
.fwre-design-pinterest .fwre-grid-columns-6 { column-count: 6; }
.fwre-design-pinterest .fwre-grid-item { break-inside: avoid; margin: 0 0 var(--fwre-space-16); }
.fwre-design-pinterest .fwre-grid-item-image-wrapper::before { display: none; }
.fwre-design-pinterest .fwre-grid-item-image { position: static; }
.fwre-design-pinterest .fwre-grid-item-image img { height: auto; }

/* polaroid (Card): white frame, caption under, soft shadow */
.fwre-design-polaroid .fwre-grid-container { gap: var(--fwre-space-20); }
.fwre-design-polaroid .fwre-grid-item { background: var(--fwre-white); border: 0; border-radius: 2px; padding: var(--fwre-space-8) var(--fwre-space-8) 0; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.fwre-design-polaroid .fwre-grid-item:hover { box-shadow: 0 10px 26px rgba(0,0,0,.36); }
.fwre-design-polaroid .fwre-grid-item-info { text-align: center; padding: var(--fwre-space-10) var(--fwre-space-4) var(--fwre-space-12); }
.fwre-design-polaroid .fwre-grid-item-name a { color: #1c1c1c; }
.fwre-design-polaroid .fwre-grid-item-stats,
.fwre-design-polaroid .fwre-grid-item-description,
.fwre-design-polaroid .fwre-grid-item-meta { color: #5a5a5a; }

/* fancy (Cinematic): tall tiles, info overlaid on a gradient */
.fwre-design-fancy .fwre-grid-item { background: #000; border: 0; }
.fwre-design-fancy .fwre-grid-item-image-wrapper::before { padding-top: 125%; }
.fwre-design-fancy .fwre-grid-item-info {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem var(--fwre-space-14) var(--fwre-space-12); /* 1.5rem: hold, off-scale (decisions r2) */
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); color: var(--fwre-white);
}
.fwre-design-fancy .fwre-grid-item-name a,
.fwre-design-fancy .fwre-grid-item-stats,
.fwre-design-fancy .fwre-grid-item-description { color: var(--fwre-white); }
.fwre-design-fancy .fwre-grid-item-description { opacity: .85; }

/* feature-page section variants (overlay / hover) carried from the model */
.fwre-variant-info-overlay .fwre-grid-item-info,
.fwre-variant-info-hover .fwre-grid-item-info {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem var(--fwre-space-12) var(--fwre-space-12); /* 1.4rem: hold, off-scale (decisions r2) */
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); color: var(--fwre-white);
}
.fwre-variant-info-hover .fwre-grid-item-info { opacity: 0; transition: opacity var(--fwre-fast) var(--fwre-ease); }
.fwre-variant-info-hover .fwre-grid-item:hover .fwre-grid-item-info { opacity: 1; }
.fwre-variant-info-overlay .fwre-grid-item-name a,
.fwre-variant-info-hover .fwre-grid-item-name a { color: var(--fwre-white); }

/* --- responsive: collapse columns on small screens (specificity beats columns-N) --- */
@media (max-width: 1100px) {
  .fwre-stage .fwre-grid-container { grid-template-columns: repeat(3, 1fr); }
  .fwre-stage.fwre-design-pinterest .fwre-grid-container,
  .fwre-design-pinterest .fwre-grid-container { column-count: 3; }
}
@media (max-width: 760px) {
  .fwre-stage .fwre-grid-container { grid-template-columns: repeat(2, 1fr); }
  .fwre-design-pinterest .fwre-grid-container { column-count: 2; }
}
@media (max-width: 460px) {
  .fwre-stage .fwre-grid-container { grid-template-columns: 1fr; }
  .fwre-design-pinterest .fwre-grid-container { column-count: 1; }
}

/* ==========================================================================
   Single-file DETAIL view (ds-detail-*): retained skin for the detail renderer;
   structural parity with single-file.html tracked in P6.
   ========================================================================== */
.ds-gallery-doc-title { font-size: var(--fwre-text-4xl); font-weight: var(--fwre-weight-bold); margin: 0 0 var(--fwre-space-16); color: var(--fwre-black); }
.ds-detail-main { border-radius: var(--fwre-radius-card); overflow: hidden; background: var(--fwre-white); }
.ds-detail-main img { width: 100%; display: block; }
.ds-detail-main--video { position: relative; padding-top: 56.25%; }
.ds-detail-main--video .ds-gallery-embed { position: absolute; inset: 0; }
.ds-detail-main--video iframe { width: 100%; height: 100%; border: 0; }
.ds-detail-audio { width: 100%; margin-top: var(--fwre-space-12); }
.ds-detail-thumbwrap { display: flex; align-items: center; gap: var(--fwre-space-8); margin-top: var(--fwre-space-12); }
.ds-detail-thumbs { display: flex; gap: var(--fwre-space-8); overflow-x: auto; scroll-behavior: smooth; }
.ds-detail-thumb { flex: 0 0 auto; width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: var(--fwre-radius-sm); overflow: hidden; cursor: pointer; background: none; }
.ds-detail-thumb.is-active { border-color: var(--fwre-green); }
.ds-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-detail-thumbnav { flex: 0 0 auto; background: var(--fwre-grey-light); border: 1px solid var(--fwre-grey-border); border-radius: var(--fwre-radius-sm); width: 2rem; height: 2rem; cursor: pointer; color: var(--fwre-black); }
.ds-detail-info { color: var(--fwre-black); }
.ds-detail-desc { color: var(--fwre-grey-dark-deep); line-height: 1.5; }
.ds-gallery-meta, .ds-gallery-filemeta { display: flex; flex-wrap: wrap; gap: var(--fwre-space-10); color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-base); margin-bottom: var(--fwre-space-8); }
.ds-gallery-meta-item, .ds-gallery-filemeta-item { display: inline-flex; align-items: center; gap: .3em; /* hold: off-scale (decisions r2) */ }
.ds-gallery-rating { color: var(--fwre-green); margin: var(--fwre-space-4) 0; }
.ds-gallery-votes { color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-sm); }
.ds-gallery-tags { font-size: var(--fwre-text-base); color: var(--fwre-grey-dark-deep); margin: var(--fwre-space-6) 0; }
.ds-gallery-tags a { color: var(--fwre-green); text-decoration: none; }
.ds-detail-download { margin-top: var(--fwre-space-12); }
.ds-gallery-share { display: flex; gap: var(--fwre-space-6); margin-top: var(--fwre-space-12); }
.ds-gallery-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--fwre-grey-light); border: 1px solid var(--fwre-grey-border); color: var(--fwre-black); }

/* ==========================================================================
   In-page modal lightbox (file_open_as=popup): demo-gallery-modal.js.
   The faithful equivalent of the live #fwre-one-file modal: the file detail
   loads into an overlay over the gallery, with prev/next + fullscreen.
   ========================================================================== */
body.fwre-modal-open { overflow: hidden; }

.fwre-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 2.5rem clamp(1rem, 6vw, 4.5rem); /* hold: off-scale (decisions r2) */ }
.fwre-modal-overlay[hidden] { display: none; }
.fwre-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(2px); }

.fwre-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 1040px; max-height: 88vh; overflow: auto; background: var(--fwre-white); border: 1px solid var(--fwre-grey-border); border-radius: var(--fwre-radius-card); box-shadow: var(--fwre-shadow); }
.fwre-modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--fwre-space-16); padding: var(--fwre-space-14) var(--fwre-space-18); background: var(--fwre-white); border-bottom: 1px solid var(--fwre-grey-border); }
.fwre-modal-title { margin: 0; font-size: var(--fwre-text-xl); color: var(--fwre-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwre-modal-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--fwre-grey-light); border: 1px solid var(--fwre-grey-border); color: var(--fwre-black); cursor: pointer; transition: background var(--fwre-fast) var(--fwre-ease); }
.fwre-modal-close:hover { background: var(--fwre-grey-border); }
.fwre-modal-content { padding: var(--fwre-space-18) var(--fwre-space-20) 1.5rem; /* 1.5rem: hold, off-scale (decisions r2) */ }
/* the fragment repeats the file title as an h2, the modal head already shows it */
.fwre-modal-content .ds-gallery-doc-title { display: none; }

.fwre-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--fwre-white); border: 1px solid var(--fwre-grey); color: var(--fwre-black); cursor: pointer; box-shadow: var(--fwre-shadow); transition: background var(--fwre-fast) var(--fwre-ease), opacity var(--fwre-fast) var(--fwre-ease); }
.fwre-modal-nav:hover { background: var(--fwre-green); color: var(--fwre-white); }
.fwre-modal-nav:disabled { opacity: .35; cursor: default; }
.fwre-modal-prev { left: clamp(.4rem, 3vw, 2rem); }
.fwre-modal-next { right: clamp(.4rem, 3vw, 2rem); }

.fwre-modal-spinner { width: 2.2rem; height: 2.2rem; margin: 3rem auto; /* hold: off-scale (decisions r2) */ border: 3px solid var(--fwre-grey-border); border-top-color: var(--fwre-green); border-radius: 50%; animation: fwre-spin .7s linear infinite; }
@keyframes fwre-spin { to { transform: rotate(360deg); } }

/* fullscreen / zoom of the main image */
.fwre-fs-overlay { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.fwre-fs-overlay[hidden] { display: none; }
.fwre-fs-img { max-width: 94vw; max-height: 94vh; object-fit: contain; cursor: zoom-in; transition: transform var(--fwre-fast) var(--fwre-ease); }
.fwre-fs-img.is-zoomed { transform: scale(1.8); cursor: zoom-out; }
.fwre-fs-close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: var(--fwre-white); cursor: pointer; }

@media (max-width: 640px) {
    .fwre-modal-overlay { padding: var(--fwre-space-16); }
    .fwre-modal-nav { width: 2.3rem; height: 2.3rem; }
    .fwre-modal-prev { left: .3rem; } .fwre-modal-next { right: .3rem; }
}

/* ==========================================================================
   Category Layouts: Tabbed + Slideshow (the add-on listing layouts).
   demo-gallery-layouts.js drives them. The fwre-grid-<layout> wrapper is the
   live load-bearing class (docs/gallery-parity.md axis #2).
   ========================================================================== */
/* Tabbed */
.fwre-grid-tabbed .fwre-tabs { display: flex; flex-wrap: wrap; gap: var(--fwre-space-6); border-bottom: 1px solid var(--fwre-grey-border); margin-bottom: var(--fwre-space-18); }
.fwre-tab { padding: var(--fwre-space-8) var(--fwre-space-16); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--fwre-grey-dark-deep); font-weight: var(--fwre-weight-semibold); cursor: pointer; border-radius: var(--fwre-radius-sm) var(--fwre-radius-sm) 0 0; transition: color var(--fwre-fast) var(--fwre-ease), border-color var(--fwre-fast) var(--fwre-ease); }
.fwre-tab:hover { color: var(--fwre-black); }
.fwre-tab.is-active { color: var(--fwre-green); border-bottom-color: var(--fwre-green); }
.fwre-tab-panel[hidden] { display: none; }

/* Slideshow */
.fwre-grid-slideshow .fwre-slideshow { position: relative; display: flex; align-items: center; gap: var(--fwre-space-8); }
.fwre-slide-viewport { flex: 1 1 auto; overflow: hidden; border-radius: var(--fwre-radius-card); border: 1px solid var(--fwre-grey-border); background: var(--fwre-grey-light); }
.fwre-slide-track { display: flex; transition: transform .45s var(--fwre-ease); }
.fwre-slide { flex: 0 0 100%; position: relative; }
.fwre-slide-link { display: block; }
.fwre-slide-link img { display: block; width: 100%; height: clamp(280px, 52vh, 560px); object-fit: cover; }
.fwre-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--fwre-space-12) var(--fwre-space-18); color: var(--fwre-white); background: linear-gradient(transparent, rgba(0, 0, 0, .66)); font-weight: var(--fwre-weight-semibold); }
.fwre-slide-nav { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--fwre-white); border: 1px solid var(--fwre-grey); color: var(--fwre-black); cursor: pointer; box-shadow: var(--fwre-shadow); }
.fwre-slide-nav:hover { background: var(--fwre-green); color: var(--fwre-white); }
.fwre-slide-dots { position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%); display: flex; gap: var(--fwre-space-6); }
.fwre-slide-dot { width: .55rem; height: .55rem; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; }
.fwre-slide-dot.is-active { background: var(--fwre-white); }