/*
 * TSRDigital Library – support for the native Elementor templates.
 * Only behaviour lives here (scrolling, marquee motion, arrows, hiding empty media).
 * Colours, fonts, spacing and sizes are Elementor settings on each element.
 */

/* Gradient text: <span class="grad">words</span> inside any heading or text. */
.grad { color: #5856D6; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	/* :not(#tsrn) raises specificity above Elementor's "lazy load background images" rule. */
	.elementor .grad:not(#tsrn) {
		background-image: linear-gradient(90deg, #0066CC 0%, #5856D6 25%, #AF52DE 50%, #D6336C 75%, #0066CC 100%) !important;
		background-size: 200% auto;
		-webkit-background-clip: text; background-clip: text;
		color: transparent;
		-webkit-box-decoration-break: clone; box-decoration-break: clone;
		animation: tsrnGrad 8s linear infinite;
	}
}
@keyframes tsrnGrad { to { background-position: 200% center; } }

/* Text Editor widgets: no browser-default top margin; spacing between paragraphs is the widget's
   "Paragraph Spacing" control, and nothing hangs below the last paragraph. */
.elementor-widget-text-editor :is(p, ul, ol, table) { margin-top: 0; }
.elementor-widget-text-editor :is(p, ul, ol, table):last-child { margin-bottom: 0 !important; }

/* Carousels: a container with class "tsrn-scroll" (Layout: Row, No wrap, Overflow: Auto). */
.tsrn-scroll, .tsrn-scroll > .e-con-inner {
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin; scrollbar-color: #A1A1A6 transparent;
}
.tsrn-scroll > *, .tsrn-scroll > .e-con-inner > * { scroll-snap-align: start; }
.tsrn-scroll { scroll-padding-inline: max(24px, calc((100% - var(--container-max-width, 1200px)) / 2)); }
.tsrn-scroll:focus-visible { outline: 3px solid #0066CC; outline-offset: -3px; }

/* Arrow buttons (added by native.js into the "tsrn-nav" container). Colours follow these variables. */
.tsrn-nav { --tsrn-arrow-bg: #E3E3E8; --tsrn-arrow-color: #1D1D1F; --tsrn-arrow-bg-hover: #D2D2D7; }
.tsrn-nav:empty { display: none; }
.tsrn-nav button.tsrn-arrow {
	width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tsrn-arrow-bg); color: var(--tsrn-arrow-color);
	transition: background-color .2s, opacity .2s; box-shadow: none; min-height: 0;
}
.tsrn-nav button.tsrn-arrow:hover { background: var(--tsrn-arrow-bg-hover); }
.tsrn-nav button.tsrn-arrow:disabled { opacity: .35; cursor: default; }
.tsrn-nav button.tsrn-arrow svg { width: 18px; height: 18px; }
.tsrn-carousel.tsrn-fits .tsrn-nav { display: none; }

/* Logo marquee: "tsrn-marquee" (Overflow: Hidden) > "tsrn-marquee__track" (Row, No wrap). */
.tsrn-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tsrn-marquee.is-ready .tsrn-marquee__track { width: max-content; animation: tsrnMarquee var(--tsrn-marquee-speed, 40s) linear infinite; }
.tsrn-marquee.is-ready:hover .tsrn-marquee__track { animation-play-state: paused; }
.tsrn-marquee__track > * { flex: none !important; }
@keyframes tsrnMarquee { to { transform: translateX(-50%); } }

/* Video: rounded corners clip the player too. */
.tsrn-video .elementor-wrapper, .tsrn-video .elementor-widget-container { border-radius: inherit; overflow: hidden; }

/* Nothing empty for visitors: placeholder images and sections waiting for media are hidden
   until you add real ones (you still see them while logged in). */
body:not(.logged-in) .elementor-widget-image:has(img[src*="placeholder"]) { display: none; }
body:not(.logged-in) .tsrn-needs-media:not(:has(.elementor-widget-image img:not([src*="placeholder"]), iframe, .tsr-yt, .elementor-video, .e-con[style*="background-image"])) { display: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.elementor .grad:not(#tsrn), .tsrn-marquee.is-ready .tsrn-marquee__track { animation: none; }
	.tsrn-scroll, .tsrn-scroll > .e-con-inner { scroll-behavior: auto; }
}

/* Editor: show everything static. */
.elementor-editor-active .tsrn-marquee__track { flex-wrap: wrap !important; animation: none !important; }

/* TSR Posts widget (defaults; every value can be changed in the widget's Style tab) */
.tsrl-posts { display: flex; gap: 20px; }
.tsrl-posts--carousel { overflow-x: auto; padding: 4px 0 24px; }
.tsrl-posts--bleed { padding-inline: max(24px, calc((100% - var(--container-max-width, 1200px)) / 2)); }
.tsrl-posts--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsrl-post { flex: none; width: 360px; max-width: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; }
.tsrl-posts--grid .tsrl-post { width: auto; }
.tsrl-post__media { display: block; aspect-ratio: 16 / 10; background: #E8E8ED; overflow: hidden; }
.tsrl-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tsrl-post:hover .tsrl-post__media img { transform: scale(1.04); }
.tsrl-post__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.tsrl-post__cat { margin: 0; font-size: 13px; font-weight: 600; color: #0066CC; }
.tsrl-post__title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.tsrl-post__title a { color: #1D1D1F; text-decoration: none; }
.tsrl-post__meta { margin: 0; font-size: 13px; color: #6E6E73; }
.tsrl-posts__empty { margin: 0; color: #6E6E73; }

/* TSR Proposal Form widget */
.tsrl-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tsrl-form .form-grid .full, .tsrl-form .form-grid textarea { grid-column: 1 / -1; }
.tsrl-form .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #A1A1A6; margin: 0; }
.tsrl-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
	width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 10px; border: 1px solid #424245; background: #000; color: #F5F5F7;
}
.tsrl-form textarea { resize: vertical; min-height: 120px; }
.tsrl-form :is(button[type="submit"], input[type="submit"]) { min-height: 48px; border: 0; cursor: pointer; font-size: 17px; font-weight: 500; transition: background-color .2s; }
.tsrl-form .hp { position: absolute !important; left: -9999px !important; }

/* Tables (Text Editor widget with class tsr-table): grey variant for white sections. */
.elementor-widget-text-editor.tsr-table--grey table { background: #F5F5F7 !important; }