/* ------------------------------ */
/*
/*     Group Style Variants
/*
/* ------------------------------ */

.is-style-devon__group-texture-triangles,
.is-style-devon__group-texture-triangles-gritty,
.is-style-devon__group-texture-triangles-gritty-wide,
.is-style-devon__group-texture-crest,
.is-style-devon__group-texture-chapel,
.is-style-devon__group-texture-stained-glass {
	position: relative;
	/* Contains the texture's z-indexes so children don't stack above later positioned siblings (e.g. a carousel's internal nav). */
	isolation: isolate;

	& > * {
		position: relative;
		z-index: 2;
	}

	&::after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
}


.is-style-devon__group-texture-triangles,
.is-style-devon__group-texture-triangles-gritty,
.is-style-devon__group-texture-triangles-gritty-wide {
	&::after {
		background-repeat: repeat-y;
		background-position: right center;
	}
}

.is-style-devon__group-texture-triangles {
	&::after {
		background-image: url(/wp-content/themes/devon-prep/assets/images/texture-triangles.svg);
	}
}

.is-style-devon__group-texture-triangles-gritty {
	&::after {
		background-image: url(/wp-content/themes/devon-prep/assets/images/texture-triangles-gritty.svg);
	}
}

.is-style-devon__group-texture-triangles-gritty-wide {
	&::after {
		opacity: 0.4;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: right center;
		background-image: url(/wp-content/themes/devon-prep/assets/images/texture-triangles-gritty-wide.svg);
	}
}

.is-style-devon__group-texture-crest {
	&::after {
		background-image: url(/wp-content/themes/devon-prep/assets/images/texture-crest.svg);
		background-repeat: no-repeat;
		background-position: bottom left;
	}
}

.is-style-devon__group-texture-chapel,
.is-style-devon__group-texture-stained-glass {
	background-color: var(--wp--custom--color-primitives--blue-primary);

	&::after {
		background-repeat: no-repeat;
		background-size: cover;
		background-blend-mode: overlay, normal;
		background-color: var(--wp--custom--color-primitives--blue-primary);
	}
}

.is-style-devon__group-texture-chapel::after {
	background-image: url(/wp-content/themes/devon-prep/assets/images/texture-chapel.jpg), linear-gradient(0deg, var(--wp--custom--color-primitives--blue-dark) 0%, var(--wp--custom--color-primitives--blue-dark) 100%);
}

.is-style-devon__group-texture-stained-glass::after {
	background-image: url(/wp-content/themes/devon-prep/assets/images/texture-stained-glass.jpg), linear-gradient(0deg, var(--wp--custom--color-primitives--blue-dark) 0%, var(--wp--custom--color-primitives--blue-dark) 100%);
}

/* ------------------------------ */
/*
/*      Group Patterns
/*
/* ------------------------------ */

/* ------------------------------ */
/* Landing Row
/* ------------------------------ */
.devon__landing-row {
    & > .wp-block-group {
        padding-top: var(--wp--custom--layout--landing-row-padding);
        padding-bottom: var(--wp--custom--layout--landing-row-padding);
    }

    /* Figma gives rows with a tinted inner background half the usual vertical padding. */
    &.devon__landing-row--compact > .wp-block-group {
        padding-top: var(--wp--preset--spacing--four-x-large);
        padding-bottom: var(--wp--preset--spacing--four-x-large);
    }
}

/* ------------------------------ */
/* Section Intro
/* ------------------------------ */

.devon__section-intro--small {
    .wp-block-paragraph {
        /* Wrap to new row, but only 5 columns wide. */
        grid-column: 1 / span 5;
    }
}

/* Image variants: image has a specific position/layout. */
.devon__section-intro--image {
    .wp-block-paragraph {
        grid-column: 3 / span 6;
    }
    .wp-block-image {
        grid-row: 1 / span 2;
        grid-column: 9 / span 4;
    }
}

/* Expanded variant: image touches landing row edges on larger screens */
@media (width >= 1000px) {
.devon__landing-row > .wp-block-group > .devon__section-intro--image-expanded {
        .wp-block-image {
            margin-top: calc(var(--wp--custom--layout--landing-row-padding) * -1);
            margin-right: calc(var(--wp--custom--layout--root-padding) * -1);
        }
    }
}

