/*
 * Spacca - Issue 4: per-article photo layouts (loaded only on /issue-4/).
 * Shared shell lives in issue.css. Class convention: .spacca-a{N}-* = article N.
 */

/* ===== Article 1 - Double Fried in Belgium ============================
   Three rows, space-between. The narrow photo of each row is at 25%, the
   others at one third; div.3 mirrors div.1, so its wide photo goes left.
   div.1: img.1 25% left, img.2 33.3333% right, both from the top.
   div.2: img.3 33.3333%, img.4 25% vertically centred between its two
   neighbours, img.5 33.3333%.
   div.3: img.6 33.3333% left from the top, img.7 25% right bottom-aligned.
   Mobile: full-width column; the 25% photo of each row drops to 50% and is
   aligned right (div.1, below its neighbour), centred (div.2) and left
   (div.3, above its neighbour). */
.spacca-a1-r1,
.spacca-a1-r2,
.spacca-a1-r3 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a1-r1 img,
.spacca-a1-r2 img,
.spacca-a1-r3 img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

/* div.1 mobile: img.2 on top full, img.1 below at 50% right. */
.spacca-a1-r1 img:nth-child(1) {
	width: 50%;
	align-self: flex-end;
}

.spacca-a1-r1 img:nth-child(2) {
	order: -1;
}

/* div.2 mobile: img.4 at 50% centred, between two full-width photos. */
.spacca-a1-r2 img:nth-child(2) {
	width: 50%;
	align-self: center;
}

/* div.3 mobile: img.7 on top at 50% left, img.6 full below. */
.spacca-a1-r3 img:nth-child(2) {
	width: 50%;
	align-self: flex-start;
	order: -1;
}

@media (min-width: 768px) {
	.spacca-a1-r1,
	.spacca-a1-r2,
	.spacca-a1-r3 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		row-gap: 0;
	}

	.spacca-a1-r1 img:nth-child(1) {
		width: 25%;
		align-self: auto;
	}

	.spacca-a1-r1 img:nth-child(2) {
		width: 33.3333%;
		order: 0;
	}

	.spacca-a1-r2 img:nth-child(1),
	.spacca-a1-r2 img:nth-child(3) {
		width: 33.3333%;
	}

	/* align-self keeps the same keyword as mobile but now works on the
	   vertical axis: img.4 sits centred against its two neighbours. */
	.spacca-a1-r2 img:nth-child(2) {
		width: 25%;
		align-self: center;
	}

	.spacca-a1-r3 img:nth-child(1) {
		width: 33.3333%;
	}

	.spacca-a1-r3 img:nth-child(2) {
		width: 25%;
		align-self: flex-end;
		order: 0;
	}
}

/* ===== Article 2 - Eyeson Fam: Dirty Ranch ============================
   Row 1 of the spread is a single photo, so it uses .spacca-a2-solo and the
   two row divs that follow are numbered r1 and r2 (same convention as the
   other issues, where a solo photo does not take a row number).
   solo: img.1 60% right.
   r1:   img.2, img.3 and img.4 at 20% each, the group centred in the section.
   r2:   img.5 40% left bottom-aligned, img.6 30% right, space-between.
   Mobile: solo full width; r1 becomes a centred column of 50% photos; r2 a
   full-width column with img.6 on top.
   Desktop: r2 vertical alignment of img.6 unspecified -> top (flex-start). */
.spacca-a2-solo {
	display: block;
	width: 100%;
	height: auto;
}

.spacca-a2-r1,
.spacca-a2-r2 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a2-r1 {
	align-items: center;
}

.spacca-a2-r1 img,
.spacca-a2-r2 img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

/* r1 mobile: the three photos stacked at 50%, centred. */
.spacca-a2-r1 img {
	width: 50%;
}

/* r2 mobile: img.6 on top, img.5 below, both full width. */
.spacca-a2-r2 img:nth-child(2) {
	order: -1;
}

@media (min-width: 768px) {
	.spacca-a2-solo {
		width: 60%;
		align-self: flex-end;
	}

	.spacca-a2-r1,
	.spacca-a2-r2 {
		flex-direction: row;
		row-gap: 0;
	}

	.spacca-a2-r1 {
		justify-content: center;
		align-items: flex-start;
		column-gap: 8rem;
	}

	.spacca-a2-r1 img {
		width: 20%;
	}

	.spacca-a2-r2 {
		justify-content: space-between;
		align-items: flex-start;
	}

	.spacca-a2-r2 img:nth-child(1) {
		width: 40%;
		align-self: flex-end;
	}

	.spacca-a2-r2 img:nth-child(2) {
		width: 30%;
		order: 0;
	}
}

/* ===== Article 3 - Dime: One Way or Another ===========================
   solo: img.1 full width.
   r1:   a left column holding the two sequence frames, and img.4 at 50% on
         the right. The column is 50% wide and stretches to the height of
         img.4, so space-evenly gives the two frames the same gap above,
         between and below. Inside the column the frames are at 60%, which
         is 30% of the section: percentages resolve against the column, not
         the row.
   Mobile: one full-width column; the two frames at 50% centred, img.4 full
   width, all separated by the usual 2rem. */
.spacca-a3-solo {
	display: block;
	width: 100%;
	height: auto;
}

