/* WSU Content Views — replaces Content Views (Pro) front-end styling.
   Layout is driven by CSS variables set per view: --wsu-cols, --wsu-cols-tablet, --wsu-cols-mobile. */

.wsu-view { margin: 0 0 1.5em; }
.wsu-view__items {
	display: grid;
	grid-template-columns: repeat(var(--wsu-cols, 1), minmax(0, 1fr));
	gap: 15px;
	align-items: start;
}
.wsu-view--same-height .wsu-view__items { align-items: stretch; }
@media (max-width: 991px) {
	.wsu-view__items { grid-template-columns: repeat(var(--wsu-cols-tablet, var(--wsu-cols, 1)), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.wsu-view__items { grid-template-columns: repeat(var(--wsu-cols-mobile, 1), minmax(0, 1fr)); }
}

/* items */
.wsu-view__item { min-width: 0; margin: 0; }
.wsu-view__thumb { display: block; margin-bottom: 0.6em; line-height: 0; }
.wsu-view__img { width: 100%; height: auto; border-radius: 6px; display: block; }
.wsu-view__thumb--fixed .wsu-view__img {
	width: var(--wsu-thumb-w); height: var(--wsu-thumb-h); max-width: 100%;
	object-fit: cover;
}
.wsu-view__title { margin: 0 0 0.35em; font-size: 1.05em; line-height: 1.3; }
.wsu-view__title a { text-decoration: none; }
.wsu-view__title a:hover, .wsu-view__title a:focus { text-decoration: underline; }
.wsu-view__meta { font-size: 0.85em; opacity: 0.75; margin-bottom: 0.4em; }
.wsu-view__content { font-size: 0.95em; line-height: 1.5; }
.wsu-view__content > :last-child { margin-bottom: 0; }
.wsu-view__more { white-space: nowrap; }
.wsu-view__empty { opacity: 0.7; font-style: italic; }

/* 2-col item: thumbnail left, text right */
.wsu-view__item--2col { display: flex; gap: 15px; align-items: flex-start; }
.wsu-view__item--2col .wsu-view__thumb { flex: 0 0 auto; margin: 0; width: var(--wsu-thumb-w, 150px); }
.wsu-view__item--2col .wsu-view__thumb:not(.wsu-view__thumb--fixed) { width: 33%; }
.wsu-view__item--2col .wsu-view__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
	.wsu-view__item--2col { flex-direction: column; }
	.wsu-view__item--2col .wsu-view__thumb { width: 100%; }
}

/* collapsible (accordion) */
.wsu-view--collapsible .wsu-view__items { display: block; }
.wsu-view__item--collapsible { border-bottom: 1px solid rgba(0,0,0,.12); padding: 0.3em 0; }
.wsu-view__summary { cursor: pointer; font-weight: 600; padding: 0.5em 0; list-style: none; position: relative; padding-right: 1.5em; }
.wsu-view__summary::-webkit-details-marker { display: none; }
.wsu-view__summary::after { content: "+"; position: absolute; right: 0.25em; top: 0.35em; font-size: 1.2em; opacity: 0.6; }
.wsu-view__item--collapsible[open] > .wsu-view__summary::after { content: "–"; }
.wsu-view__body { padding: 0.25em 0 1em; }

/* scrollable (carousel): one row of --wsu-cols items, horizontal scroll with snap */
.wsu-view--scrollable { position: relative; }
.wsu-view--scrollable .wsu-view__items {
	display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 0.25em;
}
.wsu-view--scrollable .wsu-view__items::-webkit-scrollbar { display: none; }
.wsu-view--scrollable .wsu-view__item {
	flex: 0 0 calc((100% - 15px * (var(--wsu-cols, 2) - 1)) / var(--wsu-cols, 2));
	scroll-snap-align: start;
}
@media (max-width: 767px) {
	.wsu-view--scrollable .wsu-view__item { flex-basis: calc((100% - 15px * (var(--wsu-cols-mobile, 1) - 1)) / var(--wsu-cols-mobile, 1)); }
}
.wsu-view__nav { display: flex; justify-content: center; gap: 0.5em; margin-top: 0.5em; }
.wsu-view__nav button, .wsu-view__pagination button {
	font: inherit; font-size: 0.9em; line-height: 1; padding: 0.45em 0.8em; cursor: pointer;
	border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit;
}
.wsu-view__nav button:hover, .wsu-view__pagination button:hover { background: rgba(0,0,0,.06); }
.wsu-view__dots { display: flex; justify-content: center; gap: 0.4em; margin-top: 0.5em; }
.wsu-view__dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; opacity: 0.5; }
.wsu-view__dots button.is-active { background: currentColor; opacity: 1; }

/* pagination */
.wsu-view__pagination { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 1em; }
.wsu-view__pagination button.is-current { background: currentColor; color: #fff; cursor: default; }
.wsu-view__pagination button[disabled] { opacity: 0.5; cursor: wait; }
.wsu-view.is-loading .wsu-view__items { opacity: 0.5; }

/* heading above a view (block views) */
.wsu-view__heading { margin: 1.2em 0 0.6em; }
.wsu-view__heading.heading2 { font-size: 1.5em; }
.wsu-view__heading.heading3 { font-size: 1.25em; }

/* fixed-height thumbnails (grid/overlay block views) */
.wsu-view__thumb--height .wsu-view__img { width: 100%; height: var(--wsu-thumb-h, 220px); object-fit: cover; }

/* overlay layout: title + meta over the bottom of the image */
.wsu-view--overlay .wsu-view__items { gap: 14px; }
.wsu-view__item--overlay { position: relative; border-radius: 6px; overflow: hidden; background: #222; min-height: 180px; }
.wsu-view__item--overlay .wsu-view__thumb { margin: 0; display: block; }
.wsu-view__item--overlay .wsu-view__img { border-radius: 0; display: block; width: 100%; height: var(--wsu-thumb-h, 320px); object-fit: cover; }
.wsu-view__item--overlay .wsu-view__thumb--empty { display: block; height: var(--wsu-thumb-h, 320px); }
.wsu-view__overlay {
	position: absolute; inset: auto 0 0 0; padding: 2.5em 1em 0.9em;
	background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,0) 100%);
	color: #fff;
}
.wsu-view__overlay .wsu-view__title { margin: 0 0 0.25em; font-size: 1.05em; }
.wsu-view__overlay .wsu-view__title a, .wsu-view__overlay .wsu-view__meta a { color: #fff; }
.wsu-view__overlay .wsu-view__meta { opacity: 0.85; margin: 0; }
.wsu-view__terms a { display: inline-block; font-size: 0.75em; padding: 0.15em 0.6em; border-radius: 3px; background: #e91e63; color: #fff; text-decoration: none; margin-bottom: 0.4em; }