/**
 * Global Café — archive and single templates.
 *
 * Scoped to .ifa-cafe-archive / .ifa-cafe-single so nothing here can leak
 * into Divi-built pages, and so the selectors stay specific enough to beat
 * Divi's own global link and heading rules without a wall of !important.
 *
 * Depends on two things already loaded site-wide:
 *   - the IFA custom properties (--ifa-dark-blue etc) from style.css
 *   - .ifa-band / .ifa-band__inner from the ifa-members plugin stylesheet,
 *     which supplies the full-bleed band padding and the 1080px inner
 *     column. The templates already hard-depend on that plugin for
 *     ifa_members_item_state(), so this is not a new coupling.
 *
 * Buttons are defined here rather than reusing the plugin's .ifa-btn-*
 * because the purple variant does not exist there. They deliberately match
 * the plugin's metrics exactly (8px radius, 12/22 padding, 15px/600) so the
 * two sets are indistinguishable in place.
 */

/* ============================================================
   Shared primitives
   ============================================================ */

.ifa-cafe-archive,
.ifa-cafe-single {
	--cafe-body: #3E4A5B;
	--cafe-muted: #5B6270;
	--cafe-rule: #EEF0F1;
	--cafe-locked: #FAFBFA;
	--cafe-chip: #C9CDCB;
	--cafe-slot: #E4EAEB;
	--cafe-slot-line: #CBD5D7;
	--cafe-slot-ink: #78888C;
	/* Blue in place of the site's --ifa-light-mint, scoped to these two
	   templates only — the plugin's shared .ifa-band--mint still serves
	   every other Members Area page in mint. #ECF2F5 is the exact tone
	   design signed off on; the line color is a derived, slightly darker
	   companion for the one border that pairs with it (.ifa-cafe-register). */
	--cafe-light-blue: #ECF2F5;
	--cafe-light-blue-line: #DAE3E7;
}

.ifa-cafe-archive h1,
.ifa-cafe-archive h2,
.ifa-cafe-archive h3,
.ifa-cafe-single h1,
.ifa-cafe-single h2,
.ifa-cafe-single h3 {
	font-family: 'Libre Baskerville', Georgia, serif;
	color: var(--ifa-dark-blue);
}

.ifa-cafe-archive p,
.ifa-cafe-archive li,
.ifa-cafe-archive a,
.ifa-cafe-single p,
.ifa-cafe-single li,
.ifa-cafe-single a {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.ifa-cafe-section-title {
	font-size: 30px;
	line-height: 1.25;
	margin: 0 0 8px;
}

.ifa-cafe-section-head {
	margin-bottom: 8px;
}

.ifa-cafe-section-lead {
	font-size: 15.5px;
	color: var(--cafe-body);
	margin: 0;
}

.ifa-cafe-sec-title {
	font-size: 24px;
	margin: 0 0 18px;
}

/* 32px navy tile — same object as .pa-icon on the Areas of Work pages. */
.ifa-cafe-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 8px;
	background: var(--ifa-dark-blue);
	color: #fff;
	font-size: 15px;
}

.ifa-cafe-meta-date {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ifa-dark-blue);
	margin: 0 0 20px;
}

/* Placeholder shown where a comms-supplied image has not been uploaded.
   Deliberately reads as an empty slot rather than a broken image. */
.ifa-cafe-slot {
	position: relative;
	background: var(--cafe-slot);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cafe-slot-ink);
	font-size: 26px;
}

.ifa-cafe-slot::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px dashed var(--cafe-slot-line);
	pointer-events: none;
}

/* ---------- buttons ---------- */

.ifa-cafe-btn {
	display: inline-block;
	border-radius: 8px;
	padding: 12px 22px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none !important;
	border: 1px solid transparent;
	transition: background .25s, border-color .25s, color .25s;
}

.ifa-cafe-btn--icon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ifa-cafe-btn--navy {
	background: var(--ifa-dark-blue);
	border-color: var(--ifa-dark-blue);
	color: #fff !important;
}

.ifa-cafe-btn--navy:hover,
.ifa-cafe-btn--navy:focus {
	background: var(--ifa-dark-teal);
	border-color: var(--ifa-dark-teal);
	color: #fff !important;
}

