/* topsongs-skeleton.css
   Minimal, generic block vocabulary for manually reshaping old
   features/topsongsof*.html pages by hand. Five pieces:

   .section  -- standalone prose, no album art (intro paragraphs,
                "Tracks #X-Y can be heard on Podcast #NN" interstitials,
                outro text). Just text, full width.

   .entry    -- wraps one song's .release + .blurb together, so the
                float-wrap math applies per-entry, not globally.
   .release  -- the bold "Artist - Song - Label" header line.
   .blurb    -- the descriptive paragraph explaining the pick.
   .album    -- the album art image. Deliberately a STATIC pixel width,
                not width:100%/max-width -- confirmed earlier tonight
                that max-width on a floated element corrupts how
                sibling content calculates space to avoid it (the
                #rightcol bug). A static width never needed to shrink
                below itself at any real screen width anyway.

   .divider  -- the separator between entries. Unchanged from the
                original featurestyle.css concept.

   Loaded after header.css.
*/

body {
	background-image: url("/images/wallsconce.webp");
	background-image: image-set(
		url("/images/wallsconce.webp") type("image/webp"),
		url("/images/wallsconce.jpg") type("image/jpeg")
	);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	background-color: black;
}

main {
	width: 100%;
	max-width: 1400px;
	box-sizing: border-box;
}

.feature-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	box-sizing: border-box;
}

.feature-content {
	flex: 1;
	min-width: 300px;
	max-width: 800px;
	box-sizing: border-box;
}

.feature-media {
	width: 100%;
	max-width: 560px;
	box-sizing: border-box;
}

/* Column B never needs an `order` property or sticky positioning
   now -- .feature-content comes FIRST in the HTML source (writing
   is the point, embeds are a bonus), so plain default flexbox
   behavior already puts it on the left/top and media on the
   right/below, in both the side-by-side and stacked cases, with no
   breakpoint-dependent override needed at all. (Previously this
   used `order` to force media first on mobile for YouTube
   specifically, but the combined video+blurb+keywords height made
   that column too tall to justify pushing above the writing, so
   this got simpler along with getting removed.) No sticky either,
   for the same reason it was already off for Spotify: nobody needs
   an embed pinned in view while reading, and this column is tall
   enough now (iframe + blurb + keywords) that pinning it would eat
   real reading space the whole way down a long list.

   Once there's no longer room for column A (800) and this column's
   full 560px side by side, step down to 300 in one jump rather than
   shrinking gradually -- frees up room for A to hold its own 800px
   for a while longer before it needs to shrink itself. Breakpoint
   measured directly against real site content/margins (1396px).
   Scoped to exclude Spotify and no-embed cases below, since those
   already sit at 300 as their own natural/preferred size and have
   nothing to step down from. */
@media (max-width: 1396px) {
	.feature-media:has(iframe):not(:has(iframe[src*="spotify.com"])) {
		max-width: 300px;
	}
}

/* Once stacked (own row, no longer sharing space with column A),
   spring back to the true preferred size (560) rather than staying
   capped at 300 -- there's nothing left to make room for at that
   point. Breakpoint matches the actual wrap point (635px) exactly,
   same measurement technique as everything else in this file. */
@media (max-width: 635px) {
	.feature-media:has(iframe):not(:has(iframe[src*="spotify.com"])) {
		max-width: 560px;
	}
}

/* Handles any embedded video (YouTube etc) dropped into .feature-media,
   without needing an inline style on the iframe itself -- so pasting
   a fresh embed snippet (e.g. straight from YouTube's own "Share"
   button, which won't carry any of our styling) still just works.
   16:9 is standard for virtually all video embeds, so this doesn't
   need to be tied to any one video's specific width/height. */
.feature-media iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Cover-collage image for topalbums years (2020+), sitting alongside
   keywords in the same column. Sized here rather than as an inline
   style on the <img>, same reasoning as the iframe rule above --
   one place to change if the size needs to change again later,
   instead of hunting through every year's HTML. */
.feature-media img {
	width: 300px;
	height: auto;
}

/* Spotify's embed player is a genuinely different shape than YouTube's
   16:9 (its own natural size is 300x380, much taller/narrower) --
   matched by src rather than a manual class, so this stays correct
   automatically even if a fresh embed snippet gets pasted straight
   from Spotify's own share/embed UI in the future, same reasoning as
   why iframe sizing itself lives here instead of as an inline style. */
.feature-media iframe[src*="spotify.com"] {
	aspect-ratio: 300 / 380;
}

