/* Megjegyzés: a debrecenbenhallottam.hu világos témájú, ezért a kártyák
   szándékosan NEM követik a rendszer sötét módját – különben sötét kártyák
   ülnének a világos oldalon. Ha a téma egyszer sötétre vált, a
   :root { --dh-bg: ...; --dh-fg: ...; } értékeket kell felülírni. */

/* DH Hírfolyam – frontend
   Mobil-first. Minden méret rem-ben, hogy a téma tipográfiájához igazodjon. */

.dh-feed,
.dh-weather,
.dh-ticker {
	--dh-bg: #ffffff;
	--dh-fg: #14181f;
	--dh-muted: #5b6472;
	--dh-line: #e3e7ee;
	--dh-accent: #0b5cab;
	--dh-accent-fg: #ffffff;
	--dh-radius: 12px;
	--dh-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -8px rgba(16, 24, 40, .12);
	box-sizing: border-box;
}

.dh-feed *,
.dh-weather *,
.dh-ticker * {
	box-sizing: inherit;
}


/* ---------- Lista ---------- */

.dh-feed {
	margin: 1.5rem 0;
}

.dh-feed__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .9rem;
	border-bottom: 2px solid var(--dh-line);
	padding-bottom: .5rem;
}

.dh-feed__title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--dh-fg);
}

.dh-feed__more {
	font-size: .85rem;
	color: var(--dh-accent);
	text-decoration: none;
	white-space: nowrap;
}

.dh-feed__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.dh-feed--grid .dh-feed__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.dh-feed--grid .dh-feed__grid { grid-template-columns: repeat(3, 1fr); }
}

.dh-feed--list .dh-feed__grid { grid-template-columns: 1fr; gap: .6rem; }

.dh-feed__disclaimer {
	margin: .9rem 0 0;
	font-size: .74rem;
	line-height: 1.5;
	color: var(--dh-muted);
}

.dh-empty {
	padding: 1.25rem;
	border: 1px dashed var(--dh-line);
	border-radius: var(--dh-radius);
	color: var(--dh-muted);
	font-size: .9rem;
	text-align: center;
}

/* ---------- Kártya ---------- */

.dh-card {
	display: flex;
	flex-direction: column;
	background: var(--dh-bg);
	border: 1px solid var(--dh-line);
	border-radius: var(--dh-radius);
	overflow: hidden;
	box-shadow: var(--dh-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}

.dh-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 24px -10px rgba(16, 24, 40, .2);
}

.dh-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--dh-line);
	overflow: hidden;
}

.dh-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dh-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .9rem 1rem 1rem;
	flex: 1;
}

.dh-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: .74rem;
	color: var(--dh-muted);
	line-height: 1.4;
}

.dh-tag {
	display: inline-block;
	padding: .1rem .45rem;
	border-radius: 4px;
	background: var(--dh-line);
	color: var(--dh-fg);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.dh-tag--fresh { background: #e8f0fe; color: #0b3d91; }
.dh-tag--local { background: #e6f4ea; color: #14562b; }


.dh-card__source a { color: inherit; text-decoration: none; font-weight: 600; }
.dh-card__source a:hover { text-decoration: underline; }

.dh-card__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
}

.dh-card__title a {
	color: var(--dh-fg);
	text-decoration: none;
}

.dh-card__title a:hover { color: var(--dh-accent); }

.dh-card__excerpt {
	margin: 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--dh-muted);
}

.dh-card__author {
	margin: 0;
	font-size: .75rem;
	font-style: italic;
	color: var(--dh-muted);
}

.dh-card__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .5rem .85rem;
	border-radius: 8px;
	background: var(--dh-fg);
	color: var(--dh-bg);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
}

.dh-card__cta:hover { background: var(--dh-accent); color: var(--dh-accent-fg); }

/* Lista nézet: vízszintes elrendezés nagyobb képernyőn */
.dh-feed--list .dh-card { border: 0; border-bottom: 1px solid var(--dh-line); border-radius: 0; box-shadow: none; }
.dh-feed--list .dh-card:hover { transform: none; box-shadow: none; }
.dh-feed--list .dh-card__body { padding: .7rem 0; }
.dh-feed--list .dh-card__title { font-size: .95rem; }
.dh-feed--list .dh-card__cta { padding: .3rem .6rem; font-size: .7rem; }

/* ---------- Időjárás ---------- */

.dh-weather {
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid var(--dh-line);
	border-radius: var(--dh-radius);
	background: var(--dh-bg);
	color: var(--dh-fg);
}

.dh-alarms { display: grid; gap: .5rem; margin-bottom: 1rem; }

.dh-alarm {
	padding: .65rem .8rem;
	border-radius: 8px;
	border-left: 4px solid currentColor;
	font-size: .85rem;
	line-height: 1.45;
	display: grid;
	gap: .2rem;
}

