/* ============================================================
   SIC City Resources — organisations and programmes shown as a
   grid of cards: tagged image on top, name and source below,
   with a link on a rule at the foot of each card.
   ============================================================ */

.sicres2 {
	--sr2-bg:     #ffffff;
	--sr2-text:   #021859;
	--sr2-muted:  rgba(2,24,89,.66);
	--sr2-accent: #bf1304;
	--sr2-card:   #f2e0df;
	--sr2-rule:   rgba(22,32,63,.14);
	--sr2-tag:    rgba(20,27,51,.72);

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

/* ---- intro ---- */
.sicres2-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(--sr2-accent);
}
.sicres2-eyebrow span { width: 34px; height: 1px; background: var(--sr2-accent); display: inline-block; }

.sicres2-head {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: 56px; align-items: start;
	margin-bottom: 56px;
}
.sicres2-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;
}
.sicres2-intro {
	margin: 0; color: var(--sr2-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;
}

/* ---- grid ----
   The gap is what separates the cards; they no longer share edges. */
.sicres2-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
.sicres2-card {
	display: flex; flex-direction: column;
	background: var(--sr2-card);
	overflow: hidden;
}

.sicres2-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(22,32,63,.06);
}
.sicres2-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.sicres2-card:hover .sicres2-media img { transform: scale(1.07); }

.sicres2-tag {
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	background: var(--sr2-tag); color: #ffffff;
	padding: 6px 11px;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	backdrop-filter: blur(3px);
}

.sicres2-body {
	display: flex; flex-direction: column; flex: 1 1 auto;
	padding: 26px 24px 24px;
}
.sicres2-name {
	margin: 0 0 10px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(17px, 1.4vw, 21px); line-height: 1.25;
	color: var(--sr2-text);
}
.sicres2-source {
	margin: 0;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .06em; color: var(--sr2-muted);
}
.sicres2-text {
	margin: 12px 0 0; color: var(--sr2-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.6;
}
.sicres2-foot {
	margin-top: auto; padding-top: 22px;
	border-top: 1px solid var(--sr2-rule);
}
.sicres2-link {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sr2-accent); text-decoration: none;
}
.sicres2-link:hover { text-decoration: underline; }

@media (max-width: 1100px) { .sicres2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
	.sicres2-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.sicres2-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 40px; }
	.sicres2-heading { max-width: none; }
}
@media (max-width: 560px) {
	.sicres2 { padding: 60px 24px 68px; }
	.sicres2-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.sicres2-media img { transition: none; }
	.sicres2-card:hover .sicres2-media img { transform: none; }
}