/* ================================================================
   public/css/images.css
   Image Handling & Photography Integration — Sapere Plus
   
   Styles for responsive images, photography integration,
   and visual asset management aligned with brand aesthetic.
================================================================ */

/* ──────────────────────────────────────────────────────────────
   IMAGE BASE STYLES
   ────────────────────────────────────────────────────────────– */

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* Responsive images */
picture {
  display: block;
}

picture img {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   FIGURE & FIGCAPTION
   ────────────────────────────────────────────────────────────– */

figure {
  margin: var(--sp-2xl) 0;
  padding: 0;
}

figure img,
figure picture {
  display: block;
  margin: 0;
  border-radius: var(--radius-lg);
}

/* ── Figcaption ────────────────────────────────────────────– */
figcaption {
  margin-top: var(--sp-lg);
  padding: var(--sp-lg);
  background: var(--color-surface-secondary);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-md);

  font-size: var(--type-caption-size);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-2xs);
  font-size: var(--type-body-sm-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

figcaption strong + figcaption strong {
  margin-top: var(--sp-sm);
}

/* ──────────────────────────────────────────────────────────────
   IMAGE CONTAINERS
   ────────────────────────────────────────────────────────────– */

.image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Aspect Ratio Helpers ──────────────────────────────────– */
.image-container--1-1 {
  aspect-ratio: 1 / 1;
}
.image-container--4-3 {
  aspect-ratio: 4 / 3;
}
.image-container--16-9 {
  aspect-ratio: 16 / 9;
}
.image-container--3-2 {
  aspect-ratio: 3 / 2;
}
.image-container--21-9 {
  aspect-ratio: 21 / 9;
}
.image-container--2-1 {
  aspect-ratio: 2 / 1;
}

/* ──────────────────────────────────────────────────────────────
   HERO IMAGES
   ────────────────────────────────────────────────────────────– */

.hero-image {
  position: relative;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  border-radius: 0;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Full Viewport Hero ─────────────────────────────────────– */
.hero-image--full {
  min-height: 60vh;
}

.hero-image--full img {
  object-position: center center;
}

/* ── Overlay for Text Over Image ───────────────────────────– */
.hero-image--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;
}

.hero-image--overlay-strong::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* ──────────────────────────────────────────────────────────────
   IMAGE GALLERY
   ────────────────────────────────────────────────────────────– */

.image-gallery {
  display: grid;
  gap: var(--sp-lg);
  margin: var(--sp-2xl) 0;
}

.image-gallery--2col {
  grid-template-columns: repeat(2, 1fr);
}

.image-gallery--3col {
  grid-template-columns: repeat(3, 1fr);
}

.image-gallery--4col {
  grid-template-columns: repeat(4, 1fr);
}

.image-gallery--masonry {
  column-count: 3;
  column-gap: var(--sp-lg);
}

.image-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--sp-lg);
}

.image-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive gallery */
@media (max-width: 1024px) {
  .image-gallery--3col,
  .image-gallery--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-gallery--masonry {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .image-gallery--2col,
  .image-gallery--3col,
  .image-gallery--4col {
    grid-template-columns: 1fr;
  }

  .image-gallery--masonry {
    column-count: 1;
  }
}

/* ──────────────────────────────────────────────────────────────
   IMAGE FILTERS & EFFECTS
   ────────────────────────────────────────────────────────────– */

/* ── Grayscale Option (use sparingly) ───────────────────────– */
.image--grayscale {
  filter: grayscale(100%);
}

.image--grayscale-hover:hover {
  filter: grayscale(0%);
  transition: filter var(--transition-base);
}

/* ── Slightly Dimmed (for dark mode compatibility) ─────────– */
[data-theme="dark"] .image--adaptive {
  opacity: 0.95;
}

/* ── Sepia Tint (for archival feel, optional) ──────────────– */
.image--sepia {
  filter: sepia(0.15);
}

/* ──────────────────────────────────────────────────────────────
   IMAGE BORDERS & FRAMING
   ────────────────────────────────────────────────────────────– */

.image--bordered {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.image--bordered-accent {
  border: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
}

/* ── Editorial Frame (double border) ───────────────────────– */
.image--frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--color-surface-primary);
}

