/*
 * JEX Design — komponenter.
 *
 * Knappar, hero, sektioner, formulär och de innehållsblock som
 * startsidan byggs av.
 */

/* ================================================================ KNAPPAR */

.jex-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.95rem 2.1rem;
	border: 1px solid var(--jex-accent);
	background: var(--jex-accent);
	color: var(--jex-text-plate);
	font-family: var(--jex-sans);
	font-size: var(--jex-step--1);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-align: center;
	transition: background var(--jex-fast), color var(--jex-fast), border-color var(--jex-fast);
}

.jex-btn:hover {
	background: transparent;
	color: var(--jex-accent);
}

/* Sekundär: bara kontur. Används där två knappar står bredvid varandra
   och bara en ska dra blicken. */
.jex-btn--ghost {
	background: transparent;
	color: var(--jex-text);
	border-color: var(--jex-line);
}

.jex-btn--ghost:hover {
	border-color: var(--jex-accent);
	color: var(--jex-accent);
	background: transparent;
}

/* På ljus produktplatta vänds färgerna. */
.jex-btn--onplate {
	background: var(--jex-text-plate);
	border-color: var(--jex-text-plate);
	color: var(--jex-plate);
}

.jex-btn--onplate:hover {
	background: transparent;
	color: var(--jex-text-plate);
}

.jex-btn--block { width: 100%; }

.jex-btn[disabled],
.jex-btn.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* Textlänk med pil — diskretare än en knapp. */
.jex-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--jex-step--1);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--jex-text);
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--jex-line);
	transition: border-color var(--jex-fast), color var(--jex-fast), gap var(--jex-fast);
}

.jex-link:hover {
	border-bottom-color: var(--jex-accent);
	color: var(--jex-accent);
	gap: 0.85rem;
}

.jex-link svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.4;
}

/* =================================================================== HERO */

.jex-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(92svh, 900px);
	/* svh i stället för vh: undviker att adressfältet på mobil klipper
	   botten av bilden när man rullar. */
	padding: calc(var(--jex-header-h) + var(--jex-space-xl)) 0 var(--jex-space-2xl);
	overflow: hidden;
	background: var(--jex-bg-soft);
}

.jex-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.jex-hero__media img,
.jex-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Toning nerifrån så texten alltid går att läsa, oavsett vilken bild
   kunden lägger in. Utan den blir rubriken oläslig på ljusa foton. */
.jex-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(21, 19, 15, 0.92) 0%,
		rgba(21, 19, 15, 0.55) 38%,
		rgba(21, 19, 15, 0.12) 64%,
		rgba(21, 19, 15, 0.58) 100%
	);
	/* Den mörkare toppen finns för navigationens skull: mot en ljus
	   hero-bild försvinner annars menyn och ikonerna helt. */
}

.jex-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--jex-max);
	margin-inline: auto;
	padding-inline: var(--jex-gutter);
}

.jex-hero__content { max-width: 620px; }

.jex-hero__title {
	font-size: var(--jex-step-5);
	margin-bottom: var(--jex-space-m);
}

.jex-hero__text {
	color: var(--jex-text-dim);
	font-size: var(--jex-step-1);
	max-width: 46ch;
	margin-bottom: var(--jex-space-l);
}

.jex-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jex-space-s);
}

/* Centrerad variant för kampanjsidor */
.jex-hero--center { align-items: center; text-align: center; }
.jex-hero--center .jex-hero__content { max-width: 720px; margin-inline: auto; }
.jex-hero--center .jex-hero__text { margin-inline: auto; }
.jex-hero--center .jex-hero__actions { justify-content: center; }

/* Kortare hero för undersidor */
.jex-hero--compact { min-height: min(52svh, 520px); }

/* ============================================================ SEKTIONER */

.jex-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--jex-space-m);
	margin-bottom: var(--jex-space-xl);
}

.jex-sectionhead__text { max-width: 58ch; }
.jex-sectionhead h2 { margin-bottom: var(--jex-space-2xs); }

.jex-sectionhead p {
	color: var(--jex-text-dim);
	margin: 0;
}

.jex-sectionhead--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ------------------------------------------------- kategorier (rutnät) */

.jex-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--jex-space-s);
}

.jex-cat {
	position: relative;
	display: grid;
	align-items: end;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--jex-bg-raised);
}

.jex-cat img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--jex-ease);
}

.jex-cat:hover img { transform: scale(1.045); }

.jex-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(21, 19, 15, 0.86), rgba(21, 19, 15, 0.05) 62%);
}

.jex-cat__label {
	position: relative;
	z-index: 1;
	padding: var(--jex-space-m);
	font-family: var(--jex-serif);
	font-size: var(--jex-step-2);
	font-weight: 300;
}

