/* ============================================================
 * Tillväxtbegrepp — styling only for chips + meta strip + archive
 * scaffolding. Cards inside archive groups reuse existing site
 * styles (book-card, blog-card, poddar-card, cpt-card) — do not
 * duplicate card styling here.
 * ============================================================ */

/* ---------- Homepage chip section (used by pattern) ---------- */
.tillvaxtbegrepp-categories { background:#fafafa; }
.tillvaxtbegrepp-categories__title { margin-bottom:0.25em; }
.tillvaxtbegrepp-categories__intro { max-width:640px; margin:0 auto var(--wp--preset--spacing--40); color:#4d4d4d; }
.tillvaxtbegrepp-category { padding-block:var(--wp--preset--spacing--30); border-top:1px solid #e6e1ec; }
.tillvaxtbegrepp-category:first-of-type { border-top:none; }
.tillvaxtbegrepp-category__label a { color:inherit; text-decoration:none; }
.tillvaxtbegrepp-category__label a:hover { text-decoration:underline; }
.tillvaxtbegrepp-category__desc { color:#6c757d; margin:0 0 var(--wp--preset--spacing--20); }

/* ---------- Chips (used on homepage + single content meta) ---------- */
.tillvaxtbegrepp-chips { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tillvaxtbegrepp-chip {
	display:inline-flex; align-items:center; gap:6px;
	padding:6px 14px; border-radius:999px;
	background:#fff; border:1px solid var(--wp--preset--color--primary, #562777);
	color:var(--wp--preset--color--primary, #562777);
	font-size:0.9rem; font-weight:500; text-decoration:none; line-height:1.4;
	transition:background .15s, color .15s;
}
.tillvaxtbegrepp-chip:hover, .tillvaxtbegrepp-chip:focus { background:var(--wp--preset--color--primary, #562777); color:#fff; }
.tillvaxtbegrepp-chip__count { font-size:0.75rem; opacity:0.6; }

/* ---------- Single-content meta strip ---------- */
.tillvaxtbegrepp-meta { margin-block:var(--wp--preset--spacing--40); padding:var(--wp--preset--spacing--30); background:#f8f9fa; border-radius:8px; }
.tillvaxtbegrepp-meta__label { font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 var(--wp--preset--spacing--20); color:var(--wp--preset--color--primary, #562777); }
.tillvaxtbegrepp-meta__group { margin-bottom:var(--wp--preset--spacing--20); }
.tillvaxtbegrepp-meta__group:last-child { margin-bottom:0; }
.tillvaxtbegrepp-meta__parent { display:inline-block; font-size:0.75rem; font-weight:700; letter-spacing:0.05em; color:#6c757d; margin-bottom:6px; }
.tillvaxtbegrepp-meta__list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- Archive page scaffold ----------
 * Hero and group titles. Cards inside groups inherit .book-card /
 * .blog-card / .poddar-card / .cpt-card from cpt-styles.css.
 */
.tillvaxtbegrepp-hero__inner { max-width:760px; margin:0 auto; text-align:center; }
.tillvaxtbegrepp-hero__badge {
	display:inline-block;
	margin:0 0 var(--wp--preset--spacing--20);
	font-size:0.78rem;
	font-weight:700;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:var(--wp--preset--color--primary, #562777);
	background:rgba(86,39,119,0.08);
	padding:6px 14px;
	border-radius:999px;
}
.tillvaxtbegrepp-hero__title {
	font-size:clamp(2rem, 4vw, 3rem);
	font-weight:700;
	margin:0 0 var(--wp--preset--spacing--20);
	line-height:1.1;
}
.tillvaxtbegrepp-hero__description {
	font-size:1.125rem;
	color:#4d4d4d;
	margin:0;
	line-height:1.5;
}
.tillvaxtbegrepp-archive__empty { text-align:center; padding:var(--wp--preset--spacing--60) 0; color:#6c757d; font-style:italic; }

.tillvaxtbegrepp-groups { display:flex; flex-direction:column; gap:var(--wp--preset--spacing--70); }
.tillvaxtbegrepp-group { margin:0; padding:0; }
.tillvaxtbegrepp-group__title {
	font-size:1.5rem;
	font-weight:700;
	margin:0 0 var(--wp--preset--spacing--30);
	padding-bottom:var(--wp--preset--spacing--20);
	border-bottom:1px solid #e0e0e0;
	color:var(--wp--preset--color--primary, #562777);
}
.tillvaxtbegrepp-group__count { color:#6c757d; font-size:0.85rem; font-weight:400; margin-left:6px; }

/* When .cpt-card-grid / .blog-grid are used outside wp:post-template,
 * Gutenberg's inline grid layout isn't applied. Set up the same 3-col
 * grid manually inside the archive groups so cpt-styles.css responsive
 * overrides (1col mobile, 2col tablet) cascade naturally. */
.tillvaxtbegrepp-group .cpt-card-grid,
.tillvaxtbegrepp-group .blog-grid {
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:20px;
}
.tillvaxtbegrepp-group .blog-grid { gap:0; }
.tillvaxtbegrepp-group .blog-grid > li,
.tillvaxtbegrepp-group .cpt-card-grid > li { list-style:none; }
@media (max-width:991px) {
	.tillvaxtbegrepp-group .cpt-card-grid,
	.tillvaxtbegrepp-group .blog-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:767px) {
	.tillvaxtbegrepp-group .cpt-card-grid,
	.tillvaxtbegrepp-group .blog-grid { grid-template-columns:1fr; }
}

/* ---------- Card overrides scoped to the archive ----------
 * Reuses the global card classes but trims sizing for this denser
 * multi-CPT context (where each section shows only a few items).
 */

/* Book cards: keep aspect 3:4 but slightly less tall + tighter info section */
.tillvaxtbegrepp-group--product .book-card__image { aspect-ratio:4/5; padding:16px 16px 0; }
.tillvaxtbegrepp-group--product .book-card__info { padding:12px 16px 16px; }
.tillvaxtbegrepp-group--product .book-card__title { font-size:0.9rem; }
.tillvaxtbegrepp-group--product .book-card__year { margin-bottom:8px; }

/* Poddar titles: smaller font and clamp to 3 lines so long episode titles
 * don't dominate the gradient overlay. */
.tillvaxtbegrepp-group--poddar .poddar-card__title {
	font-size:0.85rem;
	padding:48px 16px 16px;
	letter-spacing:0.01em;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
/* Listen button position adjusted to match the smaller title padding */
.tillvaxtbegrepp-group--poddar .poddar-card__listen { bottom:52px; left:16px; }

/* ---------- Responsive tweaks for chips ---------- */
@media (max-width:600px) {
	.tillvaxtbegrepp-chip { font-size:0.85rem; padding:5px 10px; }
	.tillvaxtbegrepp-hero__title { font-size:1.8rem; }
	.tillvaxtbegrepp-group__title { font-size:1.25rem; }
}