/* =========================================================================
   Guide-arkiv: banner ("Saknar du en guide?", Figma 1830:21477) + nedladdnings-
   modal (Figma 1830:23447). Endast Figma-värden; #111110→--color-text,
   neutral-skalan mappad mot temats tokens (100 #fafaf5 / 200 #f2f2ea /
   300 #dcdcd4 / 400 #c1c1bb / 600 #878782 / 900 #2d2d2b).
   ========================================================================= */

/* --- Rutnät: auto-fill minmax → 3 → 2 → 1 kolumn (guide-arkivet) ----------
   Återanvänder .blog__grid (kol-gap 24 / rad-gap 59 ärvs) men byter den fasta
   repeat(3,1fr) mot ett RAM-rutnät: kolumnerna faller naturligt till 2 (och 1)
   när bredden inte räcker, i st.f. bloggens 3→1-hopp. minmax-min 360px håller
   desktop på 3 kol (4 ryms ej i 1460-containern) och min(…,100%) hindrar
   overflow på smala skärmar. auto-fill (ej auto-fit) → ensamt kort behåller
   kolumnbredd i st.f. att sträckas över hela raden. .blog__grid--guide
   (specificitet 0,2,0) vinner över bloggens .blog__grid-regler. */
.blog__grid.blog__grid--guide {
	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

/* --- Banner ("Saknar du en guide?") — full-bleed bg + centrerad copy ------
   Figma: px-230 (= container-gutter, hanteras av .container) py-144, bg-bild
   object-cover, vit centrerad text (rubrik H2 69 + text Body L) gap-32, gap-48
   till knappen. Mörk knapp (#2d2d2b) = den klon-variant redaktören väljer. */
.guide-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--color-neutral-900); /* fallback bakom bilden */
}
.guide-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.guide-banner__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px; /* Figma: copy → knapp */
	/* Figma desktop py-144; nedskalad mobil (Figma saknar mobil-banner-frame). */
	padding-block: clamp(72px, 10vw, 144px);
	text-align: center;
	color: var(--color-neutral-100);
}
.guide-banner__copy {
	display: flex;
	flex-direction: column;
	gap: 32px; /* Figma: rubrik → text */
	width: 100%;
}
.guide-banner__heading {
	color: var(--color-neutral-100); /* .h2 ger 69px ExtraBold + leading-tight 1.1 */
}
.guide-banner__text {
	margin: 0;
	color: var(--color-neutral-100); /* .body-l ger 18px/1.5 */
}

/* --- Nedladdnings-modal (native <dialog>) -------------------------------- */
.guide-modal {
	width: min(697px, calc(100vw - 32px)); /* Figma-bredd 697 */
	margin: auto; /* centrerad i viewporten (showModal) */
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
}
/* Funktionell scrim — modalen kräver en (ej i Figma-isolatet). neutral-1000 @60%. */
.guide-modal::backdrop {
	background: rgba(29, 31, 31, 0.6);
}
.guide-modal__panel {
	display: flex;
	flex-direction: column;
	gap: 40px; /* Figma: stäng → bild → text → formulär */
	max-height: calc(100dvh - 48px);
	padding: 48px 64px; /* Figma py-48 px-64 */
	overflow-y: auto;
	background-color: var(--color-neutral-100); /* #fafaf5 */
}

.guide-modal__head {
	display: flex;
	justify-content: flex-end;
}
.guide-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color-text);
}
.guide-modal__close-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.guide-modal__media {
	flex: none; /* behåll 240px i flex-kolumnen (panelen scrollar i st.f. att krympa bilden) */
	width: 100%;
	height: 240px; /* Figma h-240 */
	overflow: hidden;
	background-color: var(--color-neutral-200); /* platshållare när guiden saknar bild */
}
.guide-modal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.guide-modal__img[hidden] {
	display: none;
}

