/* Source embeds, extracted from index.html. Geometry/type remain in the original site.css. */
.xmej-main { display: contents; }
.arrow { -webkit-touch-callout: none; user-select: none; }
.items-holder { animation: moveSlideshow 40s linear infinite; }
@keyframes moveSlideshow { to { transform: translateX(-50%); } }
.custom-file-upload { display: inline-block; padding: 12px 25px; cursor: pointer; background: #444; color: #fff; margin-right: 10px; border: 1px solid #fff; font-family: var(--regular-font); letter-spacing: 2px; font-weight: 500; font-size: 14px; text-transform: uppercase; }
#file-status { font-style: italic; color: #fff; display: inline-block; margin-left: 8px; }
#file-list { list-style: none; padding: 10px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.file-pill { position: relative; padding: 8px 30px 8px 10px; border: 1px dashed #ccc; border-radius: 4px; font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; background: rgba(255,255,255,.1); }
.remove-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #fff; opacity: .7; transition: opacity .2s; }
.remove-btn:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .items-holder { animation: none; } }

/* Blog landing and posts: reuse the Webflow font variables and typography classes from site.css. */
.xmej-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.xmej-blog-body, .xmej-blog-list { padding: 80px 30px; }
.xmej-blog-body + .xmej-blog-list { padding-top: 0; }
.xmej-blog-intro { padding: 80px 30px 40px; }
.xmej-blog-intro + .xmej-blog-list { padding-top: 0; }
.xmej-blog-intro .xmej-blog-richtext { max-width: 720px; }
.xmej-blog-title { margin-top: 0; margin-bottom: 20px; }
.xmej-blog-list-heading { margin-top: 0; margin-bottom: 40px; }
.xmej-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.xmej-blog-grid-item { margin: 0; padding: 0; }
.xmej-blog-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #e4ebf3; border-radius: 4px; background-color: var(--white); color: var(--black); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.xmej-blog-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.xmej-blog-card-featured { border-color: var(--black); }
.xmej-blog-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--light-grey); }
.xmej-blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xmej-blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.xmej-blog-card-title { font-family: var(--heading-font); font-size: 28px; font-weight: 700; line-height: 120%; }
.xmej-blog-card-date, .xmej-blog-post-date { font-family: var(--regular-font); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--dark-grey); }
.xmej-blog-card-summary { font-family: var(--regular-font); font-size: 17px; line-height: 150%; color: #444; }
.xmej-blog-post .container { max-width: 800px; }
.xmej-blog-post-header { margin-bottom: 32px; }
.xmej-blog-post-media { margin: 0 0 40px; }
.xmej-blog-post-media img { display: block; width: 100%; height: auto; border-radius: 4px; }
.xmej-blog-richtext { font-family: var(--regular-font); font-size: 19px; line-height: 160%; }
.xmej-blog-richtext > * + * { margin-top: 1.2em; }
.xmej-blog-richtext h2, .xmej-blog-richtext h3, .xmej-blog-richtext h4 { font-family: var(--heading-font); font-weight: 700; line-height: 130%; margin-top: 1.8em; margin-bottom: 0; }
.xmej-blog-richtext h2 { font-size: 36px; }
.xmej-blog-richtext h3 { font-size: 28px; }
.xmej-blog-richtext h4 { font-size: 22px; }
.xmej-blog-richtext p, .xmej-blog-richtext ul, .xmej-blog-richtext ol { margin-bottom: 0; }
.xmej-blog-richtext ul, .xmej-blog-richtext ol { padding-left: 1.4em; }
.xmej-blog-richtext a, .xmej-blog-richtext a:visited { color: #333; text-decoration: underline; text-underline-offset: 0.15em; transition: color 0.2s ease; }
.xmej-blog-richtext a:hover, .xmej-blog-richtext a:focus-visible { color: #e73645; text-decoration: underline; }
.xmej-blog-richtext img { max-width: 100%; height: auto; }
.xmej-blog-richtext blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 4px solid var(--black); }
@media screen and (max-width: 991px) {
  .xmej-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .xmej-blog-body, .xmej-blog-list { padding: 60px 20px; }
  .xmej-blog-intro { padding: 60px 20px 30px; }
  .xmej-blog-intro + .xmej-blog-list { padding-top: 0; }
  .xmej-blog-card-title { font-size: 24px; }
  .xmej-blog-richtext h2 { font-size: 30px; }
}
@media screen and (max-width: 479px) {
  .xmej-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .xmej-blog-richtext { font-size: 17px; }
}

/* Front-page hero heading: 2 lines on desktop, 4 smaller lines on mobile (overrides the Webflow export in site.css). */
@media screen and (min-width: 992px) {
  /* The heading column is as wide as the heading (max-width below), the text takes the rest. */
  .grid-hero { grid-column-gap: 65px; grid-template-columns: auto minmax(10px, 10px) minmax(0, 1fr); }
  /* "KOMPLETT TEGNINGSUNDERLAG" and "FOR DIN ELEMENTPRODUKSJON" are each about 13.6em, "KOMPLETT TEGNINGSUNDERLAG FOR" about 16.5em, so 13.9em breaks before "FOR". The longest line is about 13.5em, and the negative margin trims the column to it, so the gap to the divider equals the gap on its other side. */
  .heading-hero { font-size: min(56px, calc((100vw - 150px) * 0.0386)); line-height: 120%; max-width: 13.9em; margin-right: -0.37em; }
  /* The original 24px at 1280px, scaling down with the heading; max-width keeps the text to about 4 lines. */
  /* Each sentence of the hero text starts a new line, whatever the visitor's system font. */
  .text.hero { font-size: max(16px, min(24px, calc((100vw - 150px) * 0.0212))); max-width: 22em; }
}
@media screen and (max-width: 991px) {
  .hero-sentence-break { display: none; }
}
@media screen and (max-width: 767px) {
  .grid-hero { grid-template-columns: minmax(0, 1fr); }
  /* max-width in em sits between the longest word (about 9.6em) and "TEGNINGSUNDERLAG FOR" (about 10.7em), so the heading wraps to 4 lines at every phone width. */
  .heading-hero { font-size: min(46px, calc((100vw - 40px) / 9.9)); line-height: 130%; max-width: 10.1em; }
}