/*=============================================
=         Loop patterns (v2 composable)        =
=============================================*/

// The Query block is the layout root, so sub-blocks respond to its width
// (container-type is set on .affr-layout).
.affr-layout.affr-layout--loop {
	container-type: inline-size;

	// Match the legacy .affr-title look for core/post-title inside loops.
	// Sizes are defaults: a font size picked in the editor overrides them.
	.wp-block-post-title {
		font-weight: 700;
		line-height: 1.3;
		margin-top: 0;
	}

	// Each loop item is an <li>, so themes' nested-list rules (e.g.
	// ".entry-content li ul { margin-left: 30px }") would indent the review
	// lists inside it.
	:is(.affr-infolist, .affr-list) ul {
		margin-left: 0;
	}

	&.affr-layout--grid .wp-block-post-title {
		font-size: clamp(1.125rem, 2vw + 1rem, 1.75rem);
	}

	&.affr-layout--table .wp-block-post-title,
	&.affr-layout--table-large .wp-block-post-title {
		font-size: 1.125rem;
	}
}

// Card look of the legacy grid, shared by the grid and the v2-only loops.
// (The legacy tables use their own; see the table sections.)
.affr-layout.affr-layout--grid,
.affr-layout.affr-layout--loop-large,
.affr-layout.affr-layout--loop-small,
.affr-layout.affr-layout--compact,
.affr-layout.affr-layout--compare {
	line-height: 1.6;

	.affr-layout__item {
		margin-bottom: var(--affr-gap, 1.875rem);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
		transition: box-shadow 300ms ease-out;

		&:hover {
			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
		}
	}

	.affr-layout__main {
		padding: var(--affr-gap, 1.875rem);
		min-width: 0;
	}

	.affr-layout__side {
		position: relative;
		min-width: 0;
	}

	// Constrain thumbs inside loop columns so they never overflow.
	.affr-layout__thumb,
	.affr-layout__logo {
		min-width: 0;

		.affr-thumb {
			max-width: 100%;

			img {
				max-width: 100%;
				height: auto;
			}
		}
	}

	.affr-rating {
		margin: 15px 0;
	}

	.affr-bonus {
		margin-bottom: 20px;
	}

	.affr-terms {
		margin-top: 15px;
	}

	// A margin picked in the editor (inline on the block wrapper) replaces
	// the default spacing above instead of adding to it.
	:is(.wp-block-affreviews-rating-stars, .wp-block-affreviews-bonus-badge, .wp-block-affreviews-review-terms)[style*="margin"]
		:is(.affr-rating, .affr-bonus, .affr-terms) {
		margin: 0;
	}
}

// ===== Large loop =====
.affr-layout.affr-layout--loop-large {
	// Inner spacing so atomic blocks breathe like the legacy layouts.
	.affr-layout__content {
		padding: var(--affr-gap, 1.875rem);

		> .wp-block-group {
			margin-bottom: 20px;
		}

		.affr-pros,
		.affr-cons {
			margin-bottom: 20px;
		}
	}

	.affr-layout__item {
		display: flex;

		@include affr-columns(
			$bases: (
				"affr-layout__thumb": 33.33%,
				"affr-layout__content": 66.66%
			),
			$stack: (
				880px: (
					"affr-layout__thumb",
					"affr-layout__content"
				)
			)
		);
	}
}

// ===== Small loop =====
.affr-layout.affr-layout--loop-small {
	.affr-layout__item {
		display: flex;

		@include affr-columns(
			$bases: (
				"affr-layout__main": 66.66%,
				"affr-layout__side": 33.33%
			),
			$stack: (
				880px: (
					"affr-layout__main",
					"affr-layout__side"
				)
			)
		);
	}

	// Compact side column behaves like the legacy table bonus column.
	.affr-layout__side {
		background: rgba(0, 0, 0, 0.02);
		min-width: 0;

		// Let the CTA shrink inside the narrow side column instead of
		// forcing it wide and squeezing the main column.
		.affr-button-el {
			display: inline-block;
			width: auto;
			max-width: 100%;
			white-space: nowrap;
		}
	}

	// Space between the logo and the title column (the nested columns have no
	// gap, so the title would touch the logo).
	.affr-layout__logo + .wp-block-column {
		padding-left: 20px;

		@container (max-width: 600px) {
			padding-left: 0;
		}
	}

	// The pros list sits in a padded column: theme block margins would only
	// make the row taller.
	.affr-layout__pros .wp-block-affreviews-pros-cons-list {
		margin: 0;
	}

	// The nested logo/title/pros columns inside the main column have no
	// dedicated class, so target them structurally and stack on narrow
	// containers.
	.affr-layout__main .wp-block-columns {
		@include affr-columns(
			$bases: (),
			$stack: (
				600px: (
					"affr-layout__logo",
					"affr-layout__pros"
				)
			)
		);
	}

	@container (max-width: 600px) {
		.affr-800-text-align-center {
			text-align: left !important;
		}
	}
}

