/* ==========================================================================
   Work Project detail - responsive
   --------------------------------------------------------------------------
   Loaded after work-detail.css so these media queries win at equal
   specificity.

   The desktop hero is a two-column split. Below the single-column breakpoint
   it becomes a stack with the image FIRST, because on a phone the photograph
   is what identifies the project and the reader should meet it immediately
   rather than scroll past a wall of metadata to reach it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet landscape and below
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.nsn-detail__hero {
		grid-template-columns: minmax(0, 48%) minmax(0, 52%);
	}

	.nsn-detail__panel-inner {
		max-width: 38ch;
	}

	.nsn-detail__meta {
		gap: var(--nsn-space-2);
	}
}

/* --------------------------------------------------------------------------
   Single column
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.nsn-detail {
		--nsn-rail-w: 0px;
	}

	/*
	 * The rail becomes a horizontal strip pinned under the header: a rotated
	 * title in a 54px gutter is unreadable on a phone and wastes the width.
	 */
	.nsn-rail {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: auto;
		flex-direction: row;
		align-items: center;
		gap: var(--nsn-space-2);
		padding: 0.75rem var(--nsn-gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(to top, var(--nsn-ink) 58%, rgba(15, 15, 14, 0));
	}

	.nsn-rail__vtitle {
		flex: 1;
		min-width: 0;
		writing-mode: horizontal-tb;
		font-size: 0.625rem;
		letter-spacing: 0.14em;
		transform: none;
	}

	.nsn-rail__info {
		writing-mode: horizontal-tb;
		padding: 0.6rem 0.9rem;
		border: 1px solid var(--nsn-bone-28);
	}

	/* Stack, image first. */
	.nsn-detail__hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.nsn-detail__feature {
		order: -1;

		/*
		 * 52svh is the height the picture asks for; the band's own cap is the
		 * height it can have.
		 *
		 * The section around it is min(62svh, 560px) tall and clips, so once a
		 * screen is tall enough for 52svh to pass 560px - about 1077px of
		 * viewport, which is an iPad held upright - the photograph was taller
		 * than the band containing it and the bottom was simply cut away: 54px
		 * at 820x1180, 18px at 834x1112. The cap is handed back here as a
		 * max-height, so the picture stops where the band stops. Every shorter
		 * screen is below the cap and keeps exactly the 52svh it already had.
		 */
		height: 52svh;
		max-height: calc(100% - var(--nsn-header-h));
	}

	.nsn-detail__panel {
		padding: var(--nsn-space-4) var(--nsn-gutter) calc(var(--nsn-space-4) + 4rem);
	}

	.nsn-detail__panel-inner {
		max-width: none;
	}

	.nsn-detail__gallery {
		padding: var(--nsn-space-4) var(--nsn-gutter) calc(var(--nsn-space-4) + 4rem);
	}

	/* Two-up at most, so images stay large enough to read. */
	.nsn-grid__item--4,
	.nsn-grid__item--5,
	.nsn-grid__item--7 {
		grid-column: span 6;
	}

	.nsn-grid__item--6,
	.nsn-grid__item--12 {
		grid-column: span 12;
	}

	.nsn-pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.nsn-pair__panel + .nsn-pair__panel {
		border-left: 0;
		border-top: 1px solid var(--nsn-rule);
	}

	.nsn-pair__panel {
		min-height: clamp(180px, 26svh, 260px);
		padding: var(--nsn-space-3) var(--nsn-gutter);
	}

	/*
	 * No hover on touch: bring the image up to its hovered state permanently
	 * so the panels do not look inert.
	 */
	.nsn-pair__img {
		opacity: 0.52;
	}
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.nsn-detail__feature {
		height: 44svh;
	}

	.nsn-detail__title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.nsn-detail__meta {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column: two-up thumbnails on a 390px screen are too small to read. */
	.nsn-grid__item {
		grid-column: span 12 !important;
	}

	.nsn-pair__title {
		font-size: clamp(1.35rem, 7vw, 1.9rem);
	}
}

/* --------------------------------------------------------------------------
   Coarse pointers: the panels can never be hovered, so show them lifted.
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.nsn-pair__img {
		opacity: 0.52;
	}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
	.nsn-rail,
	.nsn-pair {
		display: none !important;
	}

	.nsn-detail__hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.nsn-detail__panel {
		opacity: 1 !important;
		transform: none !important;
	}
}