/* ============================================================
   SIC City Partners — local partner organisations, listed as
   stacked rows: a square image on the left, details on the right.
   ============================================================ */

.sicpartners {
	--sp2-bg:     #f2e0df;
	--sp2-text:   #021859;
	--sp2-muted:  rgba(2,24,89,.66);
	--sp2-accent: #bf1304;
	--sp2-card:   #ffffff;
	--sp2-rule:   rgba(22,32,63,.14);

	background: var(--sp2-bg);
	color: var(--sp2-text);
	padding: 92px 48px 104px;
	font-family: var(--sic-body-font);
}
.sicpartners-inner { max-width: 1240px; margin: 0 auto; }

/* ---- intro ---- */
.sicpartners-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 28px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sp2-accent);
}
.sicpartners-eyebrow span { width: 34px; height: 1px; background: var(--sp2-accent); display: inline-block; }

.sicpartners-head {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: 56px; align-items: start;
	margin-bottom: 52px;
}
.sicpartners-heading {
	margin: 0;
	max-width: 18ch;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08;
}
.sicpartners-intro {
	margin: 0; color: var(--sp2-muted);
	/* 20px default, matching About and City About. A Design-tab Font
	   size for this element outranks the plain class, so a block set
	   by hand keeps its own value. */
	font-size: 20px; line-height: 1.7;
}

/* ---- rows ---- */
.sicpartners-list { display: flex; flex-direction: column; gap: 18px; }

.sicpartners-item {
	display: grid;
	/* The first column is fixed, and the image inside it is forced square,
	   so every partner presents the same crop regardless of source ratio. */
	grid-template-columns: 340px 1fr;
	background: var(--sp2-card);
	overflow: hidden;
}
.sicpartners-media {
	position: relative;
	aspect-ratio: 1 / 1;        /* square across every item */
	overflow: hidden;
	background: rgba(22,32,63,.06);
}
.sicpartners-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.sicpartners-item:hover .sicpartners-media img { transform: scale(1.06); }

.sicpartners-body {
	display: flex; flex-direction: column;
	padding: 34px 38px 30px;
}
.sicpartners-role {
	margin: 0 0 14px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--sp2-muted);
}
.sicpartners-name {
	margin: 0 0 16px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15;
	color: var(--sp2-text);
}
.sicpartners-text {
	margin: 0; color: var(--sp2-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.7;
}
.sicpartners-foot {
	margin-top: auto; padding-top: 26px;
	border-top: 1px solid var(--sp2-rule);
}
.sicpartners-link {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sp2-accent); text-decoration: none;
}
.sicpartners-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.sicpartners { padding: 60px 24px 68px; }
	.sicpartners-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
	.sicpartners-heading { max-width: none; }
	.sicpartners-item { grid-template-columns: 1fr; }
	.sicpartners-body { padding: 26px 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.sicpartners-media img { transition: none; }
	.sicpartners-item:hover .sicpartners-media img { transform: none; }
}