/* newsitem.css
   News item component: year-end feature lists (Favorite Shows,
   Favorite Local Releases, Top Songs, Top Albums), singles
   announcements, and longer-form features (interviews, first
   listens) all reuse this same .item structure. Distinct from
   accountContainer (podcasts) and .ticket (Permanent Record) on
   purpose -- these are "news bulletins," not shows, so the shape is
   deliberately different: no scalloping, no clip-path, no fixed
   height. Same dark/orange palette as the rest of the site for
   cohesion, different silhouette so it reads as its own thing.

   Two image layouts, chosen by adding a modifier class alongside
   .item on the outer div:

     <div class="item thumb">   -- floated square image, text wraps
     <div class="item hero">    -- full-width image up top, text below

   Pick whichever fits the content; a hero-style item with an embedded
   embed (SoundCloud, etc.) is expected to just run long -- nothing
   here caps height or clips content.
*/

.item {
	max-width: 480px;
	margin: 10px 0px 0px 20px; /* matches .ticket's left margin for column alignment */
	background: #1c1c1a;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	font-family: Verdana, Geneva, Arial, sans-serif;
	color: #e8e8e6;
}

/* The banner. Markup stays <span class="headline">, but it's styled as
   a full-width block so it reads as a banner across the top of the
   card, not an inline badge. */
.item .headline {
	display: block;
	background: darkorange;
	color: #1c1c1a;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: Verdana, Geneva, Arial, sans-serif;
}

.item .item-body {
	padding: 16px 18px;
}

/* Thumb layout: square image floats left, text wraps around it */
.item.thumb .item-body {
	display: flex;
	gap: 14px;
}

.item.thumb .thumb-image {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

/* Hero layout: full-width image up top, text flows below */
.item.hero .hero-image {
	display: block;
	width: 100%;
	height: auto;
}

.item p {
	margin: 0 0 10px 0;
	font-size: 13px;
	line-height: 1.55;
}

.item p:last-child {
	margin-bottom: 0;
}

.item a:link,
.item a:visited {
	color: darkorange;
	font-weight: bold;
	text-decoration: none;
}

.item a:hover {
	text-decoration: underline;
}

.item .keywords {
	padding: 0 18px 14px;
	font-size: 10px;
	color: #9a9a97;
	font-style: italic;
}

.item .keywords a:link,
.item .keywords a:visited {
	color: #9a9a97;
	font-weight: normal;
}

.item .keywords a:hover {
	color: darkorange;
}