/**
 * Hebahan Kuliah — Shortcode base styles.
 *
 * Strategy
 * ────────
 * Shortcode wrapper carries BOTH `hk-sc hk-sc--{style}` AND
 * `hk-archive hk-archive--{style}` classes. That way, all the existing
 * archive CSS (cards, grid, mag, timeline) applies inside the shortcode
 * automatically — without duplicating selectors.
 *
 * This file contains:
 *   1. The shortcode-only chrome (header, "see all" link, empty state).
 *   2. Overrides that "tame" the archive CSS when used inside a page
 *      (smaller padding, removed max-width so it fits the column it's
 *       dropped into, etc).
 */

/* ════════════════════════════════════════════════════════════
   1. SHORTCODE CHROME
   ════════════════════════════════════════════════════════════ */

.hk-sc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	color: #1D1D1F;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.01em;
	margin: 0 0 32px;
}

/* Header (shortcode-specific — not the .hk-archive__header from full archive) */
.hk-sc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.hk-sc__title {
	font-size: 26px;
	font-weight: 700;
	color: #1D1D1F;
	margin: 0;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

/* Empty state */
.hk-sc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 24px;
	background: #fff;
	border-radius: 14px;
	border: 0.5px solid rgba(60,60,67,0.06);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	text-align: center;
	color: #8E8E93;
	font-size: 14px;
}
.hk-sc__empty-icon { font-size: 40px; }
.hk-sc__empty p { margin: 0; font-weight: 500; }

/* "See all" link */
.hk-sc__more {
	margin-top: 20px;
	text-align: center;
}
.hk-sc__more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 20px;
	border-radius: 999px;
	background: rgba(0,122,255,0.10);
	color: #007AFF;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background 180ms ease, transform 100ms ease;
}
.hk-sc__more-link:hover {
	background: rgba(0,122,255,0.18);
	color: #007AFF;
	text-decoration: none;
	transform: translateX(2px);
}
.hk-sc__more-link svg { flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════
   2. ARCHIVE-CONTEXT OVERRIDES
   When .hk-archive is also .hk-sc (i.e. used inside a page via
   shortcode), neutralise the wide archive defaults so it slots
   into whatever container hosts the shortcode.
   ════════════════════════════════════════════════════════════ */

.hk-sc.hk-archive {
	max-width: none;       /* let the host column define width */
	margin: 0 0 32px;      /* match .hk-sc top/bottom rhythm */
	padding: 0;            /* host column already provides padding */
}

/* The full archive shows a giant centred title via .hk-archive__header.
   Inside a shortcode, the user picks the title via attributes and we
   render it as .hk-sc__header — so the .hk-archive__header from the
   variation template would never appear here anyway. This is just a
   safety net in case any partial does try to render one. */
.hk-sc.hk-archive .hk-archive__header { display: none; }

/* Slightly tighter card grid for shortcode context (smaller minmax). */
.hk-sc.hk-archive--grid .hk-archive__grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

/* Title size override — shortcode cards a touch smaller than full archive. */
.hk-sc .hk-card__title,
.hk-sc .hk-mag__row-title,
.hk-sc .hk-tl__title {
	font-size: 15px;
}

/* Mobile breakpoint: still 2-up grid for shortcode (matches archive). */
@media (max-width: 480px) {
	.hk-sc.hk-archive--grid .hk-archive__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ── Magazine context: drop magazine to single column when host is narrow ── */
@media (max-width: 768px) {
	.hk-sc.hk-archive--magazine .hk-mag {
		grid-template-columns: 1fr;
	}
}

/* ── Pagination is hidden in shortcode (the "Lihat Semua Hebahan" link
      replaces it; full archive page handles real pagination). ── */
.hk-sc .hk-archive__nav { display: none; }