/* ==========================================================================
   TheCodeWork — Explore
   The listing at /explore. Loaded alongside blog.css, and the page carries
   both .tcwb and .tcwe, so the tokens, the shell, the search box, the pills,
   the pager and the reveal all come from the blog and only what is particular
   to a library of posters is written here.
   Sizing is in px on purpose: the theme sets html{font-size:15px} and 18px at
   md, which makes rem unreliable across breakpoints.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.tcwe {
	/* The posters are vertical stories, most of them 9:16. The frame is a little
	   squarer than that so a row of them is not a row of columns, and they are
	   fitted into it rather than cropped: the headline is drawn into the artwork,
	   so a crop that trims an edge takes the words with it. */
	--tcwe-poster: 5 / 8;
	--tcwe-card-r: 14px;
}

/* Every section carries the air under it, on the same terms as the blog. */
.tcwe-hero,
.tcwe-filters,
.tcwe-featured,
.tcwe-library {
	padding-bottom: var(--tcwb-section);
}

.tcwe-filters {
	padding-bottom: clamp(20px, 2.4vw, 32px);
}


/* ==========================================================================
   2. Hero
   ========================================================================== */

.tcwe-hero {
	padding-top: clamp(28px, 3.4vw, 52px);
}

.tcwe-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 48px);
	align-items: center;
}

@media (min-width: 980px) {
	.tcwe-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	}
}

.tcwe-hero__title {
	margin: 12px 0 0;
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.06;
	color: var(--tcwb-ink);
}

.tcwe-hero__lead {
	margin: 16px 0 0;
	max-width: 46ch;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.6;
	color: var(--tcwb-ink-2);
}

/* The compact band a filtered, searched or paged view carries instead. */
.tcwe-hero--compact {
	padding-bottom: clamp(18px, 2.2vw, 30px);
}

.tcwe-hero--compact .tcwe-hero__title {
	font-size: clamp(25px, 2.9vw, 35px);
}

.tcwe-hero--compact .tcwe-hero__lead {
	display: none;
}


/* The surface switch ------------------------------------------------------ */

/* Two pages, not two tabs: each half is a link to a listing that exists, which
   is why it is a nav and the one you are on is marked rather than disabled. */
.tcwe-switch {
	display: inline-flex;
	gap: 6px;
	margin-top: clamp(20px, 2.4vw, 30px);
	padding: 6px;
	background: var(--tcwb-surface);
	border: 1px solid var(--tcwb-line);
	border-radius: 15px;
	box-shadow: var(--tcwb-shadow-sm);
}

.tcwe-switch__opt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 18px;
	border-radius: 11px;
	color: var(--tcwb-ink-2);
	text-decoration: none;
	transition: background var(--tcwb-t) var(--tcwb-ease), color var(--tcwb-t) var(--tcwb-ease);
}

.tcwe-switch__opt:hover {
	background: var(--tcwb-blue-soft);
	color: var(--tcwb-ink);
}

.tcwe-switch__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tcwe-switch__note {
	font-size: 11.5px;
	color: var(--tcwb-ink-3);
}

.tcwe-switch__opt.is-on,
.tcwe-switch__opt.is-on:hover {
	background: var(--tcwb-blue);
	color: #fff;
}

.tcwe-switch__opt.is-on .tcwe-switch__note {
	color: rgba(255, 255, 255, 0.78);
}


/* The artwork ------------------------------------------------------------- */

/* The library standing in for a drawing of one: the newest three posters, on a
   survey line that runs from a drafting grid into the four words the writing
   keeps coming back to. Decorative, and hidden from assistive technology: each
   poster is a card with its own title further down the page. */
.tcwe-hero__art {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 24px);
	padding: 10px 0;
}

.tcwe-hero__dots {
	position: absolute;
	left: -6px;
	top: 22%;
	width: 68px;
	height: 62px;
	color: var(--tcwb-blue-light);
	background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
	background-size: 13px 13px;
	opacity: 0.65;
}

.tcwe-hero__wire {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--tcwb-blue-light) 18%, var(--tcwb-blue-light) 82%, transparent);
}

.tcwe-hero__posters {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
	padding-left: 56px;
}

.tcwe-hero__poster {
	display: block;
	flex: 0 1 auto;
	width: clamp(88px, 10.5vw, 142px);
	aspect-ratio: var(--tcwe-poster);
	overflow: hidden;
	border: 1px solid var(--tcwb-line);
	border-radius: 12px;
	background: var(--tcwb-surface);
	box-shadow: var(--tcwb-shadow);
	/* A rising step to the right, so the three read as a sequence rather than a row. */
	transform: translateY(calc((2 - var(--n, 0)) * 9px));
}

