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

/* ── Variables ─────────────────────────────────────────────── */
.stkp-wrap {
	--stkp-border:       #e2e8f0;
	--stkp-accent:       #2563eb;
	--stkp-accent-light: #eff6ff;
	--stkp-card-bg:      #ffffff;
	--stkp-text:         #4a5568;
	--stkp-title:        #1a202c;
	--stkp-meta:         #94a3b8;
	--stkp-radius:       8px;
	--stkp-gap:          24px;
	--stkp-thumb-h:      200px;
	--stkp-cols:         3;
}

/* ── 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;
}

.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.9em;
	color:       var(--stkp-text);
	line-height: 1.65;
	margin:      0 0 16px;
	flex:        1;
}

.stkp-btn {
	display:         inline-flex;
	align-items:     center;
	font-size:       0.82em;
	font-weight:     600;
	color:           var(--stkp-accent);
	text-decoration: none;
	padding:         7px 16px;
	border:          1px solid var(--stkp-accent);
	border-radius:   4px;
	align-self:      flex-start;
	margin-top:      auto;
	transition:      all 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:    0 1px 4px rgba(0,0,0,0.06);
}

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

/* ══════════════════════════════════════════════════════════════
   STYLE 2 — Grid Minimal
   No card fill, fine bottom border rule
══════════════════════════════════════════════════════════════ */
.stkp-grid-minimal .stkp-card {
	border-bottom: 2px solid var(--stkp-border);
	padding-bottom: 8px;
}

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

.stkp-grid-minimal .stkp-thumb {
	border:        1px solid var(--stkp-border);
	border-bottom: none;
	border-radius: var(--stkp-radius) var(--stkp-radius) 0 0;
	overflow:      hidden;
}

.stkp-grid-minimal .stkp-body {
	padding: 16px 4px;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 3 — Grid Bordered
   Heavy 2px solid border, sharp corners
══════════════════════════════════════════════════════════════ */
.stkp-grid-bordered .stkp-card {
	border:        2px solid var(--stkp-border);
	border-radius: 0;
}

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

.stkp-grid-bordered .stkp-btn {
	border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════
   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); }

/* STYLE 5 — gradient from bottom */
.stkp-overlay .stkp-body {
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
	padding:    30px 20px 20px;
}

/* STYLE 6 — tinted gradient overlay */
.stkp-overlay-gradient .stkp-thumb::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(135deg, rgba(37,99,235,0.7) 0%, rgba(124,58,237,0.7) 100%);
}

.stkp-overlay-gradient .stkp-body {
	padding: 20px;
}

/* STYLE 7 — content hidden, revealed on hover */
.stkp-overlay-hover .stkp-body {
	position:   absolute;
	inset:      0;
	background: rgba(15, 23, 42, 0.88);
	padding:    24px;
	display:    flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity:    0;
	transition: opacity 0.3s ease;
}