/* Divi's .light-btn purple. White on #A05793 is 4.9:1 and passes AA —
   the brand green is 2.7:1 and must never carry white text, which is why
   the primary call to action here is purple and not green. */
.ifa-cafe-btn--purple {
	background: var(--ifa-purple);
	border-color: var(--ifa-purple);
	color: #fff !important;
}

.ifa-cafe-btn--purple:hover,
.ifa-cafe-btn--purple:focus {
	background: var(--ifa-dark-blue);
	border-color: var(--ifa-dark-blue);
	color: #fff !important;
}

.ifa-cafe-btn--white {
	background: #fff;
	border-color: var(--ifa-dark-blue);
	color: var(--ifa-dark-blue) !important;
}

.ifa-cafe-btn--white:hover,
.ifa-cafe-btn--white:focus {
	background: var(--ifa-dark-blue);
	color: #fff !important;
}

.ifa-cafe-archive a:focus-visible,
.ifa-cafe-single a:focus-visible,
.ifa-cafe-archive select:focus-visible,
.ifa-cafe-archive button:focus-visible {
	outline: 2px solid var(--ifa-dark-teal);
	outline-offset: 2px;
}

/* ============================================================
   Link hover — overriding Divi's global green
   ============================================================

   Divi's customizer emits `a:hover { color: #49B460 !important }` for every
   link on the site. On white that green is 2.7:1, which fails WCAG AA for
   body text (4.5:1) — the same contrast fault that kept the green button
   out of this design in the first place.

   It wins even though the base colours in this file are themselves
   !important: at equal importance the cascade falls through to specificity,
   and `a:hover` (0,1,1) outranks `.ifa-cafe-tab` (0,1,0) on the element
   count. So these rules need BOTH !important and a selector above (0,1,1) —
   which is why they carry the container prefix instead of being bare
   classes. Dropping either half silently restores the green.

   Buttons are excluded: they set white text on a filled background and
   already define their own hover, so recolouring the text would put purple
   or navy on navy. */
.ifa-cafe-archive a:not(.ifa-cafe-btn):hover,
.ifa-cafe-archive a:not(.ifa-cafe-btn):focus-visible,
.ifa-cafe-single a:not(.ifa-cafe-btn):hover,
.ifa-cafe-single a:not(.ifa-cafe-btn):focus-visible {
	color: var(--ifa-dark-blue) !important;
}

/* The tabs are already navy, so navy-on-hover would read as no feedback at
   all. They shift to teal and pick up a faint ground instead.

   This needs to outrank the blanket rule above, not just Divi's: that one
   is (0,3,1), so the container prefix here is load-bearing too — it makes
   this (0,4,0), and four classes beat three. */
.ifa-cafe-archive .ifa-cafe-tab:not(.is-active):hover,
.ifa-cafe-archive .ifa-cafe-tab:not(.is-active):focus-visible {
	color: var(--ifa-dark-teal) !important;
	background: var(--cafe-locked);
}

/* The active tab is NOT left alone by the blanket rule above, despite what
   this comment used to claim: :not(.is-active) only excludes it from the
   teal-hover rule, not from the (0,3,1) blanket one, which still matches
   plain `a:hover` on it. Its own white-on-navy color rule is only (0,2,0),
   so on hover the blanket rule's !important navy wins over its !important
   white — white text turns navy on a background that is already navy,
   i.e. the label disappears. This rule re-asserts white at (0,4,0), the
   same margin the teal-hover rule above uses to beat the blanket rule. */
.ifa-cafe-archive .ifa-cafe-tab.is-active:hover,
.ifa-cafe-archive .ifa-cafe-tab.is-active:focus-visible {
	color: #fff !important;
}

/* Keep the rule under "Watch the recording" in step with the text above it,
   rather than leaving a teal underline beneath navy text. */
.ifa-cafe-archive .ifa-cafe-row__link:hover,
.ifa-cafe-archive .ifa-cafe-row__link:focus-visible {
	border-bottom-color: var(--ifa-dark-blue);
}

/* ============================================================
   Archive — hero
   ============================================================ */

/* .pa-hero supplies the geometry (min-height, the white title block that
   straddles the bottom edge). Only the empty-image case needs anything
   extra: a flat brand ground rather than a transparent gap. */
