/**
 * CIPIT Research Outputs — grid styles, Elegante edition.
 *
 * Cards follow the theme's own cards (template-parts/card-*.php, elegante-pages.css §4):
 * the same thumbnail frame, striped "no image" placeholder, eyebrow label, grid gaps,
 * breakpoints and pager, using the theme's --el-* tokens. Titles stay small and red
 * (0.8rem, set per grid with title_size), like the video cards they share tabs with.
 * Hover darkens the title here; the thumbnail's lift and shadow come from the theme
 * (elegante-pages.css, "Card hover in the plugin grids"), so every card hovers alike.
 */

.cipit-ro {
	--cipit-ro-primary: var(--el-brand, #C4161C);
	--cipit-ro-primary-hover: var(--el-brand-dark, #9E0F16);
	--cipit-ro-radius: 12px;
	--cipit-ro-gap: 34px 26px;
	margin: 2rem 0;
}

.cipit-ro__heading {
	margin: 0 0 24px;
	font: 700 20px/1.25 var(--el-font, Arial, sans-serif);
	letter-spacing: -0.01em;
	color: var(--el-ink, #1A1618);
}

.cipit-ro-grid {
	display: grid;
	grid-template-columns: repeat(var(--cipit-ro-cols, 4), minmax(0, 1fr));
	gap: var(--cipit-ro-gap);
}

.cipit-ro-card {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}

/* --- Thumbnail (as .book-cover / .blog-card-image) ---------------------- */
.cipit-ro-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--el-line-soft, rgba(0, 0, 0, 0.07));
	border-radius: var(--cipit-ro-radius);
	background: var(--el-chip, #F4F1F2);
	background-clip: padding-box;
	text-decoration: none;
}

.cipit-ro-card--portrait .cipit-ro-thumb { aspect-ratio: 210 / 297; } /* A4 portrait */
.cipit-ro-card--wide     .cipit-ro-thumb { aspect-ratio: 16 / 9; }    /* blog, as the video cards */
.cipit-ro-card--square   .cipit-ro-thumb { aspect-ratio: 1 / 1; }     /* podcast artwork */

.cipit-ro .cipit-ro-thumb img {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
	object-fit: cover;
	object-position: top center;
}

.cipit-ro--fit-contain .cipit-ro-thumb {
	background: var(--c-paper, #fff);
}

.cipit-ro--fit-contain .cipit-ro-thumb img {
	object-fit: contain;
	object-position: center;
}

/* No featured image: the theme's striped placeholder with a faint icon. */
.cipit-ro-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, var(--el-stripe-1, #F1EEEF) 0 8px, var(--el-stripe-2, #F7F5F5) 8px 16px);
	color: color-mix(in srgb, var(--c-contrast, #1A1618) 22%, transparent);
	font-size: 2rem;
}

.cipit-ro-placeholder__text { display: none; }

/* --- Podcasts: the video cards' play button and hover tint -------------- */
.cipit-ro--podcast .cipit-ro-thumb img { object-position: center; }

.cipit-ro-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cipit-ro-primary);
	font-size: 35px;
	opacity: 0.8;
	pointer-events: none;
	transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.cipit-ro-card:hover .cipit-ro-play {
	opacity: 1;
	background: color-mix(in srgb, var(--cipit-ro-primary) 40%, transparent);
	color: var(--c-on-dark, #fff);
}

/* --- Text -------------------------------------------------------------- */

/* Category label: the theme's eyebrow. */
.cipit-ro .cipit-ro-term {
	margin: 0 0 -0.45rem;
	font: 600 12.5px/1.3 var(--el-font, Arial, sans-serif);
	letter-spacing: -0.005em;
	color: var(--cipit-ro-primary);
}

/* Scoped under .cipit-ro so these beat container rules such as the tabs
   plugin's `.tab-content-panel h3 { margin-top: 2rem }` and
   `.tab-contents-wrap a { word-break: break-all }`. */
.cipit-ro .cipit-ro-title {
	margin: 0;
	font-family: var(--el-font, Arial, sans-serif);
	font-size: var(--cipit-ro-title-size, 0.8rem);
	line-height: 1.3;
	letter-spacing: 0;
	font-weight: 700;
	text-wrap: pretty;
}

.cipit-ro .cipit-ro-title a {
	color: var(--cipit-ro-primary);
	text-decoration: none;
	word-break: normal;
	overflow-wrap: break-word;
	transition: color 0.3s ease;
}

.cipit-ro-card:hover .cipit-ro-title a,
.cipit-ro .cipit-ro-title a:focus-visible {
	color: var(--cipit-ro-primary-hover);
}

/* Kept at the title's size so it never reads louder than the title. */
.cipit-ro .cipit-ro-excerpt {
	margin: -0.35rem 0 0;
	color: var(--el-body, #55504F);
	font-size: var(--cipit-ro-excerpt-size, 0.8rem);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Responsive (the theme's card and publication grids) --------------- */
@media (max-width: 960px) {
	.cipit-ro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cipit-ro--wide .cipit-ro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.cipit-ro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
	.cipit-ro--wide .cipit-ro-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cipit-ro-gap); }
}

/* --- Pagination (the theme's .pagination) ------------------------------ */
.cipit-ro-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 55px 0 0;
}

.cipit-ro-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--el-line-strong, rgba(0, 0, 0, 0.12));
	border-radius: 22px;
	background: var(--c-paper, #fff);
	color: var(--el-ink, #1A1618);
	font: 500 14px/1 var(--el-font, Arial, sans-serif);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cipit-ro-pagination a.page-numbers:hover {
	border-color: color-mix(in srgb, var(--cipit-ro-primary) 45%, transparent);
	color: var(--cipit-ro-primary);
}

.cipit-ro-pagination .page-numbers.current {
	background: var(--cipit-ro-primary);
	border-color: var(--cipit-ro-primary);
	color: var(--c-on-dark, #fff);
	font-weight: 700;
}

.cipit-ro-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.cipit-ro-pagination .prev,
.cipit-ro-pagination .next {
	width: 44px;
	padding: 0;
	border-radius: 50%;
	font-size: 13px;
}

.cipit-ro-pagination .next {
	background: var(--el-ink, #1A1618);
	border-color: var(--el-ink, #1A1618);
	color: var(--c-on-dark, #fff);
}

.cipit-ro-pagination a.next:hover {
	background: var(--c-contrast, #000);
	border-color: var(--c-contrast, #000);
	color: var(--c-on-dark, #fff);
}

@media (max-width: 640px) {
	.cipit-ro-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 13px; }
	.cipit-ro-pagination .prev,
	.cipit-ro-pagination .next { width: 38px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cipit-ro-play,
	.cipit-ro .cipit-ro-title a,
	.cipit-ro-pagination .page-numbers { transition: none; }
}