/**
 * October 2026 (SCRUM-881) — the card component shared by the breast self-check
 * guide (page-breast-check.php) and /pink/ (page-pink.php). Loaded on those two
 * templates only (inc/home-campaign-tetor26.php).
 *
 * Measured on lindex.com/uk/pink/breast-self-exam: each card is the page width
 * minus 32px a side, radius 16px, #FBE9EB; the image sits left at 2/3 of the
 * card, 3:2, and sets the card's height; the text sits in the right third,
 * centred both ways. Phones: image on top, full width, text under it.
 *
 * The cards are ordinary blocks, keyed on their class names
 * (Block → Advanced → Additional CSS class):
 *
 *   paragraph  cb-pc-intro              lede under the page title (guide)
 *   group      cb-pc                    card: image + heading + text (+ buttons)
 *   group      cb-pc cb-pc--text        text-only card
 *   group      cb-pc cb-pc--quote       pink box with a large red quote
 *   group      cb-pc-pair               two cards side by side, each
 *                                       "cb-pc cb-pc--stack" (image on top);
 *                                       their images carry cb-pc-half (sizes)
 *
 * This classic theme wraps a group's blocks in .wp-block-group__inner-container,
 * so every layout rule targets that wrapper — or the group itself where there is
 * none.
 */

.cb-pc-page {
	--cb-pc-red: #cd1d2e;
	--cb-pc-ink: #242118;
	--cb-pc-bg: #fbe9eb;
	--cb-pc-side: 32px;
	--cb-pc-gap: 16px;
	padding: 0 0 64px;
	color: var(--cb-pc-ink);
	font-family: var(--cb-font-body, sans-serif);
}
main.cb-main.cb-pc-page { padding-top: 0; }
/* /pink/ has no title header: its first card keeps the card gap from the site header. */
main.cb-main.cb-pc-page--pink { padding-top: 32px; }

/* Page title + intro (guide): one full-width #FBE9EB band, as on lindex.com.
   The title is the template's header and the intro the first block of the
   content, so the band is the header plus the intro paragraph straight after it. */
.cb-pc-page__head {
	padding: 48px var(--cb-pc-side) 0;
	text-align: center;
	background: var(--cb-pc-bg);
}
.cb-pc-page__title {
	margin: 0;
	font-family: var(--cb-font-display, serif);
	font-weight: 400;
	font-size: 64px;
	line-height: 1.1;
	color: var(--cb-pc-red);
}
.cb-pc-page .cb-pc-intro {
	max-width: 720px;
	margin: 16px auto 40px;
	padding: 0 var(--cb-pc-side);
	text-align: center;
	font-size: 16px;
	line-height: 24px;
	color: var(--cb-pc-ink);
}
.cb-pc-page .cb-pc-page__head + .cb-pc-intro {
	max-width: none;
	margin: 0 0 32px;
	padding: 16px max(var(--cb-pc-side), calc((100% - 720px) / 2)) 48px;
	background: var(--cb-pc-bg);
}

