/* ================================================================
   LM. Photography Portfolio — style.css
   ================================================================ */

/* ── Reset & Base ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #0a0a0a;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* crops to fill the cell — handles any aspect ratio */
}

a {
  text-decoration: none;
  color: inherit;
}


/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem;

  /* subtle gradient so text stays legible over bright photos */
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.617) 0%,
  rgba(0, 0, 0, 0.455) 19%,
  rgba(0, 0, 0, 0.334) 34%,
  rgba(0, 0, 0, 0.236) 47%,
  rgba(0, 0, 0, 0.171) 56.5%,
  rgba(0, 0, 0, 0.120) 65%,
  rgba(0, 0, 0, 0.078) 73%,
  rgba(0, 0, 0, 0.046) 80.2%,
  rgba(0, 0, 0, 0.026) 86.1%,
  rgba(0, 0, 0, 0.013) 91%,
  rgba(0, 0, 0, 0.005) 95.2%,
  rgba(0, 0, 0, 0.001) 98.2%,
  rgba(0, 0, 0, 0) 100%
);  pointer-events: none;       /* pass clicks through to grid below nav area */
}

.nav__logo, .nav__about {
  pointer-events: all;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff7700;
  transition: opacity 0.2s;
}

.nav__logo {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

.nav__logo:hover,
.nav__about:hover {
  opacity: 0.6;
}


/* ── Photo Grid ──────────────────────────────────────────────────── */
/*
  4-column grid. Each row height is clamped so the grid fills a
  standard landscape viewport proportionally.

  Modifier classes control spanning:
    .landscape  → 2 columns wide
    .portrait   → 2 rows tall
    .featured   → 2 columns × 2 rows (hero block)

  grid-auto-flow: dense fills any gaps caused by span differences.
*/
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 22vw, 300px);
  grid-auto-flow: dense;
  gap: 0;                     /* true edge-to-edge, no gutters */
}

.photo.landscape { grid-column: span 2; }
.photo.portrait  { grid-row:    span 2; }
.photo.featured  { grid-column: span 2; grid-row: span 2; }
.photo.xl { grid-column: span 4; grid-row: span 2; }
.photo.featured-alt { grid-column: span 3; grid-row: span 2; }


/* ── Photo Cell ──────────────────────────────────────────────────── */
.photo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* zoom on hover — contained by overflow:hidden */
.photo img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.photo:hover img {
  transform: scale(1.08);
}

/* caption overlay */
.photo figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.72) 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.photo:hover figcaption {
  opacity: 1;
}


/* ── About Section ───────────────────────────────────────────────── */
.about {
  min-height: 75svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  padding: 4rem 2rem;
}

.about__content {
  max-width: 600px;
  text-align: center;
}

.about__content h1 {
  font-size: clamp(1rem, 2vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}

.about__content p {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2rem;
}

.about__contact {
  font-size: .8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s, opacity 0.2s;
}

.about__contact:hover {
  border-color: #fff;
}


/* ── Lightbox ────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  padding: 2rem;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;        /* show full image, never crop */
  display: block;
}

.lightbox__caption {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.lightbox__close:hover {
  color: #fff;
}


/* ── Mobile Alert ────────────────────────────────────────────────── */
.mobile-alert {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.96);
  padding: 2rem;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-alert.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-alert__content {
  max-width: 400px;
  text-align: center;
}

.mobile-alert__content h2 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  color: #ff7700;
}

.mobile-alert__content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}

.mobile-alert__btn {
  background: transparent;
  border: 1px solid rgba(255, 119, 0, 0.5);
  color: #ff7700;
  padding: 0.75rem 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-alert__btn:hover {
  background: #ff7700;
  color: #0a0a0a;
  border-color: #ff7700;
}


.collections {
  min-height: 75svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  padding: 4rem 2rem;
}


/* ── Responsive — Tablet (≤900px) ────────────────────────────────── */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(160px, 35vw, 280px);
  }

  /* Collapse wider spans to fit 2-col grid */
  .photo.xl,
  .photo.featured-alt {
    grid-column: span 2;
    grid-row: span 2;
  }

  .photo.featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}


/* ── Responsive — Mobile (≤540px) ────────────────────────────────── */
@media (max-width: 540px) {
  .nav {
    padding: 0.85rem 1rem;
  }

  .nav__logo,
  .nav__about {
    font-size: 0.78rem;
  }

  .nav__logo {
    font-size: 0.9rem;
  }

  /* Single-column layout — one photo per row */
  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;       /* let content dictate height */
  }

  /* Reset ALL span classes to single column */
  .photo.landscape,
  .photo.portrait,
  .photo.featured,
  .photo.featured-alt,
  .photo.xl {
    grid-column: span 1;
    grid-row: span 1;
  }

  /*
    Control aspect ratios per type so the scroll feels intentional:
    - portrait  → tall (2:3)
    - featured  → square-ish block (1:1)
    - landscape → wide rectangle (16:9)
    - default   → slightly wide (4:3)
  */
  .photo,
  .photo.portrait,
  .photo.featured,
  .photo.featured-alt,
  .photo.landscape,
  .photo.xl           { aspect-ratio: 1 / 1; }

  .lightbox__img {
    max-width: 100vw;
    max-height: 80vh;
  }

  .lightbox {
    padding: 1rem;
  }
}