/**
 * Upcoming Free Webinars (Figma 6187:10388).
 *
 * Lives with the block so WP loads it on demand. The `body.barkley-redesign`
 * prefixes on type and colour rules are load-bearing — see the cascade note at
 * the top of `src/css/patterns/homepage.css`.
 *
 * Numbers are re-derived from the 1728 artboard against the live homepage, not
 * copied: the heading uses the foundation h2 like every other section title,
 * and card padding and radius match Support Cards.
 */

.hp-free-webinars {
	--hp-fw-gap: clamp(20px, 2.4vw, 40px);

	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--style--root--padding-left, 20px);
	background-color: var(--brand-cream);
}

/* The Study Your Way band's texture, and its sizing — see .hp-study for why `100% auto`. */

.hp-free-webinars--textured {
	background-color: var(--brand-cream-deep);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLQogIFdhdmUgdGV4dHVyZSBmb3IgdGhlIGhvbWVwYWdlJ3MgY3JlYW0gKFN0dWR5IFlvdXIgV2F5KSBiYW5kIChGaWdtYSAiaW1hZ2UgNyIsIDQ1MzY6MTE3NCkuCgogIEF1dGhvcmVkLCBub3QgZXhwb3J0ZWQ6IHRoZSBGaWdtYSBsYXllciBpcyBhIDEwMjR4NTcyIFBORyBhbmQgYSByYXN0ZXIgb2YgdGhhdAogIHNpemUgd291bGQgY29zdCBmYXIgbW9yZSB0aGFuIH4zS0Igb24gdGhlIHNpdGUncyBidXNpZXN0IHBhZ2UuIFRoZSBnZW9tZXRyeSBpcwogIGF1dGhvcmVkIGluIHRoZSBTQU1FIDEwMjR4NTcyIHNwYWNlIGFzIHRoYXQgc291cmNlIHNvIHRoZSBzY2FsZSBjYW4gYmUKICByZXByb2R1Y2VkIGV4YWN0bHkg4oCUIH4xNCBsaW5lcyBhdCA0MC45cHggc3BhY2luZywgd2F2ZWxlbmd0aHMgYXJvdW5kIDQ0MCwKICB3ZWF2aW5nIHNvIHRoZXkgY3Jvc3MgcmF0aGVyIHRoYW4gcnVubmluZyBwYXJhbGxlbC4KCiAgU2NhbGUgaXMgdGhlIHdob2xlIHBvaW50IGhlcmUgYW5kIGl0IGxpdmVzIGluIHRoZSBDU1MsIG5vdCB0aGlzIGZpbGU6IHRoZSBydWxlcwogIGRyYXcgaXQgYXQgYGJhY2tncm91bmQtc2l6ZTogMTAwJSBhdXRvYCwgc28gb25lIGNvcHkgc3BhbnMgdGhlIHNlY3Rpb24gd2lkdGggYW5kCiAgdGhlIGFzcGVjdCBpcyBwcmVzZXJ2ZWQuIEF0IHRoZSAxNzI4IGRlc2lnbiB3aWR0aCB0aGF0IHJlbmRlcnMgMTcyOHg5NjUg4oCUIHRoZQogIHNhbWUgMS42ODc1eCB0aGUgZGVzaWduJ3MgYG9iamVjdC1jb3ZlcmAgcHJvZHVjZXMuIFNpemluZyB0aGUgdGlsZSBpbiBhYnNvbHV0ZQogIHB4IChhbiBlYXJsaWVyIGF0dGVtcHQpIGdvdCB0aGUgc3BhY2luZy10by13YXZlbGVuZ3RoIHJhdGlvIHdyb25nOiAwLjA1MiBhZ2FpbnN0CiAgdGhlIGRlc2lnbidzIDAuMDkzLCB3aGljaCByZWFkIGZpcnN0IGFzIHN0cmV0Y2hlZCBhbmQgdGhlbiBhcyBjb21wcmVzc2VkLgoKICBQYWxlIGdyZWVuIGF0IDM1JSBvcGFjaXR5LiBRQSByb3VuZCBvbmUgYXNrZWQgZm9yIDQwJSBsaWdodGVyICgwLjYpOyByb3VuZCB0d28KICBzYWlkIHN0aWxsIHRvbyBkYXJrLCBzbyBpdCBpcyBub3cgcm91Z2hseSBoYWxmIHRoYXQgYWdhaW4uCi0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTcyIiB2aWV3Qm94PSIwIDAgMTAyNCA1NzIiIGZpbGw9Im5vbmUiPgoJPGcgc3Ryb2tlPSIjYzJjZGI0IiBzdHJva2Utb3BhY2l0eT0iMC4zNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9Im5vbmUiPgoJCTxwYXRoIGQ9Ik0wLjAgMjAuNCBDNzguMyAtNS42LCAxNTYuNyAtNS42LCAyMzUuMCAyMC40IEMzMTMuMyA0Ni40LCAzOTEuNyA0Ni40LCA0NzAuMCAyMC40IEM1NDguMyAtNS42LCA2MjYuNyAtNS42LCA3MDUuMCAyMC40IEM3ODMuMyA0Ni40LCA4NjEuNyA0Ni40LCA5NDAuMCAyMC40IEMxMDE4LjMgLTUuNiwgMTA5Ni43IC01LjYsIDExNzUuMCAyMC40IiAvPgoJCTxwYXRoIGQ9Ik0tMTQ1LjIgNjEuMyBDLTc2LjEgMjcuNSwgLTYuOSAyNy41LCA2Mi4yIDYxLjMgQzEzMS40IDk1LjEsIDIwMC42IDk1LjEsIDI2OS44IDYxLjMgQzMzOC45IDI3LjUsIDQwOC4xIDI3LjUsIDQ3Ny4yIDYxLjMgQzU0Ni40IDk1LjEsIDYxNS42IDk1LjEsIDY4NC44IDYxLjMgQzc1My45IDI3LjUsIDgyMy4xIDI3LjUsIDg5Mi4yIDYxLjMgQzk2MS40IDk1LjEsIDEwMzAuNiA5NS4xLCAxMDk5LjggNjEuMyIgLz4KCQk8cGF0aCBkPSJNLTMxMC4wIDEwMi4xIEMtMjI2LjcgODAuMCwgLTE0My4zIDgwLjAsIC02MC4wIDEwMi4xIEMyMy4zIDEyNC4yLCAxMDYuNyAxMjQuMiwgMTkwLjAgMTAyLjEgQzI3My4zIDgwLjAsIDM1Ni43IDgwLjAsIDQ0MC4wIDEwMi4xIEM1MjMuMyAxMjQuMiwgNjA2LjcgMTI0LjIsIDY5MC4wIDEwMi4xIEM3NzMuMyA4MC4wLCA4NTYuNyA4MC4wLCA5NDAuMCAxMDIuMSBDMTAyMy4zIDEyNC4yLCAxMTA2LjcgMTI0LjIsIDExOTAuMCAxMDIuMSIgLz4KCQk8cGF0aCBkPSJNLTc5LjIgMTQzLjAgQy01LjkgMTEzLjEsIDY3LjUgMTEzLjEsIDE0MC44IDE0My4wIEMyMTQuMSAxNzIuOSwgMjg3LjUgMTcyLjksIDM2MC44IDE0My4wIEM0MzQuMSAxMTMuMSwgNTA3LjUgMTEzLjEsIDU4MC44IDE0My4wIEM2NTQuMSAxNzIuOSwgNzI3LjUgMTcyLjksIDgwMC44IDE0My4wIEM4NzQuMSAxMTMuMSwgOTQ3LjUgMTEzLjEsIDEwMjAuOCAxNDMuMCBDMTA5NC4xIDE3Mi45LCAxMTY3LjUgMTcyLjksIDEyNDAuOCAxNDMuMCIgLz4KCQk8cGF0aCBkPSJNLTMwOC4wIDE4My45IEMtMjQzLjggMTQ3LjUsIC0xNzkuNyAxNDcuNSwgLTExNS41IDE4My45IEMtNTEuMyAyMjAuMywgMTIuOCAyMjAuMywgNzcuMCAxODMuOSBDMTQxLjIgMTQ3LjUsIDIwNS4zIDE0Ny41LCAyNjkuNSAxODMuOSBDMzMzLjcgMjIwLjMsIDM5Ny44IDIyMC4zLCA0NjIuMCAxODMuOSBDNTI2LjIgMTQ3LjUsIDU5MC4zIDE0Ny41LCA2NTQuNSAxODMuOSBDNzE4LjcgMjIwLjMsIDc4Mi44IDIyMC4zLCA4NDcuMCAxODMuOSBDOTExLjIgMTQ3LjUsIDk3NS4zIDE0Ny41LCAxMDM5LjUgMTgzLjkiIC8+CgkJPHBhdGggZD0iTS0yMzQuMCAyMjQuNyBDLTE0Ny4zIDIwMC4wLCAtNjAuNyAyMDAuMCwgMjYuMCAyMjQuNyBDMTEyLjcgMjQ5LjQsIDE5OS4zIDI0OS40LCAyODYuMCAyMjQuNyBDMzcyLjcgMjAwLjAsIDQ1OS4zIDIwMC4wLCA1NDYuMCAyMjQuNyBDNjMyLjcgMjQ5LjQsIDcxOS4zIDI0OS40LCA4MDYuMCAyMjQuNyBDODkyLjcgMjAwLjAsIDk3OS4zIDIwMC4wLCAxMDY2LjAgMjI0LjciIC8+CgkJPHBhdGggZD0iTS00My4wIDI2NS42IEMyOC43IDIzMy4xLCAxMDAuMyAyMzMuMSwgMTcyLjAgMjY1LjYgQzI0My43IDI5OC4xLCAzMTUuMyAyOTguMSwgMzg3LjAgMjY1LjYgQzQ1OC43IDIzMy4xLCA1MzAuMyAyMzMuMSwgNjAyLjAgMjY1LjYgQzY3My43IDI5OC4xLCA3NDUuMyAyOTguMSwgODE3LjAgMjY1LjYgQzg4OC43IDIzMy4xLCA5NjAuMyAyMzMuMSwgMTAzMi4wIDI2NS42IiAvPgoJCTxwYXRoIGQ9Ik0tMzI1LjUgMzA2LjQgQy0yNDguMCAyNzkuMSwgLTE3MC41IDI3OS4xLCAtOTMuMCAzMDYuNCBDLTE1LjUgMzMzLjcsIDYyLjAgMzMzLjcsIDEzOS41IDMwNi40IEMyMTcuMCAyNzkuMSwgMjk0LjUgMjc5LjEsIDM3Mi4wIDMwNi40IEM0NDkuNSAzMzMuNywgNTI3LjAgMzMzLjcsIDYwNC41IDMwNi40IEM2ODIuMCAyNzkuMSwgNzU5LjUgMjc5LjEsIDgzNy4wIDMwNi40IEM5MTQuNSAzMzMuNywgOTkyLjAgMzMzLjcsIDEwNjkuNSAzMDYuNCIgLz4KCQk8cGF0aCBkPSJNLTExMi4wIDM0Ny4zIEMtNDUuMyAzMTIuMiwgMjEuMyAzMTIuMiwgODguMCAzNDcuMyBDMTU0LjcgMzgyLjQsIDIyMS4zIDM4Mi40LCAyODguMCAzNDcuMyBDMzU0LjcgMzEyLjIsIDQyMS4zIDMxMi4yLCA0ODguMCAzNDcuMyBDNTU0LjcgMzgyLjQsIDYyMS4zIDM4Mi40LCA2ODguMCAzNDcuMyBDNzU0LjcgMzEyLjIsIDgyMS4zIDMxMi4yLCA4ODguMCAzNDcuMyBDOTU0LjcgMzgyLjQsIDEwMjEuMyAzODIuNCwgMTA4OC4wIDM0Ny4zIiAvPgoJCTxwYXRoIGQ9Ik0tMjY5LjUgMzg4LjEgQy0xODcuOCAzNjQuNywgLTEwNi4yIDM2NC43LCAtMjQuNSAzODguMSBDNTcuMiA0MTEuNSwgMTM4LjggNDExLjUsIDIyMC41IDM4OC4xIEMzMDIuMiAzNjQuNywgMzgzLjggMzY0LjcsIDQ2NS41IDM4OC4xIEM1NDcuMiA0MTEuNSwgNjI4LjggNDExLjUsIDcxMC41IDM4OC4xIEM3OTIuMiAzNjQuNywgODczLjggMzY0LjcsIDk1NS41IDM4OC4xIEMxMDM3LjIgNDExLjUsIDExMTguOCA0MTEuNSwgMTIwMC41IDM4OC4xIiAvPgoJCTxwYXRoIGQ9Ik0tMzkxLjYgNDI5LjAgQy0zMTcuNCAzOTcuOCwgLTI0My4zIDM5Ny44LCAtMTY5LjEgNDI5LjAgQy05NC45IDQ2MC4yLCAtMjAuOCA0NjAuMiwgNTMuNCA0MjkuMCBDMTI3LjYgMzk3LjgsIDIwMS43IDM5Ny44LCAyNzUuOSA0MjkuMCBDMzUwLjEgNDYwLjIsIDQyNC4yIDQ2MC4yLCA0OTguNCA0MjkuMCBDNTcyLjYgMzk3LjgsIDY0Ni43IDM5Ny44LCA3MjAuOSA0MjkuMCBDNzk1LjEgNDYwLjIsIDg2OS4yIDQ2MC4yLCA5NDMuNCA0MjkuMCBDMTAxNy42IDM5Ny44LCAxMDkxLjcgMzk3LjgsIDExNjUuOSA0MjkuMCIgLz4KCQk8cGF0aCBkPSJNLTE2NC4wIDQ2OS45IEMtOTUuNyA0NDEuMywgLTI3LjMgNDQxLjMsIDQxLjAgNDY5LjkgQzEwOS4zIDQ5OC41LCAxNzcuNyA0OTguNSwgMjQ2LjAgNDY5LjkgQzMxNC4zIDQ0MS4zLCAzODIuNyA0NDEuMywgNDUxLjAgNDY5LjkgQzUxOS4zIDQ5OC41LCA1ODcuNyA0OTguNSwgNjU2LjAgNDY5LjkgQzcyNC4zIDQ0MS4zLCA3OTIuNyA0NDEuMywgODYxLjAgNDY5LjkgQzkyOS4zIDQ5OC41LCA5OTcuNyA0OTguNSwgMTA2Ni4wIDQ2OS45IiAvPgoJCTxwYXRoIGQ9Ik0tNzUuOCA1MTAuNyBDOC40IDQ4NC43LCA5Mi42IDQ4NC43LCAxNzYuOCA1MTAuNyBDMjYwLjkgNTM2LjcsIDM0NS4xIDUzNi43LCA0MjkuMiA1MTAuNyBDNTEzLjQgNDg0LjcsIDU5Ny42IDQ4NC43LCA2ODEuOCA1MTAuNyBDNzY1LjkgNTM2LjcsIDg1MC4xIDUzNi43LCA5MzQuMiA1MTAuNyBDMTAxOC40IDQ4NC43LCAxMTAyLjYgNDg0LjcsIDExODYuOCA1MTAuNyIgLz4KCQk8cGF0aCBkPSJNLTI5NS44IDU1MS42IEMtMjE5LjkgNTE3LjgsIC0xNDQuMSA1MTcuOCwgLTY4LjIgNTUxLjYgQzcuNiA1ODUuNCwgODMuNCA1ODUuNCwgMTU5LjIgNTUxLjYgQzIzNS4xIDUxNy44LCAzMTAuOSA1MTcuOCwgMzg2LjggNTUxLjYgQzQ2Mi42IDU4NS40LCA1MzguNCA1ODUuNCwgNjE0LjIgNTUxLjYgQzY5MC4xIDUxNy44LCA3NjUuOSA1MTcuOCwgODQxLjggNTUxLjYgQzkxNy42IDU4NS40LCA5OTMuNCA1ODUuNCwgMTA2OS4yIDU1MS42IiAvPgoJPC9nPgo8L3N2Zz4K);
	background-repeat: repeat;
	background-size: 100% auto;
}