/* The .pa-hero markup is reused from the Areas of Work template, but its
   custom properties are declared on `.priority-area-template` and nowhere
   else — so on this page min-height, background, padding and max-width all
   resolved to nothing. The hero collapsed to zero height and the white title
   block lost its ground entirely.
   Adding the class instead would drag in that template's whole typography
   scale, which fights the styles below, so the five tokens the hero actually
   consumes are redeclared here with the same values, breakpoints included. */
.ifa-cafe-archive {
	--pa-hero-min-height: 300px;
	--pa-hero-padding: 30px 40px;
	--pa-max-width: 1080px;
	--pa-spacing-sm: 30px;
	--pa-white: #ffffff;
}

@media (max-width: 980px) {
	.ifa-cafe-archive {
		--pa-hero-min-height: 260px;
		--pa-hero-padding: 25px 30px;
	}
}

@media (max-width: 768px) {
	.ifa-cafe-archive {
		--pa-hero-min-height: 220px;
		--pa-hero-padding: 20px 25px;
		--pa-spacing-sm: 20px;
	}
}

.ifa-cafe-hero__image--empty {
	background: var(--ifa-dark-blue);
}

/* The heading used to sit in its own white band above the featured one
   (mint, now overridden to blue — see --cafe-light-blue), which read as a
   stray line of text rather than a label for the card beneath it. It now
   lives inside that band, so this padding — which exists to clear the
   hero's overhanging title block — moves with it. */
.ifa-cafe-archive .ifa-cafe-featured {
	padding-top: 86px;
}

.ifa-cafe-featured__heading {
	margin-bottom: 28px;
}

/* ============================================================
   Archive — featured café
   ============================================================ */

.ifa-cafe-featured__grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 48px;
	align-items: start;
}

/* A locked featured cafe drops its flyer entirely, leaving one child. Without
   this the body auto-places into the fixed 360px flyer track and wraps the
   title, date, lock chip and button inside it, with two thirds of the band
   empty beside them. Desktop only — the 980px breakpoint below already
   collapses this grid to a single column. */
.ifa-cafe-featured__grid.is-locked {
	grid-template-columns: 1fr;
}

.ifa-cafe-featured__flyer {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 19 / 20;
	object-fit: cover;
}

.ifa-cafe-flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--ifa-dark-teal);
	background: rgba(41, 165, 161, .13);
	border-radius: 999px;
	padding: 5px 13px;
}

.ifa-cafe-featured__title {
	font-size: 26px;
	line-height: 1.3;
	margin: 0 0 16px;
}

.ifa-cafe-featured__title a {
	color: var(--ifa-dark-blue) !important;
	text-decoration: none !important;
}

.ifa-cafe-featured__copy {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--cafe-body);
	margin: 0 0 26px;
	max-width: 56ch;
}

.ifa-cafe-featured__copy p:last-child {
	margin-bottom: 0;
}

.ifa-cafe-soon {
	font-size: 14.5px;
	font-style: italic;
	color: var(--cafe-muted);
}

/* ============================================================
   Archive — filters
   ============================================================ */

.ifa-cafe-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 24px 0 4px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ifa-dark-blue);
}

.ifa-cafe-tabs {
	display: flex;
	gap: 4px;
}

.ifa-cafe-tab {
	font-size: 15px;
	font-weight: 600;
	color: var(--ifa-dark-blue) !important;
	border-radius: 8px;
	padding: 9px 18px;
	text-decoration: none !important;
}

.ifa-cafe-tab.is-active {
	background: var(--ifa-dark-blue);
	color: #fff !important;
}

.ifa-cafe-selects {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	/* Without this the label wrappers stretch to the Apply button height
	   while the selects inside stay at their own, leaving them top-aligned
	   with dead space beneath. Only visible since the button stopped being
	   noscript-only. */
	align-items: center;
}

.ifa-cafe-select select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--ifa-dark-blue);
	border-radius: 8px;
	padding: 9px 38px 9px 15px;
	background-color: #fff;
	/* Chevron drawn as a background image so the control keeps a native
	   <select> (keyboard, mobile pickers, screen readers) rather than
	   being rebuilt as a div. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203248' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 11px 11px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--ifa-dark-blue);
	line-height: 1.2;
	cursor: pointer;
}

/* ============================================================
   Archive — session rows
   ============================================================ */

.ifa-cafe-rows {
	margin-top: 4px;
}

