/*
 * Photography Mosaic Grid
 * Feature: 007-photography-mosaic-grid
 * Scope: Only .photography-* classes (no style leakage)
 * Specificity Budget: Maximum (0,2,1)
 * Theme: Principle III compliant (no theme modifications)
 */

/* ============================================
   Custom Properties
   ============================================ */

:root {
  /* Layout */
  --photo-mosaic-gap: 1rem;
  --photo-mosaic-radius: 15px;

  /* Colors */
  --photo-mosaic-bg: #FAFAFA;
  --photo-mosaic-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --photo-focus-color: #6BA5A3;

  /* Transitions */
  --photo-mosaic-transition: 0.3s ease;
  --photo-mosaic-image-transition: 0.5s ease;
}

/* ============================================
   Base Mosaic Container
   ============================================ */

.photography-mosaic {
  /* Layout */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: var(--photo-mosaic-gap);
  margin: 2rem 0;

  /* Container */
  width: 100%;
  max-width: 900px;  /* Constrain maximum width */
  max-height: 600px; /* Constrain maximum height */

  /* Accessibility */
  isolation: isolate; /* Create stacking context */
}

/* ============================================
   Mosaic Items (Individual Cells)
   ============================================ */

.photography-mosaic__item {
  /* Layout */
  position: relative;
  overflow: hidden;

  /* Appearance */
  border-radius: var(--photo-mosaic-radius);
  box-shadow: var(--photo-mosaic-shadow);
  background: var(--photo-mosaic-bg);

  /* Transition */
  transition: box-shadow var(--photo-mosaic-transition),
              transform var(--photo-mosaic-transition);
}

.photography-mosaic__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px); /* Subtle lift on hover */
}

/* Link styling (when <a> element) */
a.photography-mosaic__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ============================================
   Mosaic Images
   ============================================ */

.photography-mosaic__image {
  /* Layout */
  display: block;
  width: 100%;
  height: 100%;

  /* Fit */
  object-fit: cover;
  object-position: center;

  /* Transition */
  transition: transform var(--photo-mosaic-image-transition);
}

.photography-mosaic__item:hover .photography-mosaic__image {
  transform: scale(1.05); /* Subtle zoom on hover */
}

/* ============================================
   Pattern A: Balanced Mix (2 large + 2 small)
   ============================================ */

.photography-mosaic.pattern-a {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr;
}

.photography-mosaic.pattern-a .photography-mosaic__item {
  aspect-ratio: auto; /* Allow natural aspect ratios */
}

.photography-mosaic.pattern-a .photography-mosaic__item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.photography-mosaic.pattern-a .photography-mosaic__item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.photography-mosaic.pattern-a .photography-mosaic__item:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.photography-mosaic.pattern-a .photography-mosaic__item:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* ============================================
   Pattern B: Landscape-Heavy (1 large top + 2 small bottom + 1 large bottom)
   ============================================ */

.photography-mosaic.pattern-b {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 3fr 2fr;
}

.photography-mosaic.pattern-b .photography-mosaic__item {
  aspect-ratio: auto;
}

/* First image: Large, spans full width on top */
.photography-mosaic.pattern-b .photography-mosaic__item:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

/* Second and third images: Small, side by side on bottom */
.photography-mosaic.pattern-b .photography-mosaic__item:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.photography-mosaic.pattern-b .photography-mosaic__item:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Fourth image: Hide for this pattern (only using 3 images in this layout) */
.photography-mosaic.pattern-b .photography-mosaic__item:nth-child(4) {
  display: none;
}

/* ============================================
   Pattern C: Portrait-Heavy (1 tall left + 3 stacked right)
   ============================================ */

.photography-mosaic.pattern-c {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.photography-mosaic.pattern-c .photography-mosaic__item {
  aspect-ratio: auto;
}

/* First image: Tall portrait, spans full height on left */
.photography-mosaic.pattern-c .photography-mosaic__item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
}

/* Images 2, 3, 4: Stacked on right side */
.photography-mosaic.pattern-c .photography-mosaic__item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.photography-mosaic.pattern-c .photography-mosaic__item:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.photography-mosaic.pattern-c .photography-mosaic__item:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

/* ============================================
   Pattern D: Equal Square Grid (Default)
   ============================================ */

.photography-mosaic.pattern-d {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
}

.photography-mosaic.pattern-d .photography-mosaic__item {
  aspect-ratio: 1; /* Force square cells */
}

.photography-mosaic.pattern-d .photography-mosaic__image {
  object-fit: cover; /* Crop to fill square */
}

/* ============================================
   Accessibility: Keyboard Navigation
   ============================================ */

/* Focus indicator for clickable items */
a.photography-mosaic__item:focus {
  outline: 2px solid var(--photo-focus-color);
  outline-offset: 4px;
}

/* Focus-visible (modern browsers) */
a.photography-mosaic__item:focus-visible {
  outline: 2px solid var(--photo-focus-color);
  outline-offset: 4px;
}

a.photography-mosaic__item:focus:not(:focus-visible) {
  outline: none; /* Hide focus ring for mouse clicks */
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .photography-mosaic__item,
  .photography-mosaic__image {
    transition: none !important;
  }

  .photography-mosaic__item:hover {
    transform: none !important;
  }

  .photography-mosaic__item:hover .photography-mosaic__image {
    transform: none !important;
  }
}

/* ============================================
   Responsive: Touch Devices
   ============================================ */

/* Touch devices: disable hover effects */
@media (hover: none) and (pointer: coarse) {
  .photography-mosaic__item:hover {
    transform: none;
    box-shadow: var(--photo-mosaic-shadow); /* Reset to default shadow */
  }

  .photography-mosaic__item:hover .photography-mosaic__image {
    transform: none;
  }
}

/* ============================================
   Responsive: Mobile (≤ 768px)
   ============================================ */

@media (max-width: 768px) {
  .photography-mosaic {
    grid-template-columns: 1fr; /* Single column */
    gap: 1rem; /* Smaller gap on mobile */
    max-height: none; /* Remove height constraint for vertical stacking */
  }

  .photography-mosaic__item {
    aspect-ratio: auto; /* Allow natural aspect ratio on mobile */
  }

  /* Override pattern-specific aspect ratios on mobile */
  .photography-mosaic.pattern-d .photography-mosaic__item {
    aspect-ratio: auto;
  }
}

/* ============================================
   Responsive: Tablet (768px - 1024px)
   ============================================ */

@media (max-width: 1024px) and (min-width: 769px) {
  .photography-mosaic {
    gap: 1.5rem; /* Slightly smaller gap on tablets */
  }
}