.image--frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--color-border-light);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

.image--frame img {
  position: relative;
  z-index: 1;
  border-radius: calc(var(--radius-lg) - 8px);
}

/* ──────────────────────────────────────────────────────────────
   IMAGE OVERLAYS & INTERACTIVE
   ────────────────────────────────────────────────────────────– */

.image-with-overlay {
  position: relative;
  overflow: hidden;
}

.image-with-overlay__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 2;
}

.image-with-overlay:hover .image-with-overlay__overlay {
  opacity: 1;
}

.image-with-overlay__icon {
  color: white;
  font-size: 2rem;
}

/* ──────────────────────────────────────────────────────────────
   LOADING STATES
   ────────────────────────────────────────────────────────────– */

.image--loading {
  background: linear-gradient(
    90deg,
    var(--color-border-light) 0%,
    var(--color-surface-secondary) 50%,
    var(--color-border-light) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.image--skeleton {
  height: 200px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  animation: pulse var(--anim-slower) ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE IMAGE UTILITIES
   ────────────────────────────────────────────────────────────– */

/* Hide images on mobile */
.image--hide-mobile {
  display: block;
}

@media (max-width: 768px) {
  .image--hide-mobile {
    display: none !important;
  }

  .image--show-mobile {
    display: block !important;
  }
}

/* ── Image Sizes ───────────────────────────────────────────– */
.image--small {
  max-width: 300px;
}

.image--medium {
  max-width: 600px;
}

.image--large {
  max-width: 900px;
}

.image--full {
  width: 100%;
  max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   DOCUMENTAR Y PHOTO STYLING
   ────────────────────────────────────────────────────────────– */

.photo-documentary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.photo-documentary:hover {
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition-base);
}

/* ── With Archive Label ────────────────────────────────────– */
.photo-documentary--archived {
  position: relative;
}

.photo-documentary--archived::before {
  content: "Archive";
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  z-index: 10;

  display: inline-block;
  padding: var(--sp-2xs) var(--sp-sm);
  background: var(--color-accent-pale);
  color: var(--color-accent-primary);
  font-family: var(--font-condensed);
  font-size: var(--type-meta-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────────────────────────
   PROFILE PICTURES
   ────────────────────────────────────────────────────────────– */

.profile-picture {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.profile-picture--lg {
  width: 180px;
  height: 180px;
}

.profile-picture--sm {
  width: 80px;
  height: 80px;
}

.profile-picture--xl {
  width: 240px;
  height: 240px;
}

/* ──────────────────────────────────────────────────────────────
   THUMBNAIL STYLES
   ────────────────────────────────────────────────────────────– */

.thumbnail {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.thumbnail--square {
  aspect-ratio: 1 / 1;
}

.thumbnail--tall {
  aspect-ratio: 3 / 4;
}

.thumbnail--small {
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
}

/* ──────────────────────────────────────────────────────────────
   PARALLAX (Light Implementation)
   ────────────────────────────────────────────────────────────– */

.image--parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 768px) {
  .image--parallax {
    background-attachment: scroll;
  }
}

/* ──────────────────────────────────────────────────────────────
   ACCESSIBILITY
   ────────────────────────────────────────────────────────────– */

/* Focus visible for keyboard navigation */
.image-container:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────
   DARK MODE
   ────────────────────────────────────────────────────────────– */

[data-theme="dark"] figcaption {
  background: var(--color-surface-tertiary);
  border-left-color: var(--color-accent-secondary);
}

[data-theme="dark"] .image--frame {
  background: var(--color-surface-tertiary);
  border-color: var(--color-border);
}

[data-theme="dark"] .image--frame::after {
  border-color: var(--color-border-light);
}

/* ──────────────────────────────────────────────────────────────
   PRINT STYLES
   ────────────────────────────────────────────────────────────– */

@media print {
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  figure {
    page-break-inside: avoid;
  }
}

/* ──────────────────────────────────────────────────────────────
   END IMAGES
   ────────────────────────────────────────────────────────────– */