/* ICP news shortcodes — featured / recommended / grid */
.icpp-featured, .icpp-card, .icpp-reco { --p-red: #b3151b; --p-text: #1f1f1f; --p-muted: #6b6b6b; --p-border: #e3e3e3; --p-radius: 14px; font-family: inherit; color: var(--p-text); }
.icpp-featured *, .icpp-card *, .icpp-reco *, .icpp-grid * { box-sizing: border-box; }

/* ---- featured ---- */
.icpp-featured { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius); box-shadow: 0 6px 24px rgba(0,0,0,.06); overflow: hidden; }
.icpp-featured__media { position: relative; display: grid; gap: 4px; background: #eee; aspect-ratio: 3 / 2; overflow: hidden; }
.icpp-featured__media img, .icpp-featured__noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.icpp-featured__media--1 { grid-template-columns: 1fr; }
.icpp-featured__media--2 { grid-template-columns: 1fr 1fr; }
.icpp-featured__media--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.icpp-featured__media--3 img:first-child { grid-row: 1 / 3; }
.icpp-featured__media--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.icpp-featured__media--0 { aspect-ratio: 3 / 1; }
.icpp-featured__label { position: absolute; top: 18px; left: 18px; z-index: 2; padding: 6px 16px; border-radius: 999px; background: linear-gradient(180deg, #c92b31, #a3121a); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.icpp-featured__body { padding: 20px 22px 8px; }
.icpp-featured__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.45; }
.icpp-featured__title a, .icpp-card__title a { color: inherit; text-decoration: none; }
.icpp-featured__title a:hover, .icpp-card__title a:hover { color: var(--p-red); }
.icpp-featured__excerpt, .icpp-card__excerpt { margin: 0; color: #444; font-size: 15px; line-height: 1.6; }
.icpp-featured__foot, .icpp-card__foot { padding: 12px 22px 16px; border-top: 1px solid #f0f0f0; margin-top: auto; }

/* ---- meta ---- */
.icpp-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--p-muted); }
.icpp-meta__views { display: inline-flex; align-items: center; gap: 5px; color: #333; }
.icpp-meta__views strong { font-weight: 700; }
.icpp-meta__sep { color: #c8c8c8; }
.icpp-meta__date { color: var(--p-red); }

/* ---- recommended ---- */
.icpp-reco { background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius); padding: 22px 24px; }
.icpp-reco__title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.icpp-reco__list { list-style: none; margin: 0; padding: 0; counter-reset: reco; display: flex; flex-direction: column; gap: 14px; }
.icpp-reco__list li { counter-increment: reco; display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 15px; line-height: 1.55; }
.icpp-reco__list li::before { content: counter(reco); color: #9a9a9a; font-size: 13px; padding-top: 2px; }
.icpp-reco__list a { color: var(--p-text); text-decoration: none; }
.icpp-reco__list a:hover { color: var(--p-red); }

/* ---- grid ---- */
.icpp-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.icpp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.icpp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.icpp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius); box-shadow: 0 6px 24px rgba(0,0,0,.06); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.icpp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.icpp-card__media { display: block; aspect-ratio: 3 / 2; background: #eee; overflow: hidden; }
.icpp-card__media img, .icpp-card__noimg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.icpp-card:hover .icpp-card__media img { transform: scale(1.04); }
.icpp-card__body { padding: 18px 20px 6px; }
.icpp-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.45; }
.icpp-card__foot { padding: 12px 20px 16px; }

/* ---- pager ---- */
.icpp-pager { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.icpp-pager .page-numbers { padding: 8px 14px; border: 1px solid var(--p-border, #e3e3e3); border-radius: 8px; color: #333; text-decoration: none; }
.icpp-pager .page-numbers.current { background: #b3151b; border-color: #b3151b; color: #fff; }

@media (max-width: 1024px) { .icpp-grid, .icpp-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.icpp-grid, .icpp-grid--2, .icpp-grid--4 { grid-template-columns: 1fr; }
	.icpp-featured__title { font-size: 18px; }
	.icpp-featured__body, .icpp-card__body { padding: 16px 16px 6px; }
	.icpp-featured__foot, .icpp-card__foot { padding: 10px 16px 14px; }
}
