/*
  in-pictures.css
  Styles for the "In Pictures" content type (single + list templates).

  This file deliberately does NOT define :root variables or restyle
  .site-header / .site-nav / .site-footer / .lang-toggle — those come
  entirely from the theme's existing style.css and header.html/footer.html.

  Tokens reused from the theme (confirm these exist in style.css; if a
  name differs, find/replace it here):
    var(--paper)       background / light surface
    var(--ink)          primary text color
    var(--ochre)        accent color (used for .section-kicker, etc.)
    var(--ff-display)   display/serif font family
    var(--max-w)         site's max content width

  Structural classes reused from existing templates:
    .post-region-badge, .post-hero-meta, .post-body-wrap, .post-body,
    .post-nav, .post-nav-item, .post-nav-label, .post-nav-title
  These already have real styles in style.css from single.html — reusing
  them here means the hero badge, meta row, and prev/next nav at the
  bottom of an In Pictures story look identical to a regular post's.
*/

.ip-hero, .ip-index-hero{
  position:relative;
  height:70vh;
  min-height:440px;
  background-size:cover;
  background-position:center;
  background-color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 8.8rem 2.5rem;
}
.ip-index-hero{
  align-items:center;
  justify-content:center;
  text-align:center;
}
.ip-hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.75) 0%, rgba(10,8,6,0.35) 38%, rgba(10,8,6,0) 65%),
    linear-gradient(180deg, rgba(10,8,6,0.05) 0%, rgba(10,8,6,0.35) 100%);
}
.ip-hero-content{
  position:relative;
  z-index:2;
  max-width: var(--max-w, 1200px);
  width:100%;
  margin:0 auto;
  color: var(--paper);
}
.ip-hero .ip-hero-content{max-width:34rem; width:auto; margin:0;}
.ip-index-hero .ip-hero-content{max-width:680px;}

.ip-hero-title{
  font-family: var(--ff-display);
  font-style:normal;
  font-size:clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight:400;
  line-height:1.05;
  margin:0.75rem 0 0.9rem;
  color: var(--paper);
}
.ip-hero-dek{
  font-family: var(--ff-display);
  font-style:italic;
  font-size:1.15rem;
  color: var(--paper);
  opacity:0.85;
  max-width:32rem;
}
.ip-index-hero .ip-hero-dek{margin:1rem auto;}

.ip-intro{max-width:100rem; margin:3 auto; text-align:center;}

/* The theme's .post-body-wrap caps at 1000px (style.css), but .ip-sections
   below caps at var(--max-w, 1250px). Both are individually centered,
   but two different-width centered boxes have different left edges —
   that mismatch was the actual cause of the intro looking off-center
   relative to the photo grid. Match post-body-wrap to ip-sections here. */
.post-body-wrap:has(.ip-intro){max-width: var(--max-w, 1200px);}

/* The theme's .post-body has padding:10rem 2.8rem 8rem by default (style.css),
   sized for regular blog posts. That bottom padding was the actual
   source of the large gap before the photo sections — override it here.
   Horizontal padding is 2rem so .ip-intro's own margin:1rem auto controls
   centering, matching how .ip-sections centers the photo grid below. */
.post-body.ip-intro{padding:2.6rem 10rem 0;}

/* Section: label sits above-left at narrow width, grid fills the rest of the row */
.ip-sections{max-width: var(--max-w, 1200px); margin:0 auto; padding:0 2.5rem; margin-top:0;}

.ip-section{
  padding:2.25rem 0;
  display:grid;
  grid-template-columns:160px 1fr;
  gap:1rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.ip-section:last-of-type{border-bottom:none;}

a.ip-section-link{display:block; text-decoration:none; color:inherit;}
a.ip-section-link:hover .ip-label h2{color: var(--ochre);}

.ip-label .num{
  font-size:0.8rem; font-weight:600; color: var(--ochre);
  letter-spacing:0.05em; margin-bottom:0.25rem;
}
.ip-label h2{
  font-family: var(--ff-display);
  font-size:1.5rem; font-weight:500; margin-bottom:0.5rem; line-height:1.15;
  transition:color 0.2s ease;
  color: var(--ink);
}
.ip-label .mark{color: var(--ochre); font-size:0.8rem; margin-bottom:0.5rem;}
.ip-label .dek{
  font-family: var(--ff-display);
  font-style:italic; font-size:0.9rem; color: var(--ink); opacity:0.75; line-height:1.5;
}

.ip-grid figure{
  margin:0; overflow:hidden; border-radius:2px; position:relative;
  background:rgba(0,0,0,0.06); cursor:zoom-in;
}
.ip-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.ip-grid figure:hover img{transform:scale(1.03);}

/* ---- 5-image layout (original): hero (2x2) + 4 small tiles ---- */
.ip-grid.count-5{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:0.5rem;
  aspect-ratio:18 / 7;
}
.g-hero{grid-column:1 / span 2; grid-row:1 / span 2;}
.g-1{grid-column:3; grid-row:1;}
.g-2{grid-column:4; grid-row:1;}
.g-3{grid-column:3; grid-row:2;}
.g-4{grid-column:4; grid-row:2;}

/* ---- 2-image layout: two equal columns, side by side ---- */
.ip-grid.count-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.5rem;
  aspect-ratio:18 / 7;
}
.ip-grid.count-2 .g-row{grid-column:span 1; grid-row:1;}

