/*
 * Group styles. Padding set in the editor wins over the defaults here,
 * because block supports write it inline.
 */

/* Card: white, fine outline, soft shadow. */
.wp-block-group.is-style-card {
	overflow: hidden;
	padding: 28px;
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Media at the edge of a card fills its width. */
.wp-block-group.is-style-card > .wp-block-image {
	margin: 0;
}

.wp-block-group.is-style-card > .wp-block-image img {
	width: 100%;
}

/* Soft card: tinted row without outline. */
.wp-block-group.is-style-card-soft {
	padding: 14px 18px;
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--surface);
}

/* Tile: compact centred card, e.g. payment logos. */
.wp-block-group.is-style-tile {
	min-height: 108px;
	padding: 14px;
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: 22px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card-sm);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.wp-block-group.is-style-tile .wp-block-image {
	margin: 0;
}

/* Tile rows: six per row, last row centred (payment logos). */
.affilicon-tiles > .wp-block-group.is-style-tile {
	flex: 0 0 calc(16.666% - 14px);
	min-width: 0;
}

@media (max-width: 1000px) {
	.affilicon-tiles > .wp-block-group.is-style-tile {
		flex-basis: calc(25% - 12px);
	}
}

@media (max-width: 600px) {
	.affilicon-tiles > .wp-block-group.is-style-tile {
		flex-basis: calc(50% - 8px);
	}

	.affilicon-tiles > .wp-block-group.is-style-tile:last-child {
		flex-basis: 100%;
	}
}

.wp-block-group.is-style-tile .wp-block-image img {
	width: 100%;
	max-width: 104px;
	height: auto;
}

/* Raised panel: the floating card in the hero. */
.wp-block-group.is-style-panel {
	padding: 34px 36px;
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* Navy band: closing call to action. */
.wp-block-group.is-style-band {
	padding: 56px 40px;
	border-radius: var(--wp--custom--radius--band);
	background: var(--wp--preset--gradient--navy);
	color: var(--wp--preset--color--white);
	text-align: center;
}

.wp-block-group.is-style-band :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-band p {
	max-width: 34em;
	margin-right: auto;
	margin-left: auto;
	color: var(--wp--preset--color--text-on-dark);
}

.wp-block-group.is-style-band :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Link card: the whole card is clickable via the first link inside. */
.wp-block-group.is-style-link-card {
	position: relative;
	padding: 14px 18px;
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-main);
	transition: transform var(--wp--custom--transition), border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.wp-block-group.is-style-link-card:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 12px 26px rgba(14, 62, 88, 0.1);
}

.wp-block-group.is-style-link-card:has(a:focus-visible) {
	box-shadow: var(--wp--custom--focus--ring);
}

.wp-block-group.is-style-link-card a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.is-style-link-card a:focus-visible {
	outline: none;
}

.wp-block-group.is-style-link-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-block-group.is-style-link-card p {
	margin: 0;
}

/* Swipe row: grid on large screens, horizontal scroller on phones. */
@media (max-width: 900px) {
	.wp-block-group.is-style-carousel {
		display: flex;
		gap: 16px;
		margin-right: calc(var(--wp--style--root--padding-right, 24px) * -1);
		margin-left: calc(var(--wp--style--root--padding-left, 24px) * -1);
		padding: 4px var(--wp--style--root--padding-right, 24px) 14px var(--wp--style--root--padding-left, 24px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-group.is-style-carousel > * {
		flex: 0 0 min(72%, 300px);
		margin: 0;
		scroll-snap-align: center;
	}
}

@media (max-width: 900px) {
	.wp-block-group.is-style-card {
		padding: 22px;
	}

	.wp-block-group.is-style-panel {
		padding: 26px 22px;
	}

	.wp-block-group.is-style-band {
		padding: 40px 22px;
		border-radius: var(--wp--custom--radius--card);
	}
}

@media (max-width: 400px) {
	.wp-block-group.is-style-panel {
		padding: 22px 16px;
	}
}