:root {
	--c-cyan: #51d0db;
	--c-blue: #5178db;
	--c-mint: #51dbb9;
	--c-indigo: #8E0F19;
	--c-sky: #9ac1db;
	--c-bg: #fff6e3;
	--radius: 14px;
}

/* Detail page */
.detail-hero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 660px;
	display: flex;
	align-items: flex-end;	
}

.detail-hero .hero-inner {
	padding: 100px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.detail-hero h1 {
	color: #fff;
	margin: 0;
	font-size: 40px;
	font-weight: 700;
}
.back-btn {
	width: 70px;
	height: 70px;
	border-radius: 999px;
	background: #8E0F19;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.back-btn .arrow {
	display: block;
	width: 14px;
	height: 29px;
	margin-right: 3px;
}

.detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 40px;
}
.detail-item {
	display: flex;
	gap: 20px;
}
.detail-card {
	flex: 1;
	background: #bfc1ff;
	border-radius: 30px;
	max-width: 640px;
	width: 100%;
	min-height: 409px;
	position: relative;
	display: grid;
	place-items: center;
	transition: all 0.3s ease;
}
.detail-card:hover {
	transform: scale(1.02);
}
.detail-card .title {
	color: #fff;
	font-weight: 700;
}

.detail-text {
	flex: 1;
	max-width: 640px;
	align-self: center;
	line-height: 1.7;
	color: #5c5454;
}

/* Recipe page */
.recipe-grid {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.recipe-text p {
	line-height: 1.7;
	margin: 0 0 14px;
	color: #3c4666;
}
.ingredients {
	max-width: 360px;
	width: 100%;
	background: white;
	border-radius: 20px;
	padding: 20px 18px;
}
.ingredients h3 {
	margin: 0 0 12px;
	color: #5c5454;
}
.ingredients ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ingredients li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #8E0F19;
	margin-right: 10px;
}
.ingredients li {
	color: #5c5454;
}

@media (max-width: 1000px) {
	.detail-grid {
		grid-template-columns: 1fr;
	}
}
*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #2e1d1d;
	background: var(--c-bg);
}

a {
	text-decoration: none;
	color: inherit;
}

h2 {
	font-size: 30px;
	font-weight: 700;
	color: #8E0F19;
	margin-bottom: 20px;
}

main {
	margin-top: 108px;
}

.container {
	max-width: 1340px;
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}

/* Header */
.site-header {
	background: var(--c-indigo);
	color: #fff;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10;
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 4px 0;
}
.logo {
	width: 100px;
	height: auto;
}
.logo img {
	width: 100%;
	height: auto;
	display: block;
}

.site-nav {
	display: flex;
	gap: 22px;
}
.site-nav a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}

.site-nav a.active,
.site-nav a:hover {
	text-decoration: underline;
}

.nav-toggle {
	display: none;
}

