@import "/styles/layers/components/cards.css" layer(page);
@import "/styles/layers/components/byline.css" layer(page);
@import "/styles/layers/components/tags.css" layer(page);

@layer page {
	:root {
		--card-background-color: var(--color-white);
		--card-background-color-hover: var(--color-lime-1);
		--card-border-color: var(--color-light-gray-3);
		--card-border-color-hover: var(--color-lime-5);
		--card-foreground-color: var(--color-dark-gray-1);
		--card-foreground-color-hover: var(--color-lime-5);
		--card-image-background-color: var(--color-light-gray-1);
		--card-image-background-color-hover: var(--color-lime-2);
		--card-link-foreground-color: var(--color-dark-gray-2);
		--card-link-foreground-color-hover: var(--color-lime-6);
		--home-header-background-color: var(--color-indigo-1);
		--home-header-foreground-color: var(--color-indigo-6);
		--home-header-logo-background-color: var(--color-indigo-1);
		--home-header-logo-foreground-color: var(--color-dark-gray-1);
		--home-main-background-color: var(--color-light-gray-2);
		--home-main-foreground-color: var(--color-black);
		--home-musings-background-color: var(--color-light-gray-2);
		--home-musings-foreground-color: var(--color-dark-gray-1);
		--home-main-more-link-background-color: var(--color-light-gray-2);
		--home-main-more-link-foreground-color: var(--color-dark-gray-1);
		--home-page-message-box-background-color: var(--color-indigo-1);
		--home-page-message-box-foreground-color: var(--color-dark-gray-1);
		--horizontal-rule-stroke-color: var(--color-indigo-6);
		--testimonial-card-background-color: var(--color-light-gray-1);
		--testimonial-card-foreground-color: var(--color-dark-gray-1);
		--testimonials-background-color: var(--color-light-gray-3);
		--testimonials-foreground-color: var(--color-dark-gray-1);
		--home-musings-border-bottom: 4px solid var(--color-light-gray-3);
		--oe-arrow-color: var(--color-dark-gray-1);
		--oe-background-color: var(--color-indigo-2);
		--oe-foreground-color: var(--color-dark-gray-1);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--card-background-color: var(--color-black);
			--card-background-color-hover: var(--color-lime-6);
			--card-border-color: gray;
			--card-border-color-hover: var(--color-lime-2);
			--card-foreground-color: var(--color-light-gray-1);
			--card-foreground-color-hover: var(--color-lime-2);
			--card-image-background-color: var(--color-dark-gray-1);
			--card-image-background-color-hover: var(--color-lime-4);
			--card-link-foreground-color: var(--color-light-gray-2);
			--card-link-foreground-color-hover: var(--color-lime-1);
			--home-header-background-color: var(--color-dark-gray-1);
			--home-header-foreground-color: var(--color-light-gray-1);
			--home-header-logo-background-color: var(--color-dark-gray-1);
			--home-header-logo-foreground-color: var(--color-light-gray-1);
			--home-main-background-color: var(--color-dark-gray-3);
			--home-main-foreground-color: var(--color-light-gray-1);
			--home-musings-background-color: var(--color-dark-gray-3);
			--home-musings-foreground-color: var(--color-light-gray-1);
			--home-main-more-link-background-color: var(--color-dark-gray-3);
			--home-main-more-link-foreground-color: var(--color-light-gray-1);
			--home-page-message-box-background-color: var(--color-black);
			--home-page-message-box-foreground-color: var(--color-light-gray-1);
			--horizontal-rule-stroke-color: var(--color-indigo-1);
			--testimonial-card-background-color: var(--color-dark-gray-1);
			--testimonial-card-foreground-color: var(--color-light-gray-3);
			--testimonials-background-color: var(--color-dark-gray-2);
			--testimonials-foreground-color: var(--color-light-gray-1);
			--oe-arrow-color: var(--color-light-gray-2);
			--oe-background-color: var(--color-black);
			--oe-foreground-color: var(--color-light-gray-2);
		}
	}

	body > main {
		padding-block: 0;
	}

	header.home {
		background-color: var(--home-header-background-color);
		background-image: url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-png//site/hero-image.png);
		background-image: image-set(url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-avif/site/hero-image.avif) type("image/avif"),
				url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-webp/site/hero-image.webp) type("image/webp"),
				url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-png/site/hero-image.png) type("image/png"),
			);
		background-size: clamp(10rem, -3.5rem + 67.5vw, 64rem);
		background-repeat: no-repeat;
		background-position: top right;
		color: var(--home-header-foreground-color);
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
		grid-template-rows: min-content;
		padding-block-end: var(--space-xl);
		position: relative;
	}

	header.home > svg.jimmy {
		left: var(--jimmy-logo-left, 2rem);
		position: absolute;
		top: var(--jimmy-logo-top, 2rem);
	}

	header.home > .skip-links {
		grid-column: col-six / content-end;
	}

	header.home hgroup,
	header.home svg.horizontal-rule {
		grid-column: col-one / span 16;
	}

	.horizontal-rule {
		margin-block: var(--header-home-horizontal-rule-margin-block, 1rem);
		margin-inline-start: 0;
		padding-block: 0;
	}

	.horizontal-rule line {
		stroke: var(--horizontal-rule-stroke-color);
	}

	header.home hgroup {
		margin-block-start: clamp(7.5rem, 5.9375rem + 7.8125vw, 13.75rem);
	}

	header.home h1,
	header.home .subtitle {
		font-size: var(--step-4);
		font-weight: 500;
		line-height: 1.1;
		padding-block: 0;
		text-wrap: balance;
	}

	header.home .description {
		font-size: clamp(1rem, .4783rem + 2.6087vw, 2.5rem);
		font-weight: 250;
		grid-column: col-one / span 16;
		line-height: 1.3;
		margin-block: var(--header-home-description-margin-block, 0 var(--space-s));
		text-wrap: balance;
	}

	.home picture:has(#clipboard-image) {
		grid-column: col-one / span 8;
		margin-bottom: calc(var(--space-xl) * -1);
		z-index: 10;
	}

	header.home img#clipboard-image {
		height: auto;
		width: 230px;
	}

	.home #clipboard-image {
		position: absolute;
		right: 20rem;
		bottom: -4rem;
	}

	#new-to-oe {
		padding-block: var(--new-to-oe-padding-block, var(--space-2xl) var(--space-m));
	}

	@media (width < 89rem) {
		.home #clipboard-image {
			position: relative;
			right: unset;
			bottom: unset;
		}

		header.home {
			padding-block-end: 0
		}
	}

	/* 608 */
	@media (width > 38rem) {

		header.home hgroup,
		header.home svg.horizontal-rule {
			grid-column: col-one / span 13;
		}

		.horizontal-rule {
			margin-inline-start: 1rem;
		}
	}

	/* 960 */
	@media (width > 60rem) {

		header.home hgroup,
		header.home svg.horizontal-rule {
			grid-column: col-one / span 11;
		}

		header.home .description {
			grid-column: col-one / span 13;
		}
	}

	/* 1248 */
	@media (width > 78rem) {

		header.home hgroup,
		header.home svg.horizontal-rule {
			grid-column: col-one / span 10;
		}

		header.home .description {
			grid-column: col-one / span 10;
		}
	}

	#new-to-oe {
		--color-arrow: var(--oe-arrow-color);
		background-color: var(--oe-background-color);
		color: var(--oe-foreground-color);
	}

	#new-to-oe p.right-link {
		grid-column: col-one / span 16;
		text-align: right;
	}

	.right-link a {
		align-items: center;
		color: currentcolor;
		display: inline-flex;
		font-family: var(--metadata-font-family);
		font-style: italic;
		gap: 0.5rem;
		justify-content: flex-end;
		text-decoration: none;
		text-transform: uppercase;
		word-spacing: -0.25em;
	}

	.right-link a:visited {
		color: currentcolor;
	}

	.next-event {
		--color-arrow: var(--color-black);
		background-color: var(--next-event-message-background-color);
		color: var(--next-event-message-foreground-color);
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
		padding-block: var(--next-event-padding-block, var(--space-m));
	}

	.next-event > header {
		display: grid;
		grid-column: col-one / span 16;
		grid-template-columns: subgrid;
		line-height: 1;
		margin-block: 0;
		text-wrap: pretty;
	}

	.next-event > header hgroup {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		grid-column: col-one / col-thirteen;
		margin-block: 0;
	}

	.next-event > header p.coming-up {
		font-size: var(--step-0);
		font-weight: 500;
		margin: 0;
		width: 100%;
	}

	.next-event > header h2 {
		font-size: var(--step-1);
		font-weight: 500;
		margin: 0;
		width: 100%;
	}

	.next-event > header time.coming-on-date {
		font-family: var(--metadata-font-family);
		font-size: 1.1rem;
		font-style: italic;
		font-weight: 500;
		word-spacing: -0.25em;
	}

	.next-event > header a {
		align-items: center;
		color: currentcolor;
		display: flex;
		font-family: var(--metadata-font-family);
		font-style: italic;
		gap: 0.5rem;
		grid-column: col-thirteen / content-end;
		justify-content: flex-end;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		min-width: max-content;
		text-align: right;
		width: 100%;
		word-spacing: -0.25em;
	}

	@media (width < 66rem) {
		.next-event > header {
			grid-template-rows: auto auto;
			row-gap: 1.5rem;
		}

		.next-event > header h2,
		.next-event > header a {
			grid-column: col-one / span 16;
		}
	}

	.card h3 {
		font-size: var(--step-3);
		font-weight: 550;
		margin-block: 0;
	}

	.latest-thinks,
	.top-methods,
	.top-tools,
	.testimonials {
		--color-arrow: currentcolor;
		border-bottom: var(--section-bottom-border);
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
		padding-block: var(--home-cards-section-padding-block, var(--space-m) var(--space-l));
	}

	.latest-thinks > header,
	.latest-thinks > p,
	.top-methods > header,
	.top-methods > p,
	.top-tools > header,
	.top-tools > p,
	.testimonials > header,
	.testimonials > p {
		grid-column: col-one / col-thirteen;
	}

	.latest-thinks .card,
	.latest-thinks .more-link,
	.top-methods .cards,
	.top-methods .more-link,
	.top-tools .cards,
	.top-tools .more-link,
	.testimonials .testimonial-cards,
	.testimonials .more-link {
		grid-column: col-one / span 16;
	}

	.latest-thinks .card {
		column-gap: 2rem;
		display: grid;
		grid-template-areas:
			"image header"
			"image blurb"
			"byline link"
		;
		grid-template-columns: 53% 45%;
		margin-block: var(--latest-thinks-card-margin-block, var(--space-m));
		grid-template-rows: min-content 1fr min-content;
	}

	.latest-thinks .card .image {
		grid-area: image;
	}

	.latest-thinks .card .card-header {
		grid-area: header;
		height: min-content;
		margin-block: var(--latest-thinks-card-header-margin-block, var(--space-l) 0);
		padding: 0;
	}

	.latest-thinks .card .time-to-read {
		grid-area: time;
	}

	.latest-thinks .card .image img {
		width: 100%;
	}

	.latest-thinks .card .published-on {
		grid-area: pub;
	}

	.latest-thinks .card .read-more {
		grid-area: link;
	}

	.latest-thinks a.button-right,
	.top-tools a.button-right {
		color: currentcolor;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5rem;
		white-space: nowrap;
	}

	.latest-thinks a.button-right::after,
	.top-methods a.button-right::after,
	.top-tools a.button-right::after {
		content: "";
	}

	.latest-thinks .more-link,
	.top-methods .more-link,
	.top-tools .more-link,
	.testimonials .more-link {
		align-items: center;
		display: flex;
		font-family: var(--metadata-font-family);
		justify-content: flex-end;
		margin-block: var(--more-link-margin-block, var(--space-m));
		word-spacing: -0.25em;
	}

	.latest-thinks .more-link a,
	.top-methods .more-link a,
	.top-tools .more-link a,
	.testimonials .more-link a {
		align-items: center;
		color: currentcolor;
		display: flex;
		font-style: italic;
		gap: 0.5rem;
		justify-content: flex-end;
		text-decoration: none;
		text-transform: uppercase;
	}

	.home-page .message-box {
		background-color: var(--home-page-message-box-background-color);
		color: var(--home-page-message-box-foreground-color);
	}

	@media (width < 86rem) {
		:root {
			--card-image-margin-block: 0 var(--space-s);
			--latest-thinks-card-header-margin-block: 0;
		}

		.latest-thinks > header,
		.latest-thinks > p,
		.top-methods > header,
		.top-methods > p,
		.top-tools > header,
		.top-tools > p,
		.testimonials > header,
		.testimonials > p {
			grid-column: col-one / span 16;
		}

		.latest-thinks .card {
			grid-column: col-one / span 16;
			grid-template-areas:
				"image image"
				"header header"
				"blurb blurb"
				"byline link"
			;
			grid-template-columns: 1fr 1fr;
			row-gap: 0;
		}

		.latest-thinks .card img {
			width: 100%;
		}

		.latest-thinks .card .card-header {
			padding-block: 0 var(--space-l);
		}
	}

	@media (width < 36rem) {
		.latest-thinks .card {
			grid-template-areas:
				"image"
				"header"
				"blurb"
				"byline"
				"link"
			;
			grid-template-columns: 1fr;
			row-gap: 0;
		}

		.latest-thinks .read-more {
			margin-block-start: 1rem;
		}
	}

	.top-methods .cards,
	.top-tools .cards {
		margin-block: 2rem;
	}

	.top-methods .cards > ul {
		column-gap: 1rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		margin-inline: 0;
		padding: 0;
	}

	.top-tools .cards > ul,
	.testimonials .testimonial-cards {
		column-gap: 1rem;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
	}

	@media (width < 64rem) {
		.top-methods .cards > ul {
			row-gap: 1rem;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(2, 1fr);
		}

		.top-tools .cards > ul,
		.testimonials .testimonial-cards {
			row-gap: 1rem;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(3, 1fr);
		}
	}

	.top-tools .cards .card {
		display: grid;
		grid-template-areas:
			"image"
			"heading"
			"blurb"
			"link";
		grid-template-columns: 100%;
		grid-template-rows: auto;
		row-gap: 1rem;
	}

	.top-tools .card .image {
		aspect-ratio: 3 / 2;
		background-color: var(--card-image-background-color);
		border-radius: 15px;
		grid-area: image;
	}

	.top-tools .card .card-header {
		grid-area: heading;
		padding: 0;
		/* min-height: calc(var(--step-3) * 2.5); */
	}

	.top-tools .card .blurb {
		grid-area: blurb;
		margin-block: 0;
	}

	.top-tools .card .image img {
		aspect-ratio: 3 / 2;
		width: 100%;
	}

	.top-tools .card .read-more {
		grid-area: link;
		margin-block-start: var(--top-tools-card-read-more-margin-block-start, var(--space-s));
	}

	.testimonials {
		background-color: var(--testimonials-background-color);
		color: var(--testimonials-foreground-color);
	}

	.testimonial {
		background-color: var(--testimonial-card-background-color);
		border-radius: 15px;
		font-style: italic;
		padding: 1.5rem;
	}

	#not-sure-where,
	#not-sure-where header {
		background-color: var(--start-message-background-color);
		color: var(--start-message-foreground-color);
	}

	@media (width <=52rem) {
		header.home {
			background-image: url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-png//site/hero-blue-only.png);
			background-image: image-set(url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-avif//site/hero-blue-only.avif) type("image/avif"),
					url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-webp//site/hero-blue-only.webp) type("image/webp"),
					url(https://ik.imagekit.io/jbdhtp3sm/jimmyco/tr:f-png//site/hero-blue-only.png) type("image/png"),
				);
		}
	}
}