/* =========================================================================
   INAA homepage sections
     .inaa-member — auth-aware membership panel
     .inaa-news   — category tabs over a scrollable row of post cards
   ========================================================================= */

.inaa-member,
.inaa-news,
.inaa-newsletter {
	font-family: var(--inaa-font);
}

.inaa-member *,
.inaa-news *,
.inaa-newsletter * {
	box-sizing: border-box;
}

/* =========================================================================
   Membership panel
   ========================================================================= */

.inaa-member {
	--inaa-member-band: #bcd8ef;

	width: 100%;
	background: var(--inaa-member-band);
	padding: 28px 20px 34px;
}

@media (min-width: 768px) {
	.inaa-member {
		padding-inline: 32px;
	}
}

.inaa-member__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px 30px;
	width: 100%;
	max-width: var(--inaa-container, 1280px);
	margin-inline: auto;
	padding: 22px 26px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 10px rgba(13, 26, 62, 0.09);
}

/* --- card artwork (the .inaa-member__mock* rules live in membership.css so
   the account template and this widget can share one definition) --- */

.inaa-member__card {
	flex: 0 0 auto;
	width: 176px;
}

.inaa-member__card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* --- intro --- */

.inaa-member__intro {
	flex: 1 1 220px;
	min-width: 0;
	text-align: center;
}