/* On medium/tablet sized screens, let all headings/paragraphs out to 8 columns wide. */
@media (600px <= width <= 1000px) {
    .devon__section-intro {
        & > .wp-block-heading,
        & > .wp-block-paragraph {
            /* Important to override WP and any editor settings that may break responsive behavior. */
            grid-column: span 8 !important;
        }
    }
}

/* On small screens, all elements fill the full width. */
@media (width < 600px) {
    .devon__section-intro > * {
        /* Important to override WP and any editor settings that may break responsive behavior. */
        grid-column: span 12 !important;

        /* Image follows content. */
        &.wp-block-image {
            grid-row: auto;
        }
    }
}

/* ------------------------------ */
/* Text Highlight
/* ------------------------------ */

.devon__text-highlight {
    padding: var(--wp--custom--layout--block-gap);

    .devon__text-highlight__heading {
        font-size: var(--wp--preset--font-size--heading-four);
    }
}

/* ------------------------------ */
/* Routing Cards
/* ------------------------------ */
.devon__routing-card {
	padding: var(--wp--custom--layout--routing-card-padding);

	/* Icon Routing Card */
	&.devon__routing-card--icon {
		.icon-container {
			padding: var(--wp--preset--spacing--small);
		}

		.devon__routing-card--icon__heading {
			font-size: var(--wp--preset--font-size--heading-four);
		}
	}

	/* Clipped Routing Card */
	&.devon__routing-card--clip {
		.wp-block-image {
			margin: 0;

			img {
				width: 100%;
			}
		}

		.devon__routing-card--clip__heading {
			font-size: var(--wp--preset--font-size--heading-three);

			/* The heading is a link for routing, but reads as a plain headline in the scheme's headline color, as on the overlay card. */
			a {
				color: inherit;
				text-decoration: none;
			}

			/* Figma tucks the description tight under the heading, closer than the card's block gap. */
			& + * {
				margin-block-start: var(--wp--preset--spacing--small);
			}
		}
	}
}