.jex-cat__count {
	display: block;
	font-family: var(--jex-sans);
	font-size: var(--jex-step--1);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--jex-text-dim);
	margin-top: 0.3rem;
}

/* ------------------------------------------------ redaktionellt block */

/* Bild och text sida vid sida. Vänder på mobil så bilden alltid kommer
   först — texten blir meningslös utan sitt sammanhang. */
.jex-editorial {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: center;
	gap: var(--jex-space-xl);
}

.jex-editorial__media { position: relative; }
.jex-editorial__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.jex-editorial__body { max-width: 52ch; }
.jex-editorial__body h2 { margin-bottom: var(--jex-space-s); }

.jex-editorial__body p {
	color: var(--jex-text-dim);
	margin-bottom: var(--jex-space-m);
}

/* Omvänd ordning på dator, men bilden ligger kvar först i HTML så
   ordningen på mobil och för skärmläsare förblir logisk. */
@media (min-width: 900px) {
	.jex-editorial--reverse .jex-editorial__media { order: 2; }
}

/* En signatur under smedje-texten */
.jex-signature {
	font-family: var(--jex-serif);
	font-style: italic;
	font-size: var(--jex-step-1);
	color: var(--jex-accent);
	margin-top: var(--jex-space-s);
}

/* ------------------------------------------------------ löften (USP) */

.jex-promises {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--jex-space-l);
	text-align: center;
}

.jex-promise__icon {
	width: 30px;
	height: 30px;
	margin: 0 auto var(--jex-space-s);
	stroke: var(--jex-accent);
	fill: none;
	stroke-width: 1.15;
}

.jex-promise h3 {
	font-family: var(--jex-sans);
	font-size: var(--jex-step--1);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin-bottom: var(--jex-space-2xs);
}

.jex-promise p {
	color: var(--jex-text-dim);
	font-size: var(--jex-step--1);
	margin: 0;
}

/* -------------------------------------------------- specialbeställning */

/* JEX Design tar emot egna önskemål — det är en av deras starkaste
   säljpunkter och får därför ett eget block, inte en rad i sidfoten. */
.jex-bespoke {
	position: relative;
	padding-block: var(--jex-space-3xl);
	text-align: center;
	overflow: hidden;
	background: var(--jex-bg-soft);
}

.jex-bespoke__media {
	position: absolute;
	inset: 0;
	opacity: 0.22;
}

.jex-bespoke__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jex-bespoke__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--jex-gutter);
}

.jex-bespoke h2 { margin-bottom: var(--jex-space-s); }

.jex-bespoke p {
	color: var(--jex-text-dim);
	margin-bottom: var(--jex-space-l);
}

/* ------------------------------------------------------- nyhetsbrev */

.jex-newsletter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: center;
	gap: var(--jex-space-l);
	padding: var(--jex-space-xl);
	border: 1px solid var(--jex-line);
	background: var(--jex-bg-raised);
}

.jex-newsletter h2 {
	font-size: var(--jex-step-2);
	margin-bottom: var(--jex-space-2xs);
}

.jex-newsletter p {
	color: var(--jex-text-dim);
	font-size: var(--jex-step--1);
	margin: 0;
}

.jex-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jex-space-2xs);
}

.jex-newsletter__form input[type="email"] { flex: 1 1 200px; }

/* Sökformuläret, samma uppställning som nyhetsbrevet */
.jex-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jex-space-2xs);
	margin-bottom: var(--jex-space-l);
	max-width: 640px;
	margin-inline: auto;
}

.jex-searchform input[type="search"] { flex: 1 1 220px; }

/* ============================================================ INSTAGRAM */

/* Pluginet skriver ut sitt eget rutnät. Här dämpas dess standardstilar
   så flödet ser ut som resten av sajten i stället för som ett inklistrat
   block. */
.jex-instagram__feed #sb_instagram {
	padding: 0 !important;
	width: 100% !important;
}

.jex-instagram__feed #sb_instagram .sbi_header_text,
.jex-instagram__feed #sb_instagram .sb_instagram_header {
	display: none !important;
}

.jex-instagram__feed #sbi_load {
	margin-top: var(--jex-space-m);
}

.jex-instagram__feed #sbi_load .sbi_load_btn {
	background: transparent !important;
	border: 1px solid var(--jex-line) !important;
	color: var(--jex-text-dim) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: var(--jex-step--1) !important;
	padding: 0.85rem 2rem !important;
}

.jex-instagram__feed #sbi_load .sbi_load_btn:hover {
	border-color: var(--jex-accent) !important;
	color: var(--jex-accent) !important;
}

