/*
 * [cti_promo_feed] shortcode styling - the homepage hero's right-column
 * promo panel. Deliberately self-contained (own brand-red gradient, own
 * type) rather than relying on the active theme's tokens, since this
 * plugin has to render sensibly on any theme, not just the current one -
 * see class-cti-promo-feed.php.
 */

.cti-promo-feed {
	background-color: #c70000;
	background-image: linear-gradient( 160deg, #c70000 0%, #7a0000 100% );
	border-radius: 8px;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* No height here by default (was height:100%, relying on the parent
	   column being stretched to match its sibling - 2026-08-24: the
	   active theme now sets an explicit fixed height on this hero's
	   specific instance instead, see concord-storefront-child/style.css -
	   this plugin CSS stays theme-agnostic and just provides a sane
	   floor for wherever else this shortcode might ever be embedded. */
	min-height: 220px;
	overflow: hidden;
	padding: 28px 24px;
	position: relative;
}

.cti-promo-feed__label {
	position: absolute;
	top: 16px;
	left: 24px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.7 );
}

.cti-promo-feed__line {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	/* Covers the <a> case too (2026-08-24, linkable entries) - browsers'
	   own UA stylesheet gives <a> its own link color, which would
	   otherwise override the white inherited from .cti-promo-feed. */
	color: inherit;
	text-decoration: none;
	display: block;
}

/* Linkable entry (2026-08-24) - a visible-but-subtle underline is the
   only signal an entry is clickable, since color can't be the signal
   here (everything on this panel is already white-on-red). */
.cti-promo-feed__line--link {
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.55 );
	text-underline-offset: 3px;
	cursor: pointer;
}

.cti-promo-feed__line--link:hover,
.cti-promo-feed__line--link:focus {
	text-decoration-color: #fff;
}

/* Static (exactly 1 line) - centered in the whole panel via the parent's
   own flex centering above; nothing extra needed here beyond the shared
   .cti-promo-feed__line rule. */

/* Ticker (2+ lines) - a fixed-height viewport that clips to exactly one
   item's worth of height; cti-promo-feed.js translates the list up by one
   item every ~4s. Every .cti-promo-feed__line is forced to the SAME fixed
   height (not just min-height) specifically so the JS's scroll-step size
   stays uniform regardless of how long any individual promo's text is.
   Real bug found and fixed 2026-08-24: `overflow:hidden` was only ever
   set on .cti-promo-feed__viewport (the outer clipping window), never on
   each individual .cti-promo-feed__line item. A promo long enough to
   need MORE lines than its own box's height allowed didn't get clipped
   at the item level - it overflowed with the default `overflow:visible`,
   and because align-items:center on that same flex item centers
   overflowing content symmetrically both above AND below its nominal
   box (not just downward, as plain block overflow would), the excess
   text visibly bled into the NEXT item's space even though the outer
   viewport's own clip and the items' own geometry were both already
   pixel-perfect (confirmed via getBoundingClientRect() before writing
   this fix - the bleed was real, not a rounding/timing artifact of the
   transition itself). Adding overflow:hidden here, at the item level,
   is the actual fix - any text still too long to fit its slot now gets
   cleanly clipped within its own slot instead of bleeding into a
   neighbor. Watched 3+ full rotation cycles after this fix, including
   the specific entry that triggered the original bug - no bleed or
   partial-line flash at any point. See docs/PROGRESS.md 2026-08-24.
   145px (up from 120px, 2026-08-26): real production copy replacing the
   shorter TEST PROMO placeholders needed genuinely more room - the
   longest real entry (Milestar's rebate promo, listing 3 tire model
   names) measured a real 133px scrollHeight against the old 120px slot,
   confirmed via getBoundingClientRect()/scrollHeight, not assumed from
   character count alone. 145px clears that with real margin (comfortably
   fits 5 wrapped lines at the current 21px font size in this panel's
   ~290px text column) without threatening the outer .cti-promo-feed
   panel's own fixed 329px desktop height (theme style.css) - the
   ticker's total content (28px padding + 145px viewport + 28px padding =
   201px) still leaves ~128px of headroom there. */
.cti-promo-feed__viewport {
	height: 145px;
	overflow: hidden;
}

.cti-promo-feed__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cti-promo-feed__list .cti-promo-feed__line {
	height: 145px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* Fallback (0 lines) - honest placeholder graphic, not a fabricated
   "photo" - see class-cti-promo-feed.php's render_fallback(). Swap for a
   real <img> once real shop photography exists; no other code changes
   needed at that point beyond editing this one method. */
.cti-promo-feed--photo {
	align-items: center;
}

.cti-promo-feed__photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.cti-promo-feed__photo-icon {
	width: 48px;
	height: 48px;
	color: rgba( 255, 255, 255, 0.85 );
}

.cti-promo-feed__photo-caption {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	color: rgba( 255, 255, 255, 0.85 );
}