/*
 * CB Sidebar Style
 *
 * Two blocks in the With Love, Cata sidebar, restyled over markup that already
 * exists. Every selector here repeats the block's own class so it outranks
 * withlovecata.css on specificity rather than on !important.
 */

/* =========================================================================
   1. THE PLAYLIST, AS "THE RECORD"
   =========================================================================

   The whole block is the cover art. Words sit on it, the facade stays the
   click target, and the round mark in the corner says what pressing it does.

   Scoped to :not(:has(iframe)) throughout: the facade replaces itself with a
   Spotify iframe when pressed, and at that moment every rule below stops
   matching and the block goes back to laying out normally. A browser with no
   :has() support drops these rules entirely and shows the old design, which
   is the correct way for this to fail.
   ------------------------------------------------------------------------ */

/*
 * Two classes on purpose. The blog sets padding with
 * `.wlc-section .wlc-side-jam--black`, which at (0,2,0) beat a single-class
 * rule here and left the words inset 16px while the art still bled to the
 * edges. `.wlc-side-block.wlc-side-jam` is (0,2,1) and wins.
 */
.wlc-side-block.wlc-side-jam:not(:has(iframe)) {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1 / 1;
	min-height: 280px;
	padding: 0;
	overflow: hidden;
	background: #0A0A0A;
}

/* The art is positioned against the section, not the facade, so it fills the
   block while the facade stays in flow at the bottom with the words. */
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-cover {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
	/*
	 * !important is not laziness here. The blog carries
	 * `.wlc-section * { transition: none !important }` - every transition
	 * inside it is switched off at the root. Without matching that weight,
	 * nothing below eases; it snaps.
	 */
	transition: filter .45s ease, transform .6s cubic-bezier(.2, .7, .3, 1) !important;
}

/* Without this the white type dies on the pale half of her cover. */
.wlc-side-jam:not(:has(iframe))::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 62%;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(5, 5, 5, .94) 18%,
		rgba(5, 5, 5, .55) 55%,
		rgba(5, 5, 5, 0)
	);
}

/* Decorative: pointer-events are off so the click lands on the facade
   underneath, which is what actually loads Spotify. */
.wlc-side-jam:not(:has(iframe))::after {
	content: "\25B6";
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 6;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	background: rgba(10, 10, 10, .62);
	color: #fff;
	font-size: 13px;
	line-height: 38px;
	text-align: center;
	text-indent: 3px;
	pointer-events: none;
	transition: background-color .3s ease, border-color .3s ease !important;
}

/* Her heading becomes the kicker. */
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-title {
	order: 2;
	position: relative;
	z-index: 2;
	margin: 0 18px 5px;
	padding: 0;
	color: rgba(255, 255, 255, .72);
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 9.5px;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 14px;
	text-transform: uppercase;
}

