/* ==========================================================================
   Newsroom extras: top bar and ticker, story rows with photos, weather box, popup.
   Loaded after style.css and uses the same tokens.
   ========================================================================== */

/* Top bar and headline ticker */
.hcu-topbar { font-size: 0.85rem; line-height: 1.3; }
.hcu-topbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 2.4rem; }
.hcu-topbar__date { flex: none; font-weight: 700; color: var(--hcu-sun); }
.hcu-ticker { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.hcu-ticker__label {
	flex: none;
	padding: 0.15rem 0.5rem;
	background: var(--hcu-sun);
	color: var(--hcu-ink);
	border-radius: 2px;
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hcu-ticker__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}
.hcu-ticker__track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; }
.hcu-ticker__track li { padding-right: 2.5rem; white-space: nowrap; }
.hcu-ticker__track li::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.6rem; background: var(--hcu-sun); vertical-align: 0.1em; }
.hcu-ticker__track a { color: var(--hcu-on-dark); text-decoration: none; padding-block: 0.4rem; display: inline-block; }
.hcu-ticker__track a:hover { text-decoration: underline; text-decoration-color: var(--hcu-sun); text-underline-offset: 3px; }
.hcu-ticker.is-running .hcu-ticker__track { animation: hcu-ticker var(--hcu-ticker-time, 40s) linear infinite; }
.hcu-ticker.is-paused .hcu-ticker__track,
.hcu-ticker:hover .hcu-ticker__track,
.hcu-ticker:focus-within .hcu-ticker__track { animation-play-state: paused; }
.hcu-ticker__toggle {
	flex: none;
	min-height: 32px;
	padding: 0 0.6rem;
	background: transparent;
	color: var(--hcu-on-dark);
	border: 1px solid var(--hcu-on-dark-soft);
	border-radius: var(--hcu-radius);
	font: 700 0.75rem var(--hcu-sans);
	cursor: pointer;
}
.hcu-ticker__toggle:hover { border-color: var(--hcu-sun); color: var(--hcu-sun); }
@keyframes hcu-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hcu-ticker__viewport { overflow-x: auto; } }
@media (max-width: 40rem) { .hcu-topbar__date { display: none; } }

/* Story rows: photo first, like a news feed */
.hcu-row { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.hcu-row > .hcu-media { order: -1; }
.hcu-row--noimg { grid-template-columns: 1fr; }
.hcu-row .hcu-title { font-size: 1.3rem; }
@media (max-width: 40rem) {
	.hcu-row { grid-template-columns: 7rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
	.hcu-row .hcu-title { font-size: 1.1rem; }
	.hcu-row .hcu-dek { display: none; }
}

/* Weather box */
.hcu-weather { padding: 1.25rem 1.4rem; margin-bottom: 2rem; border-top: 6px solid var(--hcu-sun); }
.hcu-weather[hidden] { display: none; }
.hcu-weather__title { font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hcu-sun) !important; }
.hcu-weather__now { display: flex; align-items: baseline; gap: 0.75rem; margin: 0.4rem 0 0.9rem; }
.hcu-weather__temp { font-size: 3rem; font-weight: 800; font-stretch: 112%; line-height: 1; }
.hcu-weather__sky { font-family: var(--hcu-serif); font-size: 1.2rem; color: var(--hcu-on-dark-soft); }
.hcu-weather__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0 0 0.9rem; }
.hcu-weather__facts dt { font-size: 0.78rem; color: var(--hcu-on-dark-soft); }
.hcu-weather__facts dd { margin: 0; font-weight: 700; }
.hcu-weather__src { margin: 0; font-size: 0.75rem; color: var(--hcu-on-dark-soft); }
.hcu-weather__src a { color: inherit; }

/* Newsletter popup */
.hcu-popup { padding: 0; border: 0; background: transparent; width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); }
.hcu-popup::backdrop { background: rgba(16, 23, 34, 0.6); }
.hcu-popup__box { position: relative; display: grid; gap: 0.9rem; padding: 1.75rem 1.5rem 1.25rem; border-radius: var(--hcu-radius); }
.hcu-popup__box .hcu-stripes { margin: -0.5rem 0 0.25rem; width: 5rem; }
.hcu-popup h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-stretch: 112%; padding-right: 2rem; }
.hcu-popup p { margin: 0; font-family: var(--hcu-serif); font-size: 1.1rem; line-height: 1.5; color: var(--hcu-on-dark-soft); }
.hcu-popup__close {
	position: absolute; top: 0.5rem; right: 0.5rem;
	width: 44px; height: 44px;
	background: transparent; color: var(--hcu-on-dark);
	border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.hcu-popup__close:hover { color: var(--hcu-sun); }
.hcu-popup__later {
	justify-self: start;
	min-height: 44px;
	padding: 0;
	background: transparent;
	color: var(--hcu-on-dark-soft);
	border: 0;
	font: 600 0.9rem var(--hcu-sans);
	text-decoration: underline;
	cursor: pointer;
}
.hcu-popup__later:hover { color: var(--hcu-on-dark); }