/* Bilderna får samma ljusa platta som produktkorten. */
.jex-instagram__feed .sbi_photo_wrap,
.jex-instagram__feed .sbi_photo {
	background: var(--jex-plate) !important;
}

/* --- innan kontot är kopplat --- */

.jex-instagram__placeholder {
	border: 1px solid var(--jex-line);
	background: var(--jex-bg-raised);
	text-align: center;
	padding: var(--jex-space-xl) var(--jex-space-m);
}

.jex-instagram__placeholder > a {
	display: inline-flex;
	align-items: center;
	gap: var(--jex-space-2xs);
	font-size: var(--jex-step--1);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--jex-text-dim);
}

.jex-instagram__placeholder > a:hover { color: var(--jex-accent); }

.jex-instagram__placeholder svg {
	width: 20px;
	height: 20px;
	stroke: var(--jex-accent);
	fill: none;
	stroke-width: 1.2;
}

/* Instruktionen syns bara för inloggade administratörer. */
.jex-instagram__admin {
	margin: var(--jex-space-m) auto 0;
	max-width: 52ch;
	font-size: var(--jex-step--1);
	color: var(--jex-text-faint);
	border-top: 1px solid var(--jex-line-soft);
	padding-top: var(--jex-space-s);
}

.jex-instagram__admin a {
	color: var(--jex-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ============================================================== FORMULÄR */

.jex-field { margin-bottom: var(--jex-space-m); }

.jex-field label,
.jex-form label {
	display: block;
	font-size: var(--jex-step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--jex-text-dim);
	margin-bottom: var(--jex-space-2xs);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	/* 16px minimum: allt mindre får iOS att zooma in vid fokus, vilket
	   slänger runt hela layouten i kassan. */
	font-size: max(16px, var(--jex-step-0));
	padding: 0.9rem 1.05rem;
	background: var(--jex-bg);
	border: 1px solid var(--jex-line);
	color: var(--jex-text);
	transition: border-color var(--jex-fast), background var(--jex-fast);
	appearance: none;
	border-radius: var(--jex-radius);
}

textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

input::placeholder,
textarea::placeholder { color: var(--jex-text-faint); }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--jex-accent);
	outline: none;
	background: var(--jex-bg-soft);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9A091' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 11px;
	padding-right: 2.6rem;
}

.jex-field__hint {
	font-size: var(--jex-step--1);
	color: var(--jex-text-faint);
	margin-top: var(--jex-space-3xs);
}

/* Kryssrutor och radioknappar med tumvänlig träffyta */
.jex-check {
	display: flex;
	align-items: flex-start;
	gap: var(--jex-space-2xs);
	font-size: var(--jex-step--1);
	color: var(--jex-text-dim);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	min-height: 44px;
}

.jex-check input {
	width: 18px;
	height: 18px;
	margin-top: 0.3rem;
	accent-color: var(--jex-accent);
	flex-shrink: 0;
}

/* ============================================================== AVISERING */

.jex-notice {
	padding: var(--jex-space-s) var(--jex-space-m);
	border-left: 2px solid var(--jex-accent);
	background: var(--jex-bg-raised);
	font-size: var(--jex-step--1);
	margin-bottom: var(--jex-space-m);
}

.jex-notice--error { border-left-color: var(--jex-error); }
.jex-notice--ok    { border-left-color: var(--jex-ok); }

/* ============================================================ OVERLAY */

.jex-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--jex-z-overlay);
	background: rgba(10, 9, 7, 0.68);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--jex-fast), visibility var(--jex-fast);
}

.jex-overlay.is-open { opacity: 1; visibility: visible; }

/* ============================================= MJUK INTONING VID SCROLL */

/* Block tonar in när de rullas in i bild. Hålls avsiktligt subtilt —
   16px förskjutning, inget mer. Stängs av helt för den som bett om
   mindre rörelse (se base.css). */
.jex-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms var(--jex-ease), transform 700ms var(--jex-ease);
}

.jex-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Utan JavaScript ska allt synas ändå. */
.no-js .jex-reveal { opacity: 1; transform: none; }

/* ============================================================= PAGINERING */

.jex-pagination {
	display: flex;
	justify-content: center;
	gap: var(--jex-space-2xs);
	margin-top: var(--jex-space-xl);
}

.jex-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--jex-line);
	font-size: var(--jex-step--1);
	letter-spacing: 0.1em;
	color: var(--jex-text-dim);
}

.jex-pagination .page-numbers:hover {
	border-color: var(--jex-accent);
	color: var(--jex-accent);
}

.jex-pagination .page-numbers.current {
	background: var(--jex-accent);
	border-color: var(--jex-accent);
	color: var(--jex-text-plate);
}