.tcwe-hero__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.tcwe-hero__words {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tcwb-ink-3);
	white-space: nowrap;
}

.tcwe-hero__words span:last-child {
	position: relative;
	color: var(--tcwb-blue);
}

.tcwe-hero__words span:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 4px;
	bottom: -5px;
	height: 2px;
	background: var(--tcwb-blue);
}

@media (max-width: 760px) {
	.tcwe-hero__dots,
	.tcwe-hero__words {
		display: none;
	}

	.tcwe-hero__posters {
		padding-left: 0;
		justify-content: center;
	}
}


/* ==========================================================================
   3. The filter bar: search, the pills, the sort
   ========================================================================== */

/* The search and the sort hold their ends of the bar and the pills take what is
   left, wrapping onto their own line before either control has to shrink. */
.tcwe-filters__bar .tcwb-search {
	flex: 1 1 260px;
	max-width: 380px;
}

.tcwe-filters__bar .tcwb-pills {
	flex: 1 1 auto;
	justify-content: center;
}

.tcwe-sort {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.tcwe-sort__select {
	height: 44px;
	padding: 0 38px 0 14px;
	border: 1px solid var(--tcwb-line);
	border-radius: var(--tcwb-r-sm);
	background-color: #fbfcfe;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236c7c99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tcwb-ink);
	appearance: none;
	cursor: pointer;
}

.tcwe-sort__select:focus {
	outline: none;
	border-color: var(--tcwb-blue-light);
	box-shadow: 0 0 0 3px rgba(70, 101, 155, 0.14);
}

.tcwe-sort__go {
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--tcwb-r-sm);
	background: var(--tcwb-blue);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

/* With scripting the form submits on change, so the button has nothing left to
   do. Without it, it is the only way to apply the sort. */
html.js .tcwe-sort__go {
	display: none;
}


/* ==========================================================================
   4. The poster card
   ========================================================================== */

.tcwe-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tcwb-surface);
	border: 1px solid var(--tcwb-line);
	border-radius: var(--tcwe-card-r);
	box-shadow: var(--tcwb-shadow-sm);
}

.tcwe-card__media {
	position: relative;
	aspect-ratio: var(--tcwe-poster);
	overflow: hidden;
	background: var(--tcwb-ice);
}

.tcwe-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tcwe-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 11px;
	border-radius: var(--tcwb-r-pill);
	background: var(--tcwb-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.tcwe-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 9px;
	padding: 14px 15px 13px;
}

.tcwe-card__topic {
	color: var(--tcwb-blue);
}

.tcwe-card__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.34;
	/* Three lines, because a row is as tall as its longest title and a handful of these run to
	   twenty words. The whole title is still in the markup, and the piece it opens is one click
	   away, so nothing is lost but the height. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tcwe-card__title a {
	color: var(--tcwb-ink);
	text-decoration: none;
}

.tcwe-card:hover .tcwe-card__title a {
	color: var(--tcwb-blue);
}

.tcwe-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: auto 0 0;
	padding-top: 11px;
	border-top: 1px solid var(--tcwb-line);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tcwb-ink-3);
}

.tcwe-card__arrow {
	flex: 0 0 auto;
	color: var(--tcwb-blue);
	transition: transform var(--tcwb-t) var(--tcwb-ease);
}

.tcwe-card:hover .tcwe-card__arrow {
	transform: translateX(3px);
}


/* ==========================================================================
   5. The featured strip and 6. the library grid
   ========================================================================== */

/* One grid for both, because they are the same cards: the strip is the newest
   five, the library is everything else. Five across is the poster's width at
   the site's measure; below that the row loses one column at a time rather
   than shrinking the posters into stamps. */
.tcwe-strip,
.tcwe-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tcwb-gap);
}

@media (min-width: 620px) {
	.tcwe-strip,
	.tcwe-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.tcwe-strip,
	.tcwe-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.tcwe-strip,
	.tcwe-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.tcwe-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
	margin-bottom: clamp(16px, 1.8vw, 24px);
}

.tcwe-head__lead,
.tcwe-head__count {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tcwb-ink-3);
}

.tcwe-head .tcwb-h2 {
	flex: 0 1 auto;
}

/* The strip's own heading and the library's are the same size, so the two
   sections read as one list in two movements rather than a page and a sequel. */
.tcwe-featured .tcwe-head__lead {
	flex: 1 1 240px;
	text-align: right;
}

@media (max-width: 700px) {
	.tcwe-featured .tcwe-head__lead {
		text-align: left;
	}
}