.inaa-member__title {
	margin: 0 0 12px;
	color: var(--inaa-navy, #14275c);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

.inaa-member__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 11px 26px;
	border-radius: 3px;
	background: var(--inaa-navy, #14275c);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.inaa-member__btn:hover,
.inaa-member__btn:focus-visible {
	background: var(--inaa-red, #d0111b);
	color: #fff;
}

.inaa-member__link {
	display: block;
	margin-top: 10px;
	color: var(--inaa-navy, #14275c);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.inaa-member__link:hover,
.inaa-member__link:focus-visible {
	color: var(--inaa-red, #d0111b);
	text-decoration: underline;
}

/* --- stats --- */

.inaa-member__stats {
	display: flex;
	flex: 1 1 380px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inaa-member__stat {
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 18px;
	border-left: 1px solid var(--inaa-border, #dde3ed);
}

.inaa-member__stat-label {
	display: block;
	color: var(--inaa-text-muted, #5b6478);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.35;
	text-transform: uppercase;
}

.inaa-member__stat-value {
	display: block;
	margin-top: 10px;
	color: var(--inaa-navy, #14275c);
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Signed out: the real value is never sent to the browser — these are
   placeholder blocks, so "view source" reveals nothing. */
.inaa-member__stat-value.is-hidden {
	color: #cfe0f0;
	filter: blur(2px);
	user-select: none;
	letter-spacing: -0.08em;
}

@media (max-width: 900px) {
	.inaa-member__inner {
		flex-direction: column;
		text-align: center;
	}

	/* The flex-basis above is a main-axis size — once this stacks, the main
	   axis is vertical and those bases become heights. Reset them. */
	.inaa-member__intro,
	.inaa-member__stats {
		flex: 0 0 auto;
		width: 100%;
	}

	.inaa-member__stats {
		flex-wrap: wrap;
		gap: 14px 0;
	}

	.inaa-member__stat {
		flex: 1 1 33%;
		padding-inline: 10px;
	}

	.inaa-member__stat:first-child {
		border-left: 0;
	}
}

@media (max-width: 560px) {
	.inaa-member__stat {
		flex: 1 1 100%;
		padding: 12px 0 0;
		border-left: 0;
		border-top: 1px solid var(--inaa-border, #dde3ed);
	}
}

/* =========================================================================
   News carousel
   ========================================================================= */

.inaa-news {
	--inaa-card-w: 268px;
	--inaa-news-accent: var(--inaa-navy, #14275c);

	width: 100%;
	max-width: var(--inaa-container, 1280px);
	margin-inline: auto;
	padding: 46px 20px 40px;
}

@media (min-width: 768px) {
	.inaa-news {
		padding-inline: 32px;
	}
}

.inaa-news__title {
	margin: 0 0 18px;
	color: var(--inaa-navy, #14275c);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
}

/* --- tabs --- */

.inaa-news__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 22px;
	padding: 3px;
	border-radius: 99px;
	background: #eef1f6;
	width: fit-content;
	max-width: 100%;
}

.inaa-news__tab {
	padding: 9px 18px;
	border: 0;
	border-radius: 99px;
	background: transparent;
	color: var(--inaa-text, #1b2333);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.inaa-news__tab:hover {
	color: var(--inaa-red, #d0111b);
}

.inaa-news__tab.is-active {
	background: var(--inaa-news-accent);
	color: #fff;
}

/* --- track --- */

.inaa-news__panel[hidden] {
	display: none;
}

.inaa-news__viewport {
	position: relative;
}

.inaa-news__track {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.inaa-news__track::-webkit-scrollbar {
	display: none;
}

.inaa-news__item {
	flex: 0 0 var(--inaa-card-w);
	width: var(--inaa-card-w);
	scroll-snap-align: start;
	list-style: none;
	margin: 0;
}

/* --- card --- */

.inaa-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--inaa-border, #dde3ed);
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.inaa-card:hover {
	box-shadow: 0 10px 24px rgba(13, 26, 62, 0.14);
	transform: translateY(-2px);
}

.inaa-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

.inaa-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(130deg, #14275c 0%, #1c3372 100%);
}

.inaa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.inaa-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.inaa-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 14px;
	padding: 16px 16px 18px;
}

.inaa-card__title {
	color: var(--inaa-navy, #14275c);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.28;
}

.inaa-card__link:hover .inaa-card__title,
.inaa-card__link:focus-visible .inaa-card__title {
	color: var(--inaa-red, #d0111b);
	text-decoration: underline;
}

.inaa-card__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: auto;
	color: var(--inaa-text-muted, #5b6478);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* --- arrows --- */

.inaa-news__arrow {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--inaa-news-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(13, 26, 62, 0.28);
	transition: background-color 200ms ease;
}

.inaa-news__arrow[hidden] {
	display: none;
}

.inaa-news__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.inaa-news__arrow:hover,
.inaa-news__arrow:focus-visible {
	background: var(--inaa-red, #d0111b);
}

.inaa-news__arrow--prev { left: -14px; }
.inaa-news__arrow--next { right: -14px; }

/* --- footer --- */

.inaa-news__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 26px;
}

.inaa-news__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px;
	border-radius: 99px;
	background: var(--inaa-news-accent);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.inaa-news__more:hover,
.inaa-news__more:focus-visible {
	background: var(--inaa-red, #d0111b);
	color: #fff;
}

.inaa-news__empty {
	margin: 0;
	padding: 26px 0;
	color: var(--inaa-text-muted, #5b6478);
}

.inaa-news :focus-visible,
.inaa-member :focus-visible {
	outline: 3px solid var(--inaa-navy, #14275c);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.inaa-news__track {
		scroll-behavior: auto;
	}

	.inaa-card {
		transition: none;
	}
}

/* =========================================================================
   Newsletter band
   ========================================================================= */

.inaa-newsletter {
	--inaa-newsletter-bg: var(--inaa-navy, #14275c);

	width: 100%;
	background: var(--inaa-newsletter-bg);
	color: #fff;
	padding: 46px 20px 50px;
}

@media (min-width: 768px) {
	.inaa-newsletter {
		padding-inline: 32px;
	}
}

.inaa-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px 56px;
	width: 100%;
	max-width: var(--inaa-container, 1280px);
	margin-inline: auto;
}

@media (min-width: 900px) {
	.inaa-newsletter__inner {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.inaa-newsletter__heading {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.inaa-newsletter__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 46ch;
}

.inaa-newsletter__text a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.inaa-newsletter__text a:hover,
.inaa-newsletter__text a:focus-visible {
	color: #ffb3b8;
}

/* --- form --- */

.inaa-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Two classes: outranks block-library's input[type="email"] rule. */
.inaa-newsletter .inaa-newsletter__input {
	flex: 1 1 260px;
	width: auto;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: #fff;
	box-shadow: none;
	color: var(--inaa-text, #1b2333);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.inaa-newsletter .inaa-newsletter__input::placeholder {
	color: #6b7385;
	opacity: 1;
}

.inaa-newsletter__input:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.inaa-newsletter__submit {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 34px;
	border: 0;
	border-radius: 99px;
	background: var(--inaa-red, #d0111b);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.inaa-newsletter__submit:hover,
.inaa-newsletter__submit:focus-visible {
	background: var(--inaa-red-dark, #a50d15);
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.inaa-newsletter__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.inaa-newsletter__note {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.8125rem;
	line-height: 1.5;
	max-width: 52ch;
}

.inaa-newsletter__result {
	display: inline-block;
	margin: 14px 0 0;
	padding: 9px 16px;
	border-radius: 3px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.inaa-newsletter__result--ok {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.inaa-newsletter__result--error {
	background: var(--inaa-red, #d0111b);
	color: #fff;
}

@media (max-width: 560px) {
	.inaa-newsletter__submit {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   Programmes band
   ========================================================================= */

.inaa-programmes {
	--inaa-prog-bg: #f2f4f7;
	--inaa-prog-cols: 2;
	--inaa-prog-accent: var(--inaa-red, #d0111b);
	--inaa-prog-pattern-w: 430px;

	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--inaa-prog-bg);
	padding: 56px 20px 60px;
	font-family: var(--inaa-font);
}

@media (min-width: 768px) {
	.inaa-programmes {
		padding-inline: 32px;
	}
}

.inaa-programmes * {
	box-sizing: border-box;
}

/* --- diamond motif --- */

.inaa-programmes__deco {
	position: absolute;
	top: 0;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.inaa-programmes__deco--left  { left: 0; }
.inaa-programmes__deco--right { right: 0; transform: scaleX(-1); }

/* viewBox is 220x300; width drives the size and height follows the ratio. */
.inaa-programmes__pattern {
	display: block;
	width: var(--inaa-prog-pattern-w, 430px);
	height: auto;
}

.inaa-programmes__pattern .d1 { fill: var(--inaa-navy, #14275c); opacity: 0.9; }
.inaa-programmes__pattern .d2 { fill: var(--inaa-navy-light, #2b4691); opacity: 0.55; }
.inaa-programmes__pattern .d3 { fill: #bcd8ef; opacity: 0.85; }
.inaa-programmes__pattern .d4 { fill: #dce9f6; opacity: 0.9; }
.inaa-programmes__pattern .accent { fill: var(--inaa-prog-accent); opacity: 0.85; }

/* The motif is decoration — it must never crowd the cards. Sizes come from the
   widget's responsive Pattern Size control; these are the fallbacks. */
@media (max-width: 1180px) {
	.inaa-programmes {
		--inaa-prog-pattern-w: 260px;
	}
}

@media (max-width: 860px) {
	.inaa-programmes {
		--inaa-prog-pattern-w: 150px;
	}

	/* At this width the cluster runs into the intro copy, so pull it back into
	   the corner and let it sit behind the text rather than compete with it. */
	.inaa-programmes__deco--left {
		left: -26px;
		top: -12px;
		opacity: 0.45;
	}

	.inaa-programmes__deco--right {
		right: -26px;
		top: -12px;
		opacity: 0.45;
	}

	.inaa-programmes__head {
		padding-top: 6px;
	}
}

/* --- layout --- */

.inaa-programmes__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--inaa-container, 1280px);
	margin-inline: auto;
}

.inaa-programmes__head {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}

.inaa-programmes__title {
	margin: 0;
	color: var(--inaa-navy, #14275c);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
}

.inaa-programmes__intro {
	margin: 10px 0 0;
	color: var(--inaa-text-muted, #5b6478);
	font-size: 1rem;
	line-height: 1.55;
}

.inaa-programmes__grid {
	display: grid;
	grid-template-columns: repeat(var(--inaa-prog-cols), minmax(0, 1fr));
	gap: 26px;
	max-width: 1140px;
	margin-inline: auto;
}

@media (max-width: 860px) {
	.inaa-programmes__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* --- card --- */

.inaa-prog {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 24px;
	box-shadow: 0 2px 14px rgba(13, 26, 62, 0.08);
}

.inaa-prog__media {
	margin-bottom: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(130deg, #14275c 0%, #1c3372 100%);
}

.inaa-prog__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inaa-prog__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.45);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.inaa-prog__logo {
	padding: 16px 0 6px;
	border-bottom: 1px solid var(--inaa-border, #dde3ed);
}

.inaa-prog__logo img {
	display: block;
	max-width: 260px;
	max-height: 56px;
	width: auto;
	height: auto;
}

.inaa-prog__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 20px;
}

.inaa-prog__title {
	margin: 0 0 10px;
	color: var(--inaa-navy, #14275c);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.inaa-prog__text {
	margin: 0 0 22px;
	color: var(--inaa-text, #1b2333);
	font-size: 1rem;
	line-height: 1.55;
}

.inaa-prog__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	align-self: flex-start;
	margin-top: auto;
	padding: 13px 30px;
	border-radius: 99px;
	background: var(--inaa-navy, #14275c);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.inaa-prog__btn:hover,
.inaa-prog__btn:focus-visible {
	background: var(--inaa-red, #d0111b);
	color: #fff;
}

.inaa-prog__ext {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex: 0 0 auto;
}

.inaa-programmes :focus-visible {
	outline: 3px solid var(--inaa-navy, #14275c);
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.inaa-prog {
		padding: 18px;
	}

	.inaa-prog__btn {
		align-self: stretch;
	}
}

/* Focus-after-click keeps the fill (the global reset blanks :focus). */
.inaa-news__arrow:focus { background: var(--inaa-red, #d0111b); }
.inaa-news__tab.is-active:focus { background: var(--inaa-news-accent); color: #fff; }
.inaa-newsletter__submit:focus { background: var(--inaa-red-dark, #a50d15); color: #fff; }