/*=============================================
=              Single review layout            =
=============================================*/

.affr-layout.affr-layout--single {
	margin-bottom: 20px;
	background-color: var(--affr-box-bg-color);

	.affr-button {
		justify-content: flex-start;

		@container (max-width: 680px) {
			justify-content: center;
		}
	}

	.affr-list {
		ul {
			max-width: 100%;
		}
	}

	.affr-terms {
		@container (max-width: 680px) {
			text-align: center;
		}
	}

	// Core's Columns block stacks on a *viewport* media query; the mixin
	// drives stacking from the layout width instead.
	.wp-block-columns.affr-layout__columns {
		@include affr-columns(
			$bases: (
				"affr-layout__thumb": 32%,
				"affr-layout__content": 68%,
				"affr-layout__pros-cons": 50%,
				"affr-layout__details": 50%
			),
			$stack: (
				680px: (
					"affr-layout__thumb",
					"affr-layout__content"
				),
				800px: (
					"affr-layout__pros-cons",
					"affr-layout__details"
				)
			)
		);
	}

	.affr-layout__thumb {
		position: relative;
	}

	// Spacing between the parts comes from the column's block spacing
	// (20px in the patterns), so it can be changed in the editor.
	.affr-layout__content {
		padding: 25px;
		display: flex;
		flex-direction: column;
	}

	.affr-layout__rating-bonus {
		display: flex;
		align-items: flex-start;
		gap: 40px;

		@container (max-width: 680px) {
			flex-direction: column;
			gap: 20px;
			text-align: center;
			align-items: center;
		}
	}

	.affr-layout__details {
		padding-left: 20px;

		// Space above the details once they stack below the pros/cons.
		@container (max-width: 800px) {
			padding-left: 0;
			margin-top: 20px;
		}
	}
}

/*=====  End of Single review layout  ======*/