/* ---- 3-image layout: three equal columns, side by side ---- */
.ip-grid.count-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.5rem;
  aspect-ratio:18 / 6;
}
.ip-grid.count-3 .g-row{grid-column:span 1; grid-row:1;}

/* ---- 4-image layout: hero (left, full height, spans 2 of 4 columns)
       + 2 small tiles side by side (top right, 1 column each)
       + 1 wide horizontal (bottom right, spans the same 2 columns) ---- */
.ip-grid.count-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:1fr 1fr;
  gap:0.5rem;
  aspect-ratio:18 / 9;
}
.ip-grid.count-4 .g4-hero{grid-column:1 / span 2; grid-row:1 / span 2;}
.ip-grid.count-4 .g4-top{grid-column:3; grid-row:1;}
.ip-grid.count-4 .g4-side{grid-column:4; grid-row:1;}
.ip-grid.count-4 .g4-wide{grid-column:3 / span 2; grid-row:2;}

/* ---- fallback for any other image count: equal-width single row ---- */
.ip-grid:not(.count-2):not(.count-3):not(.count-4):not(.count-5){
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:0.5rem;
  aspect-ratio:18 / 7;
}

.ip-pull-quote{text-align:center; padding:3rem 2.5rem; max-width:42rem; margin:0 auto;}
.ip-pull-quote p{
  font-family: var(--ff-display);
  font-style:italic; font-size:1.4rem; color: var(--ochre);
}

/* Lightbox — not part of the theme, fully self-contained */
.lightbox{
  position:fixed; inset:0; background:rgba(10,8,6,0.96);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; opacity:0; visibility:hidden; transition:opacity 0.25s ease; padding:1rem;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-inner{
  max-width:98vw; max-height:96vh;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
}
.lightbox img{max-width:98vw; max-height:96vh; object-fit:contain; display:block; border-radius:2px;}
.lightbox figcaption{
  position:absolute; left:0; right:0; bottom:0;
  color:#F2EAE0; font-family: var(--ff-display); font-style:italic;
  font-size:0.95rem; text-align:center; max-width:100%;
  padding:1.5rem 1rem 0.9rem;
  background:linear-gradient(180deg, rgba(10,8,6,0) 0%, rgba(10,8,6,0.65) 100%);
}
.lightbox-close{
  position:absolute; top:1.5rem; right:2rem; color:#F2EAE0; font-size:2rem;
  font-family: var(--ff-display); line-height:1; cursor:pointer;
  background:none; border:none; opacity:0.75;
}
.lightbox-close:hover{opacity:1;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); color:#F2EAE0;
  font-size:2.25rem; font-family: var(--ff-display); background:none; border:none;
  cursor:pointer; opacity:0.6; padding:0.6rem;
}
.lightbox-nav:hover{opacity:1;}
.lightbox-prev{left:0.75rem;} .lightbox-next{right:0.75rem;}

@media (max-width: 760px){
  .ip-hero, .ip-index-hero{height:50vh; min-height:360px; padding:0 1.25rem 1.75rem;}
  .ip-hero-title{font-size:2rem;}
  .ip-hero-dek{font-size:1rem;}

  .ip-sections{padding:0 1.25rem;}
  .ip-section{grid-template-columns:1fr; gap:0.65rem; padding:1.75rem 0;}
  .ip-label h2{font-size:1.3rem;}

  .ip-grid.count-5{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:auto;
    aspect-ratio:auto;
  }
  .ip-grid.count-5 .g-hero{grid-column:1 / span 2; grid-row:auto; height:280px;}
  .ip-grid.count-5 .g-1, .ip-grid.count-5 .g-2,
  .ip-grid.count-5 .g-3, .ip-grid.count-5 .g-4{grid-column:span 1; grid-row:auto; height:165px;}

  .ip-grid.count-2,
  .ip-grid.count-3{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-flow:row;
    aspect-ratio:auto;
  }
  .ip-grid.count-2 .g-row,
  .ip-grid.count-3 .g-row{grid-column:1; grid-row:auto; height:280px;}

  .ip-grid.count-4{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-flow:row;
    aspect-ratio:auto;
  }
  .ip-grid.count-4 .g4-hero,
  .ip-grid.count-4 .g4-top,
  .ip-grid.count-4 .g4-side,
  .ip-grid.count-4 .g4-wide{grid-column:1; grid-row:auto; height:280px; display:block;}

  .ip-pull-quote{padding:2rem 1.25rem;}
  .ip-pull-quote p{font-size:1.15rem;}

  /* Vertical (portrait) photos get their natural aspect ratio on mobile
     instead of being cropped into the fixed landscape-shaped height
     used for everything else. Mark an image with vertical: true in
     front matter to use this.
     NOTE: specificity must beat .ip-grid.count-2/3/4 .g-row / .g4-* rules
     above (three classes each), or this override silently loses despite
     coming later in the file. */
  .ip-grid.count-2 figure.is-vertical,
  .ip-grid.count-3 figure.is-vertical,
  .ip-grid.count-4 figure.is-vertical,
  .ip-grid.count-5 figure.is-vertical{height:auto !important; aspect-ratio:3/4;}
  .ip-grid figure.is-vertical img{object-fit:cover; height:100%;}
}