/* backend only */
.editor-styles-wrapper .block-testimonial-listing .block-testimonial-listing__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media only screen and (min-width: 899px) {
    .editor-styles-wrapper .block-testimonial-listing .block-testimonial-listing__inner {
        grid-template-columns: repeat( 4, 1fr );
    }
}

/* frontend only */
.block-testimonial-listing__inner.slick-slider {
    margin-left: calc(-1 * var(--wp--custom--layout--padding));
    margin-right: calc(-1 * var(--wp--custom--layout--padding));
    display: grid;
    grid-template-areas:
        "carousel carousel"
        "prev next";
    grid-auto-columns: 1fr;
    column-gap: 1.25rem;
    row-gap: 2.5rem;
}

.block-testimonial-listing .slick-prev {
    grid-area: prev;
    justify-self: end;
}
.block-testimonial-listing .slick-next {
    grid-area: next;
    justify-self: start;
}
.block-testimonial-listing .slick-list {
    grid-area: carousel;
}

@media only screen and (min-width: 899px) {
    .block-testimonial-listing__inner.slick-slider {
        margin-left: calc(-1 * 0.9375rem);
        margin-right: calc(-1 * 0.9375rem);
    }
}

/* Equal Height of slides attempt May 2024 */
.block-testimonial-listing .block-testimonial-listing__inner.slick-initialized .slick-track{
    display: flex;
}

.block-testimonial-listing .block-testimonial-listing__inner.slick-initialized .slick-slide{
        display: flex;
        height: auto;
        align-items: stretch;
        justify-content: center; 
}

.block-testimonial-listing .block-testimonial-listing__inner.slick-initialized .block-testimonial-listing-item,
.block-testimonial-listing .block-testimonial-listing__inner.slick-initialized .block-testimonial-listing-item__inner {
    height: 100%;
}
/* Arched photos style: three or four stories at a time on desktop (one on phones), moved only by
   the two arrows under them. The arrows are outline circles (1px brass ring, Brass Dark chevron)
   that fill brass on hover. The count comes from the block's "Stories per row" field, which
   render.php prints as data-per-row; the carousel reads the same attribute in
   assets/js/jquery.slick-init.js. Editor: the same count as the page. */
.editor-styles-wrapper .block-testimonial-listing.is-style-arch .block-testimonial-listing__inner {
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.editor-styles-wrapper .block-testimonial-listing.is-style-arch[data-per-row="4"] .block-testimonial-listing__inner {
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

/* Four across leaves each story narrower, so the gutter between them closes up to match. */
.block-testimonial-listing.is-style-arch[data-per-row="4"] .slick-slide .block-testimonial-listing-item {
	padding: 0 12px;
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider {
	margin-left: -10px;
	margin-right: -10px;
	row-gap: 24px;
}

.block-testimonial-listing.is-style-arch .slick-slide .block-testimonial-listing-item {
	padding: 0 18px;
}

/* The two chevrons below are inline SVG, where a CSS custom property cannot reach, so their
   colours are written as hex: %237A6230 is Brass Dark and %231F3A31 is Primary. Change either in
   theme.json and change it here too. (The Sass side builds its icons from $svg-colors in
   _base.scss; a plain block stylesheet has no access to that.) */
.block-testimonial-listing.is-style-arch .slick-arrow {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--quaternary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6230' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

.block-testimonial-listing.is-style-arch .slick-arrow:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--quaternary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A31' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 767px) {
	.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Arched photos: a brass rule under the stories, running through the two arrows rather than
   above them. Each half is drawn in its own arrow's grid cell and stops 16px short of the
   circle, so the line reads as one rule broken by the arrows. */
.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider::before,
.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider::after {
	content: "";
	align-self: center;
	height: 1px;
	background: var(--wp--preset--color--quaternary);
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider::before {
	grid-area: prev;
	margin-right: 64px; /* the 48px circle plus 16px of air */
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider::after {
	grid-area: next;
	margin-left: 64px;
}

/* Phones: the arrows sit as far below the quote as the section's own padding sits below them,
   so the row reads as centred in its space rather than pushed down. */
@media only screen and (max-width: 767px) {
	.block-testimonial-listing.is-style-arch .block-testimonial-listing__inner.slick-slider {
		row-gap: 10px;
	}
}

/* Quote cards style (Testimonial Listing > Styles > Quote cards): every story at once in a plain
   grid, no carousel (render.php loads no Slick for it). One column on phones, two from tablet,
   then the block's "Stories per row" (3 or 4) from laptop up - the four short reviews on the
   Free Soup Challenge page. The same grid in the editor. */
.block-testimonial-listing.is-style-quotes .block-testimonial-listing__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media only screen and (min-width: 768px) {
	.block-testimonial-listing.is-style-quotes .block-testimonial-listing__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (min-width: 1024px) {
	.block-testimonial-listing.is-style-quotes .block-testimonial-listing__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.block-testimonial-listing.is-style-quotes[data-per-row="4"] .block-testimonial-listing__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}