/* ============================================================================
   POLAROID ARCHIVE PAGE  —  static/css/polaroid-archive.css          v1.7
   ----------------------------------------------------------------------------
   Grid for layouts/shortcodes/polaroid-archive.html. Loads after the card CSS
   (section 23 / polaroid.css). Site-agnostic: works on cliff538.com and
   365pixels.xyz unchanged.

   v1.7 (2026-08-12) — collections are now a grid site-wide (Custom CSS section
   13); this file only gives SCAN sets the print's own cell shape, so nothing is
   ever cropped. Adds the .polaroid-scans hook for posts.
   v1.6 (2026-08-11) — laid out Micro.blog's {{ collection }} to match the
   archive grid.
   v1.5 (2026-08-10) — full reset of theme styling on the archive photo.
   v1.4 (2026-08-10) — pointer-events:none on the archive photo, so a theme
   lightbox can't hijack the click. Found on 365pixels.
   v1.3 (2026-08-10) — every length is px, never rem, so the file drops onto
   365pixels.xyz unchanged. Mnml sets html{font-size:10px} against Tiny Theme's
   16px, which would have made the row gap 27.5px instead of 44 and the date
   link under each card 8.5px. Same trap that shrank the card's writing there in
   August; the card itself was already immune because it is all cqw, but the
   grid chrome around it was not.
   v1.2 (2026-08-10) — added the flat grid for tilt="0".
   v1.1 (2026-08-10) — fixed wide="true". It did nothing on cliff538.com because
   Tiny Theme caps `body` at 720px, so widening `.wrapper` had no effect; worse,
   the 1rem padding made cards 332px instead of 348px. Wide mode now centres on
   the viewport and renders the print at its native 430px, fitting as many per
   row as there is room for.
   ============================================================================ */

.polaroid-archive {
  --polaroid-grid-cols: 2;
  --polaroid-grid-max: 430px;      /* the print's native width — never upscale */
  --polaroid-grid-row-gap: 44px;
  --polaroid-grid-col-gap: 24px;
}

/* The 430px cap lives on the TRACK, not on the item. Capping the item with
   max-width + margin-inline:auto looks equivalent and is not: auto margins on a
   grid item switch it out of stretch and into shrink-to-fit, and since the card
   gets its height from aspect-ratio its intrinsic width collapses — measured
   101px inside a 394px column. Sizing the track sidesteps that entirely, and
   justify-content centres whatever is left over. */
.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(var(--polaroid-grid-cols), minmax(0, var(--polaroid-grid-max)));
  justify-content: center;
  gap: var(--polaroid-grid-row-gap) var(--polaroid-grid-col-gap);
  align-items: start;
}

/* The aspect-ratio here is what makes content-visibility safe. With the box
   height known from the column width alone, the browser can skip rendering an
   off-screen card without guessing its size — page height comes out within 3px
   of the uncontained version, so the scrollbar doesn't jump as you scroll. */
.polaroid-grid__card {
  aspect-ratio: 88 / 107;
  content-visibility: auto;
  contain-intrinsic-size: auto 1px;
}

/* The card carries margin: 3rem auto on a post page. In a grid that would stack
   on top of the row gap, and the 430px cap would leave gutters inside each cell
   — the grid track is already doing both jobs. */
.polaroid-grid .cliff-polaroid {
  margin: 0;
  width: 100%;
  max-width: none;
}

.polaroid-grid__date {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.65;
  text-decoration: none;
}

.polaroid-grid__date:hover {
  opacity: 1;
  text-decoration: underline;
}

.polaroid-archive__empty {
  text-align: center;
  opacity: 0.6;
}

/* Column counts. 2 across is the most the 720px content column will take at a
   readable size — at 3 across the card falls to 224px and the printed batch
   number bottoms out at its 8px floor. Use wide="true" for 3. */
