/**
 * Blanky Nordic — block styles (inc/blocks.php).
 *
 * @package Blanky_Nordic
 * @since   3.5.0
 */

/* --- core/post-template: Lead post ------------------------------------------ */

/*
 * The first post spans the row, on the first page only (core adds `paged` to
 * <body> from page 2). On the blog home that post is the sticky one when there
 * is one: core puts sticky posts first on page 1.
 *
 * The editor keeps a hidden copy of the selected post (<li style="display:
 * none">) inside the list, so :first-child can land on it. Visible items are
 * counted instead; browsers without `:nth-child(… of S)` fall back to
 * :first-child and only get the full-width span.
 */
body:not(.paged) .wp-block-post-template.is-style-lead > li:first-child {
	grid-column: 1 / -1;
}

@supports selector(:nth-child(1 of li)) {

	body:not(.paged) .wp-block-post-template.is-style-lead > li:first-child {
		grid-column: auto;
	}

	body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) {
		grid-column: 1 / -1;
	}

	body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card__title {
		font-size: var(--wp--preset--font-size--huge);
	}

	/* A full-row card: a portrait image would be taller than the screen. */
	body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card__image {
		aspect-ratio: 3 / 2;
	}

	/* Image left, text right — only when the post has an image to put there. */
	@media (width >= 782px) {

		body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card:has(> .nordic-card__image) {
			column-gap: var(--wp--preset--spacing--50);
			display: grid;
			grid-template-columns: 3fr 2fr;
			grid-template-rows: auto auto auto 1fr;
		}

		body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card:has(> .nordic-card__image) > .nordic-card__image {
			grid-row: 1 / -1;
		}

		body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card:has(> .nordic-card__image) > :not(.nordic-card__image) {
			grid-column: 2;
		}

		body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card:has(> .nordic-card__image) > .nordic-card__meta {
			margin-block-start: 0;
		}

		body:not(.paged) .wp-block-post-template.is-style-lead > li:nth-child(1 of :not([style*="display: none"], [style*="display:none"])) .nordic-card__excerpt {
			font-size: var(--wp--preset--font-size--base);
		}
	}
}

/* --- core/post-template: List ------------------------------------------------ */

.wp-block-post-template.is-style-list {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 1fr);
}

/* Image column on the left; the text rows sit in the second column. */
.is-style-list .nordic-card {
	column-gap: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	grid-template-rows: auto auto auto 1fr;
}

.is-style-list .nordic-card > .nordic-card__image {
	aspect-ratio: 1;
	grid-row: 1 / -1;
}

.is-style-list .nordic-card > :not(.nordic-card__image) {
	grid-column: 2;
}

.is-style-list .nordic-card > .nordic-card__meta {
	margin-block-start: 0;
}

@media (width >= 600px) {

	.is-style-list .nordic-card {
		grid-template-columns: 16rem minmax(0, 1fr);
	}

	.is-style-list .nordic-card > .nordic-card__image {
		aspect-ratio: 3 / 2;
	}
}

/* --- core/button: Nordic Outline / Nordic Ghost ------------------------------ */

.wp-block-button.is-style-nordic-outline > .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 0;
	color: var(--wp--preset--color--foreground);
	padding: 1.2rem 3rem;
}

.wp-block-button.is-style-nordic-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-nordic-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.wp-block-button.is-style-nordic-ghost > .wp-block-button__link {
	background-color: transparent;
	border: var(--nordic-frame);
	border-radius: 0;
	color: var(--wp--preset--color--foreground);
	padding: 1.2rem 3rem;
}

.wp-block-button.is-style-nordic-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-nordic-ghost > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--foreground);
}

/* --- core/image: Nordic Bordered ------------------------------------------- */

.wp-block-image.is-style-nordic-bordered img {
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 0;
}

/* --- core/separator: Nordic Gold -------------------------------------------- */

.wp-block-separator.is-style-nordic-gold {
	border: none;
	border-top: 2px solid var(--nordic-line);
	margin-inline: auto;
	max-width: 4rem;
	opacity: 1;
	width: 4rem;
}