.spacca-a3-r1,
.spacca-a3-col {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a3-col {
	align-items: center;
}

.spacca-a3-r1 > img,
.spacca-a3-col img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

.spacca-a3-col img {
	width: 50%;
}

@media (min-width: 768px) {
	.spacca-a3-r1 {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		row-gap: 0;
	}

	.spacca-a3-col {
		width: 50%;
		justify-content: space-evenly;
		row-gap: 0;
	}

	.spacca-a3-col img {
		width: 60%;
	}

	.spacca-a3-r1 > img {
		width: 50%;
	}
}

/* ===== Article 4 - El Puto D.I.Y =====================================
   r1: img.1 30% left, img.2 30% right, both from the top, space-between.
   r2: three columns at 33.3333% each. The two side columns work like the
       one in article 3 (they stretch to the height of the row, and
       space-evenly gives their photos the same gap above, between and
       below, centred); the middle column is img.5 on its own.
   Mobile: one column; img.1 at 70% centred and img.2 full width, then the
   photos of the side columns at 50% centred and img.5 full width, all at
   the usual 2rem. */
.spacca-a4-r1,
.spacca-a4-r2,
.spacca-a4-col {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a4-r1,
.spacca-a4-col {
	align-items: center;
}

.spacca-a4-r1 img,
.spacca-a4-r2 > img,
.spacca-a4-col img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

/* r1 mobile: img.1 at 70% centred, img.2 full width. */
.spacca-a4-r1 img:nth-child(1) {
	width: 70%;
}

/* Side columns mobile: photos at 50%, centred. */
.spacca-a4-col img {
	width: 50%;
}

@media (min-width: 768px) {
	.spacca-a4-r1 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		row-gap: 0;
	}

	.spacca-a4-r1 img:nth-child(1),
	.spacca-a4-r1 img:nth-child(2) {
		width: 30%;
	}

	.spacca-a4-r2 {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		row-gap: 0;
	}

	/* Both columns flush top and bottom, so the photo edges line up from one
	   column to the other. */
	.spacca-a4-col {
		width: 33.3333%;
		justify-content: space-between;
		row-gap: 0;
	}

	/* The photos of the side columns hug the outer edges of the section, which
	   opens the gap around img.5 without resizing any column. */
	.spacca-a4-col:first-child {
		align-items: flex-start;
	}

	.spacca-a4-col:last-child {
		align-items: flex-end;
	}

	.spacca-a4-col img {
		width: 60%;
	}

	.spacca-a4-r2 > img {
		width: 33.3333%;
	}
}

/* ===== Article 5 - Efrem & Massi: Centro Direzionale ==================
   The photos are written in reading order, which is the same on both views:
   img.2 comes before img.1 because it sits on the left on desktop and on
   top on mobile.
   r1:   img.2 60% left, img.1 20% right bottom-aligned.
   r2:   img.3 and img.4 at 40%, space-between.
   r3:   img.5 30% left, img.6 60% right bottom-aligned, space-between.
   solo: img.7 30%, left edge lined up with img.6 above it.
   Mobile: img.2 full width with img.1 below at 50% right; r2 both at 90%
   centred; r3 img.6 on top full width and img.5 below at 90%; img.7 at 70%. */
.spacca-a5-r1,
.spacca-a5-r2,
.spacca-a5-r3 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a5-r2,
.spacca-a5-r3 {
	align-items: center;
}

.spacca-a5-r1 img,
.spacca-a5-r2 img,
.spacca-a5-r3 img,
.spacca-a5-solo {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

/* r1: img.1 sits at 50% on mobile and 30% on desktop, but align-self keeps
   the same keyword on both: in a column it pushes the photo right, in a row
   it drops it to the bottom. Exactly what each view asks for. */
.spacca-a5-r1 img:nth-child(2) {
	width: 50%;
	align-self: flex-end;
}

/* r2 mobile: both photos at 90%, centred. */
.spacca-a5-r2 img {
	width: 90%;
}

/* r3 mobile: img.6 on top full width, img.5 below at 90%. */
.spacca-a5-r3 img:nth-child(1) {
	width: 90%;
}

.spacca-a5-r3 img:nth-child(2) {
	order: -1;
}

.spacca-a5-solo {
	width: 70%;
	align-self: center;
}

@media (min-width: 768px) {
	.spacca-a5-r1,
	.spacca-a5-r2,
	.spacca-a5-r3 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		row-gap: 0;
	}

	.spacca-a5-r1 img:nth-child(1) {
		width: 60%;
	}

	.spacca-a5-r1 img:nth-child(2) {
		width: 20%;
	}

	.spacca-a5-r2 img {
		width: 40%;
	}

	.spacca-a5-r3 img:nth-child(1) {
		width: 30%;
	}

	.spacca-a5-r3 img:nth-child(2) {
		width: 60%;
		align-self: flex-end;
		order: 0;
	}

	/* Left edge aligned with img.6 in the row above. That photo is 60% wide
	   and sits on the right, so it starts at 100% - 60% = 40%. The margin is
	   in percent like every other width here, so the two edges stay lined up
	   at any window size. If img.6 changes width, this margin follows. */
	.spacca-a5-solo {
		width: 30%;
		align-self: flex-start;
		margin-left: 40%;
	}
}