/* Stays static on purpose - its ::after below needs to resolve against the
   section so the hit area covers the whole picture, not just this strip. */
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-facade {
	order: 3;
	position: static;
	display: block;
	margin: 0 18px 17px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* The hit area. A child of the facade, so a click on it bubbles to the
   facade's own listener and the embed loads. */
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-facade::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-name {
	position: relative;
	z-index: 2;
	margin: 0 0 11px;
	padding: 0;
	color: #fff;
	font-family: "Playfair Display", var(--wlc-font-display, Georgia, serif);
	font-size: 21px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 26px;
	text-transform: none;
}

/*
 * Above the hit area, so it keeps working as a real link for the keyboard
 * and for anyone who opens it in a new tab.
 *
 * The :visited twin is not decoration. The blog's stylesheet colours visited
 * links with --wlc-ink, and once Cata (or any reader) has opened the playlist
 * once, that rule wins and the link turns near-black on a near-black photo.
 * Selectors cannot see :visited from script - el.matches(':visited') is
 * always false for privacy - so this does not show up in any audit. It only
 * shows up on the page, to the people who have been there before.
 */
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-play,
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-play:visited {
	position: relative;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	background: none;
	color: #fff;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 10.5px;
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 14px;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-bottom-color .25s ease !important;
}

.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-play::before {
	content: "\25B6";
	font-size: 12px;
	line-height: 1;
}

/*
 * The blog fills this link white on hover:
 * `.wlc-section .wlc-side-jam--black .wlc-side-jam-play:hover`, at (0,3,0),
 * sets background #fff and dark text. On a black bar that was fine. On a
 * photograph it is a white box landing on her face, so it has to be undone
 * explicitly - a rule that only sets border-bottom-color leaves the
 * background alone and the box still appears.
 *
 * What replaces it is movement, not a colour: the triangle steps forward and
 * the rule under the words goes to full white.
 */
/*
 * Five class components on purpose. The blog's own hover is
 * `.wlc-section .wlc-side-jam--black .wlc-side-jam-play:hover` - four of
 * them, at (0,4,0) - and it sets `background: #fff`. On the old black bar
 * that read fine; on a photograph it is a white slab landing on her face.
 *
 * Undoing someone else's hover means naming every property they set. 1.0.0
 * set only border-bottom-color here, left their background untouched, and
 * the white box appeared exactly as before.
 */
.wlc-side-block.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-facade .wlc-side-jam-play:hover,
.wlc-side-block.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-facade .wlc-side-jam-play:focus-visible {
	background: none;
	color: #fff;
	border-bottom-color: #fff;
}

/*
 * The whole picture is the button, so the whole picture answers the cursor:
 * the artwork lifts in brightness and the mark in the corner fills and goes
 * to full white. Slow enough to read as intent rather than a flash.
 *
 * The artwork both brightens and eases up a little behind its own edges -
 * .wlc-side-jam has overflow:hidden, so the scale never spills.
 *
 * An earlier version shipped brightness alone, on the grounds that a
 * transform "did not take" when measured. That was wrong: Chrome freezes
 * transitions in a background tab, so every transitioned property sat at its
 * start value and the transform read as identity. The rule was always fine.
 * To measure a hover state from automation, set transition:none first.
 */
.wlc-side-block.wlc-side-jam:not(:has(iframe)):hover .wlc-side-jam-cover,
.wlc-side-block.wlc-side-jam:not(:has(iframe)):focus-within .wlc-side-jam-cover {
	filter: brightness(1.12);
	transform: scale(1.04);
}

.wlc-side-block.wlc-side-jam:not(:has(iframe)):hover::after,
.wlc-side-block.wlc-side-jam:not(:has(iframe)):focus-within::after {
	border-color: #fff;
	background: rgba(10, 10, 10, .82);
}

/* Implementation housekeeping, shown to readers. It goes. */
.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-note {
	display: none;
}

/* =========================================================================
   2. "WHO THE F*CK IS CATA BALZANO?!" - READ MORE ON THE PHOTO
   =========================================================================

   The handwriting lifts, the link takes the space underneath it on the same
   centre axis, and the white strip under the photo disappears. The frame
   already carries a bottom gradient, so no new scrim is added here.
   ------------------------------------------------------------------------ */

.wlc-side-whoami {
	position: relative;
}

.wlc-side-whoami .wlc-side-whoami-title {
	bottom: 80px;
}

.wlc-side-whoami .wlc-side-whoami-foot {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	z-index: 3;
	margin: 0;
	padding: 0;
	line-height: 0;
	text-align: center;
}

/* :visited for the same reason as the play link above - without it this goes
   dark the moment someone has read the About page once. */
.wlc-side-whoami .wlc-side-whoami-more,
.wlc-side-whoami .wlc-side-whoami-more:visited {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 0;
	background: none;
	color: #fff;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 10.5px;
	font-weight: 300;
	letter-spacing: 2.2px;
	line-height: 14px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}

/*
 * Four classes, because the blog's own hover - `.wlc-section
 * .wlc-side-whoami-more:hover` - fills this white too, and losing that
 * fight would put a white slab on her face. Hover lifts the outline to
 * full white over the faintest wash instead.
 */
/*
 * A drawn button is expected to fill, and Cata asked for it to. The outline
 * inverts: white ground, the blog's own near-black for the words. Note this
 * is the opposite call from the play link a few rules up - that one is bare
 * type on a photograph, where a fill reads as a slab landing on the picture;
 * this one is a button, where a fill reads as a button being pressed.
 */
.wlc-side-whoami .wlc-side-whoami-foot .wlc-side-whoami-more:hover,
.wlc-side-whoami .wlc-side-whoami-foot .wlc-side-whoami-more:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #0A0A0A;
}

