/* ============================================================
   Query Loop Slider — front-end styles  v1.1
   ============================================================ */

/* ── Custom properties ─────────────────────────────────────── */
.qls-slider {
	--qls-radius:       12px;
	--qls-gap:          24px;
	--qls-accent:       #2563eb;
	--qls-accent-hover: #1d4ed8;
	--qls-bg:           #ffffff;
	--qls-surface:      #f8fafc;
	--qls-border:       #e2e8f0;
	--qls-text:         #1e293b;
	--qls-muted:        #64748b;
	--qls-cat-bg:       #eff6ff;
	--qls-cat-color:    #2563eb;
	--qls-arrow-size:   44px;
	--qls-shadow:       0 4px 24px rgba(0, 0, 0, 0.08);
	--qls-shadow-hover: 0 8px 36px rgba(0, 0, 0, 0.14);
	--qls-img-ratio:    56.25%;   /* 16:9 */
	--qls-slider-bg:    transparent;

	/* Blob animation colours (inherit accent, can be overridden) */
	--qls-blob1: color-mix(in srgb, var(--qls-accent) 18%, transparent);
	--qls-blob2: color-mix(in srgb, var(--qls-accent) 12%, transparent);
	--qls-blob3: color-mix(in srgb, #a855f7       15%, transparent);
}

/* ── Wrapper ────────────────────────────────────────────────── */
.qls-slider {
	position:         relative;
	width:            100%;
	overflow:         hidden;
	outline:          none;
	box-sizing:       border-box;
	background-color: var(--qls-slider-bg);
}

.qls-slider *,
.qls-slider *::before,
.qls-slider *::after { box-sizing: inherit; }

/* ── Background animation ───────────────────────────────────── */
.qls-bg-animation {
	position:       absolute;
	inset:          0;
	overflow:       hidden;
	pointer-events: none;
	z-index:        0;
}

.qls-blob {
	position:      absolute;
	border-radius: 50%;
	filter:        blur(60px);
	opacity:       0.85;
}

.qls-blob--1 {
	width:      420px;
	height:     420px;
	top:        -120px;
	left:       -80px;
	background: var(--qls-blob1);
	animation:  qls-drift1 18s ease-in-out infinite alternate;
}

.qls-blob--2 {
	width:      320px;
	height:     320px;
	bottom:     -80px;
	right:      10%;
	background: var(--qls-blob2);
	animation:  qls-drift2 22s ease-in-out infinite alternate;
}

.qls-blob--3 {
	width:      260px;
	height:     260px;
	top:        40%;
	left:       55%;
	background: var(--qls-blob3);
	animation:  qls-drift3 15s ease-in-out infinite alternate;
}

@keyframes qls-drift1 {
	0%   { transform: translate(0px,   0px)   scale(1); }
	50%  { transform: translate(60px,  40px)  scale(1.08); }
	100% { transform: translate(-30px, 80px)  scale(0.95); }
}

@keyframes qls-drift2 {
	0%   { transform: translate(0px,  0px)   scale(1); }
	50%  { transform: translate(-70px, -30px) scale(1.12); }
	100% { transform: translate(40px,  60px)  scale(0.92); }
}

@keyframes qls-drift3 {
	0%   { transform: translate(0px, 0px)    scale(1); }
	50%  { transform: translate(50px, -50px) scale(1.05); }
	100% { transform: translate(-40px, 30px) scale(0.98); }
}

/* Content must sit above the blobs */
.qls-slider--animated .qls-track-wrapper,
.qls-slider--animated .qls-arrow,
.qls-slider--animated .qls-dots {
	position: relative;
	z-index:  1;
}

/* ── Dots — above or below ──────────────────────────────────── */
.qls-dots {
	display:         flex;
	justify-content: center;
	gap:             8px;
	padding:         14px 0;
}

.qls-dots--above { order: -1; padding-top: 4px; padding-bottom: 14px; }
.qls-dots--below { padding-top: 14px; padding-bottom: 4px; }

/* Flex column on the wrapper so "above" actually renders above */
.qls-slider {
	display:        flex;
	flex-direction: column;
}

.qls-track-wrapper { order: 0; }
.qls-dots--above   { order: -1; }
.qls-dots--below   { order: 1; }

/* Arrows sit inside track-wrapper, so they need absolute positioning */
.qls-track-wrapper { position: relative; }

/* ── Track ──────────────────────────────────────────────────── */
.qls-track-wrapper { overflow: hidden; width: 100%; }

.qls-track {
	display:     flex;
	gap:         var(--qls-gap);
	will-change: transform;
	cursor:      grab;
	user-select: none;
	-webkit-user-select: none;
}

.qls-track:active { cursor: grabbing; }

/* ── Slide card ─────────────────────────────────────────────── */
.qls-slide {
	flex-shrink:    0;
	background:     var(--qls-bg);
	border-radius:  var(--qls-radius);
	border:         1px solid var(--qls-border);
	box-shadow:     var(--qls-shadow);
	overflow:       hidden;
	transition:     box-shadow 0.25s ease, transform 0.25s ease;
	display:        flex;
	flex-direction: column;
}

.qls-slide:hover {
	box-shadow: var(--qls-shadow-hover);
	transform:  translateY(-3px);
}

/* ── Featured image ─────────────────────────────────────────── */
.qls-slide__media {
	position:    relative;
	width:       100%;
	padding-top: var(--qls-img-ratio);
	background:  var(--qls-surface);
	overflow:    hidden;
}

.qls-slide__image-link {
	position: absolute;
	inset:    0;
	display:  block;
}

.qls-slide__image {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.qls-slide:hover .qls-slide__image { transform: scale(1.04); }

.qls-slide__image-placeholder {
	position:   absolute;
	inset:      0;
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.qls-slide__image-placeholder::after {
	content:     '';
	position:    absolute;
	top:         50%;
	left:        50%;
	transform:   translate(-50%, -50%);
	width:       48px;
	height:      48px;
	background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
	opacity:     0.5;
}

/* ── Card body ──────────────────────────────────────────────── */
.qls-slide__body {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	padding:        20px 22px 18px;
	flex:           1;
}

/* ── Category pills ─────────────────────────────────────────── */
.qls-cats { display: flex; flex-wrap: wrap; gap: 6px; }

.qls-cat {
	display:         inline-block;
	padding:         3px 10px;
	border-radius:   999px;
	background:      var(--qls-cat-bg);
	color:           var(--qls-cat-color);
	font-size:       0.72rem;
	font-weight:     600;
	letter-spacing:  0.03em;
	text-transform:  uppercase;
	text-decoration: none;
	transition:      background 0.2s, color 0.2s;
}

.qls-cat:hover { background: var(--qls-accent); color: #fff; }

/* ── Title ──────────────────────────────────────────────────── */
.qls-slide__title {
	margin:      0;
	font-size:   clamp(1rem, 2vw, 1.2rem);
	font-weight: 700;
	line-height: 1.3;
	color:       var(--qls-text);
}

.qls-slide__title a {
	color:           inherit;
	text-decoration: none;
	transition:      color 0.2s;
}

.qls-slide__title a:hover { color: var(--qls-accent); }

/* ── Excerpt ────────────────────────────────────────────────── */
.qls-slide__excerpt {
	margin:             0;
	font-size:          0.9rem;
	line-height:        1.65;
	color:              var(--qls-muted);
	flex:               1;
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* ── Footer ─────────────────────────────────────────────────── */
.qls-slide__footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	padding-top:     12px;
	border-top:      1px solid var(--qls-border);
	margin-top:      auto;
}

/* ── Author ─────────────────────────────────────────────────── */
.qls-author {
	display:     flex;
	align-items: center;
	gap:         10px;
	min-width:   0;
}

.qls-author__avatar {
	width:         32px;
	height:        32px;
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
	border:        2px solid var(--qls-border);
}

.qls-author__meta {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}

.qls-author__name {
	font-size:       0.78rem;
	font-weight:     600;
	color:           var(--qls-text);
	text-decoration: none;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

.qls-author__name:hover { color: var(--qls-accent); }

.qls-slide__date {
	font-size: 0.72rem;
	color:     var(--qls-muted);
}

/* When author is hidden, the date block still shows */
.qls-author--no-avatar {
	align-items: center;
}

.qls-author--no-avatar .qls-slide__date {
	font-size: 0.78rem;
}

/* ── Read more ──────────────────────────────────────────────── */
.qls-read-more {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-size:       0.8rem;
	font-weight:     600;
	color:           var(--qls-accent);
	text-decoration: none;
	white-space:     nowrap;
	flex-shrink:     0;
	transition:      color 0.2s, gap 0.2s;
}

.qls-read-more:hover { color: var(--qls-accent-hover); gap: 7px; }

/* ── Arrows ─────────────────────────────────────────────────── */
.qls-arrow {
	position:        absolute;
	top:             calc(var(--qls-img-ratio) / 2);
	transform:       translateY(-50%);
	z-index:         10;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--qls-arrow-size);
	height:          var(--qls-arrow-size);
	border-radius:   50%;
	background:      rgba(255, 255, 255, 0.92);
	border:          1px solid var(--qls-border);
	box-shadow:      0 2px 8px rgba(0,0,0,0.12);
	cursor:          pointer;
	color:           var(--qls-text);
	transition:      background 0.2s, box-shadow 0.2s, opacity 0.2s;
	padding:         0;
}

.qls-arrow svg    { width: 18px; height: 18px; }
.qls-arrow--prev  { left:  12px; }
.qls-arrow--next  { right: 12px; }

.qls-arrow:hover:not(:disabled) {
	background: #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.qls-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Dots ───────────────────────────────────────────────────── */
.qls-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--qls-border);
	border:        none;
	padding:       0;
	cursor:        pointer;
	transition:    background 0.25s, transform 0.25s, width 0.25s;
}

.qls-dot.is-active {
	background:    var(--qls-accent);
	width:         22px;
	border-radius: 4px;
}

.qls-dot:hover:not(.is-active) { background: #94a3b8; }

/* ── No posts ───────────────────────────────────────────────── */
.qls-no-posts { padding: 40px; text-align: center; color: var(--qls-muted); }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.qls-blob              { animation: none !important; }
	.qls-track,
	.qls-slide,
	.qls-slide__image,
	.qls-arrow,
	.qls-dot,
	.qls-read-more         { transition: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
	.qls-slider     { --qls-gap: 16px; }
	.qls-slide__body { padding: 16px; }
	.qls-arrow      { --qls-arrow-size: 36px; }
	.qls-arrow--prev { left:  6px; }
	.qls-arrow--next { right: 6px; }
}