// ===== Grid loop =====
.affr-layout.affr-layout--grid {
	// Core sizes the Post Template grid on a *viewport* media query, which
	// ignores the block's own width. Step the columns down with the container
	// instead, like the legacy grid block: 4 -> 3 at 1000px, 3 -> 2 at 800px,
	// everything -> 1 at 600px.
	.wp-block-post-template-is-layout-grid {
		&.columns-4 {
			@container (max-width: 1000px) {
				grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			}
		}

		&.columns-3,
		&.columns-4 {
			@container (max-width: 800px) {
				grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			}
		}

		@container (max-width: 600px) {
			&[class*="columns-"] {
				grid-template-columns: 1fr !important;
			}
		}
	}

	// Card: legacy .affr-grid-item. Padding and block spacing are set on the
	// group in the pattern; margins below collapse like the legacy markup.
	.affr-layout__item {
		height: 100%;
		margin-bottom: 0;
		text-align: center;
		background-color: var(--affr-box-bg-color);

		.wp-block-post-title {
			margin: 0;
		}

		.affr-thumb {
			height: 250px;
			margin-bottom: 15px;

			&.affr-thumb--box {
				margin-left: calc(-1 * var(--affr-gap, 1.875rem));
				margin-right: calc(-1 * var(--affr-gap, 1.875rem));
				width: auto;
			}

			@media (max-width: 781px) {
				height: 200px;

				&.affr-thumb--circle {
					height: auto;
				}
			}
		}

		// On the block wrapper (normal flow) so it collapses with the
		// neighbouring margins like the legacy .affr-list.
		.wp-block-affreviews-pros-cons-list {
			margin: 20px 0;

			.affr-pros-cons-wrapper {
				display: block;
			}
		}
	}
}

// ===== Compact loop (v2 only) =====
// Narrow list for sidebars: small logo | title + rating, then the CTA.
.affr-layout.affr-layout--compact {
	.affr-layout__item {
		margin-bottom: 0;
		background-color: var(--affr-box-bg-color);
	}

	.affr-layout__row {
		align-items: center;
	}

	// The logo block is sized for cards (250px tall); here it is a thumbnail.
	// A fixed box keeps every row the same height whatever the image's shape.
	.wp-block-affreviews-logo-thumbnail {
		flex: 0 0 38%;
		max-width: 120px;

		.affr-thumb {
			height: 80px;
			padding: 8px;

			// The image may be wrapped in a link: size the link to the box so
			// the image's max-height has something to resolve against.
			> a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
			}

			img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}

			&.affr-thumb--circle {
				height: auto;
			}
		}
	}

	.affr-layout__info {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wp-block-post-title {
		margin: 0;
		font-size: 1rem;
	}

	.affr-rating {
		margin: 0;
	}

	// Smaller stars so five fit next to the logo in narrow sidebars (unless a
	// font size is picked for the block, which scales them instead).
	.wp-block-affreviews-rating-stars:not([class*="font-size"]) .affr-rating-icons svg {
		width: 16px;
		height: 16px;
		margin: 0 1px;
	}

	// Very narrow: logo above the title and rating.
	@container (max-width: 240px) {
		.affr-layout__row {
			flex-wrap: wrap !important;
		}

		.wp-block-affreviews-logo-thumbnail {
			flex-basis: 100%;
			max-width: 100%;
		}
	}
}

