/**
 * TAB Black Friday Deals: page styles.
 *
 * Moved from the GeneratePress child theme's style.css. Everything is nested
 * under the .tab-bf body class (added only on pages that list deals), or under
 * the editor canvas when editing one, so nothing here reaches the rest of a site.
 *
 * The scope adds the same specificity (one class, one element) to every rule.
 * The rules keep their order among themselves, but they win over same-named
 * GenerateBlocks global styles on the host site, like .section or .btn-primary.
 *
 * The CSS is nested, which Perfmatters' Remove Unused CSS can't parse, so the
 * plugin excludes these files from it (see tab-bf-deals.php).
 */

@font-face {
	font-display: swap;
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 100 900;
	src: url("fonts/inter-tight.woff2") format("woff2");
}

/* The page is dark only */
html:has(> body.tab-bf) {
	color-scheme: dark;
}

/* Page base. Set on the main content area, not body, so the host theme's
   background, header and footer stay exactly as they are on every other page. */
body.tab-bf .site-main,
.editor-styles-wrapper {
	font-family: 'Inter Tight', system-ui, sans-serif, arial;
	color: var(--text);

	/* Dark palette. Cards and borders follow theadminbar.com's neutral-* colors
	   (card 850, border 800), falling back to the original site's values. */
	--card: var(--neutral-850, #0F0F12);
	--heading: var(--stone-100, #f5f5f5);
	--text: var(--stone-400, #a3a3a3);
	--link: var(--stone-200, #e5e5e5);
	--link--hover: var(--stone-50, #fafafa);
	--border: var(--neutral-800, #202022);
	--border--hover: var(--neutral-750, var(--stone-700, #404040));
	--button-bg: var(--brand-primary, #fec200);
	--button-text: var(--stone-800, #262626);
	--button-bg--hover: var(--brand-alt, #fcd34d);
	--button-text--hover: var(--stone-900, #171717);
	--text-link: var(--brand-primary, #fec200);
	--text-link-hover: var(--brand-alt, #fcd34d);

	/* Layout variables, from the original site's overrides.css */
	--section-padding-inline: clamp(1rem, 0.848rem + 0.758vw, 5rem);
	--section-padding-block-d: clamp(3rem, 2.394rem + 3.03vw, 5rem);
	--wrapper-max-width-d: var(--gb-container-width, 1280px);
}

/* The editor canvas has no theme page behind it */
.editor-styles-wrapper {
	background: var(--neutral-900, #0A0A0A);
}

:is(body.tab-bf, .editor-styles-wrapper) {
	/* Layout classes, from the original site's GenerateBlocks global styles */
	.section{
		display: flex;
		flex-direction: column;
		padding: var(--section-padding-block-d) var(--section-padding-inline);
	}

	.wrapper{
		width: 100%;
		max-width: var(--wrapper-max-width-d);
		margin-inline: auto;
	}

	.grid-12-col{
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 16px;
	}

	/* The host site's .btn-primary sets these; the deal buttons don't */
	.card .btn-primary{
		font-family: inherit;
		letter-spacing: normal;
		text-transform: none;
	}

	.section{
		z-index: 2;
	}




	.section:has(.header){
			padding-block-end: 0;
	}

	.header{
		display: flex;
		flex-direction: column;
		gap: 1rem;


		& h1{
			font-weight: 600;
			font-size: clamp(2.5rem, 0.786rem + 3.571vw, 4rem);
			max-width: 20ch;
			color: var(--heading);
			text-align: center; 
			margin-inline: auto;
			font-weight: 800;
		}

		& p{
			order: -1;
		}

		& a{
			color: var(--link);
			text-decoration-color: var(--brand-primary, #fec200);
		}
	}


	/* ================================
	   CARD
	   ================================ */

	/* Image optimizers (ShortPixel WebP) wrap the img in a <picture>. Let the img
	   stay the card's layout child so the order and sizing rules below still apply. */
	.card picture{
		display: contents;
	}

	.card{
		padding: .5rem;
		background: var(--card);
		border-radius: 1.125rem;
		display: flex;
		flex-direction: column;
		color: var(--text);
		border: 1px solid var(--border);


		& img{
			border-radius: .75rem;
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 700/300;
			order: -1;

		}

		& .content-wrapper{
			display: flex;
			flex-grow: 1;
			flex-direction: column;

			padding: 1.5rem;
		}

		& .content-wrapper > p{
			margin-bottom: 2.5rem;
			max-width: 60ch;
		}

		& .content-footer-wrapper{
			display: flex;
			align-items: Center; 
			gap: 1rem;
			margin-top: auto;
		}

		& .btn-primary{
			background: var(--brand-primary, #fec200);
			display: inline-block;
			color: var(--button-text);
			font-weight: 600;
			line-height: 1;
			text-decoration: none;
			padding: 1em;
			border-radius: .3125rem;
			transition: all .25s ease-in-out;

			&:is(:hover, :focus-visible){
				background: var(--brand-alt, #fcd34d);
				transform: translatey(-2px);
			}
		}

		& h2{
			font-size: 2rem;
			color: var(--heading);
			margin-bottom: .25rem;
			font-weight: 500;
		}	
	}

	.platinum{
		grid-column: span 12;
		display: grid;
		grid-template-columns: 1fr 1fr; 
		font-size: 1.25rem;


		& img{
			aspect-ratio: 1/1;

		}

		& .content-wrapper{
			justify-content: center;
			padding: 64px;

			& > p{
				margin-bottom: 5rem;
			}
		}

		& .content-footer-wrapper{
			margin-top: 4rem;
		}

		& h2{
			font-size: 3rem;
			margin-bottom: 1.5rem;
		}
	}

	.gold{
		grid-column: span 6;

	}

	.silver{
		grid-column: span 4;


	}

	.bronze {
		grid-column: span 3;



		& h2{
			font-size: 1.375rem;
		}

		& .content-wrapper{
			padding: .75rem;
		}

		& .content-wrapper > p{
				font-size: 1rem;
		}


		& img{
			aspect-ratio: 1/1;
			max-width: 5rem; 
			margin-inline: .75rem;
			margin-block: .75rem;
		}
	}

	.free{
		grid-column: span 3;
		padding: unset;



		& img{
			display: none;
		}

		& .btn-primary{
			font-size: 1rem;
			padding-inline: 0;
			padding-block: .35rem;
			background: unset; 
			text-decoration: underline;
			color: var(--text-link);
			line-height: 1.3;
			margin-bottom: -.3em;
			text-decoration-color: var(--brand-primary, #fec200);

			&:is(:hover, :focus-visible){
				background: unset; 
				transform: translatey(0);
				text-decoration: none;
				color: var(--text-link-hover);
				text-decoration: underline;
			}
		}

		& h2{
			font-size: 1.25rem;
		}

		& .content-wrapper > p{
			font-size: .875rem;
		}

		& .content-wrapper{
			height: 100%;
		}


	}

	.card{
		container-type: inline-size;
	}

	/* Container Queries */

	@container (max-width: 28rem){

			.card .content-footer-wrapper{
				flex-direction: column;
				align-items: flex-start;
				gap: .375rem;

				& p{
					order: -1
				}
		}
	}

	p.date{
		font-size: .75rem;
	}


	/* TABLET */

	@media (max-width: 1024px){

		.platinum{
			grid-template-columns: 1fr;

			& .content-wrapper{
				padding: 2.5rem;
			}
		}

		.gold{
			grid-column: span 12
		}

		.silver{
			grid-column: span 6;

		}

		.bronze{
			grid-column: span 6
		}

		.free{
			grid-column: span 4
		}
	}



	/* MOBILE */
	@media (max-width: 768px){

		.card .content-wrapper{
			padding: 1rem;
		}

		.card.platinum{

			& .content-wrapper{
				padding: 1.5rem 1rem 1rem 1rem;
			}

			& h2{
				font-size: 2rem;
			}

		}



		.card.gold{

		}

		.card.silver{
			grid-column: span 12;

		}

		.card.bronze{
			grid-column: span 12;

			& img{
				margin-inline: 1rem;
				margin-block-start: 1rem;
			}
		}

		.wrapper:has(.card.free){
			gap: 8px;
		}
		.card.free{
			grid-column: span 6;
		}
	}

	@media (max-width: 500px){
			.card.free{
			grid-column: span 12;
		}
	}
}