.ifa-cafe-row {
	display: grid;
	grid-template-columns: 214px 1fr 200px;
	align-items: center;
	gap: 24px;
	padding: 22px 12px;
	border-bottom: 1px solid var(--cafe-rule);
}

.ifa-cafe-row:last-child {
	border-bottom: none;
}

.ifa-cafe-row.is-locked {
	background: var(--cafe-locked);
	border-radius: 10px;
	border-bottom-color: transparent;
}

.ifa-cafe-row__theme {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.ifa-cafe-row__theme-name {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ifa-dark-blue);
	line-height: 1.3;
}

.ifa-cafe-row__body {
	min-width: 0;
}

.ifa-cafe-row__title {
	font-size: 18px;
	line-height: 1.35;
	margin: 0;
	/* Long session titles are the norm here, so wrap rather than letting
	   the grid column blow out. */
	overflow-wrap: anywhere;
}

.ifa-cafe-row__title a {
	color: var(--ifa-dark-blue) !important;
	text-decoration: none !important;
}

.ifa-cafe-row__title a:hover {
	color: var(--ifa-dark-teal) !important;
}

.ifa-cafe-row__date {
	font-size: 12.5px;
	color: var(--cafe-muted);
	margin: 4px 0 0;
}

.ifa-cafe-row__action {
	justify-self: end;
	text-align: right;
}

.ifa-cafe-row__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ifa-dark-teal) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(37, 95, 113, .32);
	padding-bottom: 2px;
}

.ifa-cafe-row__link i {
	font-size: 12px;
}

.ifa-cafe-row__muted {
	font-size: 13.5px;
	font-style: italic;
	color: var(--cafe-muted);
}

/* Lock chip only — the title stays perfectly readable. A blurred title
   hides the one thing that might persuade someone to join. */
.ifa-cafe-lock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--cafe-muted);
	border: 1px solid var(--cafe-chip);
	border-radius: 999px;
	padding: 6px 13px;
}

.ifa-cafe-row__join {
	display: block;
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ifa-dark-teal) !important;
	text-decoration: none !important;
}

.ifa-cafe-row__release {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	color: var(--cafe-muted);
}

.ifa-cafe-empty {
	font-size: 15px;
	color: var(--cafe-muted);
	padding: 30px 12px;
	margin: 0;
}

/* ---------- pagination ---------- */

.ifa-cafe-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 26px 0 4px;
	flex-wrap: wrap;
}

.ifa-cafe-pager .page-numbers {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	color: var(--ifa-dark-blue) !important;
	text-decoration: none !important;
	font-variant-numeric: tabular-nums;
}

.ifa-cafe-pager .page-numbers.current {
	background: var(--ifa-dark-blue);
	color: #fff !important;
}

.ifa-cafe-pager .page-numbers.prev,
.ifa-cafe-pager .page-numbers.next {
	color: var(--ifa-dark-teal) !important;
}

/* ============================================================
   Single — header
   ============================================================ */

.ifa-cafe-eyebrow {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--ifa-teal);
	margin: 0 0 10px;
}

.ifa-cafe-single__title {
	font-size: 36px;
	line-height: 1.2;
	margin: 0 0 20px;
	max-width: 22ch;
	overflow-wrap: anywhere;
}

.ifa-cafe-single__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ifa-cafe-single__title-row .ifa-cafe-meta-date {
	margin: 0;
}

.ifa-cafe-backlink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--ifa-dark-teal) !important;
	text-decoration: none !important;
}

.ifa-cafe-backlink i {
	font-size: 12px;
}

.ifa-cafe-single__banner-band {
	padding-top: 0;
	padding-bottom: 44px;
}

.ifa-cafe-single__banner {
	display: block;
	width: 100%;
	height: auto;
}

.ifa-cafe-single__about {
	padding-top: 0;
}

/* No max-width here on purpose. The description runs the full width of the
   1080px content band, matching the banner above it and the speakers grid
   below — a measure cap left it filling 58% of the column, which read as a
   layout fault rather than as whitespace.

   The trade-off is real and was taken deliberately: at 16px this is roughly
   118 characters per line, well past the 45-75 that reads comfortably. If
   anyone reinstates a cap, that is the reason to weigh, not an oversight to
   correct. */
.ifa-cafe-prose p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--cafe-body);
}

