/*!  
    LGFX Grid Gallery - A flexible, responsive grid system for image galleries
    Based on Grid Overflow: https://github.com/Roman-Flossler/Grid-Overflow
    additional specifications by Daniel Nagy
    additional conversion and structuring by Cl.ai
    draft 16-03-2025
    rev.1 21-03-2025 - added multiple col and gap options
    rev.2 22-03-2025 - added responsive text features
    rev.3 27-03-2025 - fixed caption functionality
    rev.4 05-04-2025 - action icos are now images
    rev.5 06-05-2025 - new overlay icos, js augumentation
    rev.6 06-06-2025 - exterior outline
    rev.7 04-07-2025 - added gcaption text styling
*/

/* Base grid container */
.grid-gallery {
  --columns: 4;                                 /* Default column count (can be overridden) */
  --gap: 0.5rem;                                /* Space between items */
  --item-radius: 0.3rem;                        /* Corner rounding */
  --default-aspect: 1;          /* Default 1:1 aspect ratio */
  --base-cell-size: 1fr;        /* Base cell size */
  --text-min-size: 0.8rem;      /* Minimum text size */
  --text-max-size: 1.2rem;      /* Maximum text size */
  --base-text-size: 1rem;       /* Base text size (for standard screens) */
  
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--columns), var(--base-cell-size));
  grid-auto-rows: 1fr;          /* Equal-height rows */
  grid-auto-flow: dense;        /* Fill gaps automatically */
  margin: 1rem auto;
  width: 100%;
}

/* Gap variations */
.gap-025 { --gap: 0.25rem; }
.gap-05 { --gap: 0.5rem; } /* default, but keep for ref */
.gap-075 { --gap: 0.75rem; }
.gap-1 { --gap: 1rem; }
.gap-2 { --gap: 2rem; }
.gap-4 { --gap: 4rem; }

/* Column count variants */
.grid-col-1 { --columns: 1; } /* Default, but keep for ref */
.grid-col-2 { --columns: 2; }
.grid-col-3 { --columns: 3; }
.grid-col-4 { --columns: 4; }
.grid-col-5 { --columns: 5; }
.grid-col-6 { --columns: 6; }
.grid-col-7 { --columns: 7; }
.grid-col-8 { --columns: 8; }
.grid-col-9 { --columns: 9; }
.grid-col-10 { --columns: 10; }
.grid-col-11 { --columns: 11; }
.grid-col-12 { --columns: 12; }

/* Aspect ratio defined at gallery level */
.aspect-1x1   { --default-aspect: 1; }
.aspect-2x1   { --default-aspect: 0.5; }
.aspect-4x1   { --default-aspect: 0.25; }
.aspect-5x1   { --default-aspect: 0.2; }
.aspect-6x1   { --default-aspect: 0.1667; }
.aspect-16x9  { --default-aspect: 0.5625; }
.aspect-16x10 { --default-aspect: 0.625; }
.aspect-3x2   { --default-aspect: 0.6667; }
.aspect-4x3   { --default-aspect: 0.75; }
.aspect-4x5   { --default-aspect: 1.25; }
.aspect-1x2   { --default-aspect: 2; }
.aspect-9x16  { --default-aspect: 1.778; }
.aspect-10x16 { --default-aspect: 1.6; }
.aspect-2x3   { --default-aspect: 1.5; }
.aspect-3x4   { --default-aspect: 1.333; }
.aspect-5x4   { --default-aspect: 0.8; }

/* Basic grid item */
.grid-item {
  --span-x: 1;                  /* Default span 1 column */
  --span-y: 1;                  /* Default span 1 row */
  
  position: relative;
  grid-column: span var(--span-x);
  grid-row: span var(--span-y);
  overflow: hidden;
  border-radius: var(--item-radius);
  aspect-ratio: calc(var(--span-x) / (var(--span-y) * var(--default-aspect)));
  width: 100%;
  height: 100%;
}

/* Item content positioning */
.grid-item > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
}

