/**
 * Timeline Section Styles (History)
 *
 * CSS for history/timeline page sections.
 * Loaded conditionally when core/group blocks are present.
 *
 * @package Condor
 */

/* ==========================================================================
   History Section Container (.history)
   ========================================================================== */

section.history {
	padding: 6rem 0;

	@media (min-width: 1024px) {
		padding: 6rem 0 12rem 0;
	}

	.section-header {
		text-align: center;
	}

	/* ==========================================================================
	   Event Items (.event)
	   ========================================================================== */

	.event {
		display: grid;
		grid-template-areas:
			"a b b"
			"a c c";
		grid-template-columns: 2px 1fr 1fr;
		gap: 0px var(--wp--preset--spacing--70);

		@media (min-width: 768px) {
			grid-template-columns: 1fr 2px 1fr;
			grid-template-areas: "a b c";
			gap: 50px;
		}

		/* Spacing for consecutive events */
		+ .event .info {
			padding-top: var(--wp--preset--spacing--40);

			@media (min-width: 768px) {
				padding-top: 8rem;
			}
		}

		+ .event .photo {
			padding-top: 6rem;

			@media (min-width: 768px) {
				padding-top: 8rem;
			}
		}

		+ .event .year {
			padding-top: 3rem;

			@media (min-width: 768px) {
				padding-top: 12rem;
			}

			&::after {
				top: 3rem;

				@media (min-width: 768px) {
					top: 12rem;
				}
			}
		}

		/* First event special spacing */
		&:first-of-type .photo {
			padding-top: 3rem;

			@media (min-width: 768px) {
				padding-top: auto;
			}
		}

		&:first-of-type .info {
			padding-top: var(--wp--preset--spacing--40);
		}

		/* ==========================================================================
		   Event Info (.info)
		   ========================================================================== */

		.info {
			grid-area: c;
			max-width: 420px;

			@media (min-width: 768px) {
				text-align: right;
				margin-left: auto;
				grid-area: a;
			}

			.headline {
				padding-bottom: var(--wp--preset--spacing--40);
				width: 100%;

				@media (min-width: 768px) {
					padding-top: 100px;
				}

				h3 {
					font-weight: bold;
					color: var(--wp--preset--color--bright-red);
					font-style: italic;
					font-size: var(--wp--preset--font-size--2-x-large);
				}
			}

			.copy {
				width: 100%;
			}
		}

		/* ==========================================================================
		   Year Marker (.year)
		   ========================================================================== */

		.year {
			background: rgba(255, 255, 255, 0.5);
			grid-area: a;
			position: relative;

			@media (min-width: 768px) {
				grid-area: b;
			}

			&::after {
				content: '';
				display: block;
				width: 16px;
				height: 16px;
				background: rgb(131, 131, 131);
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: -7px;
				z-index: 10;
			}

			.label {
				display: inline-block;
				position: absolute;
				left: 15px;
				transform: translateY(-5px);
				font-size: var(--wp--preset--font-size--2-x-large);
				color: var(--wp--preset--color--white);
				font-style: italic;
				font-weight: bold;

				@media (min-width: 768px) {
					left: -75px;
				}
			}
		}

		/* ==========================================================================
		   Photo (.photo)
		   ========================================================================== */

		.photo {
			grid-area: b;
			max-width: 400px;
			margin-right: auto;

			@media (min-width: 768px) {
				grid-area: c;
			}
		}
	}

	/* ==========================================================================
	   Tablet Layout - Alternating Sides
	   ========================================================================== */

	@media (min-width: 768px) {
		/* Even events: flip layout */
		.event:nth-child(even) .info {
			grid-area: c;
			text-align: left;
			margin-right: auto;
			margin-left: 0;
		}

		.event:nth-child(even) .photo {
			grid-area: a;
			margin-left: auto;
			margin-right: 0;
		}

		.event:nth-child(even) .year .label {
			left: auto;
			right: -75px;
		}
	}

	/* ==========================================================================
	   Small Events (.event-small)
	   ========================================================================== */

	.event + .event-small .info {
		padding-top: 100px;

		@media (min-width: 768px) {
			padding-top: 185px;
			grid-area: c;
			text-align: left;
			margin-left: 0;
		}

		.copy p {
			font-size: var(--wp--preset--font-size--medium);
			line-height: 1.5em;
			font-style: italic;
			color: rgba(255, 255, 255, 0.5);
		}
	}

	.event-small:nth-child(even) .info {
		grid-area: a;
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}

	.event + .event-small .year {
		@media (min-width: 768px) {
			padding-top: 200px;
		}

		.label {
			color: var(--wp--preset--color--white);
			opacity: 0.25;
		}
	}
}