/* Premium Posts (JustNew) */
.hpp-wrap { width: 100%; }
.hpp-grid {
	--hpp-cols: 3; --hpp-gap: 32px; --hpp-radius: 18px; --hpp-ratio: 16 / 10;
	--hpp-accent: #229F05; --hpp-navy: #0D2E5C; --hpp-speed: 500ms;
	display: grid; grid-template-columns: repeat(var(--hpp-cols), minmax(0, 1fr)); gap: var(--hpp-gap);
	box-sizing: border-box;
}
.hpp-grid *, .hpp-grid *::before, .hpp-grid *::after { box-sizing: border-box; }

/* ---------- card ---------- */
.hpp-card {
	position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: #fff; border-radius: var(--hpp-radius);
	box-shadow: 0 calc(var(--hpp-sb, 48px) * .38) var(--hpp-sb, 48px) calc(var(--hpp-sb, 48px) * -.3) var(--hpp-shadow-c, rgba(13,46,92,.28));
	transition: transform var(--hpp-speed) cubic-bezier(.2,.7,.2,1), box-shadow var(--hpp-speed) ease;
}
.hpp-card:hover, .hpp-card:focus-within { box-shadow: 0 calc(var(--hpp-sb, 48px) * .7) calc(var(--hpp-sb, 48px) * 1.45) calc(var(--hpp-sb, 48px) * -.33) var(--hpp-shadow-hc, rgba(13,46,92,.42)); }
.hpp-card::after { /* accent bar that grows on hover */
	content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; z-index: 3;
	background: var(--hpp-accent); transition: width var(--hpp-speed) cubic-bezier(.2,.7,.2,1);
}
.hpp-card:hover::after, .hpp-card:focus-within::after { width: 100%; }
.hpp-lift .hpp-card:hover, .hpp-lift .hpp-card:focus-within { transform: translateY(-8px); }

