/* ================================================
Component: Button Cards
Path: components/flexible/button_cards/style.css
================================================ */
:is(body, .is-preview) {
	.button-cards {
		background-color: transparent;
		padding-top: var(--gap-3xl);
		padding-bottom: var(--gap-3xl);
	}
	.button-cards__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gap-lg);
	}
	.button-cards__card {
		border-radius: var(--radius-md);
		overflow: hidden;
		transition: transform var(--transition-base), box-shadow var(--transition-base);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.button-cards__card:hover {
		box-shadow: var(--shadow-lg);
	}
	.button-cards__card-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-md);
		padding: 30px 24px;
		text-decoration: none;
		color: inherit;
		text-align: center;
		letter-spacing: 3.6px;
		text-transform: uppercase;
	}
	.button-cards__card-title {
		font-size: var(--font-size-xl);
		letter-spacing: 2.4px;
		font-weight: 500;
		line-height: 1.3;
		font-family: var(--font-primary);
		display: block;
		margin: 0;
	}
	.button-cards__card-label {
		display: inline-flex;
		align-items: center;
		gap: var(--gap-xs);
		font-size: var(--font-size-sm);
		padding: 10px 20px;
		border-radius: var(--radius-sm);
		transition: background-color var(--transition-fast), color var(--transition-fast);
	}
	.button-cards__card--navy {color: #ffffff;}
	.button-cards__card--cream {color: #3C4559;}
	.button-cards__card--amber {color: #3C4559;}
	.button-cards__card--green {color: #3C4559;}
	.button-cards__card--dark-green {color: #ffffff;}
	.button-cards__card--red {color: #ffffff;}
	.button-cards__card--brown {color: #ffffff;}
	.button-cards__card--gray {color: #ffffff;}
	.button-cards__grid.cols-1 {
		max-width: 50%;
		margin-right: auto;
		margin-left: auto;
	}
	.button-cards__card {
		position: relative;
		background: transparent;
	}
	.button-cards__card::before {
		content: "";
		position: absolute;
		inset: 0;
		mix-blend-mode: multiply;
		z-index: 0;
		pointer-events: none;
	}
	.button-cards__card--navy::before {
		background-color: var(--color-navy);
	}
	.button-cards__card--cream::before {
		background-color: var(--color-beige);
	}
	.button-cards__card--amber::before {
		background-color: var(--color-yellow);
	}
	.button-cards__card--green {
		.btn-primary {
			&:hover {
				background-color: var(--color-white);
				border-color: var(--color-white);
				color: var(--color-navy);
			}
		}
	}
	.button-cards__card--green::before {
		background-color: var(--color-grass);
	}
	.button-cards__card--dark-green::before {
		background-color: var(--color-kale);
	}
	.button-cards__card--red::before {
		background-color: #C33C32;
	}
	.button-cards__card--brown::before {
		background-color: var(--color-earth);
	}
	.button-cards__card--gray::before {
		background-color: #7D7D7D;
	}
	.button-cards__card-link {
		position: relative;
		z-index: 1;
	}
	@media (min-width: 575px) {
		.button-cards__grid.cols-2 {grid-template-columns: repeat(2, 1fr);}
		.button-cards__grid.cols-3 {grid-template-columns: repeat(2, 1fr);}
	}
	@media (min-width: 768px) {
		.button-cards {padding-top: var(--section-padding-top); padding-bottom: var(--section-padding-bottom);}
		.button-cards__grid.cols-2 {grid-template-columns: repeat(2, 1fr); gap: var(--gap-xl);}
		.button-cards__grid.cols-3 {grid-template-columns: repeat(2, 1fr); gap: var(--gap-xl);}
		.button-cards__card-link {gap: var(--gap-lg);padding:40px;}
	}
	@media (min-width: 1024px) {
		.button-cards__grid.cols-3 {grid-template-columns: repeat(3, 1fr); gap: var(--gap-2xl);}
		.button-cards__card-title {font-size: 30px;letter-spacing: 3px;}
	}
	@media (min-width: 1200px) {
		.button-cards__card-link {padding: 60px;}
		.shop-button-cards .button-cards__card-link {padding:102px 60px;}
	}
	@media(max-width:575px) {
		.button-cards__card-title {font-size: 28px;line-height: 36px;letter-spacing: 2.8px;max-width: 299px;}
	}

}