/**
 * Frontend + editor preview styles for the Firecrown Current Issue block.
 *
 * Selectors are intentionally specific (and use !important on layout-critical
 * declarations) because the block frequently lives inside widget / sidebar
 * containers whose themes apply aggressive `ul`, `li`, and `img` rules that
 * would otherwise clobber the layout.
 */

.firecrown-current-issue {
	font-family: inherit;
	margin: 0 0 1.5em 0;
	max-width: 100%;
	box-sizing: border-box;
}

.firecrown-current-issue *,
.firecrown-current-issue *::before,
.firecrown-current-issue *::after {
	box-sizing: border-box;
}

/* Section header bar (the red "CURRENT ISSUE" strip in the example). */
.firecrown-current-issue .firecrown-current-issue__header,
.firecrown-current-issue__header {
	display: block;
	padding: 10px 14px;
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 12px 0;
}

/* Body wrapper: image + links. */
.firecrown-current-issue .firecrown-current-issue__body {
	display: flex !important;
	gap: 16px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

.firecrown-current-issue.firecrown-current-issue--stacked .firecrown-current-issue__body {
	flex-direction: column !important;
	align-items: stretch;
}

/* Image wrapper. */
.firecrown-current-issue .firecrown-current-issue__image {
	flex: 0 0 auto;
	max-width: 50%;
	margin: 0;
	padding: 0;
	min-width: 80px;
}

.firecrown-current-issue.firecrown-current-issue--stacked .firecrown-current-issue__image {
	max-width: 100%;
}

.firecrown-current-issue .firecrown-current-issue__image a {
	display: block;
}

/* Image itself — defeat theme-level `img { width: 0 }`, `display:none`, etc.
 * --fci-image-max-height is set per-instance on the .firecrown-current-issue__image
 * wrapper. Tall covers scale down proportionally to fit the cap. */
.firecrown-current-issue .firecrown-current-issue__image img {
	display: block !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	max-height: var( --fci-image-max-height, 200px ) !important;
	object-fit: contain;
	object-position: center top;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
}

/* Links list — kill theme bullets, indentation, background bullets, etc. */
.firecrown-current-issue ul.firecrown-current-issue__links,
.firecrown-current-issue .firecrown-current-issue__links {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 auto;
}

.firecrown-current-issue .firecrown-current-issue__links li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.95em;
	line-height: 1.4;
}

.firecrown-current-issue .firecrown-current-issue__links li:last-child {
	margin-bottom: 0 !important;
}

/* Defeat themes that inject ::before / ::after pseudo bullets on list items. */
.firecrown-current-issue .firecrown-current-issue__links li::before,
.firecrown-current-issue .firecrown-current-issue__links li::after {
	content: none !important;
	display: none !important;
}

.firecrown-current-issue .firecrown-current-issue__links a {
	text-decoration: none;
	color: inherit;
}

.firecrown-current-issue .firecrown-current-issue__links a:hover,
.firecrown-current-issue .firecrown-current-issue__links a:focus {
	text-decoration: underline;
}

/* Mobile: collapse to stacked even when "side-by-side" is chosen. */
@media (max-width: 480px) {
	.firecrown-current-issue .firecrown-current-issue__body {
		flex-direction: column !important;
		align-items: stretch;
	}
	.firecrown-current-issue .firecrown-current-issue__image {
		max-width: 100%;
	}
}

/* Inside narrow widget areas, prefer stacked layout regardless of setting. */
.widget .firecrown-current-issue .firecrown-current-issue__body,
.widget_block .firecrown-current-issue .firecrown-current-issue__body {
	flex-wrap: wrap;
}
.widget .firecrown-current-issue .firecrown-current-issue__image,
.widget_block .firecrown-current-issue .firecrown-current-issue__image {
	max-width: 100%;
	flex: 1 1 100%;
}
.widget .firecrown-current-issue .firecrown-current-issue__links,
.widget_block .firecrown-current-issue .firecrown-current-issue__links {
	flex: 1 1 100%;
}