/* Mini Magazin horoskop: fixed pages, section block, link from dated posts. */

.mm-h,
.mm-h-promo {
	--mm-ink: #16161d;
	--mm-muted: #5d5f6e;
	--mm-line: #e7e7f0;
	--mm-card: #fff;
	--mm-soft: #f5f5fb;
	--mm-indigo: #3c3fde;
	--mm-coral: #e54e53;
	--mm-gold: #b7791f;
	--mm-radius: 18px;
	--mm-shadow: 0 10px 30px -12px rgba(30, 27, 75, 0.25);
}

.s-dark .mm-h,
.s-dark .mm-h-promo {
	--mm-ink: #f2f2f6;
	--mm-muted: #a8aab8;
	--mm-line: rgba(255, 255, 255, 0.1);
	--mm-card: #1c1c23;
	--mm-soft: #23232c;
	--mm-indigo: #8d8fff;
	--mm-coral: #ff8589;
	--mm-gold: #f2c264;
	--mm-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

.mm-h {
	container-type: inline-size;
	color: var(--mm-ink);
}

.mm-h *,
.mm-h *::before,
.mm-h *::after {
	box-sizing: border-box;
}

.mm-h a,
.mm-h a:hover,
a.mm-h-promo,
a.mm-h-promo:hover {
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
	background-image: none;
}

.mm-h p,
.mm-h h1,
.mm-h h2,
.mm-h h3 {
	margin: 0;
}

/* Sign medallion: the site's existing sign photos, tinted by element. */

.mm-h-medal {
	--mm-size: 64px;
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--mm-size);
	height: var(--mm-size);
	border-radius: 50%;
	overflow: hidden;
	background: var(--mm-el);
	box-shadow: inset 0 0 0 1px rgba(22, 22, 29, 0.05);
	isolation: isolate;
}

.mm-h-medal--sm { --mm-size: 44px; }
.mm-h-medal--lg { --mm-size: 120px; }

