/**
 * Stack Posts — Frontend Styles
 * 40 layout styles, clear borders on all.
 */

/* ── Variables ─────────────────────────────────────────────── */
.stkp-wrap {
	--stkp-border:       #e4e7ec;
	--stkp-accent:       #4f46e5;
	--stkp-accent-light: color-mix(in srgb, var(--stkp-accent) 8%, #ffffff);
	--stkp-accent-soft:  color-mix(in srgb, var(--stkp-accent) 18%, transparent);
	--stkp-card-bg:      #ffffff;
	--stkp-surface:      #f7f8fa;
	--stkp-text:         #475467;
	--stkp-title:        #101828;
	--stkp-meta:         #98a2b3;
	--stkp-radius:       12px;
	--stkp-radius-sm:    8px;
	--stkp-gap:          24px;
	--stkp-thumb-h:      200px;
	--stkp-cols:         3;
	--stkp-shadow:       0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
	--stkp-shadow-lg:    0 2px 4px rgba(16,24,40,.06), 0 16px 40px -12px rgba(16,24,40,.18);
}

/* Older browsers without color-mix() still get a usable tint. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.stkp-wrap { --stkp-accent-light: #f5f4ff; --stkp-accent-soft: rgba(79,70,229,.18); }
}

/* ── Column Grid ────────────────────────────────────────────── */
.stkp-cols-1 { --stkp-cols: 1; }
.stkp-cols-2 { --stkp-cols: 2; }
.stkp-cols-3 { --stkp-cols: 3; }
.stkp-cols-4 { --stkp-cols: 4; }

@media (max-width: 1024px) {
	.stkp-tablet-1 { --stkp-cols: 1; }
	.stkp-tablet-2 { --stkp-cols: 2; }
	.stkp-tablet-3 { --stkp-cols: 3; }
}
@media (max-width: 767px) {
	.stkp-mobile-1 { --stkp-cols: 1; }
	.stkp-mobile-2 { --stkp-cols: 2; }
}

/* ── Base Wrap ──────────────────────────────────────────────── */
.stkp-wrap {
	display: grid;
	grid-template-columns: repeat(var(--stkp-cols), 1fr);
	gap: var(--stkp-gap);
	box-sizing: border-box;
}
.stkp-wrap * { box-sizing: border-box; }

/* ── Base Card ──────────────────────────────────────────────── */
.stkp-card {
	position:       relative;
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	transition:     transform 0.25s ease, box-shadow 0.25s ease;
}

.stkp-thumb {
	overflow:   hidden;
	flex-shrink: 0;
}

.stkp-thumb img {
	display:     block;
	width:       100%;
	height:      var(--stkp-thumb-h, 200px);
	object-fit:  cover;
	transition:  transform 0.4s ease;
}

/* ── Side-by-side layouts ───────────────────────────────────────
   The media column is taken out of flow so the image's natural aspect
   ratio cannot drive the row height. Without this a 4:3 image at 42%
   width forced 250–400px of empty space beside the copy. */
.stkp-horizontal  .stkp-thumb,
.stkp-zigzag      .stkp-thumb,
.stkp-blog-roll   .stkp-thumb,
.stkp-banner-card .stkp-thumb,
.stkp-split       .stkp-thumb {
	position:   relative;
	align-self: stretch;
	min-height: 180px;
}

.stkp-horizontal  .stkp-thumb img,
.stkp-zigzag      .stkp-thumb img,
.stkp-banner-card .stkp-thumb img,
.stkp-split       .stkp-thumb img {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	min-height: 0;
}

/* ── Thumbnail aspect ratio ─────────────────────────────────── */
.stkp-ratio-16-9 .stkp-thumb img { height: auto; aspect-ratio: 16 / 9; }
.stkp-ratio-3-2  .stkp-thumb img { height: auto; aspect-ratio: 3 / 2; }
.stkp-ratio-4-3  .stkp-thumb img { height: auto; aspect-ratio: 4 / 3; }
.stkp-ratio-1-1  .stkp-thumb img { height: auto; aspect-ratio: 1 / 1; }
.stkp-ratio-3-4  .stkp-thumb img { height: auto; aspect-ratio: 3 / 4; }
.stkp-ratio-auto .stkp-thumb img { height: auto; aspect-ratio: auto; object-fit: contain; }

.stkp-card:hover .stkp-thumb img {
	transform: scale(1.04);
}

.stkp-body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        20px;
}

.stkp-cat {
	display:        inline-block;
	font-size:      0.72em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--stkp-accent);
	text-decoration: none;
	margin-bottom:  8px;
}

.stkp-cat:hover { text-decoration: underline; }

.stkp-cat-badge {
	position:      absolute;
	top:           14px;
	left:          14px;
	z-index:       2;
	display:       inline-block;
	font-size:     0.72em;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:         #fff;
	background:    var(--stkp-accent);
	padding:       4px 10px;
	border-radius: 4px;
	text-decoration: none;
}

.stkp-title {
	font-size:   1.05em;
	font-weight: 700;
	line-height: 1.4;
	margin:      0 0 10px;
	color:       var(--stkp-title);
}

.stkp-title a {
	color:           inherit;
	text-decoration: none;
	transition:      color 0.2s;
}

.stkp-title a:hover { color: var(--stkp-accent); }

.stkp-meta {
	font-size:    0.78em;
	color:        var(--stkp-meta);
	margin-bottom: 10px;
	display:      flex;
	align-items:  center;
	flex-wrap:    wrap;
	gap:          4px;
}

.stkp-author {
	color:           inherit;
	text-decoration: none;
}
.stkp-author:hover { color: var(--stkp-accent); }

.stkp-excerpt {
	font-size:   0.95em;
	color:       var(--stkp-text);
	line-height: 1.65;
	margin:      0 0 16px;
}

/* Footer row — pinned to the bottom of the card so every card in a row
   lines its Read More up on the same baseline. */
.stkp-foot {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         12px;
	margin-top:  auto;
	padding-top: 4px;
}

.stkp-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-height:      44px;
	font-size:       0.88em;
	font-weight:     600;
	color:           var(--stkp-accent);
	text-decoration: none;
	padding:         9px 18px;
	border:          1px solid transparent;
	background:      var(--stkp-accent-light);
	border-radius:   8px;
	align-self:      flex-start;
	transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.stkp-btn:hover {
	background: var(--stkp-accent);
	color:      #fff;
}