.ifa-cafe-prose p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Single — speakers
   ============================================================ */

.ifa-cafe-speakers__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ifa-cafe-speaker {
	background: #fff;
	border: 1px solid #DCE6E3;
	border-radius: 10px;
	padding: 22px 24px;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 20px;
	align-items: start;
}

.ifa-cafe-headshot {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ifa-cafe-headshot--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cafe-slot);
	border: 1px dashed var(--cafe-slot-line);
	color: var(--cafe-slot-ink);
	font-size: 28px;
}

.ifa-cafe-speaker__name {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--ifa-dark-blue);
	margin: 0 0 4px;
}

.ifa-cafe-speaker__role {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--cafe-body);
	margin: 0;
}

.ifa-cafe-speaker__org {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ifa-dark-blue);
	margin: 2px 0 12px;
}

.ifa-cafe-pill {
	display: inline-block;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border: 1px solid var(--ifa-dark-blue);
	color: var(--ifa-dark-blue);
	border-radius: 999px;
	padding: 4px 12px;
}

/* ============================================================
   Single — recording / registration
   ============================================================ */

/* wp_oembed_get returns a raw iframe with fixed width/height attributes;
   this is what makes it responsive without touching the markup. */
.ifa-cafe-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #1A2838;
}

.ifa-cafe-video iframe,
.ifa-cafe-video object,
.ifa-cafe-video embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ifa-cafe-video-pending {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-style: italic;
	color: var(--cafe-muted);
	background: var(--cafe-locked);
	border: 1px solid var(--cafe-rule);
	border-radius: 10px;
	padding: 22px 24px;
	margin: 0;
}

.ifa-cafe-register {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	background: var(--cafe-light-blue);
	border: 1px solid var(--cafe-light-blue-line);
	border-radius: 12px;
	padding: 32px 36px;
}

.ifa-cafe-register__title {
	font-size: 22px;
	margin: 0 0 10px;
}

.ifa-cafe-register__when {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ifa-dark-blue);
}

.ifa-cafe-register__when i {
	color: var(--ifa-dark-teal);
	font-size: 15px;
	width: 16px;
	text-align: center;
}

.ifa-cafe-register__note {
	font-size: 13.5px;
	color: var(--cafe-muted);
	margin: 12px 0 0;
	max-width: 46ch;
}

.ifa-cafe-register__actions {
	display: grid;
	gap: 10px;
}

.ifa-cafe-register__actions .ifa-cafe-btn {
	text-align: center;
}

/* ============================================================
   Single — related publications / additional resources
   ============================================================ */

.ifa-cafe-res {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 40px;
	margin-top: 40px;
}

/* One column present means no divider and no dead second track. The modifier
   is emitted by the template rather than derived with :has(), so a browser
   without :has() support does not leave a lone column at a third width. */
.ifa-cafe-res--single {
	grid-template-columns: 1fr;
}

.ifa-cafe-res__divider {
	background: var(--cafe-rule);
}

.ifa-cafe-res__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	margin: 0 0 16px;
}

.ifa-cafe-res__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ifa-cafe-res__list li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 11px;
	align-items: start;
}

.ifa-cafe-res__list li i {
	margin-top: 4px;
	color: var(--ifa-dark-teal);
	font-size: 14px;
}

.ifa-cafe-res__list a {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ifa-dark-teal) !important;
	text-decoration: none !important;
}

.ifa-cafe-res__meta {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--cafe-muted);
}

/* ============================================================
   Single — previous / next
   ============================================================ */

.ifa-cafe-adjacent__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 28px;
	align-items: center;
}

.ifa-cafe-adjacent__side--right {
	display: flex;
	justify-content: flex-end;
}

.ifa-cafe-adj {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 14px;
	align-items: center;
	text-decoration: none !important;
}

.ifa-cafe-adj--next {
	grid-template-columns: 1fr 32px;
	text-align: right;
}

.ifa-cafe-adj__label {
	display: block;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--cafe-muted);
}

.ifa-cafe-adj__title {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--ifa-dark-blue);
	line-height: 1.35;
}

/* ============================================================
   Utility
   ============================================================ */

