/*
 * JoomGallery Responsive Grid Workframe
 * -------------------------------------
 *
 * Template contract:
 *   <div class="jg-gallery">
 *     <div class="jg-responsive-grid jg-grid--masonry"
 *          data-jg-responsive="1"
 *          data-jg-template="images|subcategories"
 *          data-jg-layout="columns|masonry|justified|card"
 *          data-jg-columns="1..6">
 *       <div class="jg-image">...</div>
 *     </div>
 *   </div>
 *
 * Future templates should keep this wrapper/data contract and the direct
 * .jg-image children. Breakpoints, spacing and column reduction then remain
 * centralized here instead of being copied into each template.
 * The com_joomgallery.responsive-grid-runtime asset keeps assisted layouts
 * synchronized when their parent container changes width.
 */

.jg-gallery {
  container-type: inline-size;
  container-name: jg-gallery;
  min-width: 0;
  width: 100%;
}

/*
 * The site template has a global Breadcrumb rule that intentionally centers
 * generic navigation against the viewport. JoomGallery pages have a local
 * content shell, so the breadcrumb must share that shell's left and right
 * edges with the title and the grid. Keep this override scoped to the
 * component; other site breadcrumbs remain unchanged.
 */
.jg-gallery-page > .jg-personalized-breadcrumb {
    position: relative !important;
    left: auto !important;
    width: min(100%, calc(100vw - 2rem)) !important;
    max-width: min(100%, calc(100vw - 2rem)) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.jg-gallery-page > .jg-personalized-breadcrumb .jp-category-cards__breadcrumb-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.jg-gallery-page > .jg-personalized-breadcrumb .jp-category-cards__breadcrumb-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

.jg-gallery-page > .jg-personalized-breadcrumb .jp-category-cards__breadcrumb-item:last-child {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jg-gallery-page > .jg-personalized-breadcrumb .jp-category-cards__breadcrumb-item:last-child > span,
.jg-gallery-page > .jg-personalized-breadcrumb .jp-category-cards__breadcrumb-item:last-child > a {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*
 * The active site template also declares important breadcrumb rules inside
 * its structural-priority layer. Reopen that layer here with a more specific
 * JoomGallery-only contract, so its hierarchy remains one line at every
 * viewport without changing other site breadcrumbs.
 */
@layer jp-structural-boundary-priority {
    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list > .jp-category-cards__breadcrumb-item {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list > .jp-category-cards__breadcrumb-item:last-child {
        flex: 1 1 4rem !important;
        min-width: 4rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list > .jp-category-cards__breadcrumb-item:not(:last-child) > span,
    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list > .jp-category-cards__breadcrumb-item:not(:last-child) > a,
    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list > .jp-category-cards__breadcrumb-item:last-child > span,
    html body.site.site #sp-main-body#sp-main-body .jg-gallery-page > .jg-personalized-breadcrumb > .jp-category-cards__breadcrumb-list > .jp-category-cards__breadcrumb-item:last-child > a {
    display: block !important;
    min-width: 0 !important;
        max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    }
}

.jg-gallery-page,
.jg-gallery-page > .gallery-header,
.jg-gallery-page > .page-header,
.jg-gallery-page > h1,
.jg-gallery-page > h2,
.jg-gallery-page > h3,
.jg-gallery-page > .jg-gallery,
.jg-gallery-page > .jg-gallery-category-title {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.jg-responsive-grid {
  --jg-grid-columns: 4;
  --jg-grid-gap: clamp(1rem, 2vw, 2rem);
  --jg-grid-media-ratio: 4 / 3;

  display: grid;
  grid-template-columns: repeat(var(--jg-grid-columns), minmax(0, 1fr));
  gap: var(--jg-grid-gap);
  align-items: start;
  width: 100%;
  min-width: 0;
  overflow-anchor: none;
}

@supports (width: 1cqi) {
  .jg-responsive-grid {
    --jg-grid-gap: clamp(1rem, 2cqi, 2rem);
  }
}

.jg-responsive-grid[data-jg-columns="1"] {
  --jg-grid-columns: 1;
}

.jg-responsive-grid[data-jg-columns="2"] {
  --jg-grid-columns: 2;
}

.jg-responsive-grid[data-jg-columns="3"] {
  --jg-grid-columns: 3;
}

.jg-responsive-grid[data-jg-columns="4"] {
  --jg-grid-columns: 4;
}

.jg-responsive-grid[data-jg-columns="5"] {
  --jg-grid-columns: 5;
}

.jg-responsive-grid[data-jg-columns="6"] {
  --jg-grid-columns: 6;
}

/* Viewport fallback for browsers without container-query support. */
@media (max-width: 96rem) {
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 5;
  }
}

@media (max-width: 80rem) {
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 4;
  }
}

@media (max-width: 64rem) {
  .jg-responsive-grid[data-jg-columns="4"],
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 3;
  }
}

@media (max-width: 50rem) {
  .jg-responsive-grid[data-jg-columns="3"],
  .jg-responsive-grid[data-jg-columns="4"],
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 2;
  }
}

@media (max-width: 36rem) {
  .jg-responsive-grid[data-jg-columns="2"],
  .jg-responsive-grid[data-jg-columns="3"],
  .jg-responsive-grid[data-jg-columns="4"],
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 1;
  }
}