/* Spotify's embed is much narrower than YouTube's (native 300px vs
   560px), so letting it grow to the same 560px cap as YouTube
   massively upscales it beyond its real size -- confirmed this
   actually happened (rendered near 2x native size on a wide screen).
   Matched by :has() rather than a manual class, same reasoning as
   the aspect-ratio rule above. No spring-back tier needed here --
   300 already IS this column's true preferred size, nothing to
   spring back to. */
.feature-media:has(iframe[src*="spotify.com"]) {
	max-width: 300px;
}

.section {
	background-color: black;
	color: white;
	font-family: verdana, Geneva, Arial;
	font-size: 12px;
	line-height: 140%;
	box-sizing: border-box;
	border-bottom: 1px dashed darkorange;
	padding-bottom: 5px;
	margin-top: 10px;
}

.section p,
.entry p {
	margin: 0;
	padding: 8px;
}

.section a:link,
.entry a:link {
	color: white;
	text-decoration: none;
}

.section a:visited,
.entry a:visited {
	color: white;
	text-decoration: none;
}

.section a:hover,
.entry a:hover {
	color: darkorange;
	text-decoration: underline;
}

.entry {
	background-color: black;
	color: white;
	box-sizing: border-box;
	border-bottom: 1px dashed darkorange;
	padding-bottom: 5px;
}

.entry::after {
	/* clearfix -- .album floats, .entry needs to actually contain it
	   for the divider below to land in the right place */
	content: "";
	display: table;
	clear: both;
}

/* For bare listing-style years (e.g. 2013) with no blurb text at
   all -- just a release line plus an optional link out to YouTube/
   SoundCloud/etc, shown as a small icon. Scoped to entries that
   actually have .entry-link, so this doesn't touch the layout for
   any other year's .album/.blurb-based entries at all. */
.entry:has(.entry-link) {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.entry-link {
	display: inline-block;
}

.entry-link img {
	vertical-align: middle;
}

.release {
	font-weight: bold;
	margin: 0px;
	padding: 8px 8px 0 8px;
	color: darkorange;
}

/* Bare-list years (e.g. topalbumsof2010/2011, topsongsof2013) have no
   blurb at all -- .release is the whole entry, not a headline
   introducing something below it. The bold-orange headline treatment
   makes sense when there's body text to contrast against; with 25-50
   of these in a row and nothing to contrast against, it reads as
   uniformly loud instead. Plain text, matching .section body copy,
   reads better here -- no need to invent a third visual style when
   "looks like body text" already does the job. Scoped via :not(:has())
   so entries that DO have a blurb are completely unaffected. */
.entry:not(:has(.blurb)) .release {
	font-weight: normal;
	color: white;
	padding-top: 0;
}

.entry:not(:has(.blurb)) {
	border-bottom: none;
	padding-bottom: 0px;
}

/* First entry after a section header gets some breathing room,
   since everything else in the list sits flush against its
   neighbor. 13px confirmed as the smallest value that actually
   reads as a visible gap -- 8px measured correctly in the CSS but
   was too subtle to perceive. */
.section + .entry:not(:has(.blurb)) .release {
	padding-top: 8px;
}

.blurb p:first-letter {
	color: white;
	font-size: 100%;
}

.album {
	width: 150px;
	float: right;
	margin: 0 0 5px 10px;
	background-color: gray;
	border: 2px dotted white;
	box-sizing: border-box;
}

.album img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: block;
}

.divider {
	background-color: black;
	border-bottom: 1px dashed darkorange;
	padding-bottom: 5px;
	height: 4px;
	clear: both;
}

/* Keywords, added via /js/shows.js's addKeywords() -- same visual
   pattern already used on the podcast play page, for consistency. */
#share {
	padding: 3px 0px 3px 0px;
	margin: 10px 0px 10px 0px;
	background-color: grey;
	border-width: 2px;
	border-style: none dotted dotted dotted;
	border-color: white;
	font-style: italic;
	font-size: x-small;
	color: lightgrey;
	font-family: verdana;
	text-align: center;
}

#keywords a {
	color: lightgrey;
	text-decoration: none;
}

#keywords a:visited {
	color: lightgrey;
}

#keywords a:hover {
	color: darkorange;
}

/* Third case for .feature-media: no embed at all (years before we
   had video/Spotify), just the #share/#keywords box. Same 300px
   width as Spotify -- it's just as small/unimportant, nothing to
   spring back to once stacked either. No order/sticky rules needed
   here, same reasoning as the rest of this file now that text comes
   first in source order. */
.feature-media:not(:has(iframe)) {
	max-width: 300px;
}