/* ==========================================================================
   LAADS Contracting - Restaurant Gallery
   Clean Static Gallery (No Fancybox / Lightbox | Pure HTML & CSS)
   - EXACT OFFICE-STYLE SPACING SYSTEM (--gap: 26px, --padding: 50px)
   - RESPONSIVE: SAME MULTI-COLUMN DESIGN PRESERVED (NO 1-COL COLLAPSE)
   - EXACT EQUAL TOP & BOTTOM FLUSH ALIGNMENT
   - HIGH IMAGE CLARITY WITH GPU SHARPENING FILTER
   - ZERO FANCYBOX / ZERO LIGHTBOX / DEFAULT CURSOR
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (Matching Office Project)
   -------------------------------------------------------------------------- */
:root {
  --bg-color: #F8F5EE;          /* Light warm ivory / travertine matching office */
  --bg-card: #EFECE6;           /* Placeholder card color */
  
  --gap: 26px;                  /* Exact 26px inter-image spacing matching office */
  --padding-x: 50px;            /* Exact 50px left & right side padding */
  --padding-y: 50px;            /* Equal 50px top & bottom container padding */
}

/* --------------------------------------------------------------------------
   2. Reset & Global Base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1A1A1A;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. Main Gallery Container (Full Width with Exact Side & Top/Bottom Padding)
   -------------------------------------------------------------------------- */
.gallery-wrapper {
  background-color: var(--bg-color);
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.gallery-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--padding-y) var(--padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* --------------------------------------------------------------------------
   4. Universal Gallery Item & High-Clarity GPU Image Pipeline (Static Gallery)
   -------------------------------------------------------------------------- */
.gallery-item {
  position: relative;
  overflow: hidden;
  display: block;
  background-color: var(--bg-card);
  cursor: default;              /* Static item: zero fancybox/lightbox click */
  line-height: 0;
  font-size: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
}

img.gallery-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Maximum Clarity Pipeline: Hardware-Accelerated Sharpening & Enhanced Dynamic Range */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: url(#clarity-filter) contrast(1.08) brightness(1.02) saturate(1.06);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: filter 0.3s ease;
  margin: 0;
  padding: 0;
}

/* Specific framing adjustments for balanced composition */
.gallery-row-2 .gallery-item:last-child .gallery-img {
  object-position: center 25%;
}

.item-c2-1 .gallery-img {
  object-position: center center;
}

.item-c3-2 .gallery-img {
  object-position: center center;
}

.item-a2-1 .gallery-img {
  object-position: center center;
}

.item-a2-2 .gallery-img {
  object-position: center center;
}

/* --------------------------------------------------------------------------
   Section 1: Row of 2 Images (rest_img1 & rest_img2)
   Equal width, equal height, zero bottom gap
   -------------------------------------------------------------------------- */
.gallery-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: 100%;
}

.gallery-row-2 .gallery-item {
  width: 100%;
  aspect-ratio: 16 / 11;       /* Both images terminate at the exact same height */
}

/* --------------------------------------------------------------------------
   Section 2: 3-Column Mosaic (rest_img3 to rest_img10)
   Exact proportion matching reference design:
   All 3 columns terminate at the EXACT same baseline. Zero blank gaps!
   -------------------------------------------------------------------------- */
.gallery-mosaic-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  width: 100%;
  aspect-ratio: 1 / 1.08;      /* Precise container ratio matching the 3 columns */
}

.mosaic-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;               /* Every column fills 100% of the section height */
  min-height: 0;
}

/* Column 1 items (3 images) */
.item-c1-1 { flex: 1.00 1 0px; }
.item-c1-2 { flex: 1.00 1 0px; }
.item-c1-3 { flex: 1.25 1 0px; }

/* Column 2 items (3 images) */
.item-c2-1 { flex: 1.75 1 0px; }
.item-c2-2 { flex: 0.75 1 0px; }
.item-c2-3 { flex: 0.75 1 0px; }

/* Column 3 items (2 images) */
.item-c3-1 { flex: 1.15 1 0px; }
.item-c3-2 { flex: 2.10 1 0px; }

/* --------------------------------------------------------------------------
   Section 3: Asymmetric Fit-Out Grid (rest_img11, 13, 15 & rest_img12, 14)
   Left column (3 images) & Right column (2 images) align to the exact baseline
   -------------------------------------------------------------------------- */
.gallery-asymmetric {
  display: grid;
  grid-template-columns: 37.5% calc(62.5% - var(--gap));
  gap: var(--gap);
  width: 100%;
  aspect-ratio: 16 / 10.6;     /* Precise container ratio matching the 2 columns */
}

.asym-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;               /* Left and right columns fill 100% of height */
  min-height: 0;
}

/* Left column (3 images, equal height slices) */
.item-a1-1 { flex: 1 1 0px; }
.item-a1-2 { flex: 1 1 0px; }
.item-a1-3 { flex: 1 1 0px; }

/* Right column (2 images) */
.item-a2-1 { flex: 0.88 1 0px; }
.item-a2-2 { flex: 1.12 1 0px; }

/* --------------------------------------------------------------------------
   Section 4: Row of 2 Images (rest_img16 & rest_img17)
   Equal width, equal height, zero bottom gap
   -------------------------------------------------------------------------- */
/* Handled by .gallery-row-2 rules above */

/* --------------------------------------------------------------------------
   5. Responsive Adaptations (Matching Office Implementation)
   - Collage tier layout remains IDENTICAL on mobile, tablet, and desktop
   - No vertical stacking; side-by-side collage columns preserved
   - Proportional spacing scaling down smoothly across all screens
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --gap: 20px;
    --padding-x: 35px;
    --padding-y: 35px;
  }
}

@media (max-width: 768px) {
  :root {
    --gap: 16px;
    --padding-x: 25px;
    --padding-y: 25px;
  }
}

@media (max-width: 480px) {
  :root {
    --gap: 12px;
    --padding-x: 16px;
    --padding-y: 16px;
  }
}

@media (max-width: 360px) {
  :root {
    --gap: 8px;
    --padding-x: 10px;
    --padding-y: 10px;
  }
}