/* =========================================================================
   3. FOR ANYONE WHO HAS ASKED FOR LESS MOVEMENT
   ========================================================================= */

@media ( prefers-reduced-motion: reduce ) {

	.wlc-side-block.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-cover,
	.wlc-side-block.wlc-side-jam:not(:has(iframe))::after,
	.wlc-side-block.wlc-side-jam:not(:has(iframe)) .wlc-side-jam-facade .wlc-side-jam-play,
	.wlc-side-whoami .wlc-side-whoami-more {
		transition: none !important;
	}

	.wlc-side-block.wlc-side-jam:not(:has(iframe)):hover .wlc-side-jam-cover,
	.wlc-side-block.wlc-side-jam:not(:has(iframe)):focus-within .wlc-side-jam-cover {
		filter: none;
		transform: none;
	}
}

/* =========================================================================
   4. "YOU MIGHT ALSO LIKE" - WORDS ON THE PICTURE
   =========================================================================

   The old cards sat a white box ON the photograph, and because every title is
   a different length every box was a different height, so the row stepped up
   and down. This puts the words inside the frame instead: a flat wash over
   the whole picture, title centred on it, date beneath.

   Cata's pick, against my advice - I argued the wash flattens three different
   photographs into three grey rectangles. Her site, her call, and the hover
   below is the compromise: the wash lifts when the cursor is on a card, so
   the photograph comes back the moment anyone looks at it properly.
   ------------------------------------------------------------------------ */

/* The heading. The theme already centres it between two hairlines; this says
   so out loud so a future rule on the h2 cannot quietly pull it left. */
.wlc-related .wlc-related-heading,
.wlc-related .wlc-related-heading span {
	text-align: center;
}

.wlc-related .wlc-related-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-related .wlc-related-item {
	margin: 0;
	padding: 0;
}

.wlc-related .wlc-related-item > a {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
}

.wlc-related .wlc-related-figure {
	margin: 0;
	overflow: hidden;
}

.wlc-related .wlc-related-img {
	display: block;
	width: 100%;
	max-width: none;
	height: 238px;
	margin: 0;
	border: 0;
	object-fit: cover;
}

/* The wash. Its own layer so the hover can lift it without touching the
   image or the type. */
.wlc-related .wlc-related-item > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(6, 6, 6, .44);
	pointer-events: none;
	transition: background-color .3s ease !important;
}

.wlc-related .wlc-related-item > a:hover::after,
.wlc-related .wlc-related-item > a:focus-visible::after {
	background: rgba(6, 6, 6, .26);
}

.wlc-related .wlc-related-item > a .wlc-related-card {
	position: absolute;
	inset: 0;
	z-index: 2;

	/* THIS is what was pushing every title left of centre.
	   The theme sets `width: 88%; margin: -34px auto 0` on the card, which
	   centred the old white box under the photograph. Absolute positioning
	   with a specified width and both left and right at 0 is over-constrained,
	   so the browser keeps the width, honours `left` and drops `right` - the
	   card ended up 196px wide in a 223px tile and flush with its LEFT edge.
	   The words were centred, in a box sitting 27px off to one side. */
	width: auto;
	max-width: none;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}