.mm-h-el--vatra  { --mm-el: linear-gradient(140deg, #ffe7da 0%, #ffb59c 100%); }
.mm-h-el--zemlja { --mm-el: linear-gradient(140deg, #e8f4df 0%, #b9d9a6 100%); }
.mm-h-el--vazduh { --mm-el: linear-gradient(140deg, #efedff 0%, #c4bcff 100%); }
.mm-h-el--voda   { --mm-el: linear-gradient(140deg, #ddf3f8 0%, #9fd5e5 100%); }

.mm-h .mm-h-medal__img,
.mm-h-promo .mm-h-medal__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	mix-blend-mode: multiply;
	transform: scale(1.22);
	opacity: 1;
}

.mm-h-medal__letter {
	font-weight: 700;
	font-size: calc(var(--mm-size) * 0.42);
	color: #2b2a5e;
}

/* Hero */

.mm-h-hero {
	position: relative;
	overflow: hidden;
	margin: 0 0 28px;
	padding: 28px 24px 24px;
	border-radius: 24px;
	color: #fff;
	background:
		radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 27% 68%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
		radial-gradient(1.8px 1.8px at 46% 14%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 63% 52%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 81% 26%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 92% 74%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 7% 86%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
		radial-gradient(circle at 100% 0%, rgba(255, 133, 120, 0.55) 0%, transparent 45%),
		radial-gradient(circle at 0% 100%, rgba(124, 92, 255, 0.45) 0%, transparent 50%),
		linear-gradient(135deg, #17153f 0%, #2d2ba8 55%, #4b3fd8 100%);
}

.mm-h-hero__body {
	display: flex;
	align-items: center;
	gap: 20px;
}

.mm-h-hero__medal .mm-h-medal {
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 12px 30px -8px rgba(0, 0, 0, 0.45);
}

.mm-h-hero__text {
	min-width: 0;
}

.mm-h .mm-h-hero__eyebrow {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.mm-h .mm-h-hero__title {
	font-size: clamp(26px, 5.6cqi, 36px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.mm-h-hero__intro {
	margin-top: 14px;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.mm-h-hero__intro p + p {
	margin-top: 0.7em;
}

.mm-h-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.mm-h-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
}

.mm-h-chip--soft {
	color: var(--mm-indigo);
	background: color-mix(in srgb, var(--mm-indigo) 11%, transparent);
}

.mm-h-tabs {
	display: inline-flex;
	gap: 4px;
	margin-top: 20px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.mm-h a.mm-h-tab {
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	transition: background-color 0.2s, color 0.2s;
}

.mm-h a.mm-h-tab:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
}

.mm-h a.mm-h-tab[aria-current="page"] {
	color: #23218a;
	background: #fff;
}

/* Sign strip */

.mm-h-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 8px;
	margin: 0 0 28px;
}

.mm-h a.mm-h-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mm-ink);
	text-align: center;
}

.mm-h-strip__item .mm-h-medal {
	transition: transform 0.2s, box-shadow 0.2s;
}

.mm-h a.mm-h-strip__item:hover .mm-h-medal {
	transform: translateY(-2px);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-indigo) 25%, transparent);
}

.mm-h a.mm-h-strip__item[aria-current="page"] {
	color: var(--mm-indigo);
}

.mm-h a.mm-h-strip__item[aria-current="page"] .mm-h-medal {
	box-shadow: 0 0 0 3px var(--mm-indigo);
}

/* Sections */

.mm-h-section {
	margin-top: 36px;
}

.mm-h-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 16px;
}

.mm-h .mm-h-section__head h2 {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--mm-ink);
}

.mm-h .mm-h-section__lede {
	margin: -6px 0 16px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mm-muted);
}

.mm-h .mm-h-subhead {
	margin: 22px 0 12px;
	font-size: 17px;
	font-weight: 700;
	color: var(--mm-ink);
}

.mm-h-section--next,
.mm-h-section--money {
	padding: 22px 20px;
	border-radius: var(--mm-radius);
}

.mm-h-section--next {
	background: color-mix(in srgb, var(--mm-indigo) 7%, transparent);
	border: 1px dashed color-mix(in srgb, var(--mm-indigo) 35%, transparent);
}

.mm-h-section--money {
	background: linear-gradient(140deg, #fff9ea 0%, #fff0cf 100%);
}

.s-dark .mm-h-section--money {
	background: rgba(242, 194, 100, 0.08);
}

.mm-h-section--money .mm-h-chip--soft {
	color: var(--mm-gold);
	background: color-mix(in srgb, var(--mm-gold) 14%, transparent);
}

/* Cards */

.mm-h-grid,
.mm-h-days,
.mm-h-blocks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.mm-h a.mm-h-card,
.mm-h-day,
.mm-h a.mm-h-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	background: var(--mm-card);
	color: var(--mm-ink);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.mm-h a.mm-h-card:hover,
.mm-h a.mm-h-block:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--mm-indigo) 35%, transparent);
	box-shadow: var(--mm-shadow);
}

.mm-h-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mm-h-card__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mm-h-card__name strong,
.mm-h .mm-h-card__name h2 {
	font-size: 18px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--mm-ink);
}

.mm-h-card__name small {
	font-size: 13px;
	font-weight: 500;
	color: var(--mm-muted);
}

.mm-h-card__text,
.mm-h-block__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mm-muted);
}

.mm-h-card__cta,
.mm-h a.mm-h-day__cta,
.mm-h-more a {
	margin-top: auto;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--mm-indigo);
}

.mm-h-card__cta::after,
.mm-h a.mm-h-day__cta::after,
.mm-h-more a::after {
	content: " →";
	display: inline-block;
	transition: transform 0.2s;
}

.mm-h a.mm-h-card:hover .mm-h-card__cta::after,
.mm-h a.mm-h-block:hover .mm-h-card__cta::after,
.mm-h a.mm-h-day__cta:hover::after,
.mm-h-more a:hover::after {
	transform: translateX(3px);
}

.mm-h .mm-h-more {
	margin-top: 16px;
}

.mm-h .mm-h-more--solo {
	margin-top: 0;
}

/* Daily */

.mm-h-day {
	scroll-margin-top: 90px;
}

.mm-h .mm-h-day__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--mm-ink);
}

/* Compact sign links */

.mm-h-pills {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.mm-h a.mm-h-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--mm-line);
	border-radius: 999px;
	background: var(--mm-card);
	font-size: 15px;
	font-weight: 700;
	color: var(--mm-ink);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mm-h a.mm-h-pill:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--mm-indigo) 35%, transparent);
	box-shadow: var(--mm-shadow);
}

/* Sign page */

.mm-h-today {
	position: relative;
	padding: 24px 22px 22px;
	border-radius: var(--mm-radius);
	background: var(--mm-card);
	border: 1px solid var(--mm-line);
	box-shadow: var(--mm-shadow);
}

.mm-h-today::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	border-radius: var(--mm-radius) 0 0 var(--mm-radius);
	background: linear-gradient(180deg, var(--mm-indigo), var(--mm-coral));
}

.mm-h .mm-h-today__label {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-coral);
}