/*
 * Container breakpoints use the actual gallery area rather than the browser
 * viewport. This keeps the same behavior inside a narrow Joomla column,
 * drawer, module position or a future template shell. The 64rem and 50rem
 * thresholds also cover the common Bootstrap 970px and 750px content shells.
 */
@container jg-gallery (max-width: 96rem) {
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 5;
  }
}

@container jg-gallery (max-width: 80rem) {
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 4;
  }
}

@container jg-gallery (max-width: 64rem) {
  .jg-responsive-grid[data-jg-columns="4"],
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 3;
  }
}

@container jg-gallery (max-width: 50rem) {
  .jg-responsive-grid[data-jg-columns="3"],
  .jg-responsive-grid[data-jg-columns="4"],
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 2;
  }
}

@container jg-gallery (max-width: 36rem) {
  .jg-responsive-grid[data-jg-columns="2"],
  .jg-responsive-grid[data-jg-columns="3"],
  .jg-responsive-grid[data-jg-columns="4"],
  .jg-responsive-grid[data-jg-columns="5"],
  .jg-responsive-grid[data-jg-columns="6"] {
    --jg-grid-columns: 1;
  }
}

.jg-responsive-grid:not(.jg-grid--justified) > .jg-image {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.jg-responsive-grid .jg-image-caption,
.jg-responsive-grid .jg-image-caption-hover,
.jg-responsive-grid .jg-link {
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.jg-responsive-grid.jg-grid--columns > .jg-image {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.jg-responsive-grid.jg-grid--columns > .jg-image > .jg-image-thumbnail {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.jg-responsive-grid.jg-grid--columns > .jg-image > .jg-image-caption {
  flex: 0 0 auto;
  min-width: 0;
}

/* Reserve exactly two title lines in the fixed-frame grid. */
.jg-responsive-grid.jg-grid--columns .jg-image-title {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  min-height: calc(1.4em * 2);
  max-height: calc(1.4em * 2);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jg-responsive-grid.jg-grid--masonry .jg-image-media > a > img,
.jg-responsive-grid.jg-grid--masonry .jg-image-media > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.jg-responsive-grid.jg-grid--masonry .jg-image-thumbnail > a {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.jg-responsive-grid.jg-grid--masonry .jg-image-thumbnail > a > .jg-image-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/*
 * The columns template keeps a stable visual card frame while the image
 * itself remains uncropped. The generated thumbnail already follows the
 * configured 4:3 dimensions, so this prevents layout jumps without loading a
 * larger image or sacrificing the responsive source selection.
 */
.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > .jg-image-media {
  box-sizing: border-box;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: var(--jg-grid-media-ratio);
  background: var(--jg-gray-100);
}

.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > .jg-image-media > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > .jg-image-media > img,
.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > .jg-image-media > a > img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none;
  object-fit: contain;
}

/* Subcategory cards expose the link/image directly, without .jg-image-media. */
.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > a {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--jg-grid-media-ratio);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > a > .jg-image-thumb {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none;
  object-fit: contain;
}

.jg-responsive-grid.jg-grid--justified {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 0;
}

.jg-responsive-grid.jg-grid--justified > .jg-image {
  min-width: 0;
}

/* Keep the page usable while the justified runtime is waiting for image
 * dimensions. ImgJust replaces these temporary widths with exact row widths
 * as soon as the asset and images are ready. */
.jg-responsive-grid.jg-grid--justified:not([data-jg-justified-state="ready"]) {
  gap: var(--jg-grid-gap);
}

.jg-responsive-grid.jg-grid--justified:not([data-jg-justified-state="ready"]) > .jg-image {
  flex: 1 1 calc((100% - (var(--jg-grid-columns) - 1) * var(--jg-grid-gap)) / var(--jg-grid-columns));
  max-width: calc((100% - (var(--jg-grid-columns) - 1) * var(--jg-grid-gap)) / var(--jg-grid-columns));
}

.jg-responsive-grid.jg-grid--justified:not([data-jg-justified-state="ready"]) .jg-image-thumb {
  display: block !important;
  width: 100%;
  height: auto;
}

/*
 * Layout contracts
 * ----------------
 * Keep each visual model independent. The grid uses a fixed media frame,
 * Pinterest uses real CSS columns, Google Photos uses the ImgJust row engine,
 * and Card uses equal-height responsive cards. Future templates can reuse the
 * same data-jg-* contract without copying breakpoint rules.
 */

/* Fixed grid: every card receives the same media frame and two-line title. */
.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > .jg-image-media > img,
.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > .jg-image-media > a > img,
.jg-responsive-grid.jg-grid--columns .jg-image-thumbnail > a > .jg-image-thumb {
  object-fit: cover;
}

/* Pinterest: let each item keep its natural height and flow top-to-bottom. */
.jg-responsive-grid.jg-grid--masonry {
  display: block;
  column-count: var(--jg-grid-columns);
  column-gap: var(--jg-grid-gap);
  column-fill: balance;
  row-gap: 0;
}

.jg-responsive-grid.jg-grid--masonry > .jg-image {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--jg-grid-gap);
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.jg-responsive-grid.jg-grid--masonry .jg-image-thumbnail,
.jg-responsive-grid.jg-grid--masonry .jg-image-media,
.jg-responsive-grid.jg-grid--masonry .jg-image-media > a {
  width: 100%;
  min-width: 0;
}

.jg-responsive-grid.jg-grid--masonry .jg-image-media > a > .jg-image-thumb,
.jg-responsive-grid.jg-grid--masonry .jg-image-thumbnail > a > .jg-image-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Google Photos: the label is always visible, including touch devices where
 * hover cannot be relied upon. The year/title is deliberately separated from
 * the image with a readable modern badge. */
.jg-responsive-grid.jg-grid--justified .jg-image-thumbnail > a,
.jg-responsive-grid.jg-grid--justified .jg-image-media > a {
  position: relative;
  display: block;
  line-height: 0;
}

.jg-responsive-grid.jg-grid--justified .jg-image-overlay {
  position: absolute;
  z-index: 4;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  line-height: 1.2;
}

.jg-responsive-grid.jg-grid--justified .jg-image-overlay__content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  max-width: min(100%, 22rem);
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(24, 30, 38, 0.78);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.22);
  color: #fff;
  backdrop-filter: blur(6px);
}

.jg-responsive-grid.jg-grid--justified .jg-image-overlay__year,
.jg-responsive-grid.jg-grid--justified .jg-image-overlay__label {
  font-size: clamp(0.9rem, 1.8cqi, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.jg-responsive-grid.jg-grid--justified .jg-image-overlay__title,
.jg-responsive-grid.jg-grid--justified .jg-image-overlay__category {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jg-responsive-grid.jg-grid--justified .jg-image-overlay__date {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.jg-responsive-grid.jg-grid--justified .jg-image-overlay__date .jg-date-icon {
  font-size: 0.9em;
}

.jg-responsive-grid .jg-category-date {
  display: block;
  margin-top: 0.2rem;
  color: #68717b;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.jg-responsive-grid.jg-grid--card .jg-category-date {
  margin-top: auto;
}

/* Card: reusable component-like presentation based on the site's cards. */
.jg-responsive-grid.jg-grid--card {
  align-items: stretch;
}

.jg-responsive-grid.jg-grid--card > .jg-image {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(24, 30, 38, 0.12);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.55rem rgba(0, 0, 0, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.jg-responsive-grid.jg-grid--card > .jg-image:hover,
.jg-responsive-grid.jg-grid--card > .jg-image:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.14);
}

.jg-responsive-grid.jg-grid--card .jg-image-thumbnail {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--jg-gray-100);
}

.jg-responsive-grid.jg-grid--card .jg-image-thumbnail > a,
.jg-responsive-grid.jg-grid--card .jg-image-thumbnail > .jg-image-media,
.jg-responsive-grid.jg-grid--card .jg-image-thumbnail > .jg-image-media > a {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.jg-responsive-grid.jg-grid--card .jg-image-thumbnail > a > .jg-image-thumb,
.jg-responsive-grid.jg-grid--card .jg-image-thumbnail > .jg-image-media > img,
.jg-responsive-grid.jg-grid--card .jg-image-thumbnail > .jg-image-media > a > .jg-image-thumb {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.jg-responsive-grid.jg-grid--card .jg-image-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  min-height: 8.75rem;
  padding: 0.9rem 1rem 1rem;
  box-sizing: border-box;
  text-align: left;
}

.jg-responsive-grid.jg-grid--card.jg-subcategories .jg-image-card-content {
  min-height: 4.25rem;
  text-align: center;
}

.jg-responsive-grid.jg-grid--card .jg-image-card-content .jg-image-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.jg-responsive-grid.jg-grid--card .jg-image-card-date {
  margin-top: auto;
  color: #68717b;
  font-size: 0.78rem;
  text-align: left;
}

@media (max-width: 36rem) {
  .jg-responsive-grid.jg-grid--justified .jg-image-overlay {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
  }

  .jg-responsive-grid.jg-grid--justified .jg-image-overlay__content {
    padding: 0.35rem 0.55rem;
  }

  .jg-responsive-grid.jg-grid--card .jg-image-card-content {
    min-height: 7.75rem;
    padding: 0.8rem 0.85rem 0.9rem;
  }
}

@media (max-width: 36rem) {
  .jg-responsive-grid.jg-grid--justified {
    --jg-grid-gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jg-responsive-grid .jg-image,
  .jg-responsive-grid .jg-image-thumb {
    animation: none !important;
    transition: none !important;
  }
}