/* Size variants - simple syntax for different item sizes */
.size-1x1 { --span-x: 1; --span-y: 1; }
.size-1x2 { --span-x: 1; --span-y: 2; }
.size-1x3 { --span-x: 1; --span-y: 3; }
.size-1x4 { --span-x: 1; --span-y: 4; }
.size-1x5 { --span-x: 1; --span-y: 5; }
.size-1x6 { --span-x: 1; --span-y: 6; }
.size-2x1 { --span-x: 2; --span-y: 1; }
.size-2x2 { --span-x: 2; --span-y: 2; }
.size-2x3 { --span-x: 2; --span-y: 3; }
.size-2x4 { --span-x: 2; --span-y: 4; }
.size-2x5 { --span-x: 2; --span-y: 5; }
.size-2x6 { --span-x: 2; --span-y: 6; }
.size-2x7 { --span-x: 2; --span-y: 7; }
.size-3x1 { --span-x: 3; --span-y: 1; }
.size-3x2 { --span-x: 3; --span-y: 2; }
.size-3x3 { --span-x: 3; --span-y: 3; }
.size-3x4 { --span-x: 3; --span-y: 4; }
.size-4x1 { --span-x: 4; --span-y: 1; }
.size-4x2 { --span-x: 4; --span-y: 2; }
.size-4x3 { --span-x: 4; --span-y: 3; }
.size-4x4 { --span-x: 4; --span-y: 4; }
.size-4x5 { --span-x: 4; --span-y: 5; }
.size-4x6 { --span-x: 4; --span-y: 6; }
.size-4x7 { --span-x: 4; --span-y: 7; }
.size-4x8 { --span-x: 4; --span-y: 8; }
.size-5x1 { --span-x: 5; --span-y: 1; }
.size-5x2 { --span-x: 5; --span-y: 2; }
.size-5x3 { --span-x: 5; --span-y: 3; }
.size-5x4 { --span-x: 5; --span-y: 4; }
.size-6x1 { --span-x: 6; --span-y: 1; }
.size-6x2 { --span-x: 6; --span-y: 2; }
.size-6x3 { --span-x: 6; --span-y: 3; }
.size-6x4 { --span-x: 6; --span-y: 4; }
.size-8x4 { --span-x: 8; --span-y: 4; }

/* gcaption - hover-activated image captions */

.gcaption {
  /* Positioning */
  display: block !important; /* Ensure it's a block element */
  position: absolute !important;
  top:auto;
  bottom: 0 !important;
  left: auto;
  right: 0 !important;; /* Ensure it extends all the way to the right */
  height: auto;
  width: 100% !important;
  max-width: 100%; /* Override the max-width constraint */
  box-sizing: border-box;
  
  /* Appearance */
  background: linear-gradient(-5deg, hsla(220, 80%, 5%, 0.7), hsla(200, 20%, 10%, 0.1));
  backdrop-filter: blur(4px);
  
  /* Text styling */
  color: white;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.2;
  font-family: ddinc;
  text-align:center;
  
  /* Spacing */
  margin: 0 !important;
  padding: 0.2rem 0.4rem;
  
  /* Initial state (hidden) */
  opacity: 0;
  transition: all 0.2s ease-out;
  
  /* Ensure it's above the image */
  z-index: 4;
  
  /* Prevent text overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Font size modifier classes for gcaption */
.gcaption.r1 { font-size: 1rem; }
.gcaption.r15 { font-size: 1.5rem; }
.gcaption.r2 { font-size: 2rem; }
.gcaption.r25 { font-size: 2.5rem; }
.gcaption.r3 { font-size: 3rem; }
.gcaption.r35 { font-size: 3.5rem; }
.gcaption.r4 { font-size: 4rem; }
.gcaption.fw1 { font-weight: 100; }
.gcaption.fw2 { font-weight: 200; }
.gcaption.fw3 { font-weight: 300; }
.gcaption.fw4 { font-weight: 400; }
.gcaption.fw5 { font-weight: 500; }
.gcaption.fw6 { font-weight: 600; }
.gcaption.rag-left{text-align:right;}
.gcaption.rag-right{text-align:left;}

.ghigh {
  background: linear-gradient(1deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 1)), url(graphics/gggrid.svg);
  background-blend-mode: overlay, soft-light;
  height: 100%; 
  width:100%;
  border-radius:6px;

  /* Initial state (hidden) */
  opacity: 0;
  transition: all 0.1s ease-out;
  
  /* Ensure it's above the image */
  z-index: 10;
  
}

/* Show on hover */
.grid-item:hover .gcaption {opacity: 1;}
.grid-item:hover .ghigh {opacity: 0.2;}

/* default ghigh on everything */

/* Create the highlight effect automatically for grid items with images or videos */
.grid-item:has(img),
.grid-item:has(video) {
  position: relative; /* Make sure position is relative for absolute positioning */
  scale: 1;
  filter: none !important;
  transition: all 0.2s ease-out;
}

/* Create pseudo-element for the highlight effect instead of using span */
.grid-item:has(img)::before,
.grid-item:has(video)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%; 
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.2), hsl(0, 0%, 0%), hsla(0, 0%, 100%, 0.2)), url(graphics/gggrid.svg);
  background-blend-mode: screen;
  mix-blend-mode: screen;
  pointer-events: none;

  /* Initial state (hidden) */
  opacity: 0;
  transition: all 0.1s ease-out;
  /* Ensure it's above the image but below other elements like captions */
  z-index: 5;
}

