/* ==============================================
   VISUAL BREAK SECTION
   ============================================== */
.visual-break {
  padding: var(--section-spacing-desktop) 0;
}
.visual-break-wrapper {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}
/* The picture is sized by the copy beside it, not by its own proportions.
   height: 100% on a flex child of an auto-height row is indeterminate, so the image fell
   back to its natural aspect: a square photograph in a half-width column stood 600px tall
   next to two paragraphs, leaving the row half empty. Taking it out of flow means the row
   is measured from the text alone and the column stretches to match, with a floor so a
   short paragraph still gets a real photograph rather than a strip. */
.visual-break-image-col {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
}
.visual-break-image-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.visual-break-image-col img[src*="/Slice-1.svg"] {
  object-fit: contain;
}
.visual-break-content p {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}
.visual-break-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.visual-break-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--text);
}
.visual-break-feature i {
  color: var(--brand-orange);
  font-size: 0.9rem;
}
.visual-break-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  .visual-break-ctas .btn {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .visual-break-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Stacked, there is no text column to take the height from, so the picture keeps a
       shape of its own rather than the desktop floor. */
  .visual-break-image-col {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 768px) {
  .visual-break {
    padding: var(--section-spacing-mobile) 0;
  }
}
/* ==============================================
   VISUAL BREAK — modifiers
   The Twig emits these variants; the static design only ever rendered one arrangement,
   so the modifier rules live here.
   ============================================== */
/* Image on the right: swap the columns without touching source order, so the reading
   order stays image-then-text for assistive technology. */
.visual-break--right .visual-break-wrapper .visual-break-image-col {
  order: 2;
}
.visual-break--right .visual-break-wrapper .visual-break-content {
  order: 1;
}
/* Alternating runs need breathing room between them, not the full section gap. */
.visual-break + .visual-break {
  padding-top: 0;
}
/* No image: the prose takes the full measure rather than leaving half the row blank. */
.visual-break--no-image .visual-break-wrapper {
  grid-template-columns: 1fr;
}
.visual-break--no-image .visual-break-wrapper .visual-break-content {
  max-width: 80ch;
}
.visual-break--green {
  background: var(--dark-soft);
}
.visual-break--green .visual-break-content h2,
.visual-break--green .visual-break-content h3,
.visual-break--green .visual-break-content h4 {
  color: var(--white);
}
.visual-break--green .visual-break-content p,
.visual-break--green .visual-break-content li {
  color: rgba(255, 255, 255, 0.85);
}
/* Migrated prose arrives as core blocks, so style WordPress's classes here too. */
.visual-break-content {
  /* Size by position: the block's heading level follows the page outline, so a card
       title can be an h2 on one page and an h3 on another and must look the same. */
  /* And anything under it is a sub-heading, whatever tag it carries. Migrated copy keeps
       the level the page outline needs, so a section and its sub-sections can arrive as two
       h2s — and did, on 34 blocks — which set the two at the same size and left the reader
       nothing to tell them apart by. The tell is position: a heading with a heading already
       above it belongs to the copy, not to the block. */
  /* The check mark on a list is in utilities.less: this block and the generic section
       both had a copy, and the two had already drifted to different glyphs. */
  /* The design ends these sections with a coloured link and an arrow, not a solid
       pill — a pill here competes with the page's real calls to action. */
  /* The design only styled h3 here, because its one hand-built instance used an h3.
       Migrated content carries whatever level the page outline requires, so size by
       position rather than by tag: the first heading leads the block, the rest are subs. */
}
.visual-break-content > :is(h2, h3, h4, h5, h6) {
  font-size: var(--font-size-h2);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}
.visual-break-content > :is(h2, h3, h4, h5, h6) ~ :is(h2, h3, h4, h5, h6) {
  font-size: var(--font-size-h3);
  line-height: 1.3;
  margin-top: 28px;
}
.visual-break-content .wp-block-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
}
.visual-break-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--brand-orange);
  font-weight: 600;
  font-size: var(--font-size-body);
  text-decoration: none;
}
.visual-break-content .wp-block-button__link::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8em;
  transition: transform var(--transition);
}
.visual-break-content .wp-block-button__link:hover {
  color: var(--brand-orange-dark);
}
.visual-break-content .wp-block-button__link:hover::after {
  transform: translateX(4px);
}
.visual-break-content .wp-block-heading {
  margin-bottom: 16px;
}
.visual-break-content .wp-block-buttons {
  margin-top: 24px;
}
.visual-break-content .eyebrow {
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 12px;
}
/* Feature list: sub-heading and text beside an icon, as the design's about-intro shows.
   Overrides the flat single-line treatment the static design used here. */
.visual-break-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.visual-break-feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  /* Top alignment is for a heading with a paragraph under it: the icon sits against the
       first line, not against the middle of a block of copy. A feature with nothing but a
       heading is a list item, and a list item lines up with its bullet. */
}
.visual-break-feature > div > :is(h2, h3, h4, h5, h6) {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.35;
}
.visual-break-feature p {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: 1.7;
  color: var(--text-soft);
}
.visual-break-feature:not(:has(p)) {
  align-items: center;
}
.visual-break-feature:not(:has(p)) > div > :is(h2, h3, h4, h5, h6) {
  margin-bottom: 0;
}
.visual-break-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-orange-tint);
  color: var(--brand-orange);
  font-size: 1rem;
}
/* Centre the copy against a tall image. The design's single instance happened to have
   text and image of similar height; migrated sections vary a lot. */
.visual-break-content {
  align-self: center;
}
/* Short checklist, as the design's moving+cleaning section. Distinct from .features,
   which pairs a sub-heading with a paragraph.

   One column, as the design sets it. Two fitted the four one-word items on the front page
   and nothing else: this list sits in half the page's width, so a row that runs to a
   phrase — "Byggmaterial in på bygget — fönster, dörrar, tegel, takpannor" — wraps inside
   its own column and stops reading as a single item. */
.visual-break-content .checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.visual-break-content .checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--text);
}
.visual-break-content .checklist-item i {
  color: var(--brand-orange);
  font-size: 1em;
  flex-shrink: 0;
}
/*# sourceMappingURL=style.css.map */
/*# sourceMappingURL=data:application/json;charset=utf8;base64,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 */