/* ==========================================================================
   OFFICE INTERIORS & ARCHITECTURE PORTFOLIO
   - 30px LEFT & RIGHT PADDING
   - EQUAL 30px TOP & BOTTOM PADDING
   - 100% ORIGINAL UNCUT IMAGES (ZERO CROPPING)
   - EXACT EQUAL TOP & BOTTOM FLUSH ALIGNMENT
   - HIGH IMAGE CLARITY
   - PURE HTML & CSS (NO BOOTSTRAP)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg-color: #F8F5EE;
  --gap: 26px;         /* Exact 26px inter-image spacing matching design */
  --padding-x: 50px;    /* Exact 50px left & right side space matching design */
  --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;
}

/* --------------------------------------------------------------------------
   3. Main Gallery Container: Full Width with Exact 30px Side Padding
   -------------------------------------------------------------------------- */
.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. Tier Structure (Flexbox Columns with Exact Aspect-Ratio Matching)
   -------------------------------------------------------------------------- */
.collage-tier {
  display: flex;
  gap: var(--gap);
  width: 100%;
  align-items: flex-start;
}

.tier-col-left,
.tier-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex-shrink: 0;
}

/* Exact pre-calculated mathematical column widths (Diff = 0.00px) */
.tier-1 .tier-col-left  { width: calc((100% - var(--gap)) * 0.4068); }
.tier-1 .tier-col-right { width: calc((100% - var(--gap)) * 0.5932); }

.tier-2 .tier-col-left  { width: calc((100% - var(--gap)) * 0.6583); }
.tier-2 .tier-col-right { width: calc((100% - var(--gap)) * 0.3417); }

.tier-3 .tier-col-left  { width: calc((100% - var(--gap)) * 0.5683); }
.tier-3 .tier-col-right { width: calc((100% - var(--gap)) * 0.4317); }

.tier-4 .tier-col-left  { width: calc((100% - var(--gap)) * 0.5048); }
.tier-4 .tier-col-right { width: calc((100% - var(--gap)) * 0.4952); }

.tier-5 .tier-col-left  { width: calc((100% - var(--gap)) * 0.4701); }
.tier-5 .tier-col-right { width: calc((100% - var(--gap)) * 0.5299); }

.tier-6 {
  width: 100%;
}

.tier-7 .tier-col-left  { width: calc((100% - var(--gap)) * 0.5543); }
.tier-7 .tier-col-right { width: calc((100% - var(--gap)) * 0.4457); }

.tier-8 .tier-col-left  { width: calc((100% - var(--gap)) * 0.2744); }
.tier-8 .tier-col-right { width: calc((100% - var(--gap)) * 0.7256); }

/* Tier 1 Split Row: Proportional flex so 5 4550 and 5 4551 have 100% identical height */
.split-row {
  display: flex;
  gap: var(--gap);
  width: 100%;
}

.split-row > .img-box:first-child {
  flex: 489;
}

.split-row > .img-box:last-child {
  flex: 479;
}

/* --------------------------------------------------------------------------
   5. Universal Image Box: 100% ORIGINAL UNCUT IMAGES
   - height: auto ensures the full original image is displayed
   - ZERO CROPPING — not a single pixel of any image is ever cut!
   -------------------------------------------------------------------------- */
.img-box {
  position: relative;
  width: 100%;
  display: block;
  background-color: transparent;
}

.img-box img {
  width: 100%;
  height: auto;
  display: block;
  /* 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;
}

.img-box:hover img {
  filter: url(#clarity-filter) contrast(1.11) brightness(1.03) saturate(1.08);
}

/* --------------------------------------------------------------------------
   6. Responsive Adaptations (Preserving Exact Collage Design on All Screens)
   - Proportional spacing matching the design mockup across all screens
   - Collage tier layout remains IDENTICAL on mobile, tablet, and desktop
   - No vertical stacking; side-by-side collage columns preserved
   - Zero image cropping across all viewports
   -------------------------------------------------------------------------- */
@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;
  }
}