/**
 * [astro-banner] — independent of blocks/month-view/style.css and the
 * [astro-moon-calendar] shortcode's inline styles; every rule here is
 * scoped under .amc-banner so it can never leak into (or be leaked into
 * by) the calendar's own CSS.
 *
 * Ported from TWO Figma-generated styled-components specs — a mobile one
 * (base rules below) and a separate, deliberately different desktop one
 * (the @media (min-width: 1024px) block at the end) — but NOT either
 * one's fixed frame width (343px mobile, 1162px desktop; the card here is
 * always width:100% of its container) or its position:absolute layout
 * throughout: only the single moon-phase image keeps each spec's own
 * relative/absolute pairing, since that's one image absolutely filling
 * one exactly-sized box — not a layout mechanism, just how you position
 * one image against a fixed frame.
 *
 * Both breakpoints render the EXACT SAME markup (templates/banner.php) —
 * the desktop block only ever changes layout direction, sizing, and
 * (for the KPI rows) visual order via `order`, never structure. 1024px is
 * this component's OWN breakpoint, by explicit instruction — it does NOT
 * match blocks/month-view/style.css's 1100px "true desktop" breakpoint;
 * the two components deliberately draw the mobile/desktop line at
 * different widths, so don't "fix" this back to 1100px for consistency
 * without checking first.
 *
 * A third, explicit variant: `[astro-banner layout="aside"]` (see
 * class-banner-shortcode.php and templates/banner.php) adds a
 * `.amc-banner--aside` modifier class for placements inside a narrow
 * aside/sidebar column on an otherwise-wide desktop page — a case the
 * `@media (min-width: 1024px)` block below can't tell apart from a real
 * wide layout on its own, since it reads viewport width, not the width of
 * the banner's actual container. Every selector in that block is scoped
 * `:not(.amc-banner--aside)` so an aside instance keeps the mobile/base
 * (stacked, compact) rules above regardless of viewport width, while
 * everything else (no `layout` attribute) is unaffected.
 */