.polaroid-archive--cols-1 { --polaroid-grid-cols: 1; }
.polaroid-archive--cols-2 { --polaroid-grid-cols: 2; }
.polaroid-archive--cols-3 { --polaroid-grid-cols: 3; }
.polaroid-archive--cols-4 { --polaroid-grid-cols: 4; }

/* ----------------------------------------------------------------------------
   WIDE PAGE
   Breaks the archive out of the theme's 720px column. Same technique the
   photos-grid plugin already uses on this site.
   ---------------------------------------------------------------------------- */
.wrapper:has(.polaroid-archive--wide),
#wrapper:has(.polaroid-archive--wide),
.post-content:has(.polaroid-archive--wide) {
  max-width: 100%;
}

/* Break out of the theme's content column. `.wrapper` alone is not enough on
   cliff538.com — Tiny Theme caps `body` at 720px, so widening the wrapper did
   nothing and the 1rem padding actually made the cards SMALLER (332px instead
   of 348px). This centres the block on the viewport instead, using position
   rather than a transform so the 3D flip and content-visibility are untouched.
   The site header and footer stay at their normal 720px. */
.polaroid-archive--wide {
  /* One custom property drives both the width and the centring offset. Writing
     the min() twice invites them to drift: the first pass at this had the width
     in px and the offset still in rem, which puts the block 9px off centre on a
     10px-root theme. */
  --polaroid-wide-w: min(1200px, calc(100vw - 48px));
  max-width: none;
  width: var(--polaroid-wide-w);
  position: relative;
  left: 50%;
  margin-left: calc(var(--polaroid-wide-w) / -2);
  padding-inline: 0;
}

/* In wide mode the print always renders at its native 430px and the row simply
   holds as many as fit, capped at `columns`. That removes the need for
   width-specific breakpoints: when two no longer fit, it becomes one.
   The `min(430px, 100%)` floor matters — a bare `repeat(auto-fit, 430px)` keeps
   forcing a 430px track on a narrower screen and pushes the page sideways
   (measured: 375px of scroll width inside a 320px viewport). */
.polaroid-archive--wide .polaroid-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--polaroid-grid-max), 100%), var(--polaroid-grid-max)));
  justify-content: center;
  max-width: calc(var(--polaroid-grid-cols) * var(--polaroid-grid-max)
                  + (var(--polaroid-grid-cols) - 1) * var(--polaroid-grid-col-gap));
  margin-inline: auto;
}

/* ----------------------------------------------------------------------------
   FLAT GRID  (tilt="0")
   The shortcode sets --polaroid-tilt inline per card, so this needs !important
   to beat it. A single print leaning 1.3deg on a post page reads as casual; two
   side by side leaning opposite ways read as crooked, because the eye now has a
   neighbour and the grid edge to measure against.
   ---------------------------------------------------------------------------- */
.polaroid-archive--flat .cliff-polaroid {
  --polaroid-tilt: 0deg !important;
}

/* ----------------------------------------------------------------------------
   REAL <img> PHOTO  (lazy="true", the default)
   The archive swaps the card's CSS background-image for an <img loading="lazy">
   so a page of 80 prints fetches ten photos instead of eighty. One consequence:
   an inset box-shadow paints UNDER child content, so the vignette that sits on
   the photo edge would be hidden behind the <img>. Re-draw it as an overlay.
   ---------------------------------------------------------------------------- */
.polaroid-archive--img .cliff-polaroid__photo-area {
  position: relative;
}

/* As far as a Micro.blog theme is concerned this is just another content image,
   so it picks up whatever the theme does to content images. Measured: Mnml on
   365pixels adds a 3rem top margin, which at its 10px root pushed the photo 30px
   down inside a box with overflow:hidden — a black band across the top and the
   bottom of the picture cropped off. Tiny Theme on cliff538 rounds image corners
   to 5px, which was quietly live on the archive there. A real print's image area
   is a hard rectangle flush to its border, so reset the lot. Specificity (0,2,0)
   beats both `img` and `.e-content img`; no !important needed. */