/* Clipped card grid: stacks like the overlay card grid as columns get too narrow. */
.devon__routing-card-clip-grid.wp-block-group {
	@media (width < 1000px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (width < 600px) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cards start stepped down as in Figma and settle into an even row once assets/js/routing-card-clip-grid.js marks the grid in view. Front end only: the editor never loads that script. */
@media (width >= 1000px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
	body:not(.editor-styles-wrapper) .devon__routing-card-clip-grid {
		& > * {
			transition: translate 0.8s ease-out;
		}

		&:not(.is-in-view) {
			& > :nth-child(2) {
				translate: 0 var(--wp--preset--spacing--four-x-large);
			}

			& > :nth-child(3) {
				translate: 0 calc(var(--wp--preset--spacing--four-x-large) * 2);
			}
		}
	}
}

/* Overlay card grid: intro spans its own row, then cards stack, as columns get too narrow. */
.devon__routing-card-grid.wp-block-group {
	@media (width < 1000px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		& > .devon__routing-card-grid__intro {
			grid-column: 1 / -1;
		}
	}

	@media (width < 600px) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------ */
/* Lined Text
/* ------------------------------ */
.devon__lined-text {
    border-left: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--blue-medium);
    padding: var(--wp--preset--spacing--extra-large) 0 var(--wp--preset--spacing--two-x-large-static) var(--wp--preset--spacing--extra-large);

    .devon__lined-text__heading {
        font-size: var(--wp--preset--font-size--heading-four);
        color: var(--wp--preset--color--blue-dark);
        text-transform: capitalize;
    }
}

/* ------------------------------ */
/* CTA Large
/* ------------------------------ */
.devon__cta-large__heading {
    font-size: var(--wp--preset--font-size--display-four);
    letter-spacing: var(--wp--custom--typography--letter-spacing--jaro-caps);
}

.devon__cta-large > .wp-block-buttons {
    margin-top: var(--wp--preset--spacing--two-x-large-static);
}

/* Outside a landing row, the texture group has no padding of its own to give the CTA breathing room. */
.is-style-devon__group-texture-stained-glass > .devon__cta-large {
    padding-top: var(--wp--custom--layout--landing-row-padding);
    padding-bottom: var(--wp--custom--layout--landing-row-padding);
}

/* ------------------------------ */
/* Media Section Intro
/* ------------------------------ */
.devon__media-section-intro {
    .devon__media-section-intro__heading {
        max-width: var(--wp--custom--page-grid--column-eight);
        font-size: var(--wp--preset--font-size--display-two);
        letter-spacing: var(--wp--custom--typography--letter-spacing--jaro-display);
    }

    .devon__media-section-intro__subheading {
        font-size: var(--wp--preset--font-size--heading-two);
    }

    /* Whatever block fills the media slot (video, image, embed, ...) spans the slot rather than its own natural size */
    .devon__media-section-intro__media :is(img, iframe) {
        width: 100%;
    }

    /* Copy below the media sits tighter than the section-level gap */
    /* Keyed off the media, not the subheading, so the copy stays tight when an editor deletes the subheading */
    & > .devon__media-section-intro__media ~ * + * {
        margin-block-start: 1em;
    }

    & > .devon__media-section-intro__subheading + * {
        margin-block-start: var(--wp--preset--spacing--small);
    }
}

/* Outside a landing row, the texture group has no padding of its own to give the section breathing room. */
.is-style-devon__group-texture-chapel:not(.devon__landing-row > *) > .devon__media-section-intro {
    padding-top: var(--wp--custom--layout--landing-row-padding);
    padding-bottom: var(--wp--custom--layout--landing-row-padding);
}

/* ------------------------------ */
/* Stats
/* ------------------------------ */
.devon__stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1;
    padding: var(--wp--preset--spacing--extra-large) var(--wp--preset--spacing--base);
}

/* ------------------------------ */
/* Stat Grid
/* ------------------------------ */
.devon__stat-grid {
    /* Equal rows so one card's overflowing copy grows every card, not just its own row. */
    grid-auto-rows: 1fr;

    & > .devon__stat {
        grid-column: span 3;

        /* Aspect-ratio items don't stretch by default; stretching only one axis would let the ratio resize the other. */
        align-self: stretch;
        justify-self: stretch;
    }

    & > .devon__stat-grid__image {
        grid-column: span 6;
        grid-row: span 2;
        margin: 0;

        /* Size containment keeps the image's intrinsic ratio out of row sizing; the fallback only avoids 0px if no stats remain. */
        contain: size;
        contain-intrinsic-height: 80px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

/* On medium/tablet sized screens, stats form a 2x2 block with the image after it. */
@media (600px <= width <= 1000px) {
    .devon__stat-grid {
        & > .devon__stat {
            grid-column: span 6;
        }

        /* Order moves the image last in auto-placement; its row still matches the stat rows' height. */
        & > .devon__stat-grid__image {
            order: 1;
            grid-column: span 12;
            grid-row: auto;
        }
    }
}

/* On small screens, stats stack in one column with the image after them. */
@media (width < 600px) {
    .devon__stat-grid {
        & > .devon__stat {
            grid-column: span 12;
        }

        & > .devon__stat-grid__image {
            order: 1;
            grid-column: span 12;
            grid-row: auto;
        }
    }
}

/* ------------------------------ */
/* Large Image
/* ------------------------------ */

/* Whatever precedes the image paints over the strip the image tucks beneath */
:has(+ .devon__large-image) {
    position: relative;
    z-index: 1;
}

/* Width comes from the block's own alignfull support; this only positions the caption over it */
.devon__large-image {
    /* Named once so the tuck and the caption offset below it can't drift apart */
    --devon-large-image-tuck: var(--wp--preset--spacing--five-x-large);

    position: relative;

    /* Tucks up into the section above it; the block above is lifted over the strip below */
    /* Tripled &: outspecifies the gapless-page and WP layout rules that would otherwise zero this margin */
    &&& {
        margin-top: calc(var(--devon-large-image-tuck) * -1);
    }

    .devon__large-image__image img {
        width: 100%;
        height: auto;
    }

    /* Left edge and width realign to the page grid the image bleeds past */
    .devon__large-image__caption {
        position: absolute;
        /* Butts against the bottom edge of the section above; the zeroed margin keeps that seam flush */
        top: var(--devon-large-image-tuck);
        margin-block-start: 0;
        left: max(var(--wp--custom--layout--root-padding), calc(50% - var(--wp--custom--page-grid--full) / 2));
        max-width: min(var(--wp--custom--page-grid--column-six), calc(100% - var(--wp--custom--layout--root-padding) * 2));
        padding: var(--wp--custom--layout--root-padding);
        background-color: var(--wp--preset--color--blue-primary);
        color: var(--wp--preset--color--white);
    }
}

/* ------------------------------ */
/* Quote
/* ------------------------------ */
.devon__quote {
    padding: var(--wp--preset--spacing--four-x-large);
    color: var(--wp--custom--color-primitives--blue-primary);

    .wp-block-quote {
        /* The parent theme's quote margins would inset it from the card edges. */
        margin: 0;
        max-width: var(--wp--custom--page-grid--column-nine);
        font-family: var(--wp--preset--font-family--factoria);
        text-transform: uppercase;

        & > * + * {
            margin-block-start: var(--wp--preset--spacing--two-x-large);
        }

        /* Direct children only, so a duplicated quote paragraph matches but the speaker's paragraphs don't. */
        & > .wp-block-paragraph {
            line-height: var(--wp--custom--typography--line-height--heading);
        }
    }

    .devon__quote__name {
        letter-spacing: var(--wp--custom--typography--letter-spacing--quote-attributor);
    }
}

/* Complex: image beside the quote, with the texture framing the image. */
.devon__quote--complex {
    padding: var(--wp--preset--spacing--two-x-large);

    &::after {
        background-position: left center;
    }

    & > .wp-block-image {
        grid-column: span 5;
        margin: 0;
    }

    & > .wp-block-quote {
        grid-column: span 6;
    }
}

/* On small screens, the quote follows the image at full width. */
@media (width < 600px) {
    .devon__quote--complex > * {
        /* Important to override WP and any editor settings that may break responsive behavior. */
        grid-column: span 12 !important;
    }
}

/* ------------------------------ */
/*
/*      Group Color Schemes
/*
/* ------------------------------ */

/* ------------------------------ */
/* Dark Scheme
/* ------------------------------ */
.has-blue-medium-background-color,
.has-blue-primary-background-color,
.has-blue-dark-background-color,
.has-blue-darker-background-color,
.has-emerald-background-color,
.has-gray-medium-background-color,
.has-black-background-color,
.is-style-devon__group-texture-chapel,
.is-style-devon__group-texture-stained-glass {

	color: var(--wp--custom--color-schemes--on-dark--text--default);

	a {
		color: var(--wp--custom--color-schemes--on-dark--link--text);
		&:hover {
			color: var(--wp--custom--color-schemes--on-dark--link--hover);
		}
		&:active {
			color: var(--wp--custom--color-schemes--on-dark--link--active);
		}
		&:focus,
		&:focus-visible {
			color: var(--wp--custom--color-schemes--on-dark--link--focus);
		}
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--wp--custom--color-schemes--on-dark--text--headline);
	}

	/* Buttons */
	.wp-element-button,
	.wp-block-button__link {
		background-color: var(--wp--custom--color-schemes--on-dark--button--background);
		border-color: var(--wp--custom--color-schemes--on-dark--button--background);
		color: var(--wp--custom--color-schemes--on-dark--button--text);

		&:hover {
			background-color: var(--wp--custom--color-schemes--on-dark--button--hover);
			color: var(--wp--custom--color-schemes--on-dark--text--default);
		}
		&:active {
			background-color: var(--wp--custom--color-schemes--on-dark--button--active);
		}
		&:focus,
		&:focus-visible {
			background-color: var(--wp--custom--color-schemes--on-dark--button--focus);
		}
	}

	/* Outline Buttons */
	.is-style-outline,
	.is-style-devon__button-outline-small,
	.is-style-devon__button-outline-arrow {
		.wp-block-button__link {
			color: var(--wp--custom--color-schemes--on-dark--text--default);
			background-color: transparent;
			border-color: var(--wp--custom--color-schemes--on-dark--text--default);

			&:hover {
				background-color: var(--wp--custom--color-schemes--on-dark--text--default);
				border-color: var(--wp--custom--color-schemes--on-dark--text--default);
				color: var(--wp--custom--color-schemes--on-dark--button--text);
			}

			&:active {
				color: var(--wp--custom--color-schemes--on-dark--text--default);
				background-color: var(--wp--custom--color-schemes--on-dark--button--outline-active);
				border-color: var(--wp--custom--color-schemes--on-dark--button--outline-active);
			}

			&:focus,
			&:focus-visible {
				color: var(--wp--custom--color-schemes--on-dark--text--default);
				background-color: var(--wp--custom--color-schemes--on-dark--button--outline-focus);
				border-color: var(--wp--custom--color-schemes--on-dark--button--outline-focus);
			}
		}
	}

	/* Outline Arrow Buttons */
	.is-style-devon__button-outline-arrow {
		.wp-block-button__link {
			&::after {
				background-color: var(--wp--custom--color-schemes--on-dark--text--default);
			}

			&:hover::after,
			&:active::after,
			&:focus::after,
			&:focus-visible::after {
				background-color: var(--wp--custom--color-schemes--on-dark--button--text);
			}
		}
	}

	/* Light Scheme
	/* Matches the default/unschemed color settings, so it only applies when a light
	/* bg group is nested inside a dark bg group. Nested here so specificity beats the
	/* dark rules above regardless of source order. Three-level+ nesting is unsupported. */
	.has-white-background-color,
	.has-gray-extra-light-background-color,
	.has-gray-light-background-color,
	.has-gray-background-color,
	.has-blue-light-background-color,
	.has-blue-pale-background-color,
	.has-bright-yellow-background-color,
	.has-clay-background-color {

		color: var(--wp--custom--color-schemes--on-light--text--default);

		a {
			color: var(--wp--custom--color-schemes--on-light--link--text);
			&:hover {
				color: var(--wp--custom--color-schemes--on-light--link--hover);
			}
			&:active {
				color: var(--wp--custom--color-schemes--on-light--link--active);
			}
			&:focus,
			&:focus-visible {
				color: var(--wp--custom--color-schemes--on-light--link--focus);
			}
		}

		h1, h2, h3, h4, h5, h6 {
			color: var(--wp--custom--color-schemes--on-light--text--headline);
		}

		/* Buttons */
		.wp-element-button,
		.wp-block-button__link {
			background-color: var(--wp--custom--color-schemes--on-light--button--background);
			border-color: var(--wp--custom--color-schemes--on-light--button--background);
			color: var(--wp--custom--color-schemes--on-light--button--text);

			&:hover {
				background-color: var(--wp--custom--color-schemes--on-light--button--hover);
				border-color: var(--wp--custom--color-schemes--on-light--button--hover);
				color: var(--wp--custom--color-schemes--on-light--button--text);
			}
			&:active {
				background-color: var(--wp--custom--color-schemes--on-light--button--active);
				border-color: var(--wp--custom--color-schemes--on-light--button--active);
			}
			&:focus,
			&:focus-visible {
				background-color: var(--wp--custom--color-schemes--on-light--button--focus);
				border-color: var(--wp--custom--color-schemes--on-light--button--focus);
			}
		}

		/* Outline Buttons */
		.is-style-outline,
		.is-style-devon__button-outline-small,
		.is-style-devon__button-outline-arrow {
			.wp-block-button__link {
				color: var(--wp--custom--color-schemes--on-light--button--outline-text);
				background-color: var(--wp--custom--color-primitives--white);
				border-color: var(--wp--custom--color-schemes--on-light--button--background);

				&:hover {
					background-color: var(--wp--custom--color-schemes--on-light--button--background);
					border-color: var(--wp--custom--color-schemes--on-light--button--background);
					color: var(--wp--custom--color-schemes--on-light--button--text);
				}

				&:active {
					color: var(--wp--custom--color-schemes--on-light--button--text);
					background-color: var(--wp--custom--color-schemes--on-light--button--outline-active);
					border-color: var(--wp--custom--color-schemes--on-light--button--outline-active);
				}

				&:focus,
				&:focus-visible {
					color: var(--wp--custom--color-schemes--on-light--button--text);
					background-color: var(--wp--custom--color-schemes--on-light--button--outline-focus);
					border-color: var(--wp--custom--color-schemes--on-light--button--outline-focus);
				}
			}
		}

		/* Outline Arrow Buttons */
		.is-style-devon__button-outline-arrow {
			.wp-block-button__link {
				&::after {
					background-color: var(--wp--custom--color-schemes--on-light--button--background);
				}

				&:hover::after,
				&:active::after,
				&:focus::after,
				&:focus-visible::after {
					background-color: var(--wp--custom--color-schemes--on-light--button--text);
				}
			}
		}
	}
}