.amc-banner {
	--amc-banner-bg: #ffffff;
	--amc-banner-eyebrow: #707580;
	--amc-banner-heading: #0b1f3a;
	--amc-banner-label: #707580;
	--amc-banner-value: #1c1c21;
	--amc-banner-divider: #d1d4d9;
	--amc-banner-skeleton: #eceef1;
	--amc-banner-skeleton-shine: #f7f8fa;
	font-family: 'Inter', system-ui, sans-serif;
	width: 100%;
	box-sizing: border-box;
	background: var(--amc-banner-bg);
	border-radius: 20px;
	padding: 12px 20px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.amc-banner * {
	box-sizing: border-box;
}

/* The one deliberately fixed-size, position:absolute element in this file — a single image
   filling an exactly-sized frame, not a layout mechanism (see the file docblock above). */
.amc-banner-phase-frame {
	width: 160px;
	height: 161.75px;
	padding: 7px;
	background: var(--amc-banner-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.amc-banner-phase-frame-inner {
	width: 146px;
	height: 146px;
	position: relative;
}

.amc-banner-phase-image {
	position: absolute;
	inset: 0;
	width: 146px;
	height: 146px;
	object-fit: cover;
}

.amc-banner-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.amc-banner-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.amc-banner-title-group {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

.amc-banner-date {
	align-self: stretch;
	margin: 0;
	opacity: 0.8;
}

.amc-banner-date .amc-banner-value {
	color: var(--amc-banner-eyebrow);
	font-size: 10px;
	font-weight: 700;
	line-height: 10px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.amc-banner-phase-name {
	align-self: stretch;
	margin: 0;
}

.amc-banner-phase-name .amc-banner-value {
	color: var(--amc-banner-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
}

.amc-banner-kpi-list {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.amc-banner-kpi-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.amc-banner-kpi-row dt {
	color: var(--amc-banner-label);
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
}

.amc-banner-kpi-row dd {
	margin: 0;
	color: var(--amc-banner-value);
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	text-align: right;
}

.amc-banner-divider {
	padding: 8px 0;
}

.amc-banner-divider::before {
	content: '';
	display: block;
	height: 0.6px;
	background: var(--amc-banner-divider);
	border-radius: 0.5px;
}

/* Final-failure notice — hidden by default (the `hidden` attribute in templates/banner.php);
   assets/banner.js only reveals it if BOTH the visitor's location AND the shortcode's configured
   fallback coordinates fail to produce a /day-summary response. Discreet by design — reuses the
   card's existing muted label color rather than an alarming error red, since this isn't a
   visitor-actionable error (no retry control here, unlike assets/location-search.js's own
   `.amc-location-status-error`). */
.amc-banner-status {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--amc-banner-label);
}

/* Placeholder state — everything in the card except the moon image starts here (see
   templates/banner.php) and is replaced with real text by assets/banner.js. A fixed min-width
   keeps each row's layout stable instead of collapsing to nothing before real data arrives. */
.amc-banner-value.amc-banner-skeleton {
	display: inline-block;
	min-width: 4em;
	height: 0.9em;
	border-radius: 4px;
	color: transparent !important;
	background: linear-gradient(90deg, var(--amc-banner-skeleton) 25%, var(--amc-banner-skeleton-shine) 37%, var(--amc-banner-skeleton) 63%);
	background-size: 400% 100%;
	animation: amc-banner-shimmer 1.6s ease-in-out infinite;
}

.amc-banner-date .amc-banner-value.amc-banner-skeleton,
.amc-banner-phase-name .amc-banner-value.amc-banner-skeleton {
	width: 60%;
}

@keyframes amc-banner-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.amc-banner-value.amc-banner-skeleton {
		animation: none;
		background: var(--amc-banner-skeleton);
	}
}

/* Desktop — see the file docblock above for the 1024px choice and the "same markup, reflowed"
   approach. Card becomes a row (image left, content right); the content column's header/KPI
   list stay in the same relative order, just resized; each KPI row flips from label-left/
   value-right to value-above/label-below via `order` (DOM/reading order is untouched); dividers
   rotate from horizontal rules between stacked rows to vertical rules between side-by-side
   columns.

   Every selector below is scoped with :not(.amc-banner--aside) rather than bare `.amc-banner` —
   this media query tracks VIEWPORT width, not the width of whatever container the banner sits
   in, so a [astro-banner layout="aside"] instance dropped into a ~350px sidebar on an otherwise
   wide (>=1024px) desktop page would still match here and get the row layout it doesn't have
   room for. `.amc-banner--aside` (set by templates/banner.php when the shortcode's `layout`
   attribute is "aside") opts an instance out of this block entirely, so it keeps the base/
   mobile rules above — the same compact, stacked layout narrow viewports already get, just
   forced on regardless of viewport width. Default (`layout` omitted) behaviour is untouched. */
@media (min-width: 1024px) {
	.amc-banner:not(.amc-banner--aside) {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		padding: 32px 20px;
		box-shadow: 0 10px 30px rgb(0 0 0 / .06);
		border: 1px solid #dde1ec;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-phase-frame {
		width: 138px;
		height: 138px;
		padding: 8px;
		flex-shrink: 0;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-phase-frame-inner {
		width: 122px;
		height: 122px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-phase-image {
		width: 122px;
		height: 122px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-body {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		gap: 20px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-date {
		opacity: 1;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-date .amc-banner-value {
		font-size: 12px;
		line-height: normal;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-phase-name .amc-banner-value {
		font-size: 24px;
		font-weight: 500;
		line-height: 32px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-kpi-list {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 24px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-kpi-row {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		flex-shrink: 0;
		gap: 3px;
		white-space: nowrap;
	}

	/* Value above label on desktop — mobile keeps label-first in BOTH DOM order and visual
	   order (label-left/value-right); here `order` visually promotes dd above dt without
	   touching templates/banner.php's dt-then-dd source order, so the label still reads first
	   for screen readers/keyboard navigation despite appearing second visually. */
	.amc-banner:not(.amc-banner--aside) .amc-banner-kpi-row dd {
		order: -1;
		text-align: left;
		font-size: 16px;
		line-height: 24px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-kpi-row dt {
		font-size: 14px;
		line-height: 20px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-divider {
		flex: 0 0 auto;
		padding: 0 12px;
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-divider::before {
		width: 1px;
		height: 44px;
		background: var(--amc-banner-divider);
	}

	.amc-banner:not(.amc-banner--aside) .amc-banner-date .amc-banner-value.amc-banner-skeleton,
	.amc-banner:not(.amc-banner--aside) .amc-banner-phase-name .amc-banner-value.amc-banner-skeleton {
		width: 40%;
	}
}