/* ============================================================
   Prism Painting of Williamsburg - the gallery page (v6.19, v6.35)

   Its own stylesheet. Every rule is scoped to a .gl- class, so nothing
   here can reach index.html, owners.html or thanks.html - the home page's
   four photographs and its own gallery section are untouched.

   The photographs are shown WHOLE (natural aspect ratio, never cropped):
   this page is a portfolio, so a landscape and a portrait keep their own
   shapes. Two columns on a desktop, one on a phone.

   v6.19b, after the design review called the columns badly unbalanced:
   the five photographs are one portrait pair (kitchen 3:4, rotten wood
   3:4) and three landscape (exterior, interior, deck). Kitchen + exterior
   and interior + rotten wood are the SAME height - 788 + 461 = 461 + 788
   = 1249 CSS px at 1440 - so neither column leaves a blank tail. The wide
   power washing photograph (1.52) closes the page as one band across the
   full width of the column pair.
   ============================================================ */

.gl-head{
  background:var(--cream);border-bottom:1px solid var(--line);
  padding-block:clamp(30px,4.4vw,64px) clamp(26px,3.6vw,48px);
}
.gl-head h1{
  margin:0 0 14px;font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,4vw,50px);line-height:1.08;color:var(--ink);
}
.gl-lede{max-width:60ch;margin:0;font-size:clamp(15.5px,1.6vw,17.5px);
  line-height:1.66;color:#3B414A}

.gl-gallery{background:var(--white);
  padding-block:clamp(24px,3.4vw,44px) clamp(20px,2.6vw,34px)}

/* CSS columns keep every photograph at its own aspect ratio and never
   split one across a column break */
/* v6.37: two EXPLICIT columns (flex) instead of CSS multicol, so which
   photograph lands in which column is decided here and cannot drift.
   Desktop arrangement is unchanged: kitchen / exterior / interior on the
   left, rotten wood / exterior repaint / siding & trim on the right. */
.gl-cols{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,30px)}
.gl-col{flex:1 1 0;min-width:0}
.gl-fig{
  margin:0 0 clamp(16px,2.4vw,30px);break-inside:avoid;
  -webkit-column-break-inside:avoid;page-break-inside:avoid;
  background:var(--cream-2);
}
.gl-fig img{display:block;width:100%;height:auto}
/* v6.19b: the caption was 11.5px at .1em tracking and read as easy to miss;
   13px at .055em is legible at arm's length and still a label, not body copy */
.gl-fig figcaption{
  padding:12px 2px 0;background:var(--white);
  font-size:13px;font-weight:700;letter-spacing:.055em;line-height:1.35;
  text-transform:uppercase;color:var(--ink);
}

/* the closing band: the same width as the two columns together. It carries
   .wrap for the page gutter, so its edges line up with theirs exactly.

   v6.35: the photograph is HALF its former size. The band keeps its own
   edges, and the photograph and its caption take the middle half of it -
   576 of 1152 CSS px at a 1440 window, so 576x432, exactly 0.5 of the
   1152x864 v6.34 showed. The file is 1448x1086, so it is still shown at
   half its natural size - no upscale, no crop, same 4:3 shape. */
/* v6.37: the wide closing band is GONE. The power washing photograph is now
   the fourth photograph of the LEFT column, standing exactly where the blank
   tail under Interior painting used to be, at the same width as every other
   photograph in a column. */

.gl-note{
  margin:0 auto;padding-top:clamp(12px,1.8vw,20px);
  border-top:1px solid var(--line-2);
  font-size:13.5px;line-height:1.6;color:#4A5058;
}

.gl-cta{background:var(--cream);border-top:1px solid var(--line);
  padding-block:clamp(34px,4.6vw,66px)}
.gl-cta-in{max-width:760px}
.gl-cta h2{
  margin:0 0 14px;font-family:var(--serif);font-weight:700;
  font-size:clamp(25px,3vw,38px);line-height:1.12;color:var(--ink);
}
.gl-cta p{max-width:56ch;margin:0 0 12px;font-size:16.5px;line-height:1.66;color:#3B414A}
.gl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 0}
.gl-back{margin:22px 0 0;font-family:var(--sans);font-size:13px}
.gl-back a{color:var(--muted);text-decoration:underline}
.gl-back a:hover{color:var(--red)}

/* ---------- one column on a tablet held upright and on a phone ---------- */
@media (max-width:760px){
  /* v6.37: one column here - the two explicit columns stack, their own
     figure margins supply the spacing (so no flex gap, or it would double) */
  .gl-cols{flex-direction:column;gap:0}
  .gl-col{flex:none;width:100%}
}
@media (max-width:520px){
  .gl-acts{display:grid}
  .gl-acts .btn{width:100%}
  .gl-fig figcaption{font-size:12px}
}

/* ---------- print ---------- */
@media print{
  .gl-fig{break-inside:avoid}
  .gl-note{color:#000}
}