// ===== Comparison loop (v2 only) =====
// Side-by-side cards whose spec rows line up across reviews.
.affr-layout.affr-layout--compare {
	.affr-layout__item {
		height: 100%;
		margin-bottom: 0;
		text-align: center;
		background-color: var(--affr-box-bg-color);
	}

	.wp-block-post-title {
		margin: 0;
		font-size: 1.125rem;
	}

	// A fixed box shorter than the card thumbs' 250px, with the image fitted
	// inside it, so logos of any shape keep the spec rows lined up.
	.wp-block-affreviews-logo-thumbnail .affr-thumb {
		height: 140px;
		padding: 15px;

		// The image may be wrapped in a link: size the link to the box so
		// the image's max-height has something to resolve against.
		> a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}

		img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}

		&.affr-thumb--circle {
			height: auto;
		}
	}

	.affr-rating,
	.affr-bonus,
	.affr-terms {
		margin: 0;
	}

	// Label above value, so the rows fit narrow cards.
	.affr-infolist li {
		display: block;
		padding: 8px 10px;
		text-align: center;

		.affr-infolist__title {
			display: block;
			width: auto;
			padding: 0;
		}
	}

	// Column count steps down with the container, like the grid.
	.wp-block-post-template-is-layout-grid {
		&.columns-3,
		&.columns-4 {
			@container (max-width: 720px) {
				grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			}
		}

		@container (max-width: 480px) {
			&[class*="columns-"] {
				grid-template-columns: 1fr !important;
			}
		}
	}
}

// ===== Table loops =====
.affr-layout.affr-layout--table,
.affr-layout.affr-layout--table-large {
	// Let columns shrink so the percentage splits hold.
	.affr-layout__rating,
	.affr-layout__content,
	.affr-layout__bonus {
		min-width: 0;
	}
}

// Table style 1: legacy .affr-table-wrapper. Row groups: item = body | bonus,
// body = thumb | rating | pros, then terms on its own line.
.affr-layout.affr-layout--table {
	.affr-layout__item {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		margin-bottom: 20px;
		background-color: var(--affr-box-bg-color);

		@container (max-width: 880px) {
			flex-wrap: wrap;
		}
	}

	.affr-layout__body {
		flex: 1 0 0%;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0;

		@container (max-width: 680px) {
			flex-direction: column;
		}
	}

	.affr-layout__thumb {
		width: 32%;
		position: relative;

		@container (max-width: 680px) {
			width: 100%;
		}

		.wp-block-affreviews-logo-thumbnail,
		.affr-thumb {
			height: 100%;
		}
	}

	.affr-layout__rating {
		width: 28%;
		padding: 25px;

		@container (max-width: 680px) {
			width: 100%;
			text-align: center;
		}
	}

	.affr-layout__pros {
		width: 40%;
		padding: 25px 25px 25px 0;

		@container (max-width: 680px) {
			width: 100%;
			padding: 0 25px 25px;
		}
	}

	.affr-layout__terms {
		width: 100%;
		padding: 15px;

		@container (max-width: 880px) {
			display: none;
		}
	}

	.affr-layout__bonus {
		width: 25%;
		flex: 0 0 auto;
		padding: 25px;
		text-align: center;
		background: rgba(0, 0, 0, 0.02);

		@container (max-width: 880px) {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
		}

		// The terms move here once the bonus column drops below the row.
		.wp-block-affreviews-review-terms {
			display: none;

			@container (max-width: 880px) {
				display: block;
				margin-top: 20px;
			}
		}
	}

	.wp-block-post-title {
		margin: 0 0 5px;
	}

	.affr-link {
		margin: 0 0 10px;
	}

	.affr-list li {
		font-size: 1rem;

		svg {
			width: 28px;
			height: 28px;
		}
	}

	.affr-bonus {
		margin-bottom: 20px;

		@container (max-width: 880px) {
			margin-bottom: 0;
		}
	}

	.wp-block-affreviews-affiliate-button {
		@container (max-width: 880px) {
			margin-top: 15px;
		}
	}
}

