/*
 * "Additional resources" cards (widget si-resources, Figma 2140:9847) + the section around them (global component
 * "SI – Additional resources", root class .si-res-section). Loaded in <head> on every front-end page (small) so the
 * empty-section rule applies before first paint. Breakpoints follow Elementor: tablet ≤1024px, mobile ≤767px.
 */

/* no posts at all → the widget prints nothing → hide the whole section (kept visible in the editor) */
body:not(.elementor-editor-active) .si-res-section:not(:has(.sip-res__card)) { display: none !important; }

.sip-res {
	--res-navy: #141E55;
	--res-ink: #161B21;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 21px;
	width: 100%;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--res-ink);
}
.sip-res *, .sip-res *::before, .sip-res *::after { box-sizing: border-box; }

/* card: whole card clickable through the title link (one tab stop) */
.sip-res__card {
	position: relative; display: flex; flex-direction: column; min-width: 0;
	padding: 20px 20px 30px; border-radius: 10px; background: #FFFFFF;
	box-shadow: 0 0 6px 1px rgba(0, 0, 0, .15);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
.sip-res__card:hover, .sip-res__card:focus-within { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.sip-res__media { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 520 / 380; background: #E9EBF3; }
.sip-res .sip-res__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sip-res__card:hover .sip-res__media img { transform: scale(1.04); }
.sip-res__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sip-res__media + .sip-res__body { margin-top: 30px; }
.sip-res__title { margin: 0; font: 700 28px/34px "Cormorant Garamond", "Cormorant", Georgia, serif; color: var(--res-navy); }
.sip-res__link { color: inherit; text-decoration: none; }
.sip-res__link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.sip-res__link:focus-visible { outline: none; }
.sip-res__card:focus-within { outline: 2px solid #C3661A; outline-offset: 3px; }
.sip-res__excerpt { margin: 10px 0 0; font: 400 16px/22px "Manrope", sans-serif; color: var(--res-ink); }
.sip-res__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: auto; padding-top: 24px; }
.sip-res__meta { font: 600 14px/19px "Manrope", sans-serif; color: var(--res-ink); }
.sip-res__sep { margin: 0 8px; }
.sip-res__cta { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font: 600 16px/22px "Manrope", sans-serif; color: var(--res-navy); white-space: nowrap; }
.sip-res__cta svg { width: 13px; height: 13px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.sip-res__card:hover .sip-res__cta svg { transform: translate(3px, -3px); }

/* 3 cards (Figma): large card spans both rows; cards 2 and 3 = image 280×270 left, text right, link bottom-right */
.sip-res--n3 .sip-res__card--1 { grid-row: span 2; }
.sip-res--n3 .sip-res__card--2, .sip-res--n3 .sip-res__card--3 { flex-direction: row; gap: 20px; padding: 20px; }
.sip-res--n3 .sip-res__card--2 .sip-res__media, .sip-res--n3 .sip-res__card--3 .sip-res__media { flex: 0 0 calc(50% - 10px); aspect-ratio: auto; min-height: 270px; }
.sip-res--n3 .sip-res__card--2 .sip-res__body, .sip-res--n3 .sip-res__card--3 .sip-res__body { margin-top: 0; }
.sip-res--n3 .sip-res__card--2 .sip-res__foot, .sip-res--n3 .sip-res__card--3 .sip-res__foot { flex-direction: column; align-items: flex-start; justify-content: space-between; flex: 1 1 auto; margin-top: 0; }
.sip-res--n3 .sip-res__card--2 .sip-res__cta, .sip-res--n3 .sip-res__card--3 .sip-res__cta { align-self: flex-end; }

/* 1 card: one wide card, image left */
.sip-res--n1 { grid-template-columns: minmax(0, 1fr); }
.sip-res--n1 .sip-res__card { flex-direction: row; gap: 30px; padding: 20px; }
.sip-res--n1 .sip-res__media { flex: 0 0 calc(50% - 15px); }
.sip-res--n1 .sip-res__media + .sip-res__body { margin-top: 0; padding: 10px 10px 10px 0; }

@media (max-width: 1024px) {
	/* 3 cards: the large card full width, cards 2 + 3 side by side; every card image-on-top */
	.sip-res--n3 .sip-res__card--1 { grid-row: auto; }
	.sip-res--n3 .sip-res__card--2, .sip-res--n3 .sip-res__card--3 { flex-direction: column; gap: 0; padding: 20px 20px 30px; }
	.sip-res--n3 .sip-res__card--2 .sip-res__media, .sip-res--n3 .sip-res__card--3 .sip-res__media { flex: none; aspect-ratio: 520 / 380; min-height: 0; }
	.sip-res--n3 .sip-res__card--2 .sip-res__media + .sip-res__body, .sip-res--n3 .sip-res__card--3 .sip-res__media + .sip-res__body { margin-top: 24px; }
	.sip-res--n3 .sip-res__card--2 .sip-res__foot, .sip-res--n3 .sip-res__card--3 .sip-res__foot { flex-direction: row; align-items: center; flex: none; margin-top: auto; padding-top: 24px; }
	.sip-res--n3 .sip-res__card--1 { grid-column: 1 / -1; } /* tablet: large card first, full width; cards 2 + 3 side by side below */
	.sip-res--n3 .sip-res__card--1 .sip-res__media { aspect-ratio: 16 / 9; }
	.sip-res__media + .sip-res__body { margin-top: 24px; }
	.sip-res__title { font-size: 26px; line-height: 32px; }
}@media (min-width:1025px) and (max-width:1199px), (min-width:1025px) and (max-width:1440px) and (pointer:coarse){
	/* 3 cards: the large card full width, cards 2 + 3 side by side; every card image-on-top */
	.sip-res--n3 .sip-res__card--1 { grid-row: auto; }
	.sip-res--n3 .sip-res__card--2, .sip-res--n3 .sip-res__card--3 { flex-direction: column; gap: 0; padding: 20px 20px 30px; }
	.sip-res--n3 .sip-res__card--2 .sip-res__media, .sip-res--n3 .sip-res__card--3 .sip-res__media { flex: none; aspect-ratio: 520 / 380; min-height: 0; }
	.sip-res--n3 .sip-res__card--2 .sip-res__media + .sip-res__body, .sip-res--n3 .sip-res__card--3 .sip-res__media + .sip-res__body { margin-top: 24px; }
	.sip-res--n3 .sip-res__card--2 .sip-res__foot, .sip-res--n3 .sip-res__card--3 .sip-res__foot { flex-direction: row; align-items: center; flex: none; margin-top: auto; padding-top: 24px; }
	.sip-res--n3 .sip-res__card--1 { grid-column: 1 / -1; } /* tablet: large card first, full width; cards 2 + 3 side by side below */
	.sip-res--n3 .sip-res__card--1 .sip-res__media { aspect-ratio: 16 / 9; }
	.sip-res__media + .sip-res__body { margin-top: 24px; }
	.sip-res__title { font-size: 26px; line-height: 32px; }
}
@media (max-width: 767px) {
	.sip-res, .sip-res--n1 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sip-res--n3 .sip-res__card--1 .sip-res__media { aspect-ratio: 520 / 380; }
	.sip-res--n1 .sip-res__card { flex-direction: column; gap: 0; padding: 20px 20px 30px; }
	.sip-res--n1 .sip-res__media { flex: none; }
	.sip-res--n1 .sip-res__media + .sip-res__body { margin-top: 24px; padding: 0; }
	.sip-res__title { font-size: 24px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.sip-res__card, .sip-res__media img, .sip-res__cta svg { transition: none; }
	.sip-res__card:hover, .sip-res__card:focus-within { transform: none; }
	.sip-res__card:hover .sip-res__media img { transform: none; }
}