@import url("./root.css");
@import url("./font-size.css");
@import url("./display.css");
@import url("./flex.css");
@import url("./gap.css");
@import url("./order.css");
@import url("./aspect-ratio.css");
@import url("./colors.css");
@import url("./base.css");
@import url("./header.css");
@import url("./footer.css");

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	@media (width >= 36rem) {
		object-fit: contain;
	}
}
.swiper {
	.swiper-button-next,
	.swiper-button-prev {
		width: auto;
		height: auto;
		font-size: var(--text-3xl);
		color: var(--color-white);
		padding: 2rem;
		margin-top: 0;
		translate: 0 -50%;
		text-shadow: 0 1px 2px #000;
		&:after {
			content: none;
		}
	}
	.swiper-pagination {
		bottom: 2rem !important;
		.swiper-pagination-bullet {
			width: 1rem;
			height: 1rem;
			border: 1px solid var(--color-white);
			background-color: #ffffff33;
			opacity: 1;
			&.swiper-pagination-bullet-active {
				background-color: var(--color-white);
				opacity: 1;
			}
		}
	}
}
.women-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	@media (width >= 36rem) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media (width >= 62rem) {
		grid-template-columns: repeat(4, 1fr);
	}
	.woman {
		position: relative;
		@media (width < 36rem) {
			.woman-image {
				aspect-ratio: 1;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.woman-info {
			display: flex;
			flex-direction: column;
			position: absolute;
			bottom: 0;
			left: 0;
			color: var(--color-white);
			background-color: rgb(31, 31, 31, 0.9);
			padding: 2rem 1rem;
			text-align: left;
			transition: opacity 0.3s;
			overflow: hidden;

			.woman-name {
				font-weight: 700;
				line-height: 1.1;
				margin-bottom: 0.5em;
				transition: translate 0.3s;
			}
			.woman-description {
				margin-bottom: 0;
				transition: translate 0.3s;
			}
		}
		@media (width >= 48rem) {
			.woman-info {
				top: 0;
				bottom: auto;
				height: 100%;
				opacity: 0;
				.woman-name {
					font-size: var(--text-xl);
					translate: -50% 0;
				}
				.woman-description {
					font-size: var(--text-base);
					translate: 0 -25%;
				}
			}
			&:hover {
				.woman-info {
					opacity: 1;
					.woman-name,
					.woman-description {
						translate: 0;
					}
				}
			}
		}
	}
}

.vineyard-sources {
	a {
		display: inline-block;
		position: relative;
		span {
			position: absolute;
			bottom: 1.25rem;
			left: 1.25rem;
			color: var(--color-white);
			font-size: var(--text-lg);
			font-weight: 400;
		}
	}
}

.malbec-timeline {
	.timeline {
		.timeline-item {
			position: relative;
			padding-bottom: 1rem;
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: .125rem;
				background-color: #7d0101;
			}

			.timeline-image {
				margin-bottom: 1rem;
			}
		}
		& > :last-child {
			.timeline-item:after {
				display: none;
			}
		}

		@media (width >= 48rem) {
			position: relative;
			font-size: var(--text-base);
			padding: 4rem 0 6rem;

			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				translate: -50% 0;
				width: .375rem;
				height: 100%;
				background-color: #7d0101;
			}

			&:after {
				content: "";
				width: 3rem;
				height: 1.5rem;
				background: url('data:image/svg+xml,<svg fill="%237d0101" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/></svg>') no-repeat center/cover;
				position: absolute;
				bottom: -.25rem;
				left: 50%;
				translate: -50% 0;
				color: #7d0101;
				z-index: 1;
			}

			.timeline-item {
				display: flex;
				align-items: center;
				gap: 1rem;
				min-height: 4rem;
				padding-bottom: 0;

				&:after {
					content: "";
					position: absolute;
					top: 50%;
					translate: 0 -50%;
					width: 3rem;
					height: .25rem;
					background-color: #7d0101;
					z-index: 1;
				}

				.timeline-image {
					position: relative;
					flex-shrink: 0;
					margin-bottom: 0;
					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}

				p {
					margin-bottom: 0;
				}
			}
			> :nth-child(odd) {
				position: relative;
				padding-right: 4rem;
				.timeline-item {
					justify-content: end;
					&:after {
						left: auto;
						right: -4rem;
					}
					.timeline-image {
						order: 1;
					}
				}
			}
			> :nth-child(even) {
				position: relative;
				margin-top: 4rem;
				padding-left: 4rem;
				.timeline-item {
					&:after {
						left: -4rem;
					}
				}
			}
		}
	}
}