.news-home h3 > a {
	color: #82bf5a;
}
.news-home .news-home__article--main {
	float: none;
	width: auto;
	padding: 0;
}
.news-home .news-home__articles_small {
	border-bottom: 0;
	background: white;
}
	.news-home .news-home__articles_small .news-home__article {
		min-height: 0;
	}
	.news-home .news-home__articles_small .news-home__article--small {
		padding: 5px 20px;
	}
.news-home  .read-all-news {
	background: white;
	padding: 6px 15px 6px 15px;
}
.news-home .news-home__all {
	float: none;
}
.facebook-plugin {
	background: white;
	clear: both;
}
.facebook-plugin-inner{
	padding: 25px;
}
.facebook-plugin-inner * {
	width: 100% !important;
}


.news-home__wrapper {
	clear: both;
}

.contact-list {

}
    .contact-list li {
        margin-bottom: 1rem;
    }

a.maps-link {
    color: #82bf5a;
    text-decoration: underline;
}

.u-bg-white {
	background-color: #fff;
}

.u-mb-40 {
	margin-bottom: 40px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header__subnav > li {
        margin-left: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header__subnav {
        padding-left: 0;
    }

    .header__subnav > li {
      margin-left: 10px;
    }
}

@media (max-width: 768px) {
	.news-home .col-sm-5 h2 {
		margin-top: 20px;
	}
	.facebook-plugin-inner{
		padding: 20px 10px;
	}
}

/* ── Flicker-slider (detail page photo carousel) ── */
.flicker-slider {
    position: relative;
    height: 520px;
    overflow: hidden;
}
.flicker-slider .vw-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.flicker-slider .vw-slide--active {
    opacity: 1;
}
.flicker-slider .dot-navigation {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flicker-slider .dot-navigation .dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
@media (max-width: 767px) {
    .flicker-slider { height: 300px; }
}

/* old-site scroll-in elements start hidden until activated */
.interactive--slideleft,
.interactive--slideright,
.interactive--slidedown,
.interactive--slideup {
    opacity: 0;
}
.interactive--active {
    opacity: 1;
}

/* ── Case carousel ── */
.carousel {
    position: relative;
    overflow: hidden;
}
.carousel__track {
    display: flex;
    transition: transform 0.4s ease;
}
.carousel__slide {
    min-width: 100%;
    flex-shrink: 0;
    padding: 40px 0 75px;
}
.carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-bottom: 20px;
}
.carousel__prev,
.carousel__next,
.carousel__pause {
    background: none;
    border: 2px solid #82be5a;
    color: #82be5a;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.carousel__prev:hover,
.carousel__next:hover,
.carousel__pause:hover {
    background: #82be5a;
    color: #fff;
}
.carousel__prev:disabled,
.carousel__next:disabled {
    opacity: 0.35;
    cursor: default;
}
/* ‖ and ▶ are heavier than the ‹ › chevrons at the same size, and ▶ has no room
   left of centre for the optical offset a triangle wants. */
.carousel__pause {
    font-size: 16px;
}
.carousel__pause[aria-pressed="true"] {
    font-size: 14px;
    padding-left: 3px;
}
.carousel__counter {
    font-size: 13px;
    color: #666;
    min-width: 40px;
    text-align: center;
}


/* ── Quicky dropdown: reachable without a mouse ───────────────────────────
   The legacy rule opens the panel on `:hover` only, which leaves its links
   display:none — so no keyboard visitor can reach the six offerte pages, and a
   touch visitor gets a tap that follows the tile link and nothing else.

   Focusing the tile is the keyboard equivalent of pointing at it, and
   :focus-within on the wrapper says exactly that. Because the tile <a> sits
   inside the wrapper, tabbing to it opens the panel, which makes the links
   themselves focusable — so the whole panel is walkable with Tab, and closes
   again as focus leaves. No script, and no ARIA that would promise a widget
   this is not. */
.quicky__dropdown-wrap:focus-within .quicky__dropdown {
	display: block;
}

.quicky__dropdown-wrap:focus-within .quicky__link {
	border-color: #aaa;
}

/* ── Home hero: the old homepage's own geometry, not the detail hero's ────
   home.cshtml reuses .imageheader, but the old homepage hero was a separate
   component (.flicker-slider--home + .flick-content). Measured against live at
   1440: a 1170 container centred in the viewport, the text left-aligned in a
   540px column starting 30px inside it, vertically centred in a 600px band,
   h1 48px, intro 18px, CTA 21px. The detail hero instead centres an 800px box
   against the bottom edge and, at ≥1439px, scales all of its text by 1.1em —
   which is why the homepage heading read 52.8px and the intro 21px.

   Scoped to the modifier so every other .imageheader keeps its own behaviour. */
.imageheader--home {
	/* Cancels the ≥1439px `.imageheader{font-size:1.1em}` bump. The old homepage
	   hero inherited the 16px body size at every width. */
	font-size: 16px;
}

/* The detail hero darkens only its bottom 60% with a gradient, because its text sits
   against the bottom edge. This text is vertically centred, so it needs the old
   homepage's flat 50% black over the whole photo — otherwise the heading lands on
   whatever the photo happens to be doing there. */
.imageheader--home::after {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	min-height: 0;
}

.imageheader--home .imageheader__inner {
	left: 50%;
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 1170px;
	margin-left: 0;
	/* 30px = the container's 15px gutter plus the column's own 15px, collapsed. */
	padding: 0 30px;
	text-align: left;
}

.imageheader--home .imageheader__col {
	max-width: 540px;
}

.imageheader--home .imageheader__heading {
	margin: 0;
}

.imageheader--home .imageheader__text {
	font-size: 1.125em;
	margin: 25px 0 0;
}

.imageheader--home .btn {
	margin-top: 25px;
}

@media (max-width: 767px) {
	/* One column, so the text takes the width it has; 540px would leave it in a
	   narrow ribbon down the middle of the photo. */
	.imageheader--home .imageheader__col {
		max-width: none;
	}

	.imageheader--home .imageheader__inner {
		padding: 0 15px;
	}
}

/* Below 681px vw-components.css turns the shared .imageheader into a stacked
   header — photo on top, dark text under it — which is right for a pillar or
   detail page and wrong here: the old homepage slider overlays white text on the
   photo at every width. Worse, that block only moves .imageheader__inner back
   into flow; the translate(-50%,-50%) above still applied, so the text was pulled
   half its own height off the top of the section and clipped, in dark grey, over
   the photo. Measured at 360: h1 at y=-148 against live's y=40.

   Reproduce live's mobile hero instead: the inner in flow so its content sets the
   height (live measures 467px at 360 and bottoms out near 405 as the text rewraps),
   the photo covering behind it, white type throughout. */
@media (max-width: 680px) {
	.imageheader--home {
		min-height: 405px;
	}

	.imageheader--home .imageheader__inner {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		transform: none;
		/* 22px is live's own text inset at this width. */
		padding: 40px 22px;
	}

	.imageheader--home .imageheader__inner,
	.imageheader--home .imageheader__text,
	.imageheader--home .imageheader__heading {
		color: #fff;
	}

	/* .btn, not .btn--default: the stacked-header block darkens every button in an
	   .imageheader because its text sits on white there. The homepage CTA is the
	   green .btn--primary pill and keeps its white label, as on live. */
	.imageheader--home .btn {
		color: #fff;
		border-color: #fff;
	}
}

/* ── Infographic film ─────────────────────────────────────────────────────
   The old site's .infographic--video wrapped a fixed 640×360 <video> in a
   full-width band. This is the same block rebuilt: the film sits in the reading
   column like the captioned photo beside it, and scales instead of being pinned
   to one size. .component--photo__sub supplies the caption column width, so the
   text under a film lines up with the text under a photo. */
.component--video {
	margin: 40px 0;
}

.component--video__player {
	display: block;
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 0 auto;
	background: #000;
}

.component--video__sub {
	max-width: 700px;
	margin: 15px auto 0;
	font-size: 14px;
	color: #786e65;
}

.component--video__heading {
	max-width: 700px;
	margin: 0 auto 15px;
}

/* ── Round card thumbnails ────────────────────────────────────────────────
   The old site's .block__thumb--round drops the fixed 200px height of a normal
   thumb and relies on the image to size the box. That worked because the old
   markup's <img> carried no width/height attributes; ResponsiveImageTagHelper
   emits them deliberately, to reserve the box against layout shift. With
   .block__thumb img setting only width:100%, the attribute height then wins and
   a 600×600 source in a 270px column renders 270 wide by 600 tall — a tall
   ellipse instead of a circle. That is what the two bands at the foot of /afval
   looked like.

   aspect-ratio makes the box square before the image decodes, so the circle is
   round at every column width and nothing shifts. object-fit:cover then keeps a
   source that is not perfectly square from stretching — it fills the circle and
   the edges are cropped, which is what a circular crop means anyway. */
.block__thumb--round {
	aspect-ratio: 1 / 1;
	height: auto;
}

.block__thumb--round img,
.block__thumb--round picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Square card thumbnails ───────────────────────────────────────────────
   The same bug as above, in the variant that kept its fixed height. A normal
   .block__thumb is a 200px band with overflow:hidden, and .block__thumb img
   sets only width:100% — so the tag helper's height attribute survives as a
   presentational hint and an 800×600 crop in a 270px column draws 270 wide by
   600 tall. Stretched to nearly 3×, then the band shows the middle of it.
   That is the skew on the /afval/containers cards.

   height:100% + object-fit:cover fills the band and crops instead, which is
   what a fixed-height thumbnail meant all along. height:auto would honour the
   ratio too, but it letterboxes between 1200 and 1399, where the container is
   1140, a col-lg-3 is ~255px and 4:3 falls ~9px short of the 200px box.

   --round is excluded because it sizes itself (above); --small (170px) and
   --full are covered — both are the same band with a different height. */
.block__thumb:not(.block__thumb--round) img {
	height: 100%;
	object-fit: cover;
}

/* ── Infographic circles ─────────────────────────────────────────────────
   Two rules the rebuilt `infographicCirclesBlock` needs, both undoing an
   assumption in vw-components.css rather than styling anything new.

   1. The circles are painted at scale(0.8) and grow to 1 when the old
      site's script adds .interactive--active on scroll. This site.js does
      not set that class, so without this every circle would sit at 80% of
      its box forever — a component that looks subtly wrong with nothing in
      the markup to explain it. Settled at full size rather than adding
      another scroll-driven animation, which would need a
      prefers-reduced-motion escape of its own.

   2. `@media (max-width: 767px) { .infographic { display: none } }` hides
      the whole component on phones, because live shipped a second
      `visible-xs` copy of every row to take over there. One responsive row
      here instead, so the band has to survive below 767: the fixed height
      and the vertical centring both go, and the steps stack.

   The green arrow between the steps (a :after with a fontello glyph) is
   dropped in the stacked layout — it points sideways at a step that is now
   underneath.

   height:auto is the third, and it is the same trap .block__thumb hit
   below: the circle is sized `width: 90%` and nothing sets a height, so
   the tag helper's height attribute survives as a presentational hint.
   A 300×300 crop in a 285px column then draws 257 wide by 300 tall, and
   border-radius:50% turns that into an ellipse rather than a circle. */
.infographic--circles__circle {
	transform: none;
	height: auto;
}

@media screen and (max-width: 767px) {
	.infographic--circles {
		display: block;
		height: auto;
	}

	.infographic--circles > div {
		position: static;
		top: auto;
		transform: none;
		float: none;
		width: 100%;
		margin-bottom: 2em;
	}

	.infographic--circles > div:last-child {
		margin-bottom: 0;
	}

	/* The three-circle "triad" step positions its circles absolutely inside a
	   height:100% box. Once the band stops being 600px tall that resolves to
	   nothing, the circles leave the flow entirely and land on top of the step
	   above — the column measured 30px high, its caption at y 3124 and its
	   images at y 2769. A square box gives the percentages something to be a
	   percentage of: circles are 35% wide and the lowest sits at top:44%, so
	   44% + 35% = 79% of the width, which fits.

	   Written as `> div.…` rather than `.…` on purpose: the rule above is
	   `.infographic--circles > div`, two classes, so a bare
	   `.infographic--circles--triad` loses to its `position: static` and the
	   circles start resolving against the page instead of their own column —
	   which put them 358px above the box they belong to. */
	.infographic--circles > div.infographic--circles--triad {
		position: relative;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.infographic--circles > div:after {
		display: none;
	}
}