.polaroid-archive--img .cliff-polaroid__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  background: none;
  object-fit: cover;
  /* Micro.blog themes bolt a lightbox onto every <img> on the page. Section 23
     already defends the card against that, but only for <a> and the old
     .cliff-polaroid__image — the archive introduces a real <img>, which the
     theme JS happily grabs. On 365pixels (Mnml) clicking a card opened a
     full-screen lightbox ON TOP of the flip; verified. Taking the image out of
     hit-testing hands the click to the <label> that wraps it, so the card
     flips and the lightbox handler never sees the event. */
  pointer-events: none;
}

.polaroid-archive--img .cliff-polaroid__photo-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    inset 0 0 14px rgba(0, 0, 0, 0.18);
}

/* ----------------------------------------------------------------------------
   SMALL SCREENS
   One across below 540px on every setting. Two columns on a phone puts the card
   near 160px, well past the point where the printed batch number stops
   shrinking and the proportions break down.
   ---------------------------------------------------------------------------- */
@media (max-width: 540px) {
  .polaroid-archive {
    --polaroid-grid-cols: 1;
    --polaroid-grid-row-gap: 32px;
  }
  /* On a phone the viewport IS the column, so the wide breakout has nothing to
     escape from — it would only cost 16px of card width. Put it back in normal
     flow so the archive and a post page render the print at the same size. */
  .polaroid-archive--wide {
    position: static;
    left: auto;
    width: auto;
    margin-left: 0;
    padding-inline: 0;
  }
}

@media (min-width: 541px) and (max-width: 820px) {
  .polaroid-archive--cols-3:not(.polaroid-archive--wide),
  .polaroid-archive--cols-4:not(.polaroid-archive--wide) { --polaroid-grid-cols: 2; }
}

/* ----------------------------------------------------------------------------
   SCANNED-PRINT COLLECTIONS
   A Micro.blog {{ collection }} whose images are scans of real prints. Those all
   measure 0.82 aspect against the print's 88:107 = 0.822, so giving the cell the
   print's own shape means the scan fills it edge to edge — no crop, and none of
   the empty bands a square cell leaves. Everything else on the site keeps the
   square contain cell from Custom CSS section 13.

   Two hooks:
     .polaroid-archive present on the page  — the /polaroids/ page, automatic
     .polaroid-scans wrapper                — add round the shortcode in a post:

         <div class="polaroid-scans">
         {{< collection "Polaroids" >}}
         </div>

   No pointer-events guard here: these SHOULD open Micro.blog's viewer, which is
   the right behaviour for a print with no back to flip to.
   ---------------------------------------------------------------------------- */
.post-content:has(.polaroid-archive) .microblog_collection img,
.e-content:has(.polaroid-archive) .microblog_collection img,
.polaroid-scans .microblog_collection img {
  aspect-ratio: 88 / 107;
  object-fit: contain !important;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 6px 12px rgba(0, 0, 0, 0.24),
    0 22px 38px rgba(0, 0, 0, 0.20);
  /* 25 to 50 scans is a lot of layout; the archive's own cards get this too. */
  content-visibility: auto;
  contain-intrinsic-size: auto 430px auto 523px;
}

/* On the /polaroids/ page the scans sit under the archive, so give them the same
   breakout and the same 430px track and the two grids read as one object. */
.post-content:has(.polaroid-archive) .microblog_collection,
.e-content:has(.polaroid-archive) .microblog_collection {
  --polaroid-wide-w: min(1200px, calc(100vw - 48px));
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 430px));
  justify-content: center;
  gap: 44px 24px;
  width: var(--polaroid-wide-w);
  max-width: none;
  position: relative;
  left: 50%;
  margin-left: calc(var(--polaroid-wide-w) / -2);
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (max-width: 540px) {
  .post-content:has(.polaroid-archive) .microblog_collection,
  .e-content:has(.polaroid-archive) .microblog_collection {
    position: static;
    left: auto;
    width: auto;
    margin-left: 0;
    gap: 32px 24px;
  }
}