.hp-free-webinars__inner {
	max-width: var(--wp--style--global--content-size, 1392px);
	margin-inline: auto;
}

/* Heading, optional subheading and paragraph (both may carry links). */

.hp-free-webinars__head {
	max-width: 900px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	text-align: center;
}

body.barkley-redesign .hp-free-webinars .hp-free-webinars__title {
	margin: 0;
	color: var(--brand-green);
	text-align: center;
}

body.barkley-redesign .hp-free-webinars .hp-free-webinars__subheading {
	margin: 16px 0 0;
	color: var(--brand-ink);
	font-family: var(--brand-font-heading);
	font-size: clamp(18px, 1.4vw, 24px);
	font-weight: 500;
	line-height: 1.3;
}

.hp-free-webinars__intro {
	margin-top: 12px;
	font-size: clamp(18px, 1.25vw, 21px);
}

body.barkley-redesign .hp-free-webinars__intro p {
	margin: 0 0 12px;
}

body.barkley-redesign .hp-free-webinars__intro p:last-child {
	margin-bottom: 0;
}

.hp-free-webinars__head a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Flex rather than an auto-fit grid so one or two cards keep their three-up
 * width and sit centred instead of stretching across the column.
 */

.hp-free-webinars__cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: var(--hp-fw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The coloured strip is a hard-stop gradient rather than a top border: the
 * radius clips its outer corners like the design's ribbon, and its bottom edge
 * stays straight (a border's inner edge curves with the radius).
 */

.hp-free-webinars__card {
	--hp-fw-strip: 12px;
	--hp-fw-pad: clamp(24px, 2.6vw, 44px);

	container: hp-fw-card / inline-size;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	    -ms-flex: 0 1 100%;
	        flex: 0 1 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	max-width: 560px;
	padding: var(--hp-fw-pad);
	padding-top: calc(var(--hp-fw-strip) + var(--hp-fw-pad));
	border-radius: var(--brand-radius, 16px);
	background: -webkit-gradient(linear, left top, left bottom, from(var(--hp-fw-accent, var(--brand-green))), to(#fff));
	background: linear-gradient(var(--hp-fw-accent, var(--brand-green)) var(--hp-fw-strip), #fff var(--hp-fw-strip));
}

@media (min-width: 700px) {
	.hp-free-webinars__card {
		-ms-flex-preferred-size: calc((100% - var(--hp-fw-gap)) / 2);
		    flex-basis: calc((100% - var(--hp-fw-gap)) / 2);
		max-width: none;
	}
}

@media (min-width: 1025px) {
	.hp-free-webinars__card {
		-ms-flex-preferred-size: calc((100% - 2 * var(--hp-fw-gap)) / 3);
		    flex-basis: calc((100% - 2 * var(--hp-fw-gap)) / 3);
	}
}

/*
 * Carousel (front end only — render.php leaves the editor preview on the
 * wrapping row above). Arrows sit either side of the track; Swiper sizes the
 * slides inline, so the row's flex-basis and max-width are switched off here
 * or they would beat its widths. Two classes to outrank the media queries.
 */

.hp-free-webinars__carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(8px, 1.4vw, 24px);
}

/*
 * Swiper's bundle gives `.swiper` auto inline margins, which in a grid cell
 * shrink it to its content — Swiper then measures a sliver and sizes the
 * cards to match. Stretch it across the middle column instead. Two classes:
 * the bundle loads after block styles, so a single class loses the tie.
 */

.hp-free-webinars__carousel .hp-free-webinars__swiper {
	width: 100%;
	margin-inline: 0;
	overflow: hidden;
}

.hp-free-webinars__swiper .hp-free-webinars__cards {
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	gap: 0;
}

/* Swiper's `.swiper-slide { display: block }` loads later; without flex the foot's auto margin can't pin it. */

.hp-free-webinars__swiper .hp-free-webinars__card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	max-width: none;
	height: auto;
}

.hp-free-webinars__nav {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: clamp(40px, 3.4vw, 56px);
	height: clamp(40px, 3.4vw, 56px);
	border: 0;
	border-radius: var(--brand-radius, 16px);
	background-color: #fff;
	color: var(--brand-green);
	font-size: 18px;
	cursor: pointer;
	-webkit-transition: background-color 150ms ease, opacity 150ms ease;
	transition: background-color 150ms ease, opacity 150ms ease;
}

.hp-free-webinars__nav:hover:not(.swiper-button-disabled) {
	background-color: var(--brand-gold);
}

/* Swiper's own state classes: disabled at either end, locked when every card fits. */

.hp-free-webinars__nav.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* Swiper's bundle sets display:none here; keep the grid slot so the cards stay centred. */

.hp-free-webinars__carousel .hp-free-webinars__nav.swiper-button-lock {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	visibility: hidden;
}

/* One card at a time: arrows move out into the page margin so the card gets the width. */

@media (max-width: 699px) {
	.hp-free-webinars__carousel {
		gap: 6px;
		margin-inline: calc(6px - var(--wp--style--root--padding-left, 20px));
	}

	.hp-free-webinars__nav {
		width: 36px;
		height: 36px;
	}
}

/*
 * "FREE!" ribbon (Figma "Card Ribbons", 6230:10055). The design's bookmark
 * path as a clip-path and its darker band (13–45px) as a hard stop, so there
 * is no asset to load. The 58px line box centres the word on that band.
 * ponytail: italic is synthesized — the theme loads upright Noto Sans only.
 */

.hp-free-webinars__badge {
	position: absolute;
	top: 0;
	right: 16px;
	width: 70px;
	height: 74px;
	background: linear-gradient(#e11156 13px, #bf0b47 13px 45px, #e11156 45px);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 53.19% 70.45%, 0 100%);
	color: #fff;
	font-size: 20px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 58px;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Keeps the title off the ribbon on the lines beside it only — padding would
 * narrow every line and cost long titles a row. Sized from the card edge:
 * 16px inset + 70px ribbon + 8px gap wide, down to the ribbon's 74px tips.
 */

.hp-free-webinars__card-title::before {
	content: "";
	float: right;
	width: calc(94px - var(--hp-fw-pad));
	height: calc(74px - var(--hp-fw-strip) - var(--hp-fw-pad));
}

body.barkley-redesign .hp-free-webinars .hp-free-webinars__card-title {
	margin: 0;
	color: var(--brand-green);
	font-size: clamp(22px, 1.7vw, 30px);
	font-weight: 500;
	line-height: 1.2;
}

body.barkley-redesign .hp-free-webinars__audience {
	margin: 8px 0 0;
	font-size: 15px;
}

/* Gold rule above the date line, per the design. */

body.barkley-redesign .hp-free-webinars__when {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--brand-gold);
	font-size: 15px;
}

.hp-free-webinars__when time + span {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid var(--brand-gold);
}

/*
 * Too narrow for one line: stack date over time rather than wrap with the
 * divider dangling. Container width is the card's CONTENT box; the longest
 * line ("September 30, 2026 | 12:00 PM EST" at 15px) measures 256px.
 */

@container hp-fw-card (max-width: 259px) {
	body.barkley-redesign .hp-free-webinars__when {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
	}

	.hp-free-webinars__when time + span {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
}

/* Pinned to the card bottom so uneven titles still line the speakers up. */

.hp-free-webinars__foot {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 24px;
	margin-top: auto;
	padding-top: 32px;
}

.hp-free-webinars__speaker {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 14px;
	-ms-flex-item-align: stretch;
	    align-self: stretch;
	padding: 14px;
	border-radius: 12px;
	background-color: var(--brand-cream);
}

body.barkley-redesign .hp-free-webinars .hp-free-webinars__photo {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 8px;
	-o-object-fit: cover;
	   object-fit: cover;
}

body.barkley-redesign .hp-free-webinars__speaker-text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
}

body.barkley-redesign .hp-free-webinars__speaker-name {
	color: var(--brand-ink);
	font-size: 16px;
	font-weight: 700;
}

body.barkley-redesign .hp-free-webinars .hp-free-webinars__link {
	font-family: var(--brand-font-heading);
	font-size: 20px;
	font-weight: 700;
}

/* Inline-block keeps the link's underline off the arrow. */

.hp-free-webinars__arrow {
	display: inline-block;
	margin-left: 6px;
}

/* --- Editor-only states (render.php emits these only in the preview) --- */

.hp-free-webinars__card.is-past {
	opacity: 0.6;
}

body .hp-free-webinars__past {
	-ms-flex-item-align: start;
	    align-self: flex-start;
	margin: 0 0 12px;
	padding: 4px 10px;
	border-radius: var(--brand-radius-pill, 999px);
	background-color: var(--brand-gold);
	font-size: 12px;
	font-weight: 600;
}

body .hp-free-webinars__empty {
	margin: 0;
	text-align: center;
}