/**
 * Novelty Gene — photos at the top of an article (1 to 4).
 *
 * Markup:  <div class="ng-photos ng-photos-N ng-layout-{row|mosaic|flip}">
 *             <figure class="ng-photo is-{rounded|square|circle}"><img></figure> ...
 *
 * Layouts
 *   row     photos side by side, equal width (1 = full width, 2 = halves, ...)
 *   mosaic  1: full · 2: wide + narrow · 3: big + two stacked · 4: two tall + two stacked
 *   flip    the same mosaic mirrored (stacked photos on the left)
 *
 * Shared by the site and by the live preview in the post editor.
 * Mobile first: phones get a simple 2-column grid; wider screens get the layouts above.
 */

.ng-photos{
	--ng-ph:190px; --ng-gap:22px; --ng-r:26px;
	display:grid; gap:var(--ng-gap); margin:0 0 60px;
	grid-template-columns:repeat(2,minmax(0,1fr));
}
.ng-photo{ position:relative; margin:0; min-width:0; overflow:hidden; aspect-ratio:1/1; background:#e4e4e4; }
.ng-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ng-photo.is-rounded{ border-radius:var(--ng-r); }
.ng-photo.is-square{ border-radius:0; }
.ng-photo.is-circle{ border-radius:50%; }

/* ---------- phones (default): 2 columns; first photo full width when the count is odd ---------- */
.ng-photos{ --ng-gap:12px; --ng-r:18px; margin-bottom:34px; }
.ng-photos-1 .ng-photo,
.ng-photos-3 .ng-photo:first-child{ grid-column:1 / -1; aspect-ratio:4/3; }
.ng-photos-1 .ng-photo.is-circle,
.ng-photos-3 .ng-photo.is-circle:first-child{ aspect-ratio:1/1; width:72%; justify-self:center; }

/* ---------- tablet and up ---------- */
@media (min-width:681px){
	.ng-photos{ --ng-ph:150px; --ng-gap:16px; --ng-r:22px; margin-bottom:50px; grid-auto-rows:var(--ng-ph); }
	.ng-photo{ --ch:calc(var(--ng-ph) * 2 + var(--ng-gap)); aspect-ratio:auto; grid-column:auto; grid-row:span 2; }
	/* a circle must stay a circle: as wide as it is tall, centered in its cell */
	.ng-photo.is-circle,
	.ng-photos-1 .ng-photo.is-circle,
	.ng-photos-3 .ng-photo.is-circle:first-child{ aspect-ratio:1/1; width:min(100%,var(--ch)); align-self:center; justify-self:center; }
	.ng-photos-1 .ng-photo,.ng-photos-3 .ng-photo:first-child{ aspect-ratio:auto; }

	/* row: equal columns */
	.ng-layout-row.ng-photos-1{ grid-template-columns:minmax(0,1fr); }
	.ng-layout-row.ng-photos-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.ng-layout-row.ng-photos-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.ng-layout-row.ng-photos-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

	/* mosaic and flip */
	.ng-layout-mosaic.ng-photos-1,.ng-layout-flip.ng-photos-1{ grid-template-columns:minmax(0,1fr); }
	.ng-layout-mosaic.ng-photos-2{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
	.ng-layout-flip.ng-photos-2{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
	.ng-layout-flip.ng-photos-2 .ng-photo:nth-child(1){ grid-column:2; grid-row:1 / span 2; }
	.ng-layout-flip.ng-photos-2 .ng-photo:nth-child(2){ grid-column:1; grid-row:1 / span 2; }

	.ng-layout-mosaic.ng-photos-3{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
	.ng-layout-flip.ng-photos-3{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
	.ng-layout-mosaic.ng-photos-3 .ng-photo:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
	.ng-layout-flip.ng-photos-3 .ng-photo:nth-child(1){ grid-column:2; grid-row:1 / span 2; }
	.ng-layout-mosaic.ng-photos-3 .ng-photo:nth-child(2),.ng-layout-mosaic.ng-photos-3 .ng-photo:nth-child(3){ grid-column:2; }
	.ng-layout-flip.ng-photos-3 .ng-photo:nth-child(2),.ng-layout-flip.ng-photos-3 .ng-photo:nth-child(3){ grid-column:1; }

	.ng-layout-mosaic.ng-photos-4,.ng-layout-flip.ng-photos-4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
	.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(2){ grid-column:2; grid-row:1 / span 2; }
	.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(3),.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(4){ grid-column:3; }
	.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(1){ grid-column:2; grid-row:1 / span 2; }
	.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(2){ grid-column:3; grid-row:1 / span 2; }
	.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(3),.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(4){ grid-column:1; }

	/* the two stacked photos are half as tall */
	.ng-layout-mosaic.ng-photos-3 .ng-photo:nth-child(n+2),
	.ng-layout-flip.ng-photos-3 .ng-photo:nth-child(n+2),
	.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(n+3),
	.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(n+3){ --ch:var(--ng-ph); grid-row:span 1; }
	.ng-layout-mosaic.ng-photos-3 .ng-photo:nth-child(2),.ng-layout-flip.ng-photos-3 .ng-photo:nth-child(2),
	.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(3),.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(3){ grid-row:1; }
	.ng-layout-mosaic.ng-photos-3 .ng-photo:nth-child(3),.ng-layout-flip.ng-photos-3 .ng-photo:nth-child(3),
	.ng-layout-mosaic.ng-photos-4 .ng-photo:nth-child(4),.ng-layout-flip.ng-photos-4 .ng-photo:nth-child(4){ grid-row:2; }
}
@media (min-width:981px){
	.ng-photos{ --ng-ph:190px; --ng-gap:22px; --ng-r:26px; margin-bottom:60px; }
}

/* the small preview in the post editor */
.ng-photos--preview{ --ng-ph:64px; --ng-gap:8px; --ng-r:10px; max-width:520px; margin:12px 0 4px !important; }