/* =========================================================
   photography.css
   Clean, deterministic layout
   No conflicting overrides
   ========================================================= */


/* -----------------------------
   INTRO
----------------------------- */

.photo-intro{
  margin-top: 4px;
  margin-bottom: 26px;
}

.photo-intro p{
  margin: 0 0 10px;
}


/* -----------------------------
   SECTION HEADERS
----------------------------- */

.photo-section{
  width: 100%;
  margin: 18px 0 4px;
}

.photo-section-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.65;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}


/* -----------------------------
   BASE GRID
----------------------------- */

.photo-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 26px 22px;
  padding-top: 10px;
}

.photo-card{
  width: calc(50% - 11px);
  margin: 0;
  text-align: left;
}


/* -----------------------------
   GROUP WRAPPER
----------------------------- */

.photo-group{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 22px;
}

/* default inside groups */
.photo-group > .photo-card{
  width: calc(50% - 11px);
}


/* -----------------------------
   DESKTOP COLUMN RULES
----------------------------- */

.photo-group--covers > .photo-card{
  width: calc(25% - 17px);
}

/* Portraits — 4 up */
.photo-group--portraits > .photo-card{
  width: calc(25% - 17px);
}

/* Business — 4 up */
.photo-group--business > .photo-card{
  width: calc(25% - 17px);
}

/* Action — 4 up */
.photo-group--action > .photo-card{
  width: calc(25% - 17px);
}

/* Landscapes — 3 up */
.photo-group--landscapes > .photo-card{
  width: calc(33.333% - 15px);
}


/* -----------------------------
   THUMB BOXES
----------------------------- */

.thumb-box{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  cursor: zoom-in;
}

.thumb-box--land,
.thumb-box--port{
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    inset 1px 1px 2px rgba(255,255,255,0.08);
}

.thumb-box--land{
  padding-top: 56%;
}

.thumb-box--port{
  padding-top: 140%;
}

.thumb-box--cover{
  padding-top: 130%;
  box-shadow: none;
}


/* -----------------------------
   IMAGES
----------------------------- */

.photo-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb--top{
  object-position: 50% 12%;
}

.thumb-box--cover .photo-thumb{
  object-fit: contain;
}


/* -----------------------------
   CAPTIONS
----------------------------- */

.photo-cap{
  margin-top: 10px;
  padding-left: 2px;
}

.cap-title{
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 3px;
}

.cap-meta{
  font-size: 13px;
  opacity: 0.78;
}


/* -----------------------------
   RESPONSIVE
----------------------------- */

/* Keep multi-column layouts down to 700px */
@media (max-width: 700px){

  .photo-card,
  .photo-group > .photo-card{
    width: 100%;
  }

  .thumb-box--land{ padding-top: 62%; }
  .thumb-box--port{ padding-top: 92%; }
  .thumb-box--cover{ padding-top: 110%; }
}


/* -----------------------------
   IMAGE MODAL
----------------------------- */

.img-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.img-modal.is-open{
  display: block;
}

.img-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}

.img-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  max-width: 980px;
  transform: translate(-50%, -50%);
  background: rgba(20,20,20,0.92);
  border-radius: 12px;
  padding: 0px;   /* ← ONLY intentional change */
}

.img-modal__img{
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

.img-modal__caption{
  margin-top: 10px;
  color: rgba(255,255,255,0.85);
}


/* -----------------------------
   BACK LINK
----------------------------- */

.photo-back{
  margin-top: 42px;
  text-align: center;
}