/* File: /css/specific/docs.css */

/* Tunables */
:root { --content-pad: 20px; --doc-max: 1100px; }

.content.docs-page{
  padding: var(--content-pad);
  font-size: clamp(1rem, 1.05rem + 0.2vw, 1.15rem);
  overflow-x: hidden; /* no horizontal scroll on narrow screens */
}

.docs-wrap{
  width: 100%;
  max-width: var(--doc-max);
  margin: 0 auto;
  line-height: 1.7;
  box-sizing: border-box;
}

.docs-wrap h1{ font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin: 0 0 12px; }
.docs-wrap h2{ font-size: clamp(1.2rem, 1.4vw, 1.35rem); margin: 20px 0 10px; }
.docs-wrap p{ margin: 0 0 14px; }
.docs-wrap ul{ margin: 0 0 16px 20px; }
.doc-nav{ margin-top: 24px; }

/* widen content on large displays (less giant margins at 2K/4K) */
@media (min-width: 1440px){ :root{ --doc-max: 1400px; } }
@media (min-width: 1920px){ :root{ --doc-max: 1700px; } }
@media (min-width: 2560px){ :root{ --doc-max: 2100px; } }
@media (min-width: 3840px){ :root{ --doc-max: 2500px; } }

/* --- How I Capture & Process: images layout --- */
.docs-page .doc-sep{ margin: 2rem 0; opacity: .2; }

.content.docs-page .doc-photos figure{ margin: 0; }
.content.docs-page .doc-photos img{
  display:block; width:100%; max-width:100%;
  height:auto; border-radius:12px;
}
.content.docs-page .doc-photos figcaption{
  margin-top:.5rem; font-size:.95rem; opacity:.85;
}

/* MOBILE-FIRST: two-col grid collapses to one col by default */
.content.docs-page .doc-photos .two-col{
  display:grid;
  grid-template-columns: 1fr;      /* single column on small screens */
  gap:20px;
  align-items:start;
}
.content.docs-page .doc-photos .two-col .col{
  display:flex; flex-direction:column; gap:20px;
}

/* From 900px up: true two columns */
@media (min-width: 900px){
  .content.docs-page .doc-photos .two-col{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap:24px;
  }
  .content.docs-page .doc-photos .two-col .col{ gap:24px; }
}

/* Full-width items (7–11) stay locked to the content width */
.content.docs-page .doc-photos .full{ margin-top:32px; }
.content.docs-page .doc-photos .full,
.content.docs-page .doc-photos .full img{ width:100%; max-width:100%; }

/* Lightbox (zoom) — only for the first six (two-col) images */
.content.docs-page .doc-photos .two-col img{ cursor:zoom-in; }
.ba-lightbox{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.9); z-index:9999;
}
.ba-lightbox.open{ display:flex; }
.ba-lightbox img{
  max-width:95vw; max-height:95vh;
  border-radius:12px; cursor:zoom-out;
}

/* --- Bigger type on 2K/4K --- */

/* 2K+ (2560 wide and up) */
@media (min-width: 2560px){
  /* body text in the top section */
  .content.docs-page{
    font-size: clamp(1.12rem, 1rem + 0.6vw, 1.45rem);
  }
  /* captions under images */
  .content.docs-page .doc-photos figcaption{
    font-size: 1.05rem;
  }
  /* headings */
  .docs-wrap h1{ font-size: clamp(2rem, 1.2rem + 1.2vw, 2.6rem); }
  .docs-wrap h2{ font-size: clamp(1.4rem, 0.9rem + 0.6vw, 1.6rem); }
}

/* 4K (3840 wide and up) */
@media (min-width: 3840px){
  .content.docs-page{
    font-size: clamp(1.22rem, 1rem + 0.8vw, 1.6rem);
  }
  .content.docs-page .doc-photos figcaption{
    font-size: 1.15rem;
  }
  .docs-wrap h1{ font-size: clamp(2.3rem, 1.2rem + 1.6vw, 3rem); }
  .docs-wrap h2{ font-size: clamp(1.55rem, 0.9rem + 0.8vw, 1.85rem); }
}