/* Show the highlight on hover */
.grid-item:has(img):hover::before,
.grid-item:has(video):hover::before {
  opacity: 0.3;
}

/* // contrast fuckery */

/* Adjust the brightness/contrast of images on hover */
.grid-item:has(img):hover img {
  filter: contrast(1.1) brightness(1); /* Subtle increase in contrast and brightness */
  scale: 1.02;
  transition: filter 0.2s ease;
  transition: scale 0.1s ease-out;
}

.grid-item:has(video):hover video {
  filter: contrast(1.1) brightness(1); /* Subtle increase in contrast and brightness */
  scale: 1;
  transition: filter 0.2s ease;
}

/* contrast fuckery // */

/* Class to disable the highlight effect */
.no-highlight::before {
  display: none !important;
}

/* Disable the filter on the image/video */
.no-highlight:hover img,
.no-highlight:hover video {
  filter: none !important;
  scale: 1 !important;
}

.no-highzoom:hover img,
.no-highzoom:hover video {
  scale: 1 !important;
}

/* ghigh fuckery // */

/* OVERLAY ICO SYSTEM */

/* Overlay ico container */
.overlay-icos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8; /* Above highlight but below captions */
}

/* Overlay container (generated by JS) */
.overlay-container {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}

/* Individual overlay icos (generated by JS) */
.overlay-ico {
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
  transition: all 0.12s ease-in;
  transform: scale(1);
}

/* Hover effects - CSS handles all hover states now */
.grid-item:hover .overlay-ico {
  opacity: 0.8;
  transform: scale(1.1);
  transition: all 0.02s ease;
}

/* ico0 - Disappearing icons on hover (CSS ONLY) */
.overlay-icos.ico0 .overlay-ico {
  opacity: 0.4;
  transition: all 0.12s ease-in;
}

.grid-item:hover .overlay-icos.ico0 .overlay-ico {
  opacity: 0 !important;          /* Force override default hover */
  transform: scale(0.8) !important; /* Force override default hover */
}

/* ico positioning variants */
.overlay-icos.tl .overlay-container {
  top: 0.5rem;
  left: 0.5rem;
  right: auto;
}

.overlay-icos.br .overlay-container {
  top: auto;
  bottom: 0.5rem;
  right: 0.5rem;
}

.overlay-icos.bl .overlay-container {
  top: auto;
  bottom: 0.5rem;
  left: 0.5rem;
  right: auto;
}

.overlay-icos.center .overlay-container {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.overlay-icos.bottom-center .overlay-container {
  top: auto;
  bottom: 0.5rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.overlay-icos.top-center .overlay-container {
  top: 0.5rem;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Icon sizing variants */
.overlay-icos.ico-r1 .overlay-ico { width: 1rem; height: 1rem; }
.overlay-icos.ico-r15 .overlay-ico { width: 1.5rem; height: 1.5rem; }
.overlay-icos.ico-r2 .overlay-ico { width: 2rem; height: 2rem; }
.overlay-icos.ico-r3 .overlay-ico { width: 3rem; height: 3rem; }
.overlay-icos.ico-r4 .overlay-ico { width: 4rem; height: 4rem; }
.overlay-icos.ico-r5 .overlay-ico { width: 5rem; height: 5rem; }
/* Staggered loading animation */
.animate-in {
  transform: translateY(1rem);
  opacity: 0;
  animation: moveUp 0.2s ease forwards;
}

@keyframes moveUp {
  100% { transform: translateY(0); opacity: 1; }
}

/* Simple delay classes for staggered animation */
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.3s; }
.delay-7 { animation-delay: 0.35s; }
.delay-8 { animation-delay: 0.4s; }
.delay-9 { animation-delay: 0.45s; }
/* Add more if needed */

/* negate round corners */
.gradius0 {--item-radius: 0rem;}
.gradius1 {--item-radius: 1rem;}
.gradius2 {--item-radius: 2rem;}
.gradius3 {--item-radius: 3rem;}
.gradius4 {--item-radius: 4rem;}

.grid-item:has(img),
.grid-item:has(video){
  outline: 6px solid hsla(190, 70%, 45%, 0);
  outline-offset: 10px;
  transition: 0.16s ease-out;
}

.grid-item:has(img):hover,
.grid-item:has(video):hover{
  outline: 2px solid hsla(200, 70%, 45%, 0.75);
  outline-offset: -1px;
}

.grid-item.no-highlight:hover {
  outline: none !important;
}

.grid-item.no-highlight{
  outline: none !important;
}