/**
 * Simply Croatia homepage relaunch styles.
 * Scoped to .sc-home so the existing magazine and article layouts remain
 * untouched while the new homepage is developed.
 */

.sc-home {
	--sc-home-paper: #fbf8f2;
	--sc-home-paper-deep: #f4eee4;
	--sc-home-sea: #275d66;
	--sc-home-terracotta: #a9654f;
	--sc-home-olive: #5d6957;
	--sc-home-gold: #d2ad72;
	--sc-home-dusk: #6e8190;
	background: var(--sc-home-paper);
}

.sc-home .sc-hero-video {
	min-height: min(860px, 92svh) !important;
}

.sc-home .sc-hero-video__overlay {
	background:
		linear-gradient(
			180deg,
			rgba(8, 25, 24, 0.08) 0%,
			rgba(8, 25, 24, 0.10) 48%,
			rgba(8, 25, 24, 0.72) 100%
		);
}

.sc-home .sc-hero-video__inner {
	align-items: end;
	padding-bottom: clamp(6.5rem, 10vw, 9rem);
	position: relative;
	z-index: 2;
}

.sc-home .sc-hero-video::after {
	background: linear-gradient(180deg, rgba(251, 248, 242, 0) 0%, var(--sc-home-paper) 100%);
	bottom: 0;
	content: "";
	height: clamp(6rem, 11vw, 10rem);
	left: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.sc-home .sc-home-hero__content {
	margin-inline: auto !important;
	padding-inline: clamp(0.25rem, 1vw, 0.75rem);
	width: min(calc(100% - 2rem), 1200px) !important;
}

.sc-home .sc-home-hero__welcome {
	font-size: clamp(3.4rem, 6.4vw, 6.2rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 0.96;
	margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
	max-width: none;
	text-shadow: 0 3px 24px rgba(0, 0, 0, 0.26);
}

.sc-home .sc-home-hero__lines {
	margin: 0 !important;
	max-width: 42rem;
}

.sc-home .sc-home-hero__lines p {
	color: rgba(255, 255, 255, 0.96);
	font-size: clamp(1.08rem, 1.7vw, 1.42rem);
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.35;
	margin: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.sc-home .sc-home-hero__lines p + p {
	margin-top: 0.22rem;
}

/*
 * The first section is intentionally generous and warm. It should feel like
 * the film slowly releases the visitor into the page rather than ending at a
 * visible section boundary.
 */
.sc-home .sc-home-opening {
	background:
		radial-gradient(circle at 82% 8%, rgba(210, 173, 114, 0.13), transparent 30rem),
		linear-gradient(180deg, var(--sc-home-paper) 0%, #f8f3eb 58%, var(--sc-home-paper-deep) 100%);
	padding: clamp(6rem, 10vw, 10rem) 0 clamp(7rem, 11vw, 11rem);
}

.sc-home .sc-home-invitations > .sc-container {
	max-width: 1260px !important;
	width: min(calc(100% - 2rem), 1260px) !important;
}

.sc-home .sc-home-invitations__heading {
	margin: 0 0 clamp(3rem, 6vw, 5.5rem) !important;
	max-width: 44rem;
}

.sc-home .sc-home-invitations__heading h2 {
	font-size: clamp(2.7rem, 5vw, 5rem);
	font-weight: 500;
	line-height: 1.02;
	margin: 0;
	max-width: 11ch;
}

/*
 * Homepage categories are invitations, not magazine tiles. The source data
 * remains the same WordPress categories, but the visual rhythm is deliberately
 * more editorial and can accommodate additional categories later.
 */
.sc-home .sc-home-invitations .sc-category-grid {
	display: grid !important;
	gap: clamp(1rem, 2vw, 1.6rem);
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item {
	grid-column: span 4 !important;
	min-width: 0;
	width: auto !important;
}

.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:nth-child(1) {
	grid-column: span 5 !important;
}

.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:nth-child(2) {
	grid-column: span 7 !important;
}

.sc-home .sc-home-invitations .sc-category-card {
	align-items: flex-start;
	border: 0;
	border-radius: 28px;
	box-shadow: 0 18px 50px rgba(38, 47, 43, 0.10);
	display: flex;
	isolation: isolate;
	justify-content: flex-end;
	min-height: clamp(250px, 29vw, 390px);
	overflow: hidden;
	padding: clamp(1.7rem, 3vw, 2.7rem);
	position: relative;
	transition: box-shadow 420ms ease, transform 420ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.sc-home .sc-home-invitations .sc-category-card::before {
	background: radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.28), transparent 44%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sc-home .sc-home-invitations .sc-category-card::after {
	background: none;
	bottom: clamp(1.8rem, 3vw, 2.7rem);
	content: "↗";
	font-family: Arial, sans-serif;
	font-size: 1.2rem;
	line-height: 1;
	opacity: 0.72;
	position: absolute;
	right: clamp(1.8rem, 3vw, 2.7rem);
	transform: none;
	transition: opacity 260ms ease, transform 320ms ease;
}

.sc-home .sc-home-invitations .sc-category-item:nth-child(1) .sc-category-card {
	background: linear-gradient(145deg, #326d73, var(--sc-home-sea));
	color: #fffdf7;
}

.sc-home .sc-home-invitations .sc-category-item:nth-child(2) .sc-category-card {
	background: linear-gradient(145deg, #bb765e, var(--sc-home-terracotta));
	color: #fffaf4;
}

.sc-home .sc-home-invitations .sc-category-item:nth-child(3) .sc-category-card {
	background: linear-gradient(145deg, #6c7965, var(--sc-home-olive));
	color: #fffdf7;
}

.sc-home .sc-home-invitations .sc-category-item:nth-child(4) .sc-category-card {
	background: linear-gradient(145deg, #dfc08c, var(--sc-home-gold));
	color: #25312d;
}

.sc-home .sc-home-invitations .sc-category-item:nth-child(5) .sc-category-card {
	background: linear-gradient(145deg, #8295a2, var(--sc-home-dusk));
	color: #fffdf7;
}

.sc-home .sc-home-invitations .sc-category-card h2 {
	font-size: clamp(2rem, 3.5vw, 3.55rem);
	font-weight: 500;
	line-height: 0.98;
	margin: 0;
	max-width: 9ch;
	position: relative;
	z-index: 2;
}

.sc-home .sc-home-invitations .sc-category-card h2 a {
	color: inherit;
	text-decoration: none;
}

.sc-home .sc-home-invitations .sc-category-card h2 a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.sc-home .sc-home-invitations .sc-category-card:hover,
.sc-home .sc-home-invitations .sc-category-card:focus-within {
	border: 0;
	box-shadow: 0 26px 64px rgba(38, 47, 43, 0.17);
	transform: translateY(-7px);
}

.sc-home .sc-home-invitations .sc-category-card:hover::after,
.sc-home .sc-home-invitations .sc-category-card:focus-within::after {
	opacity: 1;
	transform: translate(3px, -3px);
}

.sc-home .sc-home-invitations .sc-category-card:hover h2 {
	transform: none;
}

.sc-home .sc-home-moment-section {
	background:
		linear-gradient(180deg, var(--sc-home-paper-deep) 0%, var(--sc-home-paper) 72%);
	padding: clamp(1rem, 2vw, 2rem) 1rem clamp(4rem, 8vw, 8rem);
}

.sc-home .sc-home-moment-section .sc-moment {
	margin-block: 0;
}

@media (max-width: 1024px) {
	.sc-home .sc-home-invitations .sc-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item,
	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:nth-child(1),
	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:nth-child(2) {
		grid-column: auto !important;
	}

	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:last-child:nth-child(odd) {
		grid-column: 1 / -1 !important;
	}
}

@media (max-width: 781px) {
	.sc-home .sc-hero-video {
		min-height: 82svh !important;
	}

	.sc-home .sc-hero-video__inner {
		padding-bottom: clamp(5.5rem, 18vw, 7.5rem);
	}

	.sc-home .sc-home-hero__content {
		padding-inline: 0.25rem;
		width: min(calc(100% - 1.5rem), 1200px) !important;
	}

	.sc-home .sc-home-hero__welcome {
		font-size: clamp(3rem, 15vw, 4.9rem);
	}

	.sc-home .sc-home-hero__lines p {
		font-size: clamp(1rem, 4.8vw, 1.2rem);
	}

	.sc-home .sc-home-opening {
		padding-top: clamp(4.5rem, 16vw, 6rem);
	}

	.sc-home .sc-home-invitations > .sc-container {
		width: min(calc(100% - 1.5rem), 1260px) !important;
	}

	.sc-home .sc-home-invitations__heading h2 {
		font-size: clamp(2.55rem, 12vw, 3.6rem);
		max-width: 10ch;
	}

	.sc-home .sc-home-invitations .sc-category-grid {
		grid-template-columns: 1fr !important;
	}

	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item,
	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:nth-child(1),
	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:nth-child(2),
	.sc-home .sc-home-invitations .sc-category-grid > .sc-category-item:last-child:nth-child(odd) {
		grid-column: auto !important;
	}

	.sc-home .sc-home-invitations .sc-category-card {
		min-height: 220px;
	}

	.sc-home .sc-home-moment-section {
		padding-inline: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-home .sc-hero-video::after,
	.sc-home .sc-home-invitations .sc-category-card,
	.sc-home .sc-home-invitations .sc-category-card::after {
		transition: none;
	}
}