.stkp-overlay-hover .stkp-card:hover .stkp-body {
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   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 — List Card
   Each list item is a full bordered card (horizontal)
══════════════════════════════════════════════════════════════ */
.stkp-list-card {
	display:        flex;
	flex-direction: column;
}

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

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

.stkp-list-card .stkp-thumb {
	width:       200px;
	flex-shrink: 0;
}

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

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

/* ══════════════════════════════════════════════════════════════
   STYLE 12 — List Bordered
   List items separated by full-width bordered rows
══════════════════════════════════════════════════════════════ */
.stkp-list-bordered {
	display:        flex;
	flex-direction: column;
}

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

.stkp-list-bordered .stkp-card:first-child { border-radius: var(--stkp-radius) var(--stkp-radius) 0 0; }
.stkp-list-bordered .stkp-card:last-child  { border-radius: 0 0 var(--stkp-radius) var(--stkp-radius); }

.stkp-list-bordered .stkp-card:hover {
	z-index:      1;
	border-color: var(--stkp-accent);
	background:   var(--stkp-accent-light);
}

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

.stkp-list-bordered .stkp-thumb img { width: 100%; height: 100%; }
.stkp-list-bordered .stkp-body { padding: 0; }
.stkp-list-bordered .stkp-btn  { display: none; }

/* ══════════════════════════════════════════════════════════════
   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 — Masonry
   Alternating thumbnail heights give a masonry feel
══════════════════════════════════════════════════════════════ */
.stkp-masonry .stkp-card {
	border:        1px solid var(--stkp-border);
	border-radius: var(--stkp-radius);
	background:    var(--stkp-card-bg);
}

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

.stkp-masonry .stkp-card:nth-child(3n+1) .stkp-thumb img { height: 240px; }
.stkp-masonry .stkp-card:nth-child(3n+2) .stkp-thumb img { height: 160px; }
.stkp-masonry .stkp-card:nth-child(3n)   .stkp-thumb img { height: 200px; }

/* ══════════════════════════════════════════════════════════════
   STYLE 17 — Polaroid
   White padding + drop shadow, slight tilt
══════════════════════════════════════════════════════════════ */
.stkp-polaroid .stkp-card {
	background:    #fff;
	border:        1px solid var(--stkp-border);
	padding:       10px 10px 20px;
	box-shadow:    3px 3px 12px rgba(0,0,0,0.12);
	border-radius: 2px;
	transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.stkp-polaroid .stkp-card:nth-child(odd)  { transform: rotate(-1deg); }
.stkp-polaroid .stkp-card:nth-child(even) { transform: rotate(0.8deg); }

.stkp-polaroid .stkp-card:hover {
	transform:  rotate(0deg) translateY(-4px) !important;
	box-shadow: 6px 6px 24px rgba(0,0,0,0.18);
}

.stkp-polaroid .stkp-thumb img {
	border-radius: 1px;
}

.stkp-polaroid .stkp-body {
	padding: 14px 6px 0;
}

/* ══════════════════════════════════════════════════════════════
   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);
}

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

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

.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 — Glass
   Glassmorphism cards
══════════════════════════════════════════════════════════════ */
.stkp-glass .stkp-card {
	background:             rgba(255,255,255,0.15);
	border:                 1px solid rgba(255,255,255,0.35);
	border-radius:          var(--stkp-radius);
	backdrop-filter:        blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.stkp-glass .stkp-card:hover {
	border-color: rgba(255,255,255,0.6);
	box-shadow:   0 8px 32px rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════════════
   STYLE 21 — Bold Border
   3px solid border, high-contrast
══════════════════════════════════════════════════════════════ */
.stkp-bold .stkp-card {
	background:    var(--stkp-card-bg);
	border:        3px solid var(--stkp-title);
	border-radius: 0;
}

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

.stkp-bold .stkp-btn { border-radius: 0; border-width: 2px; }

/* ══════════════════════════════════════════════════════════════
   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;
}

.stkp-ribbon {
	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: 200px; }

/* ══════════════════════════════════════════════════════════════
   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, #667eea, #764ba2, #f093fb);
	z-index:       -1;
}

.stkp-gradient-border .stkp-card:hover::before {
	background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
}

/* ══════════════════════════════════════════════════════════════
   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 — Neumorphic
   Soft shadow neumorphism, embossed effect
══════════════════════════════════════════════════════════════ */
.stkp-neumorphic {
	background: #e8ecf1;
	padding:    8px;
	border-radius: var(--stkp-radius);
	border: 1px solid #d0d6df;
}

.stkp-neumorphic .stkp-card {
	background:    #e8ecf1;
	border:        1px solid #d0d6df;
	border-radius: var(--stkp-radius);
	box-shadow:    5px 5px 10px #c5cad1, -5px -5px 10px #ffffff;
}

.stkp-neumorphic .stkp-card:hover {
	box-shadow: inset 3px 3px 8px #c5cad1, inset -3px -3px 8px #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   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); }

/* ══════════════════════════════════════════════════════════════
   1.1 Newsroom Redesign Overrides
   Rebuilt styles 2, 6, 38, 40 and added 41–60.
══════════════════════════════════════════════════════════════ */
.stkp-wrap {
	--stkp-news-ink: #111827;
	--stkp-news-muted: #64748b;
	--stkp-news-rule: #d8dee8;
	--stkp-news-paper: #fffdf8;
	--stkp-news-red: #c5162e;
	--stkp-news-blue: #0f4c81;
	--stkp-news-gold: #b7791f;
}
.stkp-wrap .stkp-card { isolation: isolate; }
.stkp-wrap .stkp-title { letter-spacing: -0.025em; }
.stkp-wrap .stkp-title a { background-image: linear-gradient(currentColor,currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color .2s ease, background-size .25s ease; }
.stkp-wrap .stkp-title a:hover { background-size: 100% 1px; }

/* 02 — Front Page Wire */
.stkp-grid-minimal { background: #fff; border-top: 4px solid var(--stkp-news-ink); padding-top: 18px; }
.stkp-grid-minimal .stkp-card { border: 0; border-radius: 0; padding: 0 0 18px; background: transparent; box-shadow: none; }
.stkp-grid-minimal .stkp-card::after { content:''; position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid var(--stkp-news-rule); }
.stkp-grid-minimal .stkp-thumb { border:0; border-radius:0; margin-bottom: 14px; }
.stkp-grid-minimal .stkp-thumb img { height: 190px; filter: grayscale(.1) contrast(1.04); }
.stkp-grid-minimal .stkp-body { padding: 0; }
.stkp-grid-minimal .stkp-cat { color: var(--stkp-news-red); margin-bottom: 7px; }
.stkp-grid-minimal .stkp-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.1rem, 1vw + .85rem, 1.55rem); line-height: 1.08; margin-bottom: 8px; }
.stkp-grid-minimal .stkp-meta { order: -1; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .08em; }
.stkp-grid-minimal .stkp-btn { border:0; padding:0; color:var(--stkp-news-ink); font-weight:800; }
.stkp-grid-minimal .stkp-btn::after { content:' →'; color:var(--stkp-news-red); }

/* 06 — Breaking Hero */
.stkp-overlay-gradient .stkp-card { min-height: 390px; border-radius: 20px; background:#101827; box-shadow: 0 24px 60px rgba(15,23,42,.22); }
.stkp-overlay-gradient .stkp-thumb { position:absolute; inset:0; }
.stkp-overlay-gradient .stkp-thumb img { height:100%; min-height:390px; transform:none; }
.stkp-overlay-gradient .stkp-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.74) 70%), radial-gradient(circle at 20% 20%, rgba(197,22,46,.65), transparent 28%); }
.stkp-overlay-gradient .stkp-cat-badge { background: var(--stkp-news-red); border-radius: 999px; padding: 7px 12px; box-shadow:0 8px 20px rgba(197,22,46,.35); }
.stkp-overlay-gradient .stkp-body { position:relative; z-index:2; margin-top:auto; padding: 30px; color:#fff; }
.stkp-overlay-gradient .stkp-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.45rem, 2vw + .75rem, 2.6rem); line-height:1; }
.stkp-overlay-gradient .stkp-title a, .stkp-overlay-gradient .stkp-meta, .stkp-overlay-gradient .stkp-excerpt { color:#fff; }
.stkp-overlay-gradient .stkp-excerpt { opacity:.86; max-width: 56ch; }
.stkp-overlay-gradient .stkp-btn { background:#fff; color:#111827; border:0; border-radius:999px; padding:10px 16px; }

/* 38 — Op-Ed Split */
.stkp-split .stkp-card { flex-direction: row; background: var(--stkp-news-paper); border: 1px solid #171717; border-left: 8px solid #171717; border-radius: 0; overflow: visible; box-shadow: 8px 8px 0 #e6e0d4; }
.stkp-split .stkp-thumb { width: 45%; border-right:1px solid #171717; }
.stkp-split .stkp-thumb img { height:100%; min-height:280px; filter: sepia(.18) contrast(1.08); }
.stkp-split .stkp-body { width:55%; padding:28px; justify-content:center; }
.stkp-split .stkp-cat { color:#111; border:1px solid #111; padding:4px 9px; width:max-content; }
.stkp-split .stkp-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.35rem, 1.35vw + .95rem, 2.2rem); line-height:1.04; }
.stkp-split .stkp-btn { border:0; border-bottom:2px solid #111; border-radius:0; padding:0 0 3px; color:#111; }
@media (max-width: 1024px) { .stkp-split .stkp-card { flex-direction:column; } .stkp-split .stkp-thumb,.stkp-split .stkp-body { width:100%; } }

/* 40 — Cover Story */
.stkp-cover-story .stkp-card, .stkp-min-overlay .stkp-card { min-height: 420px; border-radius: 28px; box-shadow: 0 28px 80px rgba(2,6,23,.22); }
.stkp-cover-story .stkp-thumb, .stkp-min-overlay .stkp-thumb { position:absolute; inset:0; }
.stkp-cover-story .stkp-thumb img, .stkp-min-overlay .stkp-thumb img { height:100%; min-height:420px; }
.stkp-cover-story .stkp-thumb::after, .stkp-min-overlay .stkp-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(2,6,23,.88), rgba(2,6,23,.48) 52%, rgba(2,6,23,.08)); }
.stkp-cover-story .stkp-body, .stkp-min-overlay .stkp-body { position:relative; z-index:2; max-width: 640px; padding:36px; margin-top:auto; color:#fff; }
.stkp-cover-story .stkp-cat, .stkp-min-overlay .stkp-cat { color:#fff; background:var(--stkp-news-red); padding:6px 10px; width:max-content; border-radius:4px; }
.stkp-cover-story .stkp-title, .stkp-min-overlay .stkp-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.8rem, 3vw + .8rem, 4rem); line-height:.96; }
.stkp-cover-story .stkp-title a, .stkp-cover-story .stkp-meta, .stkp-cover-story .stkp-excerpt, .stkp-min-overlay .stkp-title a, .stkp-min-overlay .stkp-meta, .stkp-min-overlay .stkp-excerpt { color:#fff; }
.stkp-cover-story .stkp-btn, .stkp-min-overlay .stkp-btn { color:#111827; background:#fff; border:0; border-radius:999px; padding:11px 18px; }

/* Shared news presets */
.stkp-news-desk-grid .stkp-card,.stkp-broadsheet-lead .stkp-card,.stkp-ticker-cards .stkp-card,.stkp-weekend-magazine .stkp-card,.stkp-finance-wire .stkp-card,.stkp-local-bulletin .stkp-card,.stkp-opinion-columns .stkp-card,.stkp-sports-desk .stkp-card,.stkp-feature-stack .stkp-card,.stkp-politics-monitor .stkp-card,.stkp-tech-briefing .stkp-card,.stkp-culture-review .stkp-card,.stkp-live-update-feed .stkp-card,.stkp-investigations .stkp-card,.stkp-market-watch .stkp-card,.stkp-photo-reportage .stkp-card,.stkp-data-brief .stkp-card,.stkp-sunday-edition .stkp-card,.stkp-city-guide-news .stkp-card,.stkp-global-dispatch .stkp-card { background:#fff; border:1px solid var(--stkp-news-rule); }
.stkp-news-desk-grid .stkp-title,.stkp-broadsheet-lead .stkp-title,.stkp-weekend-magazine .stkp-title,.stkp-opinion-columns .stkp-title,.stkp-feature-stack .stkp-title,.stkp-investigations .stkp-title,.stkp-sunday-edition .stkp-title { font-family: Georgia, 'Times New Roman', serif; }
.stkp-news-desk-grid .stkp-card { border-top:4px solid var(--stkp-news-red); border-radius: 6px; }
.stkp-broadsheet-lead .stkp-card:first-child { grid-column: span 2; } .stkp-broadsheet-lead .stkp-card { border-radius:0; box-shadow:none; } .stkp-broadsheet-lead .stkp-title { font-size:1.6rem; line-height:1.05; } .stkp-broadsheet-lead .stkp-card:first-child .stkp-title { font-size:clamp(2rem,3vw,3.4rem); }
.stkp-ticker-cards .stkp-card { border-left:5px solid var(--stkp-news-red); border-radius:12px; } .stkp-ticker-cards .stkp-thumb { display:none; } .stkp-ticker-cards .stkp-meta::before { content:'LIVE'; color:#fff; background:var(--stkp-news-red); padding:2px 6px; border-radius:3px; margin-right:6px; }
.stkp-weekend-magazine .stkp-card { border:0; border-radius:24px; background:linear-gradient(180deg,#fff7ed,#fff); box-shadow:0 20px 45px rgba(146,64,14,.14); } .stkp-weekend-magazine .stkp-thumb img { height:250px; }
.stkp-finance-wire .stkp-card { border-radius:0; border-top:3px solid #16a34a; } .stkp-finance-wire .stkp-cat,.stkp-finance-wire .stkp-title a:hover { color:#15803d; } .stkp-finance-wire .stkp-title { font-family: Arial, Helvetica, sans-serif; }
.stkp-local-bulletin .stkp-card { border-radius:16px; box-shadow:0 10px 0 #e2e8f0; } .stkp-local-bulletin .stkp-cat { background:#0f4c81; color:#fff; padding:5px 9px; border-radius:999px; }
.stkp-opinion-columns .stkp-card { border:0; border-left:1px solid #111; border-radius:0; background:#fffdf8; } .stkp-opinion-columns .stkp-thumb img { border-radius:999px; width:96px; height:96px; margin:22px auto 0; } .stkp-opinion-columns .stkp-title { text-align:center; } .stkp-opinion-columns .stkp-meta,.stkp-opinion-columns .stkp-cat { align-self:center; }
.stkp-sports-desk .stkp-card { border:0; border-radius:18px; background:#0b1324; } .stkp-sports-desk .stkp-title a,.stkp-sports-desk .stkp-excerpt,.stkp-sports-desk .stkp-meta { color:#fff; } .stkp-sports-desk .stkp-cat { color:#facc15; }
.stkp-feature-stack .stkp-card { border:0; border-radius:0 28px 0 28px; box-shadow:0 18px 50px rgba(15,23,42,.12); } .stkp-feature-stack .stkp-card:nth-child(odd) { transform: translateY(18px); }
.stkp-politics-monitor .stkp-card { border-radius:8px; border-top:6px solid #1d4ed8; } .stkp-politics-monitor .stkp-card:nth-child(even) { border-top-color:#dc2626; }
.stkp-tech-briefing .stkp-card { border:1px solid #bae6fd; border-radius:18px; background:linear-gradient(135deg,#f0f9ff,#fff); } .stkp-tech-briefing .stkp-cat { color:#0369a1; }
.stkp-culture-review .stkp-card { border:0; border-radius:20px; background:#111; } .stkp-culture-review .stkp-title a,.stkp-culture-review .stkp-meta,.stkp-culture-review .stkp-excerpt { color:#f8fafc; } .stkp-culture-review .stkp-cat { color:#fb7185; }
.stkp-live-update-feed { display:block; } .stkp-live-update-feed .stkp-card { display:grid; grid-template-columns: 170px 1fr; border:0; border-bottom:1px solid var(--stkp-news-rule); border-radius:0; margin-bottom:18px; } .stkp-live-update-feed .stkp-thumb img { height:110px; } .stkp-live-update-feed .stkp-body { padding:0 0 16px 18px; }
.stkp-investigations .stkp-card { border-radius:0; border:2px solid #111827; box-shadow:6px 6px 0 #facc15; } .stkp-investigations .stkp-cat { color:#111827; }
.stkp-market-watch .stkp-card { border-radius:12px; background:#f8fafc; } .stkp-market-watch .stkp-title::before { content:'▲ '; color:#16a34a; } .stkp-market-watch .stkp-card:nth-child(even) .stkp-title::before { content:'▼ '; color:#dc2626; }
.stkp-photo-reportage .stkp-card { border:0; border-radius:0; background:#000; } .stkp-photo-reportage .stkp-thumb img { height:320px; } .stkp-photo-reportage .stkp-body { background:#000; } .stkp-photo-reportage .stkp-title a,.stkp-photo-reportage .stkp-meta,.stkp-photo-reportage .stkp-excerpt { color:#fff; }
.stkp-data-brief .stkp-card { border-radius:14px; background:repeating-linear-gradient(0deg,#fff,#fff 26px,#f1f5f9 27px); } .stkp-data-brief .stkp-card::before { content:''; height:7px; background:linear-gradient(90deg,#0ea5e9 35%,#22c55e 35% 63%,#f97316 63%); }
.stkp-sunday-edition .stkp-card { border:0; border-radius:26px; background:#faf7f0; box-shadow:0 16px 40px rgba(87,66,38,.16); } .stkp-sunday-edition .stkp-title { font-size:1.35rem; }
.stkp-city-guide-news .stkp-card { border-radius:20px; border:1px solid #cbd5e1; } .stkp-city-guide-news .stkp-cat { color:#7c3aed; } .stkp-city-guide-news .stkp-card::before { content:'CITY'; position:absolute; top:12px; right:12px; font-size:.68rem; font-weight:900; color:#7c3aed; }
.stkp-global-dispatch .stkp-card { border-radius:18px; background:linear-gradient(135deg,#0f172a,#1e293b); } .stkp-global-dispatch .stkp-title a,.stkp-global-dispatch .stkp-meta,.stkp-global-dispatch .stkp-excerpt { color:#e2e8f0; } .stkp-global-dispatch .stkp-cat { color:#38bdf8; }
@media (max-width: 767px) { .stkp-broadsheet-lead .stkp-card:first-child { grid-column:auto; } .stkp-live-update-feed .stkp-card { grid-template-columns:1fr; } .stkp-live-update-feed .stkp-body { padding:16px 0; } .stkp-feature-stack .stkp-card:nth-child(odd) { transform:none; } }

/* Elementor Global Design Controls + Layout Animation Presets */
.stkp-wrap{--stkp-accent:#d71920;--stkp-surface:#fff;--stkp-ink:#111827;--stkp-muted:#64748b;--stkp-speed:320ms;--stkp-anim-duration:650ms;--stkp-anim-stagger:70ms;}
.stkp-wrap .stkp-card,.stkp-wrap .stkp-thumb img,.stkp-wrap .stkp-btn,.stkp-wrap .stkp-title a{transition:transform var(--stkp-speed) ease,box-shadow var(--stkp-speed) ease,background-color var(--stkp-speed) ease,color var(--stkp-speed) ease,border-color var(--stkp-speed) ease,filter var(--stkp-speed) ease;}
.stkp-wrap .stkp-thumb{overflow:hidden;}
.stkp-wrap .stkp-cat,.stkp-wrap .stkp-cat-badge,.stkp-wrap .stkp-ribbon{color:var(--stkp-accent);}
.stkp-wrap .stkp-cat-badge,.stkp-wrap .stkp-btn{background:var(--stkp-accent);}
.stkp-preset-newspaper .stkp-card{border-radius:0!important;border:1px solid #111827!important;box-shadow:none!important;background:#fffef8!important;}
.stkp-preset-newspaper .stkp-title{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.04em;}
.stkp-preset-newspaper .stkp-cat{font-family:Arial,sans-serif;text-transform:uppercase;border-bottom:2px solid var(--stkp-accent);width:max-content;}
.stkp-preset-magazine .stkp-card{border:0!important;border-radius:28px!important;box-shadow:0 24px 70px rgba(15,23,42,.16)!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;}
.stkp-preset-magazine .stkp-thumb img{filter:saturate(1.08) contrast(1.04);}
.stkp-preset-broadcast .stkp-card{border:0!important;border-radius:14px!important;background:linear-gradient(135deg,#0f172a,#1e293b)!important;}
.stkp-preset-broadcast .stkp-title a,.stkp-preset-broadcast .stkp-meta,.stkp-preset-broadcast .stkp-excerpt{color:#f8fafc!important;}
.stkp-preset-broadcast .stkp-cat{color:#facc15!important;}
.stkp-preset-wire .stkp-card{border:0!important;border-bottom:1px solid #cbd5e1!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;}
.stkp-preset-wire .stkp-thumb{display:none;}
.stkp-preset-wire .stkp-title{font-family:Arial,Helvetica,sans-serif;font-size:1rem;letter-spacing:0;}
.stkp-preset-minimal .stkp-card{border:1px solid #e5e7eb!important;border-radius:18px!important;box-shadow:none!important;background:#fff!important;}
.stkp-preset-minimal .stkp-btn{background:transparent!important;color:var(--stkp-accent)!important;border-bottom:1px solid currentColor!important;border-radius:0!important;padding-left:0!important;padding-right:0!important;}
.stkp-preset-darkroom .stkp-card{border:1px solid rgba(255,255,255,.1)!important;border-radius:22px!important;background:#050816!important;box-shadow:0 20px 60px rgba(0,0,0,.35)!important;}
.stkp-preset-darkroom .stkp-title a,.stkp-preset-darkroom .stkp-meta,.stkp-preset-darkroom .stkp-excerpt{color:#e5e7eb!important;}
.stkp-preset-darkroom .stkp-cat{color:#38bdf8!important;}
.stkp-treatment-lead .stkp-card:first-child{grid-column:span 2;}
.stkp-treatment-lead .stkp-card:first-child .stkp-title{font-size:clamp(2rem,3vw,3.8rem);line-height:.95;}
.stkp-treatment-compact .stkp-card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;}
.stkp-treatment-compact .stkp-thumb img{height:92px!important;}
.stkp-treatment-compact .stkp-body{padding:0!important;}
.stkp-treatment-compact .stkp-excerpt,.stkp-treatment-compact .stkp-btn{display:none;}
.stkp-treatment-feature .stkp-card{border-radius:30px!important;overflow:hidden;}
.stkp-treatment-feature .stkp-title{font-size:clamp(1.3rem,1.2vw + 1rem,2.2rem);}
.stkp-treatment-bulletin{display:block;}
.stkp-treatment-bulletin .stkp-card{border-left:5px solid var(--stkp-accent)!important;margin-bottom:16px;}
.stkp-treatment-opinion .stkp-card{background:#fffdf5!important;border-left:2px solid #111!important;border-radius:0!important;}
.stkp-treatment-opinion .stkp-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;}
.stkp-treatment-photo .stkp-card{background:#000!important;border:0!important;border-radius:0!important;}
.stkp-treatment-photo .stkp-thumb img{height:340px!important;}
.stkp-treatment-photo .stkp-title a,.stkp-treatment-photo .stkp-meta,.stkp-treatment-photo .stkp-excerpt{color:#fff!important;}
.stkp-anim-fade-up .stkp-card{animation:stkpFadeUp var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));}
.stkp-anim-fade-in .stkp-card{animation:stkpFadeIn var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));}
.stkp-anim-slide-left .stkp-card{animation:stkpSlideLeft var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));}
.stkp-anim-slide-right .stkp-card{animation:stkpSlideRight var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));}
.stkp-anim-zoom-in .stkp-card{animation:stkpZoomIn var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));}
.stkp-anim-flip-in .stkp-card{animation:stkpFlipIn var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));transform-origin:center bottom;}
.stkp-anim-stagger .stkp-card{animation:stkpNewsStagger var(--stkp-anim-duration) both;animation-delay:calc(var(--stkp-index,0) * var(--stkp-anim-stagger));}
.stkp-anim-none .stkp-card{animation:none!important;}
.stkp-pause-hover:hover .stkp-card{animation-play-state:paused;}
@keyframes stkpFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes stkpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes stkpSlideLeft{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
@keyframes stkpSlideRight{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}
@keyframes stkpZoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes stkpFlipIn{from{opacity:0;transform:perspective(900px) rotateX(18deg) translateY(20px)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}}
@keyframes stkpNewsStagger{0%{opacity:0;transform:translateY(22px) scale(.98);filter:blur(4px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media (max-width:767px){.stkp-treatment-lead .stkp-card:first-child{grid-column:auto}.stkp-treatment-compact .stkp-card{grid-template-columns:1fr}.stkp-treatment-compact .stkp-thumb img{height:180px!important}}
@media (prefers-reduced-motion:reduce){.stkp-wrap .stkp-card{animation:none!important;transition:none!important}.stkp-wrap .stkp-thumb img{transition:none!important}}