.guide-modal__text {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Figma: rubrik → ingress → meta */
}
.guide-modal__heading {
	color: var(--color-text); /* .h3 ger 53px ExtraBold + leading-snug 1.2 */
	overflow-wrap: break-word; /* Figma: word-break */
}
.guide-modal__intro {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-medium); /* Inter Medium */
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal);
	color: var(--color-neutral-600); /* #878782 */
}
.guide-modal__meta {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-medium); /* Inter Medium */
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal);
	color: var(--color-text); /* #2d2d2b */
}

/* --- GF-formuläret i modalen (understruket e-postfält + pill-submit) ------
   gform_disable_css är på globalt → all stil här. Submit byts till
   .contact-form__submit (inc/gravityforms.php) med download-ikon. */
.guide-modal__form .gform_wrapper {
	width: 100%;
}
.guide-modal__form .gform_body,
.guide-modal__form .gform-body {
	width: 100%;
}
.guide-modal__form .gform_fields {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-modal__form .gfield {
	margin: 0;
	padding: 0;
}
/* Etiketter sr-only (placeholder = etikett via gform_pre_render-filtret). */
.guide-modal__form .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Dolda fält (Fil-URL/Guide-titel) tar ingen plats. */
.guide-modal__form .gfield.gform_hidden,
.guide-modal__form .gfield_visibility_hidden {
	display: none;
}
.guide-modal__form .ginput_container input {
	width: 100%;
	padding: 32px 24px; /* Figma px-24 py-32 */
	border: 0;
	border-bottom: 1px solid var(--color-text); /* #2d2d2b */
	border-radius: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal);
	color: var(--color-text);
	transition: border-color 0.15s ease; /* focus → coral */
}
/* Fokus: ingen standard-outline, understrecket blir korall i stället. */
.guide-modal__form .ginput_container input:focus {
	outline: none;
	border-bottom-color: var(--color-coral-600); /* #fb575d */
}
.guide-modal__form .ginput_container input::placeholder {
	color: var(--color-neutral-600); /* #878782 */
	opacity: 1;
}
.guide-modal__form .gform_footer {
	margin: 40px 0 0; /* Figma: e-postfält → CTA = 40 */
	padding: 0;
}

/* Submit-pill: aktiv = mörk (#2d2d2b/#fafaf5 + download-ikon). Inaktiv (tom/ogiltig
   e-post) = grå (#dcdcd4/#c1c1bb) — Figmas utgångsläge. guide.js sätter :disabled
   tills en giltig e-post skrivits. Ikonen är currentColor → följer textfärgen. */
.guide-modal__form .contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* Figma gap-8 (text → ikon) */
	width: 100%;
	padding: 16px 24px; /* Figma px-24 py-16 */
	border: 0;
	border-radius: 100px;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold); /* Inter Tight SemiBold */
	font-size: var(--text-button); /* 16px */
	line-height: var(--leading-snug);
	background-color: var(--color-neutral-900);
	color: var(--color-neutral-100);
	cursor: pointer;
}
.guide-modal__form .contact-form__submit:disabled {
	background-color: var(--color-neutral-300); /* #dcdcd4 */
	color: var(--color-neutral-400); /* #c1c1bb */
	cursor: not-allowed;
}
.guide-modal__form .contact-form__submit-icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* Valideringsmeddelanden (om GF visar dem) — minimal stil (ingen GF-CSS). */
.guide-modal__form .gfield_validation_message,
.guide-modal__form .validation_message {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: var(--text-body-m);
	line-height: var(--leading-normal);
	color: var(--color-coral-600);
}

/* Body-scroll-lås medan modalen är öppen. */
body.guide-modal-open {
	overflow: hidden;
}

/* --- Mobil: nedskalad modal-padding (Figma saknar mobil-modal-frame) ------ */
@media (max-width: 768px) {
	.guide-modal__panel {
		padding: 32px 24px;
		gap: 32px;
	}
	.guide-modal__text {
		gap: 16px;
	}
	.guide-modal__form .ginput_container input {
		padding: 24px 0; /* full-bredds understreck på mobil */
	}
	.guide-modal__form .gform_footer {
		margin-top: 32px;
	}
}