// Table large style 1: legacy .affr-table-wrapper--large. Item = thumb | wide,
// then terms; wide = rows of parts 30px apart.
.affr-layout.affr-layout--table-large {
	.affr-layout__item {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0;
		margin-bottom: 20px;
		background-color: var(--affr-box-bg-color);
	}

	.affr-layout__thumb {
		width: 32%;
		position: relative;

		@container (max-width: 680px) {
			width: 100%;
		}

		.wp-block-post-title {
			margin: 0;
			padding: 15px 15px 0;
			text-align: center;
		}
	}

	.affr-layout__wide {
		flex: 1 0 0%;
		padding: 25px;
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.affr-layout__row {
		display: flex;
		gap: 20px;

		@container (max-width: 600px) {
			flex-direction: column;
		}

		&.affr-layout__row--center {
			align-items: center;
		}
	}

	// Pros and cons as two 40% lists, like the legacy .affr-list columns.
	.wp-block-affreviews-pros-cons-list {
		flex: 1 1 auto;

		.affr-pros-cons-wrapper {
			flex-wrap: nowrap;
			gap: 20px;

			@container (max-width: 600px) {
				flex-direction: column;
			}
		}

		.affr-pros-cons-col {
			flex: 0 1 auto;
			width: 40%;

			@container (max-width: 600px) {
				width: 100%;
			}
		}
	}

	.wp-block-affreviews-affiliate-button {
		width: 100%;
		max-width: 270px;
	}

	.affr-link {
		@container (max-width: 600px) {
			margin: 0;
		}
	}

	.affr-rating-icons {
		@container (max-width: 600px) {
			text-align: center;
		}
	}

	.affr-layout__terms {
		width: 100%;
		padding: 15px 25px;
		background: rgba(0, 0, 0, 0.02);
	}
}

// ===== Numbered rows utility =====
// Add "affr-layout--countered" to the Query block (Advanced > Additional CSS class)
// to display a numbered badge on each loop item, like the legacy grid/table counter.
.affr-layout.affr-layout--loop.affr-layout--countered {
	--affr-counter-size: 44px;

	.wp-block-post-template {
		counter-reset: affr-review;
	}

	.affr-layout__item {
		position: relative;

		&::before {
			counter-increment: affr-review;
			content: counter(affr-review);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: var(--affr-counter-size);
			height: var(--affr-counter-size);
			line-height: var(--affr-counter-size);
			text-align: center;
			background: rgba(255, 255, 255, 0.2);
			font-size: 1rem;
			font-weight: 700;
			color: #000;
		}
	}

	// An overlay Review Tag is pinned to the same corner as the badge: move it
	// to the badge's right so both stay visible.
	.wp-block-affreviews-review-tag.is-placement-overlay {
		left: var(--affr-counter-size);
	}

	// The see-through badge above only shows on a logo that fills the item's
	// corner (grid and tables). The other loops pad the item, so the badge
	// would sit on the white padding: use a solid badge there.
	&.affr-layout--loop-large,
	&.affr-layout--loop-small,
	&.affr-layout--compact,
	&.affr-layout--compare {
		--affr-counter-size: 32px;

		.affr-layout__item::before {
			font-size: 0.875rem;
			background: var(--affr-button-color, #000);
			color: var(--affr-button-text-color, #fff);
		}
	}

	&.affr-layout--compact {
		--affr-counter-size: 24px;

		.affr-layout__item::before {
			font-size: 0.75rem;
		}
	}
}

// ===== Utility classes used by the patterns =====
// These are container-query based (not viewport based) so they behave the same
// inside the composable patterns as the legacy blocks did. The numeric prefix
// is the container max-width at which the utility kicks in. Scoped to
// .affr-layout so they can't hit same-named classes in themes or legacy markup.
.affr-layout {
	.affr-height-100 {
		height: 100%;
	}

	@container (max-width: 400px) {
		.affr-400-flex-wrap {
			flex-wrap: wrap !important;
		}

		.affr-400-flex-justify-center {
			justify-content: center !important;
		}
	}

	@container (max-width: 600px) {
		.affr-600-flex-justify-center {
			justify-content: center !important;
		}
	}

	@container (max-width: 800px) {
		.affr-800-text-align-center {
			text-align: center !important;
		}
	}
}

/*=====  End of Loops  ======*/