/* =========================================================================
   Guide-kort (guide-card, Figma 1830:22404) — DELAD komponent.
   Används på guide-arkivet (archive-guide.php) + REST (sunbird/v1/guides).
   Variant av post-kortet: rundad bild (~2:1), EN guide_cat-pill (ingen lästid),
   titel (H6) + ingress (Body L), och en "Ladda ner"-knapp (download-ikon) som
   öppnar nedladdnings-modalen (guide.js). Endast Figma-värden. #111110 → text.
   ========================================================================= */

.guide-card__item {
	display: flex;
}
.guide-card {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Figma: bild → textblock (samma 24 inuti) */
	width: 100%;
}
/* Textblock (pills + titlar + CTA). I vanliga kortet en transparent flex-kolumn
   (oförändrad rytm, gap 24); i Guides-blockets 2-kol-läge blir det 50%-spalten
   bredvid bilden (se blocks/guides/style.css). */
.guide-card__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- Bild (~2:1, raka hörn) --------------------------------------------- */
.guide-card__media {
	display: block;
	aspect-ratio: 470 / 238; /* ~1.97:1 (Figma) */
	overflow: hidden;
	background-color: var(--color-neutral-200); /* platshållare bakom bilden */
}
.guide-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Kategori-pill (en, accent-stapel) ---------------------------------- */
.guide-card__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px; /* Figma px-8 py-6 */
	font-family: var(--font-body);
	font-size: var(--text-body-m); /* 14px */
	line-height: var(--leading-normal);
	color: var(--color-text); /* #2d2d2b (Figma #111110 → temats text) */
}
.guide-card__cat-bar {
	flex: none;
	width: 4px;
	height: 13px;
	background-color: var(--color-text);
}

/* --- Titel + ingress ---------------------------------------------------- */
.guide-card__titles {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma titel → ingress */
}
.guide-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700; /* Inter Tight Bold (H6) */
	font-size: 1.5rem; /* 24px */
	line-height: var(--leading-snug); /* 1.2 */
	color: var(--color-text);
}
.guide-card__excerpt {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
}

/* --- "Ladda ner"-knapp (öppnar modalen) --------------------------------- */
.guide-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* Figma gap-8 (text → ikon) */
	align-self: flex-start;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold); /* Inter Tight SemiBold */
	font-size: var(--text-button); /* 16px */
	line-height: var(--leading-snug);
	color: var(--color-text); /* #2d2d2b */
	transition: color 0.15s ease; /* hover → coral (begärd effekt) */
}
.guide-card__cta-text {
	text-decoration: underline;
	text-underline-position: from-font;
}
.guide-card__cta-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Hover: text + ikon (currentColor) → coral. Begärd effekt, ej i Figma. */
@media (hover: hover) {
	.guide-card__cta:hover {
		color: var(--color-link); /* coral #fb575d */
	}
}

/* Mobil: kort-titel 20px ExtraBold (Figma "H6-mobile"; desktop 24px Bold). */
@media (max-width: 768px) {
	.guide-card__title {
		font-size: 1.25rem;
		font-weight: var(--fw-extrabold);
	}
}