/**
 * Home Page Styles
 *
 * Based on Figma nodes:
 * - Desktop Hero: 355:17359
 * - Mobile Hero: 355:18201
 *
 * @package cukiernia
 */

/* ==========================================================================
   Hero Section Component
   ========================================================================== */

.hero-section {
	position: relative;
	background-color: var(--hero-bg, #E8A7A9);
	width: 100%;
	padding-top: 40px;
	padding-bottom: 80px;
	overflow: hidden;
}

.hero-section__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Left Column: Content & Headings
   -------------------------------------------------------------------------- */

.hero-section__content {
	flex: 1;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Badge / Over-title */
.hero-section__badge {
	font-family: var(--font-primary, 'KyivType Sans');
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.36px;
	color: var(--color-dark-red, #80142E);
	margin-bottom: 24px;
}

/* Main Multi-Style Heading */
.hero-section__title {
	margin: 0 0 40px 0;
	font-family: var(--font-heading, 'Romile');
	color: var(--color-dark-red, #80142E);
	text-transform: uppercase;
	letter-spacing: 1.6px;
	line-height: 1.1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hero-section__title-line {
	display: block;
	font-weight: 400;
	font-size: 80px;
	line-height: 1.05;
}

.hero-section__title-line--1 {
	white-space: nowrap;
}

.hero-section__title-row {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
}

.hero-section__title-line--2 {
	margin: 0;
}

.hero-section__title-subtext {
	font-family: var(--font-primary, 'KyivType Sans');
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.36px;
	color: var(--color-dark-red, #80142E);
	text-transform: none;
	max-width: 140px;
	display: inline-block;
}

/* Button & Actions */
.hero-section__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-dark-red, #80142E);
	color: var(--color-cream, #F4EBE1);
	font-family: var(--font-primary, 'KyivType Sans');
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	padding: 24px 32px;
	border-radius: 20px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.hero-section__btn:hover,
.hero-section__btn:focus-visible {
	background-color: #630f23;
	color: var(--color-cream, #F4EBE1);
}

.hero-section__btn:active {
	opacity: 0.9;
}

.hero-section__action--desktop {
	display: block;
}

.hero-section__action--mobile {
	display: none;
}

/* --------------------------------------------------------------------------
   Right Column: Visual Cake & Stickers
   -------------------------------------------------------------------------- */

.hero-section__visual {
	position: relative;
	width: 100%;
	max-width: 530px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

/* Oval Cake Photo Frame */
.hero-section__cake-wrap {
	width: 460px;
	max-width: 100%;
	height: 600px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	background: #fff;
	transform: rotate(38deg);
}

.hero-section__cake-img {
	width: 140%;
	height: 140%;
	min-width: 140%;
	min-height: 140%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-38deg);
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Graphic Stickers on the Photo */
.hero-section__sticker {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	pointer-events: auto;
}

.hero-section__sticker-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}

.hero-section__sticker-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	font-family: var(--font-heading, 'Romile');
	color: var(--color-dark-red, #80142E);
	text-transform: uppercase;
	text-align: left;
	width: 100%;
}

.hero-section__sticker-line {
	display: block;
	text-align: left;
}

/* Top Right Sticker (Sand / ЦУКЕРНЯ) */
.hero-section__sticker--sand {
	top: 32px;
	right: -20px;
	width: 122px;
	height: 157px;
}

.hero-section__sticker--sand .hero-section__sticker-text {
	font-size: 48px;
	line-height: 0.95;
	letter-spacing: 0.96px;
	padding-top: 14px;
	padding-left: 24px;
}

/* Bottom Left Sticker (Blue / У ЛЬВОВІ) */
.hero-section__sticker--blue {
	bottom: 24px;
	left: -20px;
	width: 120px;
	height: 156px;
}

.hero-section__sticker--blue .hero-section__sticker-text {
	font-size: 48px;
	line-height: 0.95;
	letter-spacing: 0.96px;
	padding-top: 14px;
	padding-left: 22px;
}

/* ==========================================================================
   Responsive & Breakpoints
   ========================================================================== */

@media (max-width: 1200px) {
	.hero-section__title-line {
		font-size: 64px;
	}

	.hero-section__cake-wrap {
		height: 520px;
		max-width: 420px;
	}

	.hero-section__sticker--sand {
		width: 100px;
		height: 130px;
		top: 20px;
		right: -10px;
	}

	.hero-section__sticker--sand .hero-section__sticker-text {
		font-size: 38px;
	}

	.hero-section__sticker--blue {
		width: 98px;
		height: 128px;
		bottom: 20px;
		left: -10px;
	}

	.hero-section__sticker--blue .hero-section__sticker-text {
		font-size: 38px;
	}
}

@media (max-width: 992px) {
	.hero-section {
		padding-top: 30px;
		padding-bottom: 60px;
	}

	.hero-section__container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 36px;
	}

	.hero-section__content {
		align-items: center;
		max-width: 100%;
	}

	.hero-section__badge {
		margin-bottom: 16px;
	}

	.hero-section__title {
		margin-bottom: 28px;
	}

	.hero-section__title-line {
		font-size: 54px;
	}

	.hero-section__title-row {
		justify-content: center;
	}

	.hero-section__action--desktop {
		display: none;
	}

	.hero-section__action--mobile {
		display: block;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.hero-section__cake-wrap {
		height: 460px;
		max-width: 380px;
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding-top: 16px;
		padding-bottom: 40px;
	}

	.hero-section__container {
		gap: 12px;
	}

	.hero-section__content {
		align-items: flex-start;
		text-align: left;
		width: 100%;
	}

	.hero-section__badge {
		align-self: flex-start;
		font-size: 18px;
		letter-spacing: 0.36px;
		margin-bottom: 12px;
	}

	.hero-section__title {
		margin-bottom: 12px;
		gap: 6px;
		width: 100%;
	}

	.hero-section__title-line {
		font-size: 48px;
		letter-spacing: 0.96px;
		line-height: 1.1;
	}

	.hero-section__title-row {
		justify-content: flex-start;
		gap: 12px;
	}

	.hero-section__title-subtext {
		font-size: 18px;
		letter-spacing: 0.36px;
		line-height: 1.2;
		max-width: 140px;
		text-align: left;
	}

	.hero-section__visual {
		max-width: 340px;
		margin: 8px auto 16px auto;
	}

	.hero-section__cake-wrap {
		width: 270px;
		height: 350px;
		max-width: 100%;
	}

	/* Scaled stickers for mobile */
	.hero-section__sticker--sand {
		width: 72px;
		height: 92px;
		top: 16px;
		right: -8px;
	}

	.hero-section__sticker--sand .hero-section__sticker-text {
		font-size: 24px;
		line-height: 1.1;
		letter-spacing: 0.96px;
		padding-top: 6px;
		padding-left: 14px;
	}

	.hero-section__sticker--blue {
		width: 70px;
		height: 90px;
		bottom: 16px;
		left: -8px;
	}

	.hero-section__sticker--blue .hero-section__sticker-text {
		font-size: 24px;
		line-height: 1.1;
		letter-spacing: 0.96px;
		padding-top: 6px;
		padding-left: 12px;
	}

	.hero-section__action--mobile {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 12px;
	}

	.hero-section__btn {
		width: 100%;
		text-align: center;
		padding: 24px 32px;
		border-radius: 20px;
		font-size: 16px;
	}
}

/* ==========================================================================
   Showcase Section Component (Вітрина смаколиків)
   Based on Figma nodes:
   - Desktop: 355:17447
   - Mobile: 355:18283
   ========================================================================== */

.showcase-section {
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #FFFFFF;
	position: relative;
	overflow-x: clip;
}

.showcase-section__container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Section Heading */
.showcase-section__title {
	font-family: var(--font-heading, 'Romile');
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--color-dark-red, #80142E);
	text-align: center;
	margin: 0 0 40px 0;
}

/* Cards Grid */
.showcase-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 20px;
	width: 100%;
}

/* Base Card Style */
.showcase-card {
	position: relative;
	height: 480px;
	border-radius: 12px;
	overflow: hidden;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.35s ease;
}

.showcase-card:hover,
.showcase-card:focus-visible {
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

/* Image Wrap & Hover Zoom */
.showcase-card__img-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 12px;
	pointer-events: none;
	z-index: 0;
}

.showcase-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1);
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.showcase-card:hover .showcase-card__img,
.showcase-card:focus-visible .showcase-card__img {
	transform: scale(1.06);
}

/* Asymmetric Grid Layout on Desktop */
.showcase-card--wide-left {
	width: calc(57.65625% - 10px);
}

.showcase-card--narrow-right {
	width: calc(42.34375% - 10px);
}

.showcase-card--half-left,
.showcase-card--half-right {
	width: calc(50% - 10px);
}

.showcase-card--narrow-left {
	width: calc(40.859375% - 10px);
}

.showcase-card--wide-right {
	width: calc(59.140625% - 10px);
}

/* --------------------------------------------------------------------------
   Stickers on Cards (6 Shape Variations)
   -------------------------------------------------------------------------- */

.showcase-card__sticker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
}

.showcase-card__sticker-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	z-index: 0;
}

.showcase-card__sticker-text {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading, 'Romile');
	color: var(--color-dark-red, #80142E);
	text-transform: uppercase;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.showcase-card__sticker-line {
	display: block;
}

/* 1. Arch Shape (Торти) */
.showcase-card__sticker--arch {
	width: 125px;
	height: 96px;
}

.showcase-card__sticker--arch .showcase-card__sticker-bg {
	width: 96px;
	height: 125px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
}

.showcase-card__sticker--arch .showcase-card__sticker-text {
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 1.2;
}

/* 2. Clover Shape (Печиво) */
.showcase-card__sticker--clover {
	width: 145px;
	height: 145px;
}

.showcase-card__sticker--clover .showcase-card__sticker-text {
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 1.2;
}

/* 3. Ribbon Shape (Подарункові набори) */
.showcase-card__sticker--ribbon {
	width: 245px;
	height: 120px;
}

.showcase-card__sticker--ribbon .showcase-card__sticker-bg {
	width: 116px;
	height: 245px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.showcase-card__sticker--ribbon .showcase-card__sticker-text {
	font-size: 30px;
	letter-spacing: 0.6px;
	line-height: 1.1;
}

/* 4. Cloud Shape (Торти на замовлення) */
.showcase-card__sticker--cloud {
	width: 221px;
	height: 129px;
}

.showcase-card__sticker--cloud .showcase-card__sticker-text {
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 1.2;
}

/* 5. Tilted Rect Shape (Весільні торти) */
.showcase-card__sticker--tilted {
	width: 140px;
	height: 170px;
}

.showcase-card__sticker--tilted .showcase-card__sticker-bg {
	width: 106px;
	height: 148px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-16.37deg);
}

.showcase-card__sticker--tilted .showcase-card__sticker-text {
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 1.2;
}

/* 6. Heart Shape (Кенді-бар) */
.showcase-card__sticker--heart {
	width: 130px;
	height: 140px;
}

.showcase-card__sticker--heart .showcase-card__sticker-text {
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 1.2;
	padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Showcase Responsive Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.showcase-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.showcase-section__title {
		font-size: 36px;
		margin-bottom: 30px;
	}

	.showcase-card {
		height: 380px;
		padding: 24px;
	}

	.showcase-card__sticker {
		transform: scale(0.9);
		transform-origin: bottom left;
	}
}

@media (max-width: 768px) {
	.showcase-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.showcase-section__title {
		font-size: 24px;
		letter-spacing: 0.48px;
		margin-bottom: 24px;
	}

	.showcase-grid {
		flex-direction: column;
		gap: 16px;
	}

	.showcase-card,
	.showcase-card--wide-left,
	.showcase-card--narrow-right,
	.showcase-card--half-left,
	.showcase-card--half-right,
	.showcase-card--narrow-left,
	.showcase-card--wide-right {
		width: 100%;
		height: 220px;
		padding: 16px;
		border-radius: 12px;
	}

	.showcase-card__sticker {
		transform: scale(0.75);
		transform-origin: bottom left;
	}
}

/* ==========================================================================
   Section 3: Our History (Наша історія)
   Based on Figma nodes:
   - Desktop: 355:17463
   - Mobile: 355:18326
   ========================================================================== */

.history-section {
	width: 100%;
	padding-top: 80px;
	padding-bottom: 180px;
	background-color: #FFFFFF;
	position: relative;
	overflow-x: clip;
}

.history-section__container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Section Title */
.history-section__title {
	font-family: var(--font-heading, 'Romile');
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--color-dark-red, #80142E);
	text-align: center;
	margin: 0 0 40px 0;
}

/* Main 3-Column Content Flow */
.history-section__content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
}

/* Left Column */
.history-section__col--left {
	width: 305px;
	flex-shrink: 0;
	padding-top: 40px;
}

/* Text Content */
.history-section__text {
	font-family: var(--font-primary, 'KyivType Sans');
	font-size: 16px;
	font-weight: 400;
	line-height: 1.35;
	color: #4D3024;
}

/* Center Media (Photo + Stickers) */
.history-section__media {
	position: relative;
	width: 606px;
	flex-shrink: 0;
}

.history-section__image-wrap {
	width: 100%;
	height: 734px;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.history-section__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Stickers on History Photo */
.history-section__sticker {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
}

.history-section__sticker-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	z-index: 0;
}

.history-section__sticker-text {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading, 'Romile');
	color: var(--color-dark-red, #80142E);
	text-transform: uppercase;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.history-section__sticker-line {
	display: block;
}

/* Star Sticker (Top Right) */
.history-section__sticker--star {
	top: -45px;
	right: -60px;
	width: 208px;
	height: 206px;
}

.history-section__sticker--star .history-section__sticker-bg {
	transform: rotate(-29.41deg);
}

.history-section__sticker--star .history-section__sticker-text {
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 1.2;
}

/* Heart Sticker (Bottom Left) */
.history-section__sticker--heart {
	bottom: -40px;
	left: -70px;
	width: 218px;
	height: 222px;
}

.history-section__sticker--heart .history-section__sticker-bg {
	transform: rotate(-19.53deg);
}

.history-section__sticker--heart .history-section__sticker-text {
	transform: rotate(-19.53deg);
	font-size: 48px;
	letter-spacing: 0.96px;
	line-height: 1.1;
}

/* Right Column */
.history-section__col--right {
	width: 305px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-self: flex-end;
}

/* Action Button */
.history-section__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-dark-red, #80142E);
	color: var(--color-cream, #F4EBE1);
	font-family: var(--font-primary, 'KyivType Sans');
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	padding: 24px 32px;
	border-radius: 20px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.history-section__btn:hover,
.history-section__btn:focus-visible {
	background-color: #630f23;
	color: var(--color-cream, #F4EBE1);
}

.history-section__btn:active {
	opacity: 0.9;
}

/* Responsive */
@media (max-width: 1200px) {
	.history-section__content {
		gap: 24px;
	}

	.history-section__media {
		width: 480px;
	}

	.history-section__image-wrap {
		height: 580px;
	}

	.history-section__col--left,
	.history-section__col--right {
		width: calc((100% - 480px - 48px) / 2);
	}

	.history-section__sticker--star {
		width: 160px;
		height: 160px;
		top: -30px;
		right: -40px;
	}

	.history-section__sticker--heart {
		width: 170px;
		height: 175px;
		bottom: -30px;
		left: -40px;
	}

	.history-section__sticker--heart .history-section__sticker-text {
		font-size: 36px;
	}
}

@media (max-width: 992px) {
	.history-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.history-section__title {
		font-size: 36px;
		margin-bottom: 30px;
	}

	.history-section__content {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.history-section__col--left {
		width: 100%;
		max-width: 540px;
		padding-top: 0;
		text-align: center;
	}

	.history-section__media {
		width: 100%;
		max-width: 540px;
	}

	.history-section__image-wrap {
		height: 520px;
	}

	.history-section__col--right {
		width: 100%;
		max-width: 540px;
		align-self: center;
		text-align: center;
		align-items: center;
	}
}

@media (max-width: 768px) {
	.history-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.history-section__title {
		font-size: 24px;
		letter-spacing: 0.48px;
		margin-bottom: 16px;
	}

	.history-section__content {
		gap: 16px;
	}

	.history-section__col--left {
		max-width: 343px;
		text-align: left;
	}

	.history-section__media {
		max-width: 343px;
	}

	.history-section__image-wrap {
		height: 440px;
		border-radius: 12px;
	}

	/* Mobile Stickers */
	.history-section__sticker--star {
		width: 120px;
		height: 120px;
		top: -20px;
		right: -25px;
	}

	.history-section__sticker--star .history-section__sticker-text {
		font-size: 18px;
	}

	.history-section__sticker--heart {
		width: 110px;
		height: 112px;
		bottom: -15px;
		left: -15px;
	}

	.history-section__sticker--heart .history-section__sticker-text {
		font-size: 22px;
	}

	.history-section__col--right {
		max-width: 343px;
		text-align: left;
		align-items: flex-start;
		gap: 16px;
	}

	.history-section__action {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 8px;
	}

	.history-section__btn {
		width: 100%;
		max-width: 343px;
		text-align: center;
		padding: 24px 32px;
		border-radius: 20px;
		font-size: 16px;
	}
}