/* ---------- picture ---------- */
.hpp-media { position: relative; overflow: hidden; aspect-ratio: var(--hpp-ratio); background: var(--hpp-navy); flex: none; }
.hpp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.hpp-zoom .hpp-card:hover .hpp-img, .hpp-zoom .hpp-card:focus-within .hpp-img { transform: scale(1.07); }
.hpp-noimg { background: linear-gradient(135deg, var(--hpp-navy) 0%, var(--hpp-navy) 45%, var(--hpp-accent) 160%); }
.hpp-scrim .hpp-media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, color-mix(in srgb, var(--hpp-navy) 70%, transparent) 0%, transparent 55%);
}
.hpp-cat {
	position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px;
	background: var(--hpp-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; line-height: 1.2; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}

/* ---------- body ---------- */
.hpp-body { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 26px; flex: 1 1 auto; }
.hpp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #6b7a90; line-height: 1.3; }
.hpp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hpp-accent); display: inline-block; }
.hpp-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--hpp-navy); }
.hpp-title a { color: inherit; text-decoration: none; background: none; box-shadow: none; transition: color .3s; }
.hpp-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card clickable */
.hpp-card:hover .hpp-title a { color: var(--hpp-accent); }
.hpp-excerpt {
	margin: 0; font-size: 15px; line-height: 1.65; color: #4b5a70;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.hpp-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(13,46,92,.1); }
.hpp-author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hpp-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.hpp-author-name { font-size: 13px; font-weight: 600; color: var(--hpp-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpp-more { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hpp-navy); }
.hpp-arrow {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(34,159,5,.12); color: var(--hpp-accent); flex: none;
	transition: background .35s, color .35s, transform .35s;
}
.hpp-arrow svg { width: 16px; height: 16px; }
.hpp-card:hover .hpp-arrow, .hpp-card:focus-within .hpp-arrow { background: var(--hpp-accent); color: #fff; transform: translateX(4px); }

/* ---------- heading ---------- */
.hpp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.hpp-head-center { flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.hpp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hpp-accent, #229F05); margin-bottom: 10px; }
.hpp-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: currentColor; vertical-align: middle; margin-right: 10px; }
.hpp-heading { margin: 0 0 10px; font-size: 38px; font-weight: 800; line-height: 1.15; color: #0D2E5C; }
.hpp-intro { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: #4b5a70; }
.hpp-all {
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; text-decoration: none;
	background: #0D2E5C; color: #fff; font-size: 14px; font-weight: 600; transition: background .3s, transform .3s;
}
.hpp-all:hover { background: #229F05; color: #fff; transform: translateY(-2px); }
.hpp-all-arrow { width: 18px; height: 18px; transition: transform .3s; }
.hpp-all:hover .hpp-all-arrow { transform: translateX(4px); }

.hpp-empty { padding: 28px; border: 2px dashed #9fb0c6; border-radius: 12px; text-align: center; color: #4b5a70; font-size: 14px; }

/* ---------- magazine layout (desktop) ---------- */
@media (min-width: 1025px) {
	.hpp-layout-magazine { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(var(--hpp-span, 2), 1fr); }
	.hpp-layout-magazine .hpp-feature { grid-row: 1 / span var(--hpp-span, 2); }
	.hpp-layout-magazine .hpp-compact { flex-direction: row; }
	.hpp-layout-magazine .hpp-compact .hpp-media { width: 40%; aspect-ratio: auto; min-height: 100%; }
	.hpp-layout-magazine .hpp-compact .hpp-body { padding: 20px 22px; gap: 8px; justify-content: center; }
	.hpp-layout-magazine .hpp-compact .hpp-title { font-size: 19px; }
	.hpp-layout-magazine .hpp-compact .hpp-excerpt { -webkit-line-clamp: 2; font-size: 14px; }
	.hpp-layout-magazine .hpp-compact .hpp-cat { top: 12px; left: 12px; font-size: 10px; }
	.hpp-layout-magazine .hpp-compact .hpp-more-text { display: none; }
	.hpp-layout-magazine .hpp-compact .hpp-foot { padding-top: 10px; }
}

/* ---------- feature card: immersive, text over picture ---------- */
.hpp-feature { background: var(--hpp-navy); min-height: 420px; }
.hpp-feature .hpp-media { position: absolute; inset: 0; aspect-ratio: auto; }
.hpp-feature .hpp-media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, color-mix(in srgb, var(--hpp-navy) 97%, transparent) 0%, color-mix(in srgb, var(--hpp-navy) 85%, transparent) 50%, color-mix(in srgb, var(--hpp-navy) 25%, transparent) 80%, transparent 100%);
}
.hpp-feature .hpp-body { margin-top: auto; z-index: 1; padding: 64px 36px 34px; flex: none; }
.hpp-feature .hpp-title { font-size: 30px; color: #fff !important; }
.hpp-feature .hpp-title a { color: #fff !important; }
.hpp-feature .hpp-excerpt, .hpp-feature .hpp-meta, .hpp-feature .hpp-author-name, .hpp-feature .hpp-more { color: rgba(255,255,255,.88) !important; }
.hpp-feature .hpp-foot { border-top-color: rgba(255,255,255,.25); }
.hpp-feature .hpp-arrow { background: rgba(255,255,255,.18); color: #fff; }
.hpp-feature:hover .hpp-arrow { background: var(--hpp-accent); }

/* ---------- scroll-in animation ---------- */
.hpp-grid[data-animate="yes"] .hpp-card { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), box-shadow var(--hpp-speed) ease; transition-delay: calc(var(--hpp-i, 0) * 120ms), calc(var(--hpp-i, 0) * 120ms), 0ms; }
.hpp-grid[data-animate="yes"] .hpp-card.is-in { opacity: 1; transform: none; }
.hpp-grid[data-animate="yes"].hpp-lift .hpp-card.is-in:hover { transform: translateY(-8px); transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
	.hpp-grid[data-animate="yes"] .hpp-card { opacity: 1; transform: none; transition: none; }
	.hpp-img, .hpp-card, .hpp-arrow { transition: none !important; }
}

/* ---------- tablet ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.hpp-layout-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hpp-layout-magazine .hpp-feature { grid-column: 1 / -1; min-height: 400px; }
	.hpp-title { font-size: 20px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
	.hpp-layout-magazine { grid-template-columns: minmax(0, 1fr); }
	.hpp-feature { min-height: 440px; }
	.hpp-feature .hpp-body { padding: 70px 24px 26px; }
	.hpp-feature .hpp-title { font-size: 25px; }
	.hpp-body { padding: 20px 20px 22px; }
	.hpp-heading { font-size: 30px; }
	.hpp-head { margin-bottom: 30px; }
}