.stkp-no-posts {
	text-align: center;
	color:      var(--stkp-meta);
	padding:    40px;
	grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 1 — Grid Classic
   White cards, 1px border, light shadow
══════════════════════════════════════════════════════════════ */
.stkp-grid-classic .stkp-card {
	background:    var(--stkp-card-bg);
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	box-shadow:    var(--stkp-shadow);
}

.stkp-grid-classic .stkp-card:hover {
	border-color: var(--stkp-accent);
	box-shadow:   var(--stkp-shadow-lg);
	transform:    translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 2 — Overlap Card
   Image band with the text panel pulled up over its lower edge.
══════════════════════════════════════════════════════════════ */
.stkp-grid-minimal .stkp-card {
	background: transparent;
	overflow:   visible;
}

.stkp-grid-minimal .stkp-thumb {
	border-radius: var(--stkp-radius);
	overflow:      hidden;
}

.stkp-grid-minimal .stkp-body {
	position:      relative;
	z-index:       1;
	margin:        -44px 14px 0;
	padding:       18px;
	background:    var(--stkp-card-bg);
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	box-shadow:    var(--stkp-shadow);
}

.stkp-grid-minimal .stkp-card.stkp-no-thumb .stkp-body { margin: 0; }

.stkp-grid-minimal .stkp-card:hover .stkp-body {
	box-shadow: var(--stkp-shadow-lg);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 3 — Text Lead
   Reading order inverted: copy first, image as a wide closing band.
══════════════════════════════════════════════════════════════ */
.stkp-grid-bordered .stkp-card {
	background:     var(--stkp-card-bg);
	border:         1px solid var(--stkp-border);
	border-radius:  var(--stkp-radius);
	flex-direction: column-reverse;
	justify-content: flex-end;
	overflow:       hidden;
}

.stkp-grid-bordered .stkp-thumb img { height: 128px; }

.stkp-grid-bordered .stkp-body { padding: 22px 22px 18px; }

.stkp-grid-bordered .stkp-title { font-size: 1.15em; }

.stkp-grid-bordered .stkp-card:hover {
	border-color: var(--stkp-accent);
	box-shadow:   var(--stkp-shadow);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 4 — Grid Dark
   Dark card with coloured border
══════════════════════════════════════════════════════════════ */
.stkp-grid-dark .stkp-card {
	background:    #1a202c;
	border:        1px solid rgba(255,255,255,0.1);
	border-radius: var(--stkp-radius);
	color:         rgba(255,255,255,0.85);
}

.stkp-grid-dark .stkp-title,
.stkp-grid-dark .stkp-title a { color: #fff; }

.stkp-grid-dark .stkp-excerpt { color: rgba(255,255,255,0.6); }
.stkp-grid-dark .stkp-meta    { color: rgba(255,255,255,0.4); }
.stkp-grid-dark .stkp-cat     { color: #60a5fa; }

.stkp-grid-dark .stkp-btn {
	color:        #60a5fa;
	border-color: #60a5fa;
}

.stkp-grid-dark .stkp-btn:hover {
	background: #60a5fa;
	color:      #1a202c;
}

.stkp-grid-dark .stkp-card:hover {
	border-color: rgba(255,255,255,0.25);
}

/* ══════════════════════════════════════════════════════════════
   STYLES 5-7 — Overlay (shared base)
   Thumb fills card, body overlays at bottom
══════════════════════════════════════════════════════════════ */
.stkp-overlay .stkp-card,
.stkp-overlay-gradient .stkp-card,
.stkp-overlay-hover .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	min-height:    320px;
}

.stkp-overlay .stkp-thumb,
.stkp-overlay-gradient .stkp-thumb,
.stkp-overlay-hover .stkp-thumb {
	position: absolute;
	inset:    0;
}

.stkp-overlay .stkp-thumb img,
.stkp-overlay-gradient .stkp-thumb img,
.stkp-overlay-hover .stkp-thumb img {
	width:   100%;
	height:  100%;
}

.stkp-overlay .stkp-body,
.stkp-overlay-gradient .stkp-body,
.stkp-overlay-hover .stkp-body {
	position:   relative;
	z-index:    1;
	margin-top: auto;
	color:      #fff;
}

.stkp-overlay .stkp-title a,
.stkp-overlay-gradient .stkp-title a,
.stkp-overlay-hover .stkp-title a { color: #fff; }

.stkp-overlay .stkp-cat,
.stkp-overlay-gradient .stkp-cat,
.stkp-overlay-hover .stkp-cat { color: rgba(255,255,255,0.8); }

.stkp-overlay .stkp-meta,
.stkp-overlay-gradient .stkp-meta,
.stkp-overlay-hover .stkp-meta { color: rgba(255,255,255,0.6); }

.stkp-overlay .stkp-btn,
.stkp-overlay-gradient .stkp-btn,
.stkp-overlay-hover .stkp-btn {
	background:   rgba(255,255,255,0.16);
	border-color: rgba(255,255,255,0.5);
	color:        #fff;
}
.stkp-overlay .stkp-btn:hover,
.stkp-overlay-gradient .stkp-btn:hover,
.stkp-overlay-hover .stkp-btn:hover { background: #fff; color: var(--stkp-title); }

/* STYLE 5 — Overlay Bottom
   The scrim is painted on the image, not on .stkp-body, so the text always
   sits on the opaque end of the gradient rather than the transparent end. */
.stkp-overlay .stkp-thumb::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(to top, rgba(9,12,20,0.88) 0%, rgba(9,12,20,0.55) 32%, rgba(9,12,20,0) 68%);
	pointer-events: none;
}

.stkp-overlay .stkp-body {
	padding:    22px;
	background: linear-gradient(to top, rgba(9,12,20,0.94) 0%, rgba(9,12,20,0.78) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* STYLE 6 — Overlay Split
   Image occupies the top of the card, a solid panel carries the copy.
   No text over a gradient, and the badge sits in the image, clear of the title. */
.stkp-overlay-gradient .stkp-card {
	min-height: 0;
	background: #101828;
}

.stkp-overlay-gradient .stkp-thumb {
	position: relative;
	inset:    auto;
	height:   190px;
	flex-shrink: 0;
}

.stkp-overlay-gradient .stkp-thumb img { height: 100%; }

.stkp-overlay-gradient .stkp-body {
	margin-top: 0;
	padding:    20px 22px 22px;
	background: #101828;
}

.stkp-overlay-gradient .stkp-excerpt { color: rgba(255,255,255,0.72); }
.stkp-overlay-gradient .stkp-cat-badge { top: auto; bottom: 12px; }

/* STYLE 7 — Overlay Caption Card
   Full-bleed image with an inset light caption card. Legible with no hover
   and no JavaScript: the rest state is the finished state. */
.stkp-overlay-hover .stkp-card { min-height: 340px; }

.stkp-overlay-hover .stkp-body {
	position:      relative;
	z-index:       1;
	flex:          0 0 auto;
	margin:        auto 16px 16px;
	padding:       18px;
	background:    rgba(255,255,255,0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--stkp-radius);
	color:         var(--stkp-text);
	box-shadow:    var(--stkp-shadow);
	transition:    transform 0.3s ease;
}

.stkp-overlay-hover .stkp-title,
.stkp-overlay-hover .stkp-title a { color: var(--stkp-title); }
.stkp-overlay-hover .stkp-cat     { color: var(--stkp-accent); }
.stkp-overlay-hover .stkp-meta    { color: var(--stkp-meta); }
.stkp-overlay-hover .stkp-excerpt { color: var(--stkp-text); }
.stkp-overlay-hover .stkp-btn {
	background:   var(--stkp-accent-light);
	border-color: transparent;
	color:        var(--stkp-accent);
}
.stkp-overlay-hover .stkp-btn:hover { background: var(--stkp-accent); color: #fff; }

.stkp-overlay-hover .stkp-card:hover .stkp-body { transform: translateY(-4px); }

/* ══════════════════════════════════════════════════════════════
   STYLE 8 — Horizontal
   Image left (40%) + content right (60%)
══════════════════════════════════════════════════════════════ */
.stkp-horizontal .stkp-card {
	flex-direction: row;
	border:         1px solid var(--stkp-border);
	border-radius:  var(--stkp-radius);
	background:     var(--stkp-card-bg);
	overflow:       hidden;
}

.stkp-horizontal .stkp-thumb {
	width:  40%;
	flex-shrink: 0;
}

.stkp-horizontal .stkp-thumb img {
	width:  100%;
	height: 100%;
}

.stkp-horizontal .stkp-body {
	flex: 1;
	padding: 20px;
}

.stkp-horizontal .stkp-card:hover {
	border-color: var(--stkp-accent);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 9 — Zigzag
   Alternating image sides (set columns = 1)
══════════════════════════════════════════════════════════════ */
.stkp-zigzag {
	display:        flex;
	flex-direction: column;
}

.stkp-zigzag .stkp-card {
	flex-direction: row;
	border:         1px solid var(--stkp-border);
	border-radius:  var(--stkp-radius);
	background:     var(--stkp-card-bg);
	overflow:       hidden;
}

.stkp-zigzag .stkp-card:nth-child(even) {
	flex-direction: row-reverse;
}

.stkp-zigzag .stkp-thumb {
	width:      42%;
	flex-shrink: 0;
}

.stkp-zigzag .stkp-thumb img {
	width:  100%;
	height: 100%;
}

.stkp-zigzag .stkp-body { flex: 1; padding: 28px; }

.stkp-zigzag .stkp-card:hover {
	border-color: var(--stkp-accent);
	box-shadow:   0 4px 20px rgba(37,99,235,0.1);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 10 — List
   Compact horizontal list: small thumb + content side by side
══════════════════════════════════════════════════════════════ */
.stkp-list {
	display:        flex;
	flex-direction: column;
}

.stkp-list .stkp-card {
	flex-direction:  row;
	align-items:     center;
	border-bottom:   1px solid var(--stkp-border);
	padding:         14px 0;
	gap:             16px;
}

.stkp-list .stkp-card:last-child { border-bottom: none; }

.stkp-list .stkp-thumb {
	width:        90px;
	height:       70px;
	flex-shrink:  0;
	border-radius: 4px;
	overflow:     hidden;
	border:       1px solid var(--stkp-border);
}

.stkp-list .stkp-thumb img {
	width:  100%;
	height: 100%;
}

.stkp-list .stkp-body {
	padding:  0;
	flex:     1;
}

.stkp-list .stkp-excerpt,
.stkp-list .stkp-btn { display: none; }

/* ══════════════════════════════════════════════════════════════
   STYLE 11 — Index Card
   Text-only two-column rows: a fixed meta gutter on the left,
   headline and standfirst on the right. No imagery at all.
══════════════════════════════════════════════════════════════ */
.stkp-list-card {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.stkp-list-card .stkp-card {
	border-bottom: 1px solid var(--stkp-border);
	padding:       22px 0;
	background:    transparent;
}

.stkp-list-card .stkp-card:last-child { border-bottom: none; }
.stkp-list-card .stkp-thumb { display: none; }

.stkp-list-card .stkp-body {
	display:               grid;
	grid-template-columns: 140px 1fr;
	grid-template-areas:   "cat title" "meta excerpt" "meta foot";
	align-items:           start;
	column-gap:            28px;
	row-gap:               6px;
	padding:               0;
}

.stkp-list-card .stkp-cat     { grid-area: cat;     margin: 0; padding-top: 4px; }
.stkp-list-card .stkp-title   { grid-area: title;   font-size: 1.2em; margin-bottom: 4px; }
.stkp-list-card .stkp-meta    { grid-area: meta;    margin: 0; display: block; }
.stkp-list-card .stkp-excerpt { grid-area: excerpt; margin-bottom: 10px; }
.stkp-list-card .stkp-foot    { grid-area: foot;    margin-top: 0; }

.stkp-list-card .stkp-card:hover { border-bottom-color: var(--stkp-accent); }

@media (max-width: 767px) {
	.stkp-list-card .stkp-body {
		grid-template-columns: 1fr;
		grid-template-areas: "cat" "title" "meta" "excerpt" "foot";
	}
}

/* ══════════════════════════════════════════════════════════════
   STYLE 12 — Directory
   Two-up compact rows with a square thumbnail; a scannable index
   rather than a single stacked column.
══════════════════════════════════════════════════════════════ */
.stkp-list-bordered {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
}

.stkp-list-bordered .stkp-card {
	flex-direction: row;
	align-items:    stretch;
	border:         1px solid var(--stkp-border);
	background:     var(--stkp-card-bg);
	padding:        14px;
	gap:            16px;
	border-radius:  var(--stkp-radius);
}

.stkp-list-bordered .stkp-card:hover {
	border-color: var(--stkp-accent);
	box-shadow:   var(--stkp-shadow);
}

.stkp-list-bordered .stkp-thumb {
	width:        96px;
	flex-shrink:  0;
	border-radius: var(--stkp-radius-sm);
	overflow:     hidden;
	align-self:   flex-start;
}

.stkp-list-bordered .stkp-thumb img { width: 100%; height: 96px; }
.stkp-list-bordered .stkp-body { padding: 0; }
.stkp-list-bordered .stkp-excerpt {
	font-size: 0.85em;
	margin-bottom: 8px;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp:         2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}
.stkp-list-bordered .stkp-btn  {
	min-height: 0;
	padding:    0;
	background: transparent;
	font-size:  0.82em;
}
.stkp-list-bordered .stkp-btn:hover { background: transparent; color: var(--stkp-title); text-decoration: underline; }

@media (max-width: 767px) {
	.stkp-list-bordered { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   STYLE 13 — Timeline
   Left accent line, cards with border
══════════════════════════════════════════════════════════════ */
.stkp-timeline {
	display:        flex;
	flex-direction: column;
	border-left:    3px solid var(--stkp-border);
	padding-left:   24px;
}

.stkp-timeline .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
	position:      relative;
}

.stkp-timeline .stkp-card::before {
	content:       '';
	position:      absolute;
	left:          -33px;
	top:           24px;
	width:         14px;
	height:        14px;
	border-radius: 50%;
	background:    #fff;
	border:        3px solid var(--stkp-border);
}

.stkp-timeline .stkp-card:hover { border-color: var(--stkp-accent); }

.stkp-timeline .stkp-card:hover::before {
	border-color: var(--stkp-accent);
	background:   var(--stkp-accent);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 14 — Numbered
   Large step number overlaid on thumbnail corner
══════════════════════════════════════════════════════════════ */
.stkp-numbered .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
}

.stkp-numbered .stkp-card:hover { border-color: var(--stkp-accent); }

.stkp-number-badge {
	position:    absolute;
	top:         0;
	left:        0;
	z-index:     2;
	display:     flex;
	align-items: center;
	justify-content: center;
	width:       44px;
	height:      44px;
	background:  var(--stkp-accent);
	color:       #fff;
	font-size:   1em;
	font-weight: 700;
	border-radius: 0 0 var(--stkp-radius) 0;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 15 — Magazine
   First card spans 2 columns + 2 rows, rest fill grid
══════════════════════════════════════════════════════════════ */
.stkp-magazine {
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows:    auto auto;
}

.stkp-magazine .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
}

.stkp-magazine .stkp-card:first-child {
	grid-column: 1;
	grid-row:    1 / 3;
}

.stkp-magazine .stkp-card:first-child .stkp-thumb img {
	height: 100%;
	min-height: 320px;
}

.stkp-magazine .stkp-card:hover { border-color: var(--stkp-accent); }

/* ══════════════════════════════════════════════════════════════
   STYLE 16 — Staggered
   Real vertical offset between columns, not just varying image heights,
   so the grid genuinely staggers rather than reading as an even grid.
══════════════════════════════════════════════════════════════ */
.stkp-masonry {
	align-items: start;
}

.stkp-masonry .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
	box-shadow:    var(--stkp-shadow);
}

.stkp-masonry .stkp-card:hover { border-color: var(--stkp-accent); box-shadow: var(--stkp-shadow-lg); }

.stkp-masonry .stkp-card:nth-child(3n+1) .stkp-thumb img { height: 260px; }
.stkp-masonry .stkp-card:nth-child(3n+2) .stkp-thumb img { height: 170px; }
.stkp-masonry .stkp-card:nth-child(3n)   .stkp-thumb img { height: 210px; }

.stkp-masonry .stkp-card:nth-child(3n+2) { margin-top: 40px; }
.stkp-masonry .stkp-card:nth-child(3n)   { margin-top: 20px; }

@media (max-width: 767px) {
	.stkp-masonry .stkp-card { margin-top: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   STYLE 17 — Cover Story
   Tall image with the headline panel breaking upward over its lower edge
   and running full width, so the type sits on solid ground.
══════════════════════════════════════════════════════════════ */
.stkp-polaroid .stkp-card {
	background: transparent;
	overflow:   visible;
	transition: transform 0.3s ease;
}

.stkp-polaroid .stkp-thumb {
	border-radius: var(--stkp-radius);
	overflow:      hidden;
}

.stkp-polaroid .stkp-thumb img { height: 260px; }

.stkp-polaroid .stkp-body {
	position:      relative;
	z-index:       1;
	margin:        -56px 0 0;
	padding:       22px;
	width:         calc(100% - 24px);
	background:    var(--stkp-card-bg);
	border-radius: 0 var(--stkp-radius) var(--stkp-radius) 0;
	box-shadow:    var(--stkp-shadow-lg);
}

.stkp-polaroid .stkp-card.stkp-no-thumb .stkp-body { margin-top: 0; width: 100%; border-radius: var(--stkp-radius); }

.stkp-polaroid .stkp-title { font-size: 1.15em; }

.stkp-polaroid .stkp-card:hover { transform: translateY(-4px); }

/* ══════════════════════════════════════════════════════════════
   STYLE 18 — Flip Card
   3D flip on hover: front = thumb + title, back = excerpt + btn
══════════════════════════════════════════════════════════════ */
.stkp-flip .stkp-card {
	perspective:    1000px;
	min-height:     320px;
	border:         1px solid var(--stkp-border);
	border-radius:  var(--stkp-radius);
	overflow:       visible;
	background:     transparent;
}

.stkp-flip-link {
	display:         block;
	width:           100%;
	height:          100%;
	text-decoration: none;
}

.stkp-flip-inner {
	position:         relative;
	width:            100%;
	height:           100%;
	min-height:       320px;
	transform-style:  preserve-3d;
	transition:       transform 0.55s cubic-bezier(0.4,0,0.2,1);
}

.stkp-flip .stkp-card:hover .stkp-flip-inner {
	transform: rotateY(180deg);
}

.stkp-flip-front,
.stkp-flip-back {
	position:           absolute;
	inset:              0;
	backface-visibility: hidden;
	border-radius:      var(--stkp-radius);
	overflow:           hidden;
	border:             1px solid var(--stkp-border);
}

.stkp-flip-front {
	background:     var(--stkp-card-bg);
	display:        flex;
	flex-direction: column;
}

/* Media takes the space the copy does not need, so the title is never
   clipped mid-word against the card's min-height. */
.stkp-flip-media {
	flex:     1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.stkp-flip-front img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.stkp-flip-front-body {
	flex:    0 0 auto;
	padding: 16px;
}

.stkp-flip-front-body .stkp-title {
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp:         3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	margin-bottom:      0;
}

.stkp-flip-back-body .stkp-excerpt {
	display:            -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp:         4;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.stkp-flip-back {
	background: var(--stkp-accent);
	transform:  rotateY(180deg);
	display:    flex;
	align-items: center;
	justify-content: center;
}

.stkp-flip-back-body {
	padding:    24px;
	text-align: center;
	color:      #fff;
}

.stkp-flip-back .stkp-title { color: #fff; }
.stkp-flip-back .stkp-cat   { color: rgba(255,255,255,0.8); }
.stkp-flip-back .stkp-excerpt { color: rgba(255,255,255,0.85); }

.stkp-flip-back .stkp-btn {
	color:        #fff;
	border-color: rgba(255,255,255,0.6);
	margin-top:   12px;
}

.stkp-flip-back .stkp-btn:hover {
	background: #fff;
	color:      var(--stkp-accent);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 19 — Neon
   Dark bg, neon glow borders
══════════════════════════════════════════════════════════════ */
.stkp-neon .stkp-card {
	background:    #0f0f1a;
	border:        1px solid rgba(0,229,255,0.3);
	border-radius: var(--stkp-radius);
}

.stkp-neon .stkp-card:hover {
	border-color: #00e5ff;
	box-shadow:   0 0 20px rgba(0,229,255,0.3);
}

.stkp-neon .stkp-title,
.stkp-neon .stkp-title a { color: #e2e8f0; }
.stkp-neon .stkp-cat     { color: #00e5ff; }
.stkp-neon .stkp-excerpt { color: rgba(255,255,255,0.55); }
.stkp-neon .stkp-meta    { color: rgba(255,255,255,0.35); }

.stkp-neon .stkp-btn {
	color:        #00e5ff;
	border-color: rgba(0,229,255,0.4);
	background:   transparent;
}

.stkp-neon .stkp-btn:hover {
	background: rgba(0,229,255,0.15);
	color:      #00e5ff;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 20 — Meta Bar
   Tinted header strip carries category and date above the image, so the
   card leads with context rather than a picture.
══════════════════════════════════════════════════════════════ */
.stkp-glass .stkp-card {
	background:    var(--stkp-card-bg);
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	overflow:      hidden;
	box-shadow:    var(--stkp-shadow);
}

.stkp-glass .stkp-body {
	display:        grid;
	grid-template-areas: "bar" "title" "meta" "excerpt" "foot";
	grid-template-rows: auto auto auto 1fr auto;
	padding:        0;
}

.stkp-glass .stkp-cat {
	grid-area:      bar;
	margin:         0;
	padding:        10px 20px;
	background:     var(--stkp-accent-light);
	border-bottom:  1px solid var(--stkp-border);
	color:          var(--stkp-accent);
}

.stkp-glass .stkp-title   { grid-area: title;   padding: 18px 20px 0; }
.stkp-glass .stkp-meta    { grid-area: meta;    padding: 0 20px; }
.stkp-glass .stkp-excerpt { grid-area: excerpt; padding: 0 20px; }
.stkp-glass .stkp-foot    { grid-area: foot;    padding: 0 20px 20px; }

.stkp-glass .stkp-card:hover { border-color: var(--stkp-accent); box-shadow: var(--stkp-shadow-lg); }

/* ══════════════════════════════════════════════════════════════
   STYLE 21 — Big Type
   Headline-led, no image. Oversized title, excerpt set in two columns.
══════════════════════════════════════════════════════════════ */
.stkp-bold .stkp-card {
	background:  transparent;
	border-top:  2px solid var(--stkp-title);
	padding-top: 18px;
}

.stkp-bold .stkp-thumb { display: none; }
.stkp-bold .stkp-body  { padding: 0; }

.stkp-bold .stkp-title {
	font-size:      1.5em;
	line-height:    1.2;
	letter-spacing: -0.02em;
	margin-bottom:  12px;
}

.stkp-bold .stkp-excerpt {
	columns:    2;
	column-gap: 24px;
	font-size:  0.9em;
}

.stkp-bold .stkp-card:hover { border-top-color: var(--stkp-accent); }

@media (max-width: 767px) {
	.stkp-bold .stkp-excerpt { columns: 1; }
	.stkp-bold .stkp-title   { font-size: 1.3em; }
}

/* ══════════════════════════════════════════════════════════════
   STYLE 22 — Ribbon
   Corner ribbon for category + standard card
══════════════════════════════════════════════════════════════ */
.stkp-ribbon .stkp-card {
	background:    var(--stkp-card-bg);
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	overflow:      hidden;
}

.stkp-ribbon .stkp-card:hover { border-color: var(--stkp-accent); }

.stkp-ribbon-wrap {
	position: absolute;
	top:      0;
	right:    0;
	z-index:  2;
	overflow: hidden;
	width:    90px;
	height:   90px;
}

/* Element class deliberately differs from the layout class .stkp-ribbon,
   which lives on the wrapper. Sharing the name rotated the whole widget. */
.stkp-ribbon__label {
	display:         block;
	position:        absolute;
	top:             18px;
	right:           -22px;
	width:           96px;
	text-align:      center;
	font-size:       0.68em;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.05em;
	color:           #fff;
	background:      var(--stkp-accent);
	padding:         4px 0;
	transform:       rotate(45deg);
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 23 — Metro Tiles
   Mixed-size tiles (6-col grid with nth-child spans)
══════════════════════════════════════════════════════════════ */
.stkp-metro {
	grid-template-columns: repeat(6, 1fr);
}

.stkp-metro .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: 4px;
	background:    var(--stkp-card-bg);
	min-height:    180px;
}

.stkp-metro .stkp-card:hover { border-color: var(--stkp-accent); }

.stkp-metro .stkp-card:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.stkp-metro .stkp-card:nth-child(7n+2) { grid-column: span 2; }
.stkp-metro .stkp-card:nth-child(7n+3) { grid-column: span 2; }
.stkp-metro .stkp-card:nth-child(7n+4) { grid-column: span 3; }
.stkp-metro .stkp-card:nth-child(7n+5) { grid-column: span 1; }
.stkp-metro .stkp-card:nth-child(7n+6) { grid-column: span 1; }
.stkp-metro .stkp-card:nth-child(7n)   { grid-column: span 1; }

.stkp-metro .stkp-card:nth-child(7n+1) .stkp-thumb img { height: 100%; min-height: 260px; }

/* The lead tile reads as a feature: bigger type, image fills the extra height. */
.stkp-metro .stkp-card:nth-child(7n+1) .stkp-thumb { flex: 1; }
.stkp-metro .stkp-card:nth-child(7n+1) .stkp-title { font-size: 1.35em; line-height: 1.25; }
.stkp-metro .stkp-card:nth-child(7n+1) .stkp-body  { padding: 22px; }

/* Small tiles drop the excerpt so a one-unit tile is not a wall of text. */
.stkp-metro .stkp-card:nth-child(7n+5) .stkp-excerpt,
.stkp-metro .stkp-card:nth-child(7n+6) .stkp-excerpt,
.stkp-metro .stkp-card:nth-child(7n)   .stkp-excerpt,
.stkp-metro .stkp-card:nth-child(7n+5) .stkp-foot,
.stkp-metro .stkp-card:nth-child(7n+6) .stkp-foot,
.stkp-metro .stkp-card:nth-child(7n)   .stkp-foot { display: none; }

/* ══════════════════════════════════════════════════════════════
   STYLE 24 — Editorial
   Tight newspaper grid with compact typography
══════════════════════════════════════════════════════════════ */
.stkp-editorial .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: 0;
	background:    var(--stkp-card-bg);
}

.stkp-editorial .stkp-body { padding: 14px; }

.stkp-editorial .stkp-title { font-size: 0.95em; line-height: 1.35; }
.stkp-editorial .stkp-excerpt { font-size: 0.82em; }
.stkp-editorial .stkp-btn { font-size: 0.78em; padding: 5px 12px; }

.stkp-editorial .stkp-card:hover {
	border-color: var(--stkp-accent);
	background:   var(--stkp-accent-light);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 25 — Outlined
   2px outlined cards, no background fill
══════════════════════════════════════════════════════════════ */
.stkp-outlined .stkp-card {
	border:        2px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    transparent;
}

.stkp-outlined .stkp-card:hover {
	border-color: var(--stkp-accent);
	color:        var(--stkp-accent);
}

.stkp-outlined .stkp-btn {
	border-width: 2px;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 26 — Shadow Card
   Deep shadow, hover lifts
══════════════════════════════════════════════════════════════ */
.stkp-shadow-card .stkp-card {
	background:    var(--stkp-card-bg);
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	box-shadow:    0 6px 24px rgba(0,0,0,0.1);
}

.stkp-shadow-card .stkp-card:hover {
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
	transform:  translateY(-4px);
	border-color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 27 — Gradient Border
   Gradient border via ::before pseudo-element
══════════════════════════════════════════════════════════════ */
.stkp-gradient-border .stkp-card {
	background:    var(--stkp-card-bg);
	border-radius: var(--stkp-radius);
	position:      relative;
	border:        1px solid transparent;
	background-clip: padding-box;
}

.stkp-gradient-border .stkp-card::before {
	content:       '';
	position:      absolute;
	inset:         -2px;
	border-radius: calc(var(--stkp-radius) + 2px);
	background:    linear-gradient(135deg, var(--stkp-accent), color-mix(in srgb, var(--stkp-accent) 35%, #0ea5e9));
	z-index:       -1;
}

.stkp-gradient-border .stkp-body,
.stkp-gradient-border .stkp-thumb { position: relative; z-index: 1; }

.stkp-gradient-border .stkp-card:hover::before {
	background: linear-gradient(135deg, color-mix(in srgb, var(--stkp-accent) 80%, #000), var(--stkp-accent));
}

/* ══════════════════════════════════════════════════════════════
   STYLE 28 — Blog Roll
   Full-width post rows, classic blog style
══════════════════════════════════════════════════════════════ */
.stkp-blog-roll {
	display:        flex;
	flex-direction: column;
}

.stkp-blog-roll .stkp-card {
	flex-direction: row;
	align-items:    flex-start;
	border-bottom:  2px solid var(--stkp-border);
	padding-bottom: 28px;
	gap:            24px;
}

.stkp-blog-roll .stkp-card:last-child { border-bottom: none; }

.stkp-blog-roll .stkp-thumb {
	width:        260px;
	flex-shrink:  0;
	border:       1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	overflow:     hidden;
}

.stkp-blog-roll .stkp-thumb img { width: 100%; height: 180px; }
.stkp-blog-roll .stkp-body { padding: 0; }

.stkp-blog-roll .stkp-card:hover {
	border-bottom-color: var(--stkp-accent);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 29 — Compact News
   Dense news ticker–style rows with thumbnail and border
══════════════════════════════════════════════════════════════ */
.stkp-compact-news {
	display:        flex;
	flex-direction: column;
	border:         1px solid var(--stkp-border);
	border-radius:  var(--stkp-radius);
	overflow:       hidden;
}

.stkp-compact-news .stkp-card {
	flex-direction: row;
	align-items:    center;
	gap:            12px;
	border-bottom:  1px solid var(--stkp-border);
	padding:        10px 14px;
	background:     var(--stkp-card-bg);
}

.stkp-compact-news .stkp-card:last-child { border-bottom: none; }

.stkp-compact-news .stkp-card:hover {
	background: var(--stkp-accent-light);
}

.stkp-compact-news .stkp-thumb {
	width:        60px;
	height:       52px;
	flex-shrink:  0;
	border-radius: 4px;
	overflow:     hidden;
	border:       1px solid var(--stkp-border);
}

.stkp-compact-news .stkp-thumb img { width: 100%; height: 100%; }
.stkp-compact-news .stkp-body { padding: 0; }
.stkp-compact-news .stkp-cat,
.stkp-compact-news .stkp-excerpt,
.stkp-compact-news .stkp-btn { display: none; }
.stkp-compact-news .stkp-title { font-size: 0.9em; margin-bottom: 2px; }
.stkp-compact-news .stkp-meta  { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   STYLE 30 — Masonry 2 (CSS Columns)
   True masonry via CSS columns property
══════════════════════════════════════════════════════════════ */
.stkp-masonry2 {
	display:        block;
	columns:        var(--stkp-cols);
	column-gap:     var(--stkp-gap);
}

.stkp-masonry2 .stkp-card {
	break-inside:  avoid;
	display:       flex;
	flex-direction: column;
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
	margin-bottom: var(--stkp-gap);
}

.stkp-masonry2 .stkp-card:hover { border-color: var(--stkp-accent); }

/* ══════════════════════════════════════════════════════════════
   STYLE 31 — Minimal List
   Text-only list, no thumbnails shown, thin rule
══════════════════════════════════════════════════════════════ */
.stkp-minimal-list {
	display:        flex;
	flex-direction: column;
}

.stkp-minimal-list .stkp-card {
	border-bottom: 1px solid var(--stkp-border);
	padding:       14px 0;
}

.stkp-minimal-list .stkp-card:hover {
	border-bottom-color: var(--stkp-accent);
}

.stkp-minimal-list .stkp-thumb { display: none; }
.stkp-minimal-list .stkp-body  { padding: 0; }

.stkp-minimal-list .stkp-title {
	font-size: 1em;
	margin-bottom: 4px;
}

.stkp-minimal-list .stkp-excerpt { font-size: 0.85em; }

/* ══════════════════════════════════════════════════════════════
   STYLE 32 — Banner Card
   Wide full-width banner cards, stacked vertically
══════════════════════════════════════════════════════════════ */
.stkp-banner-card {
	display:        flex;
	flex-direction: column;
}

.stkp-banner-card .stkp-card {
	flex-direction: row;
	border:         1px solid var(--stkp-border);
	border-radius:  var(--stkp-radius);
	background:     var(--stkp-card-bg);
	min-height:     160px;
	overflow:       hidden;
}

.stkp-banner-card .stkp-card:hover {
	border-color: var(--stkp-accent);
	box-shadow:   0 4px 16px rgba(37,99,235,0.1);
}

.stkp-banner-card .stkp-thumb {
	width:       35%;
	flex-shrink: 0;
}

.stkp-banner-card .stkp-thumb img { width: 100%; height: 100%; }
.stkp-banner-card .stkp-body { padding: 24px; }

/* ══════════════════════════════════════════════════════════════
   STYLE 33 — Stripe
   Left accent stripe border per card
══════════════════════════════════════════════════════════════ */
.stkp-stripe .stkp-card {
	border:        1px solid var(--stkp-border);
	border-left:   4px solid transparent;
	border-radius: 0 var(--stkp-radius) var(--stkp-radius) 0;
	background:    var(--stkp-card-bg);
	transition:    border-left-color 0.2s;
}

.stkp-stripe .stkp-card:nth-child(5n+1) { border-left-color: #2563eb; }
.stkp-stripe .stkp-card:nth-child(5n+2) { border-left-color: #7c3aed; }
.stkp-stripe .stkp-card:nth-child(5n+3) { border-left-color: #059669; }
.stkp-stripe .stkp-card:nth-child(5n+4) { border-left-color: #d97706; }
.stkp-stripe .stkp-card:nth-child(5n)   { border-left-color: #dc2626; }

.stkp-stripe .stkp-card:hover {
	background:  var(--stkp-accent-light);
	border-color: var(--stkp-accent);
	border-left-width: 6px;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 34 — Meta Rail
   Card body splits into a narrow left rail carrying date and category
   and a wide reading column.
══════════════════════════════════════════════════════════════ */
.stkp-neumorphic .stkp-card {
	background:    var(--stkp-card-bg);
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	overflow:      hidden;
}

.stkp-neumorphic .stkp-body {
	display:               grid;
	grid-template-columns: 88px 1fr;
	grid-template-areas:   "cat title" "meta excerpt" "meta foot";
	column-gap:            18px;
	row-gap:               4px;
	align-items:           start;
	padding:               20px;
}

.stkp-neumorphic .stkp-cat {
	grid-area: cat;
	margin:    0;
	padding-top: 3px;
	writing-mode: horizontal-tb;
}
.stkp-neumorphic .stkp-title   { grid-area: title; }
.stkp-neumorphic .stkp-meta    { grid-area: meta; display: block; margin: 0; line-height: 1.45; }
.stkp-neumorphic .stkp-meta-sep { display: none; }
.stkp-neumorphic .stkp-author  { display: block; }
.stkp-neumorphic .stkp-excerpt { grid-area: excerpt; }
.stkp-neumorphic .stkp-foot    { grid-area: foot; margin-top: 0; }

.stkp-neumorphic .stkp-card:hover { border-color: var(--stkp-accent); box-shadow: var(--stkp-shadow); }

@media (max-width: 767px) {
	.stkp-neumorphic .stkp-body {
		grid-template-columns: 1fr;
		grid-template-areas: "cat" "title" "meta" "excerpt" "foot";
	}
}

/* ══════════════════════════════════════════════════════════════
   STYLE 35 — Alt Height
   Alternating tall / short cards for visual rhythm
══════════════════════════════════════════════════════════════ */
.stkp-alt-height .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
}

.stkp-alt-height .stkp-card:hover { border-color: var(--stkp-accent); }

.stkp-alt-height .stkp-card:nth-child(odd)  .stkp-thumb img { height: 260px; }
.stkp-alt-height .stkp-card:nth-child(even) .stkp-thumb img { height: 140px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.stkp-magazine    { grid-template-columns: 1fr 1fr; }
	.stkp-metro       { grid-template-columns: repeat(4, 1fr); }
	.stkp-horizontal  .stkp-thumb,
	.stkp-zigzag      .stkp-thumb,
	.stkp-list-card   .stkp-thumb { width: 160px; }
	.stkp-blog-roll   .stkp-thumb { width: 200px; }
}

@media (max-width: 767px) {
	.stkp-magazine     { grid-template-columns: 1fr; }
	.stkp-magazine     .stkp-card:first-child { grid-column: 1; grid-row: auto; }
	.stkp-metro        { grid-template-columns: repeat(2, 1fr); }
	.stkp-metro        .stkp-card { grid-column: span 1 !important; grid-row: span 1 !important; }
	.stkp-horizontal   .stkp-card,
	.stkp-zigzag       .stkp-card,
	.stkp-zigzag       .stkp-card:nth-child(even),
	.stkp-list-card    .stkp-card,
	.stkp-blog-roll    .stkp-card,
	.stkp-banner-card  .stkp-card { flex-direction: column; }
	.stkp-horizontal   .stkp-thumb,
	.stkp-zigzag       .stkp-thumb,
	.stkp-list-card    .stkp-thumb,
	.stkp-blog-roll    .stkp-thumb,
	.stkp-banner-card  .stkp-thumb { width: 100%; height: auto; }
	.stkp-horizontal   .stkp-thumb img,
	.stkp-zigzag       .stkp-thumb img,
	.stkp-blog-roll    .stkp-thumb img,
	.stkp-banner-card  .stkp-thumb img { height: 180px; }
	.stkp-list-card    .stkp-thumb img { height: 160px; }
	.stkp-masonry2     { columns: 1; }
	.stkp-flip .stkp-card { min-height: 280px; }
	.stkp-flip-inner  { min-height: 280px; }
}


/* ── New Layouts 36–40 ─────────────────────────────────────── */

/* 36 — Card Stack */
.stkp-card-stack .stkp-card {
	background: var(--stkp-card-bg);
	border: 1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}
.stkp-card-stack .stkp-card::before,
.stkp-card-stack .stkp-card::after {
	content: '';
	position: absolute;
	inset: 8px -8px -8px 8px;
	border-radius: calc(var(--stkp-radius) + 2px);
	background: var(--stkp-card-bg);
	border: 1px solid var(--stkp-border);
	z-index: -1;
	transform: translate(6px, 6px);
}
.stkp-card-stack .stkp-card::before { transform: translate(3px, 3px); opacity: 0.9; }
.stkp-card-stack .stkp-card::after  { opacity: 0.7; }

/* 37 — Spotlight */
.stkp-spotlight .stkp-card {
	background: radial-gradient(120px 120px at 20% 0%, rgba(37,99,235,0.10), transparent 60%) , #0f172a;
	border: 1px solid rgba(148,163,184,0.15);
	color: #e2e8f0;
}
.stkp-spotlight .stkp-thumb img { height: var(--stkp-thumb-h, 220px); filter: saturate(0.9); }
.stkp-spotlight .stkp-title, .stkp-spotlight .stkp-title a { color: #e2e8f0; }
.stkp-spotlight .stkp-cat   { color: #93c5fd; }
.stkp-spotlight .stkp-meta  { color: rgba(226,232,240,0.6); }
.stkp-spotlight .stkp-excerpt { color: rgba(226,232,240,0.75); }
.stkp-spotlight .stkp-btn {
	background: rgba(59,130,246,0.15);
	border: 1px solid rgba(59,130,246,0.4);
	color: #bfdbfe;
}
.stkp-spotlight .stkp-btn:hover { background: rgba(59,130,246,0.25); }

/* 38 — Split (media aside) */
.stkp-split .stkp-card { flex-direction: row; border: 1px solid var(--stkp-border); border-radius: var(--stkp-radius); }
.stkp-split .stkp-thumb { width: 50%; max-height: none; }
.stkp-split .stkp-thumb img { height: 100%; min-height: 100%; }
.stkp-split .stkp-body  { width: 50%; display: flex; }
@media (max-width: 1024px) {
	.stkp-split .stkp-card { flex-direction: column; }
	.stkp-split .stkp-thumb, .stkp-split .stkp-body { width: 100%; }
}

/* 39 — Badge Top (centered over image) */
.stkp-badge-top .stkp-thumb { position: relative; }
.stkp-badge-top .stkp-cat-badge {
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 999px;
	padding: 6px 14px;
	background: rgba(15,23,42,0.85);
	backdrop-filter: saturate(140%) blur(2px);
	border: 1px solid rgba(255,255,255,0.25);
}

/* 40 — Minimal Overlay */
.stkp-min-overlay .stkp-card { border-radius: var(--stkp-radius); overflow: hidden; }
.stkp-min-overlay .stkp-thumb { position: relative; }
.stkp-min-overlay .stkp-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.0) 65%);
	pointer-events: none;
}
.stkp-min-overlay .stkp-body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	color: #fff;
	padding: 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.0) 85%);
}
.stkp-min-overlay .stkp-title a { color: #fff; }
.stkp-min-overlay .stkp-cat   { color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.stkp-min-overlay .stkp-meta  { color: rgba(255,255,255,0.75); }
.stkp-min-overlay .stkp-excerpt { color: rgba(255,255,255,0.9); }
.stkp-min-overlay .stkp-btn { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; }
.stkp-min-overlay .stkp-btn:hover { background: rgba(255,255,255,0.1); }

/* ══════════════════════════════════════════════════════════════
   Reduced motion
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.stkp-wrap *,
	.stkp-wrap *::before,
	.stkp-wrap *::after {
		animation:  none !important;
		transition: none !important;
	}
	.stkp-flip .stkp-card:hover .stkp-flip-inner { transform: none; }
}