/* Hero */
.hero {
	background: linear-gradient(
		180deg,
		var(--c-sky) 0%,
		color-mix(in oklab, var(--c-sky) 85%, white) 100%
	);
	min-height: 660px;
}
.hero .slider {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.slides {
	display: flex;
	width: 100%;
}
.slides.move {
	transition: transform 0.6s ease;
}
.slide {
	flex: 0 0 100%;
	position: relative;
	min-height: 660px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
}

.hero .slide .container {
	padding-bottom: 140px;
}
.hero h1 {
	margin: 0;
	font-size: clamp(28px, 6vw, 52px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-align: left;
	color: #fff;
}
.dots {
	display: flex;
	align-items: center;
	gap: 12px;
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
}
.dots button,
.dots span {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	display: inline-block;
	background: #fff;
	opacity: 1;
	border: 0;
	cursor: pointer;
	transition: all 0.2s ease;
	transform-origin: center;
}
.dots .active {
	transform: scale(1.5);
}

/* About */
.about{
	margin-top: 60px;
}

.about-grid {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 28px;
}

.about .text p {
	line-height: 1.7;
	margin: 0 0 14px;
	max-width: 820px;
}

.note {
	background: white;
	border-radius: 20px;
	padding: 20px 18px;
	position: relative;
	max-width: 420px;
	width: 100%;
}

.thumb {
	height: 260px;
	border-radius: 22px;
	background: color-mix(in oklab, var(--c-indigo) 22%, white);
	margin: 6px 6px 18px;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.note-text {
	margin: 0 8px 6px;
	text-align: center;
	color: #5c5454;
	line-height: 1.6;
}

/* Popular cards */
.popular {
	margin-top: 80px;
}
.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}


.card {
    position: relative;
    background: #bfc1ff;
    border: 0;
    border-radius: 30px;
    min-height: 410px;
    padding: 16px;
    display: grid;
    place-items: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.detail-card {
    position: relative;
    background: #bfc1ff;
    border: 0;
    border-radius: 30px;
    min-height: 410px;
    padding: 16px;
    display: grid;
    place-items: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.detail-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.text-overlay {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 20px;
    text-align: center; 
}

.card-title,
.card p {
    margin: 0;
    color: #333; 
}

.card:hover {
	transform: scale(1.02);
}

.card-title {
	margin: 0;
	font-size: 28px;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
}
.card p {
	display: none;
}

.badge {
	position: absolute;
	right: 30px;
	top: 30px;
	width: 70px;
	height: 70px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.more {
	text-align: center;
	margin-top: 40px;
}
.more a {
	margin: 0 auto;
	font-size: 22px;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
}

.more a:hover {
	text-decoration: underline;
}

.more a svg {
	transition: all 0.3s ease;
}
.more a:hover svg {
	transform: translateX(10px);
}

/* Breadcrumbs */
.breadcrumbs {
	background: transparent;
	color: #4b4b4b;
	padding: 60px 0;
}
.breadcrumbs .container {
	display: flex;
	align-items: center;
	gap: 8px;
}
.breadcrumbs a {
	color: #4b4b4b;
	opacity: 0.8;
}
.breadcrumbs .sep {
	opacity: 0.4;
}

/* Categories page */
.categories {
	padding: 20px 0 80px;
}
.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 375px);
	gap: 20px;
}
.cat-card {
	position: relative;
	background: #bfc1ff;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 100%;
	transition: all 0.3s ease;
}

.cat-card img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.cat-card:hover {
	transform: scale(1.02);
}

.cat-grid > .cat-card:nth-child(1) {
	grid-column: 1 / span 2;
	grid-row: 1;
}
.cat-grid > .cat-card:nth-child(2) {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.cat-card .title {
	color: #fff;
	font-weight: 700;
	font-size: 36px;
	text-align: center;
	display: block;
}

/* Footer */
.site-footer {
	background: var(--c-indigo);
	color: #fff;
	padding: 60px 0 20px;
	margin-top: 120px;
}

.site-footer .logo {
	width: 100px;
}
.footer-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 20px;
}
.footer-nav {
	display: flex;
	gap: 20px;
	align-items: center;
	padding-top: 40px;	
}
.footer-nav a {
	color: #fff;
	text-decoration: none;
	display: block;
	font-size: 16px;
}
.footer-nav a:hover {
	text-decoration: underline;
}
.legal {
	grid-column: 1 / -1;
	text-align: left;
	margin-top: 28px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 8px;
}

/* Responsive */
@media (max-width: 1200px) {

	main {
		margin-top: 103.46px;
	}
	.logo {
		width: 100px;
	}
	.site-nav {
		gap: 16px;
	}
	.hero {
		min-height: 560px;
	}
	.slide {
		min-height: 560px;
	}
	.hero .slide .container {
		padding-bottom: 100px;
	}
	.cat-grid {
		grid-template-rows: repeat(2, 300px);
	}
}

@media (max-width: 900px) {
	.about-grid {
		grid-template-columns: 1fr;
	}
	.cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
	.recipe-grid {
		flex-direction: column;
	}
	.hero {
		min-height: 480px;
	}
	.slide {
		min-height: 480px;
	}
	.hero h1 {
		font-size: clamp(26px, 6.5vw, 42px);
	}
	.hero .slide .container {
		padding-bottom: 80px;
	}
	.dots {
		bottom: 18px;
	}
	.cat-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 240px);
	}
	.cat-grid > .cat-card:nth-child(1) {
		grid-column: 1 / span 2;
		grid-row: 1;
	}
	.cat-grid > .cat-card:nth-child(2) {
		grid-column: 2;
		grid-row: 1 / span 3;
	}
	.footer-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.legal {
		text-align: center;
	}
}

@media (max-width: 700px) {
	main {
		margin-top: 94.41px;
	}
	.logo {
		width: 88px;
	}
	.hero {
		min-height: 420px;
	}
	.slide {
		min-height: 420px;
	}
	.hero .slide .container {
		padding-bottom: 64px;
	}
	.cat-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}
	.cat-grid > .cat-card:nth-child(1),
	.cat-grid > .cat-card:nth-child(2) {
		grid-column: auto;
		grid-row: auto;
	}
	.footer-nav {
		grid-template-columns: 1fr;
		row-gap: 10px;
	}
	.footer-nav a {
		font-size: 18px;
	}
}

@media (max-width: 640px) {

	.header-inner {
		justify-content: space-between;
		padding-left: 10px;
		padding-right: 10px;
	}
	.cards {
		grid-template-columns: 1fr;
	}
	.site-nav {
		display: none;
		position: absolute;
		right: 4%;
		top: 56px;
		background: var(--c-indigo);
		padding: 12px;
		border-radius: 10px;
		flex-direction: column;
	}
	.site-nav a {
		padding: 6px 8px;
	}
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		color: #fff;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 8px;
		padding: 6px 10px;
		cursor: pointer;
	}
	.site-header.open .site-nav {
		display: flex;
	}
}

@media (max-width: 480px) {
	.hero {
		min-height: 360px;
	}
	.slide {
		min-height: 360px;
	}
	.hero h1 {
		font-size: clamp(22px, 7vw, 34px);
	}
	.detail-hero {
		min-height: 220px;
	}
	.detail-hero .hero-inner {
		padding: 24px 12px;
	}
	.back-btn {
		width: 36px;
		height: 36px;
	}
}