/* ---- Card ---------------------------------------------------------------- */
.cb-pc-page .cb-pc {
	margin: 0 var(--cb-pc-side) var(--cb-pc-gap);
	border-radius: 16px;
	background: var(--cb-pc-bg);
	overflow: hidden;
}
.cb-pc-page .cb-pc:not(.cb-pc--text):not(.cb-pc--quote):not(.cb-pc--stack) > .wp-block-group__inner-container,
.cb-pc-page .cb-pc:not(.cb-pc--text):not(.cb-pc--quote):not(.cb-pc--stack):not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	/* Spacer rows above and below centre the text vertically. */
	grid-template-rows: 1fr auto auto auto 1fr;
}
.cb-pc-page .cb-pc .wp-block-image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.cb-pc-page .cb-pc:not(.cb-pc--stack) .wp-block-image {
	grid-column: 1;
	grid-row: 1 / -1;
}
.cb-pc-page .cb-pc .wp-block-image a { display: block; height: 100%; }
.cb-pc-page .cb-pc .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.cb-pc-page .cb-pc :is(h1, h2, h3),
.cb-pc-page .cb-pc p,
.cb-pc-page .cb-pc .wp-block-buttons {
	grid-column: 2;
	padding: 0 32px;
	text-align: center;
}
.cb-pc-page .cb-pc :is(h1, h2, h3) {
	grid-row: 2;
	margin: 0 0 16px;
	font-family: var(--cb-font-display, serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.15;
	color: var(--cb-pc-red);
}
.cb-pc-page .cb-pc p {
	grid-row: 3;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--cb-pc-ink);
}
.cb-pc-page .cb-pc .wp-block-buttons {
	grid-row: 4;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

/* Text-only card ("Mirë ta dini"). */
.cb-pc-page .cb-pc--text,
.cb-pc-page .cb-pc--quote {
	padding: 56px var(--cb-pc-side);
	text-align: center;
}
.cb-pc-page .cb-pc--text :is(h1, h2, h3),
.cb-pc-page .cb-pc--text p { max-width: 720px; margin-left: auto; margin-right: auto; padding: 0; }

/* Quote box. */
.cb-pc-page .cb-pc--quote p {
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	font-family: var(--cb-font-display, serif);
	font-size: 48px;
	line-height: 1.15;
	color: var(--cb-pc-red);
}

/* Two cards side by side; each card: image on top, text under it. */
.cb-pc-page .cb-pc-pair { margin: 0 var(--cb-pc-side) var(--cb-pc-gap); }
.cb-pc-page .cb-pc-pair > .wp-block-group__inner-container,
.cb-pc-page .cb-pc-pair:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cb-pc-gap);
}
.cb-pc-page .cb-pc-pair .cb-pc { margin: 0; }
.cb-pc-page .cb-pc--stack { padding-bottom: 32px; }
.cb-pc-page .cb-pc--stack .wp-block-image { margin-bottom: 24px; }
.cb-pc-page .cb-pc--stack p + p { margin-top: 16px; }

/* ---- Buttons and links: black text in every state (the theme's a:hover and
   :focus-visible ring are gold). Same look as the homepage story buttons. ---- */
.cb-pc-page .cb-pc .wp-block-button__link {
	display: inline-block;
	padding: .85em 1.8em;
	border: 1px solid rgba(26, 26, 26, .35);
	border-radius: 999px;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--cb-font-body, sans-serif);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}
.cb-pc-page .cb-pc .wp-block-button__link:is(:link, :visited, :hover, :focus, :active) { color: #1a1a1a; }
.cb-pc-page .cb-pc .wp-block-button__link:hover { background: #f2f2f2; border-color: #1a1a1a; }
.cb-pc-page .cb-pc a:not(.wp-block-button__link),
.cb-pc-page .cb-pc a:not(.wp-block-button__link):is(:visited, :hover, :focus, :active) {
	color: #1a1a1a;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cb-pc-page .cb-pc a:focus { outline: none; }
.cb-pc-page .cb-pc a:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 760px) {
	.cb-pc-page { --cb-pc-side: 16px; }
	.cb-pc-page__title { font-size: 40px; }
	.cb-pc-page .cb-pc:not(.cb-pc--text):not(.cb-pc--quote):not(.cb-pc--stack) > .wp-block-group__inner-container,
	.cb-pc-page .cb-pc:not(.cb-pc--text):not(.cb-pc--quote):not(.cb-pc--stack):not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		padding-bottom: 32px;
	}
	.cb-pc-page .cb-pc .wp-block-image,
	.cb-pc-page .cb-pc :is(h1, h2, h3),
	.cb-pc-page .cb-pc p,
	.cb-pc-page .cb-pc .wp-block-buttons { grid-column: 1; grid-row: auto; }
	.cb-pc-page .cb-pc:not(.cb-pc--stack) .wp-block-image { grid-row: auto; margin-bottom: 24px; }
	.cb-pc-page .cb-pc :is(h1, h2, h3) { font-size: 28px; padding: 0 16px; }
	.cb-pc-page .cb-pc p { padding: 0 16px; }
	.cb-pc-page .cb-pc--quote p { font-size: 30px; }
	.cb-pc-page .cb-pc-pair > .wp-block-group__inner-container,
	.cb-pc-page .cb-pc-pair:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: 1fr; }
}