.ifa-cafe-archive .screen-reader-text,
.ifa-cafe-single .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ifa-cafe-archive *,
	.ifa-cafe-single * {
		transition: none !important;
	}
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
	.ifa-cafe-featured__grid,
	.ifa-cafe-featured__grid.is-locked {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ifa-cafe-featured__media {
		max-width: 320px;
	}

	.ifa-cafe-res {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ifa-cafe-res__divider {
		display: none;
	}

	.ifa-cafe-adjacent__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ifa-cafe-adjacent__side--right {
		justify-content: flex-start;
	}

	.ifa-cafe-adj--next {
		grid-template-columns: 32px 1fr;
		text-align: left;
	}

	.ifa-cafe-adj--next .ifa-cafe-icon-tile {
		order: -1;
	}
}

@media (max-width: 780px) {
	.ifa-cafe-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ifa-cafe-row__action {
		justify-self: start;
		text-align: left;
	}

	.ifa-cafe-speakers__grid {
		grid-template-columns: 1fr;
	}

	.ifa-cafe-register {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ifa-cafe-single__title {
		font-size: 28px;
	}

	.ifa-cafe-section-title {
		font-size: 24px;
	}

	.ifa-cafe-filters {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
		/* Stacking tabs + two selects + Apply makes this row much taller than
		   the 14px the desktop layout leaves before the rule underneath —
		   without more room it reads as the rule crowding the button rather
		   than a deliberate divider. */
		padding-bottom: 20px;
	}

	/* Two selects side by side at mobile widths leave one of them a sliver
	   next to the other, and the Apply button wrapping onto its own
	   half-width line under them. Stacked and stretched, each control reads
	   as one deliberate row instead of a leftover desktop layout that ran
	   out of space. */
	.ifa-cafe-selects {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ifa-cafe-select,
	.ifa-cafe-select select,
	.ifa-cafe-apply {
		width: 100%;
	}
}

/* ============================================================
   Late overrides — kept together so the reasons stay findable
   ============================================================ */

/* The banner band always renders now, so an unset cafe_banner shows a slot
   instead of the section vanishing. Matches the flyer on the archive, and
   tells comms there is an image to supply rather than silently omitting it.
   Both display and aspect-ratio are restated because .ifa-cafe-slot is
   declared earlier in this file than .ifa-cafe-single__banner, so at equal
   specificity the block wins and the flex centring is lost. */
.ifa-cafe-single__banner.ifa-cafe-slot {
	display: flex;
	aspect-ratio: 1000 / 250;
	font-size: 26px;
}

/* Prev/next sits directly above the footer, whose Divi shape divider is a
   fixed white curve — over a mint band it bleeds white into the mint. The
   band is white for that reason alone, so it needs its own top rule to stay
   a distinct section rather than running into the block above it.
   The rule generalises: the LAST band of any page must be white, or the
   footer decoration will bleed. */
.ifa-cafe-adjacent {
	border-top: 1px solid var(--cafe-rule);
}

/* .ifa-band's own bottom padding (60px) read as too tight against the
   footer's wave curve directly beneath this, the last band on the page.
   Overridden here rather than in .ifa-band itself, which every other
   Members Area page also uses. */
.ifa-band.ifa-cafe-adjacent {
	padding-bottom: 104px;
}

/* Blue in place of mint on these two bands only (see --cafe-light-blue
   above) — .ifa-band--mint itself stays mint for every other page that
   uses it. !important matches the specificity fight it's overriding:
   the plugin's own .ifa-band--mint rule is !important too. */
.ifa-cafe-archive .ifa-band--mint.ifa-cafe-featured,
.ifa-cafe-single .ifa-band--mint.ifa-cafe-speakers {
	background: var(--cafe-light-blue) !important;
}

/* Explore Previous Global Café Sessions, gated: replaces the filter form
   and row list for a visitor who cannot browse history (see
   ifa_cafe_can_browse_past()). Upcoming sessions are unaffected — this is
   the one section of the archive members-only browsing applies to. */
.ifa-cafe-past-locked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	background: var(--cafe-locked);
	border: 1px solid var(--cafe-rule);
	border-radius: 10px;
	padding: 32px 36px;
	margin-top: 20px;
}

.ifa-cafe-past-locked__copy {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cafe-body);
	margin: 0;
	max-width: 56ch;
}

.ifa-cafe-past-locked__copy .ifa-cafe-row__join {
	display: inline;
	margin-top: 0;
	font-size: inherit;
}