.dh-alarm--sarga { background: #fff8e1; color: #7a5900; }
.dh-alarm--narancs { background: #fff0e0; color: #8a4100; }
.dh-alarm--piros { background: #fdecea; color: #8b1a10; }


.dh-alarm span { font-weight: 400; opacity: .9; }

.dh-weather__now {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.dh-wicon { width: 44px; height: 44px; flex: none; }
.dh-wicon--lg { width: 72px; height: 72px; }

.dh-weather__temp { display: flex; flex-direction: column; line-height: 1.15; }
.dh-weather__deg { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.dh-weather__place { font-size: 1rem; font-weight: 700; }
.dh-weather__desc { font-size: .85rem; color: var(--dh-muted); }

.dh-weather__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .2rem .9rem;
	font-size: .8rem;
	color: var(--dh-muted);
}

@media (min-width: 700px) {
	.dh-weather__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: auto; }
}

.dh-weather__facts strong { color: var(--dh-fg); }

.dh-weather__hourly {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	margin: 1rem 0 0;
	padding-bottom: .4rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.dh-hour {
	flex: 0 0 auto;
	width: 68px;
	display: grid;
	justify-items: center;
	gap: .2rem;
	padding: .5rem .25rem;
	border: 1px solid var(--dh-line);
	border-radius: 10px;
	font-size: .75rem;
}

.dh-hour .dh-wicon { width: 28px; height: 28px; }
.dh-hour__temp { font-weight: 700; font-size: .9rem; }
.dh-hour__pop { color: var(--dh-accent); font-size: .68rem; }

.dh-weather__daily {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: .5rem;
	margin-top: 1rem;
}

.dh-day {
	display: grid;
	justify-items: center;
	gap: .15rem;
	padding: .55rem .25rem;
	border: 1px solid var(--dh-line);
	border-radius: 10px;
	font-size: .78rem;
}

.dh-day .dh-wicon { width: 28px; height: 28px; }
.dh-day__name { font-weight: 700; text-transform: capitalize; }
.dh-day__max { font-weight: 700; }
.dh-day__min { color: var(--dh-muted); }
.dh-day__pop { color: var(--dh-accent); font-size: .68rem; }

.dh-weather__towns { margin-top: 1.25rem; }
.dh-weather__towns h3 { margin: 0 0 .5rem; font-size: 1rem; }
.dh-weather__towns ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.dh-weather__towns li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: .5rem;
	padding: .45rem .2rem;
	border-bottom: 1px solid var(--dh-line);
	font-size: .88rem;
}

.dh-weather__towns .dh-wicon { width: 24px; height: 24px; }
.dh-town__name { font-weight: 600; }
.dh-town__temp { font-weight: 700; }
.dh-town__desc { display: none; color: var(--dh-muted); font-size: .78rem; }

@media (min-width: 600px) {
	.dh-weather__towns li { grid-template-columns: 1fr auto auto 1fr; }
	.dh-town__desc { display: block; text-align: right; }
}

.dh-weather__setup,
.dh-weather__stale {
	margin: .75rem 0 0;
	padding: .75rem;
	border-radius: 8px;
	background: var(--dh-line);
	font-size: .85rem;
	line-height: 1.5;
}

.dh-weather__stale { background: none; padding: .5rem 0 0; color: var(--dh-muted); font-size: .78rem; }

.dh-weather__credit {
	margin: 1rem 0 0;
	padding-top: .6rem;
	border-top: 1px solid var(--dh-line);
	font-size: .7rem;
	line-height: 1.5;
	color: var(--dh-muted);
}

.dh-weather__credit a { color: inherit; }

.dh-weather--compact .dh-weather__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh-weather--compact .dh-weather__deg { font-size: 2rem; }

/* ---------- Szalagcím ---------- */

.dh-ticker {
	display: flex;
	align-items: stretch;
	background: var(--dh-fg);
	color: var(--dh-bg);
	overflow: hidden;
	font-size: .82rem;
	line-height: 1;
}

.dh-ticker__label {
	flex: none;
	display: flex;
	align-items: center;
	padding: .6rem .8rem;
	background: var(--dh-accent);
	color: var(--dh-accent-fg);
	font-weight: 800;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.dh-ticker__viewport {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
}

.dh-ticker__track {
	display: flex;
	width: max-content;
	animation: dh-ticker-scroll linear infinite;
	animation-duration: var(--dh-ticker-duration, 60s);
}

.dh-ticker:hover .dh-ticker__track,
.dh-ticker:focus-within .dh-ticker__track {
	animation-play-state: paused;
}

.dh-ticker__run { display: flex; align-items: center; }

.dh-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .7rem 1.1rem;
	white-space: nowrap;
}

.dh-ticker__item + .dh-ticker__item { border-left: 1px solid rgba(255, 255, 255, .18); }

.dh-ticker__kind {
	font-size: .62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .7;
}

.dh-ticker__item--riasztas .dh-ticker__kind { color: #ff8b80; opacity: 1; }
.dh-ticker__item a { color: inherit; text-decoration: none; }
.dh-ticker__item a:hover { text-decoration: underline; }

@keyframes dh-ticker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* Akadálymentesség: mozgáscsökkentés esetén nincs animáció, helyette
   a JS 6 másodpercenként lépteti a tartalmat. */
@media (prefers-reduced-motion: reduce) {
	.dh-ticker__track { animation: none; }
	.dh-ticker--stepped .dh-ticker__run:nth-child(2) { display: none; }
	.dh-ticker--stepped .dh-ticker__item { display: none; }
	.dh-ticker--stepped .dh-ticker__item.is-visible { display: inline-flex; }
}

/* ---------- Mobil finomítás ---------- */

@media (max-width: 480px) {
	.dh-card__title { font-size: 1rem; }
	.dh-card__excerpt { font-size: .85rem; }
	.dh-feed__title { font-size: 1.15rem; }
	.dh-weather { padding: .8rem; }
	.dh-ticker { font-size: .78rem; }
	.dh-ticker__label { padding: .55rem .6rem; font-size: .65rem; }
}