.mm-h .mm-h-today__text {
	font-size: 18px;
	line-height: 1.65;
	color: var(--mm-ink);
}

.mm-h .mm-h-today__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 16px;
}

.mm-h-today__links a {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--mm-indigo);
}

.mm-h-today__links a::after {
	content: " →";
}

.mm-h-block__label {
	align-self: flex-start;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mm-indigo);
	background: color-mix(in srgb, var(--mm-indigo) 11%, transparent);
}

.mm-h-block--month .mm-h-block__label {
	color: #8a3ffc;
	background: rgba(138, 63, 252, 0.11);
}

.mm-h-block--money .mm-h-block__label {
	color: var(--mm-gold);
	background: color-mix(in srgb, var(--mm-gold) 14%, transparent);
}

.mm-h-block__period {
	font-size: 17px;
	font-weight: 800;
	color: var(--mm-ink);
}

.mm-h-section--signs .mm-h-strip {
	margin-bottom: 0;
}

.mm-h .mm-h-empty {
	padding: 20px 22px;
	border-radius: var(--mm-radius);
	background: var(--mm-soft);
	font-size: 16px;
	color: var(--mm-muted);
}

/* Section page block */

.mm-h-hub {
	margin-bottom: 8px;
}

.mm-h-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.mm-h a.mm-h-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: 104px;
	padding: 18px;
	border-radius: var(--mm-radius);
	color: #fff;
	transition: transform 0.2s, box-shadow 0.2s;
}

.mm-h a.mm-h-tile::after {
	content: "→";
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 18px;
	opacity: 0.8;
	transition: transform 0.2s;
}

.mm-h a.mm-h-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--mm-shadow);
	color: #fff;
}

.mm-h a.mm-h-tile:hover::after {
	transform: translateX(3px);
}

.mm-h-tile strong {
	font-size: 19px;
	line-height: 1.2;
	font-weight: 800;
}

.mm-h-tile span {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.88;
}

.mm-h a.mm-h-tile--dnevni   { background: linear-gradient(135deg, #2d2ba8 0%, #5b4cf0 100%); }
.mm-h a.mm-h-tile--sedmicni { background: linear-gradient(135deg, #6b3fd8 0%, #c2489b 100%); }
.mm-h a.mm-h-tile--mjesecni { background: linear-gradient(135deg, #d9475a 0%, #f08a4b 100%); }

.mm-h-hub .mm-h-strip {
	margin-bottom: 8px;
}

/* Link from dated posts to the fixed pages */

a.mm-h-promo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0 8px;
	padding: 14px 18px 14px 14px;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	background: var(--mm-soft);
	color: var(--mm-ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}

a.mm-h-promo:hover {
	border-color: color-mix(in srgb, var(--mm-indigo) 35%, transparent);
	box-shadow: var(--mm-shadow);
	color: var(--mm-ink);
}

.mm-h-promo__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.mm-h-promo__text strong {
	font-size: 16.5px;
	line-height: 1.3;
	font-weight: 800;
}

.mm-h-promo__text span {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--mm-muted);
}

.mm-h-promo__arrow {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-weight: 700;
	color: #fff;
	background: var(--mm-indigo);
}

.mm-h-promo .mm-h-medal {
	--mm-size: 56px;
}

/* Notice above the text of a dated post whose period has ended */

a.mm-h-promo--past {
	margin: 0 0 26px;
	border-color: color-mix(in srgb, var(--mm-coral) 40%, transparent);
	background: color-mix(in srgb, var(--mm-coral) 7%, var(--mm-card));
}

a.mm-h-promo--past:hover {
	border-color: var(--mm-coral);
}

.mm-h-promo--past .mm-h-promo__arrow {
	background: var(--mm-coral);
}

/* Wider layouts */

@container (min-width: 520px) {
	.mm-h-hero {
		padding: 36px 34px 30px;
	}

	.mm-h-strip {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.mm-h-grid,
	.mm-h-days,
	.mm-h-blocks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mm-h-pills {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mm-h-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mm-h-section--next,
	.mm-h-section--money {
		padding: 26px 26px;
	}
}

@container (min-width: 720px) {
	.mm-h-grid,
	.mm-h-blocks {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mm-h-pills {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@container (max-width: 420px) {
	.mm-h-hero--sign .mm-h-medal--lg {
		--mm-size: 84px;
	}

	.mm-h-hero__body {
		gap: 16px;
	}

	.mm-h-tabs {
		display: flex;
	}

	.mm-h a.mm-h-tab {
		flex: 1;
		padding: 8px 6px;
		text-align: center;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-h *,
	a.mm-h-promo {
		transition: none !important;
	}
}