/* ============================================================
   PHOTOS — reusable patterns for warm photography integration
   Photo style: warm beige walls, natural light, fiddle leaf,
   wooden desks. Preserves mint/paper palette via tinted gradients.
   ============================================================ */

/* ---- Hero collage (Home) ---- */
.hero-collage{
  position:absolute;top:24px;right:0;bottom:80px;width:42%;max-width:520px;
  display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1.4fr 1fr;
  gap:14px;z-index:1;pointer-events:none;
}
.hero-collage .ph{
  position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--rule);
  box-shadow:var(--shadow-card);background:var(--mint);
  background-size:cover;background-position:center;
}
.hero-collage .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(31,58,27,.12));
}
.hero-collage .ph-1{grid-row:1 / span 2;background-image:url('../images/team/team_lex-laptop-coffee_1x1_01.png')}
.hero-collage .ph-2{background-image:url('../images/team/team_extra_lex-tablet-reading_1x1_04.png')}
.hero-collage .ph-3{background-image:url('../images/team/team_extra_valentijn-hands-gesturing_1x1_08.png')}
.hero-collage .caption{
  position:absolute;left:14px;bottom:14px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.35);
}
@media (max-width:1100px){.hero-collage{display:none}}

/* ---- Lifestyle ribbon (between sections) ---- */
.photo-ribbon{
  padding:0 0 80px;
}
.photo-ribbon .wrap{position:relative}
.photo-ribbon-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;
}
.photo-ribbon-grid .ph{
  position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--rule);
  background-size:cover;background-position:center;aspect-ratio:4/3;
  box-shadow:var(--shadow-card);
}
.photo-ribbon-grid .ph.tall{aspect-ratio:3/4}
.photo-ribbon-grid .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(31,58,27,.45));
}
.photo-ribbon-grid .ph .cap{
  position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff;
  display:flex;flex-direction:column;gap:4px;
}
.photo-ribbon-grid .ph .cap b{font-size:18px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.45);text-wrap:balance}
.photo-ribbon-grid .ph .cap span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;text-shadow:0 1px 4px rgba(0,0,0,.5)}
@media (max-width:880px){.photo-ribbon-grid{grid-template-columns:1fr 1fr;gap:12px}.photo-ribbon-grid .ph:nth-child(3){display:none}}

/* ---- Side photo (paired with copy block) ---- */
.photo-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:80px 0;
}
.photo-pair.reverse{direction:rtl}
.photo-pair.reverse > *{direction:ltr}
.photo-pair .stack{display:flex;flex-direction:column;gap:14px;position:relative}
.photo-pair .stack .ph{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--rule);
  background-size:cover;background-position:center;box-shadow:var(--shadow-card);
}
.photo-pair .stack .main{aspect-ratio:4/3}
.photo-pair .stack .sm{aspect-ratio:16/9;width:60%;margin-left:auto;margin-top:-60px;position:relative;z-index:2;border:3px solid var(--paper)}
.photo-pair .text h2{font-size:clamp(36px,4vw,56px);letter-spacing:-.03em;font-weight:600;line-height:1.05;text-wrap:balance}
.photo-pair .text h2 em{font-family:var(--serif);font-style:italic;color:var(--signal);font-weight:400}
.photo-pair .text p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:46ch;margin-top:18px}
.photo-pair .text .pic-meta{
  margin-top:28px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;
}
.photo-pair .text .pic-meta b{color:var(--signal);font-weight:500}
@media (max-width:1000px){.photo-pair{grid-template-columns:1fr;gap:36px;padding:48px 0}}

/* ---- Single bleed photo ---- */
.photo-bleed{
  position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--rule);
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-card);
  margin:0 0 80px;aspect-ratio:21/9;
}
.photo-bleed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(31,58,27,.55) 0%, rgba(31,58,27,.15) 50%, transparent 100%);
}
.photo-bleed .cap{
  position:absolute;left:48px;bottom:36px;z-index:2;color:#fff;max-width:420px;
}
.photo-bleed .cap span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;display:block;margin-bottom:12px}
.photo-bleed .cap h3{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.photo-bleed .cap h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--signal-glow)}
@media (max-width:680px){.photo-bleed{aspect-ratio:4/3}.photo-bleed .cap{left:24px;right:24px;bottom:24px}}

/* ---- Polaroid grid (decorative) ---- */
.polaroid-strip{
  display:flex;gap:20px;flex-wrap:wrap;justify-content:center;padding:48px 0 80px;
}
.polaroid{
  width:240px;background:var(--paper);padding:12px 12px 36px;border-radius:6px;
  box-shadow:var(--shadow-card);border:1px solid var(--rule);
  position:relative;transition:transform .35s ease;
}
.polaroid:nth-child(odd){transform:rotate(-2deg)}
.polaroid:nth-child(even){transform:rotate(1.5deg)}
.polaroid:hover{transform:rotate(0) scale(1.04);z-index:2}
.polaroid .pic{aspect-ratio:1;background-size:cover;background-position:center;border-radius:2px;background-color:var(--mint)}
.polaroid figcaption{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-2);
}

/* ---- Photo card variant for blog ---- */
.blog-card .photo-thumb{
  aspect-ratio:16/10;background-size:cover;background-position:center;
  border-bottom:1px solid var(--rule);position:relative;
}
.blog-card .photo-thumb::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 60%, rgba(31,58,27,.35));
}