.wlc-related .wlc-related-item > a .wlc-related-title {
	display: block;
	margin: 0;
	color: #fff;
	font-family: "Playfair Display", var(--wlc-font-display, Georgia, serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
}

.wlc-related .wlc-related-item > a .wlc-related-date {
	display: block;
	margin: 11px 0 0;
	color: rgba(255, 255, 255, .78);
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 1.6px;
	line-height: 14px;
	text-transform: uppercase;
}

/* --- the row leaning left, and what it really was ------------------------

   Measured on I Am So Back at 1281px: heading text 276px of air on each side,
   each title 16px of card padding on each side, the three tiles 223px apiece
   inside a 706px strip that starts and ends flush with its column. Nothing is
   off-centre on a desktop.

   What leans is the ROW, between 701px and 900px. The block always fetches
   four stories. The theme hides the fourth above 900px and drops to two
   columns below 700px, so a desktop gets one row of three and a phone gets two
   rows of two - but in the 200px between those two rules, nothing hides the
   fourth and nothing drops the count, so it is three across with a single tile
   stranded beneath them, hard against the left edge. Under the old white cards
   that orphan was quiet. Under a full-bleed photograph it is a third of a row
   of weight sitting on the left with nothing opposite it.

   Below 700px it was my own doing. `.wlc-related .wlc-related-items` and the
   theme's `.wlc-section .wlc-related-items` are both (0,2,0); this file loads
   second, so my repeat(3, 1fr) was beating the theme's two-column phone rule
   as well - three 101px slivers under a 238px-tall photograph at 420px.

   Two columns from 900px down fixes both: four tiles become two rows of two,
   which is the shape the theme was always fetching four for. One column on a
   narrow phone, where even half the screen is too little for a title. */

@media (max-width: 900px) {

	.wlc-related .wlc-related-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.wlc-related .wlc-related-img {
		height: 200px;
	}
}

@media (max-width: 520px) {

	.wlc-related .wlc-related-items {
		grid-template-columns: minmax(0, 1fr);
	}

	.wlc-related .wlc-related-img {
		height: 210px;
	}
}

/* =========================================================================
   5. THE STANDFIRST THAT WAS BEING SAT ON
   =========================================================================

   `.wlc-post-main` carries `margin-top: -88px` and `position: relative`, which
   pulls the body column up over the tail of the opener and paints it on top.
   Measured on Cruisin' Through Little Venice: the intro's three lines run to
   408px down the page and the body's first paragraph starts at 373, so the
   last two lines of her standfirst were underneath the article text. It read
   as a sentence that had been cut off mid-clause.

   Of the 15 letters on the blog, exactly one has a standfirst, so this rule
   can only ever touch that post. 56px clears the 35px overlap with room left.
   ------------------------------------------------------------------------ */

.wlc-opener .wlc-post-intro {
	margin-bottom: 56px;
}

/* =========================================================================
   6. THE BANNER HEADLINE PHOTO THAT HUNG OFF TO THE LEFT
   =========================================================================

   On the banner opener the blog deliberately bleeds the feature image wider
   than the text column:

       @media (min-width: 901px) {
         .wlc-section.wlc-layout-banner .wlc-feat {
           margin-left: calc(-1 * var(--wlc-col-pad));
           width: calc(100% + var(--wlc-side-w) + (2 * var(--wlc-col-pad)));
           max-width: none;
         }
       }

   That works only if the image is big enough to fill the bleed. The theme
   also writes an inline `max-width:<natural width>px` on the figure so a
   small image is never upscaled - and an inline style beats `max-width: none`.
   So on My Perfect Getaway To The Southern Coast Of Italy, whose image is
   1000px wide, the box got clamped to 1000px while keeping the -27.2px left
   margin. Measured: 27px of overhang on the left, 113px of air on the right.
   140px of skew, which is exactly what it looked like.

   A capped figure cannot bleed, so it is treated as an ordinary centred one.
   `width: auto` lets it fill the column up to its own cap and the auto margins
   centre what is left. Scoped to figures that actually carry the inline cap,
   so a banner image large enough to bleed properly is left alone.

   All 26 letters on the blog were measured at 1281px: every other one is dead
   centre (skew 0), and this is the only post using the banner opener at all.
   ------------------------------------------------------------------------ */

@media ( min-width: 901px ) {

	.wlc-section.wlc-layout-banner .wlc-feat[style*="max-width"] {
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}