/*
 * Tuottolaskuri Core – Rahoituslaskuri koneille. Builds on the shared calculator styles, the EV and the vehicle finance
 * styles (tlc-ajoneuvorahoitus.css); only the layout of the approved Rahoituslaskuri koneille mockup is here.
 */
/* ---------------- Hero: approved photo (blue tractor right, misty fields left) ---------------- */
/* Foreground: the photo at full height on the right (never cropped vertically or stretched), so the whole tractor
 * stays visible. Background (::after): the same photo (same file, no extra download) enlarged to 130 % width, so the
 * landscape continues behind the title; at that size its own tractor lies right of the point where the foreground
 * photo is already opaque, so only one tractor is seen. rc.5: the landscape layer is no longer masked out to the
 * right: its fade was set in % of the hero width while the foreground photo's left edge depends on the hero height,
 * so on wide screens a light band showed between them. Now the foreground fades in over a continuous landscape; on
 * very wide heroes the layer is enlarged a little more so its tractor never shows through the foreground's fade.
 * A light veil keeps the title readable; the title block is centred vertically. */
.tlc-akr .tlc-akr-hero,
.tlc-akr.tlc-layout-full-hero > .tlc-akr-hero { min-height: 340px; padding-bottom: clamp(1.25rem, 3vw, 2rem); justify-content: center; background: #eef3f9; isolation: isolate; }
/* rc.5: from tablet width up the title and introduction are centred vertically as one group (equal padding above
 * and below; the shared .tlc-ir hero pushed the title down with margin-top: auto). --tlc-rahoitus-hero-shift
 * (default 0px) moves the group down (+) or up (−) in both finance heroes. */
@container tlc (min-width: 641px) {
	.tlc-akr .tlc-akr-hero, .tlc-akr.tlc-layout-full-hero > .tlc-akr-hero { justify-content: center; padding-top: clamp(1.75rem, 4.2vw, 3rem); padding-bottom: clamp(1.75rem, 4.2vw, 3rem); }
	.tlc-akr .tlc-akr-hero .tlc-ir-hero__content { flex: 0 0 auto; top: var(--tlc-rahoitus-hero-shift, 0px); }
	.tlc-akr .tlc-akr-hero .tlc-ir-hero__content > .tlc-title { margin-top: 0; }
}
.tlc-akr .tlc-akr-hero .tlc-hero__img,
.tlc-akr.tlc-layout-full-hero > .tlc-akr-hero .tlc-hero__img { left: auto; right: 0; top: 0; width: auto; height: 100%; max-width: none; aspect-ratio: 1916 / 821; opacity: 1; object-fit: cover; object-position: 100% 50%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.tlc-akr .tlc-akr-hero::after,
.tlc-akr.tlc-layout-full-hero > .tlc-akr-hero::after,
.tlc-root.tlc-akr.tlc-ev.tlc-layout-full-hero > .tlc-akr-hero::after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; z-index: -1; pointer-events: none;
	background: url("../images/konerahoitus/sininen-traktori-usvainen-maantie.webp") 0% 58% / 130% auto no-repeat;
	background-size: max(130%, calc(196% - 1100px)) auto; /* rc.5: grows only on very wide heroes (> 1660 px) so its own tractor stays under the opaque foreground */
	-webkit-mask-image: none; mask-image: none; }
.tlc-akr .tlc-akr-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 90%, rgba(245, 248, 252, .55) 100%),
		linear-gradient(90deg, rgba(246, 249, 253, .66) 0%, rgba(246, 249, 253, .6) 36%, rgba(246, 249, 253, .34) 48%, rgba(246, 249, 253, 0) 58%); }
.tlc-akr .tlc-akr-hero .tlc-title { text-shadow: 0 1px 1px rgba(255, 255, 255, .55); }
.tlc-akr .tlc-akr-hero .tlc-subtitle { color: #1e3a5f; text-shadow: 0 1px 1px rgba(255, 255, 255, .6); }
.tlc-akr .tlc-akr-hero .tlc-hero__content { z-index: 2; max-width: 560px; }

/* Narrow desktop: the foreground photo covers more of the width; text column 46 %. */
@container tlc (min-width: 980px) and (max-width: 1399px) {
	.tlc-akr .tlc-akr-hero .tlc-hero__content { max-width: 46%; }
	.tlc-akr .tlc-akr-hero::before { background: linear-gradient(180deg, rgba(245, 248, 252, 0) 90%, rgba(245, 248, 252, .55) 100%), linear-gradient(90deg, rgba(246, 249, 253, .7) 0%, rgba(246, 249, 253, .58) 36%, rgba(246, 249, 253, .2) 48%, rgba(246, 249, 253, 0) 56%); }
}
/* Tablet: lower hero, text narrower so it stays left of the tractor. */
@container tlc (min-width: 641px) and (max-width: 979px) {
	.tlc-akr .tlc-akr-hero, .tlc-akr.tlc-layout-full-hero > .tlc-akr-hero { min-height: 300px; }
	.tlc-akr .tlc-akr-hero .tlc-hero__content { max-width: 46%; }
	.tlc-akr .tlc-akr-hero::before { background: linear-gradient(180deg, rgba(245, 248, 252, 0) 90%, rgba(245, 248, 252, .55) 100%), linear-gradient(90deg, rgba(246, 249, 253, .72) 0%, rgba(246, 249, 253, .6) 40%, rgba(246, 249, 253, .22) 50%, rgba(246, 249, 253, 0) 56%); }
}
/* Mobile: text at the top, the whole photo (tractor at the bottom right) below it. */
@container tlc (max-width: 640px) {
	.tlc-akr .tlc-akr-hero, .tlc-akr.tlc-layout-full-hero > .tlc-akr-hero { min-height: 0; justify-content: flex-start; padding-bottom: calc(100cqw / 2.335 - 1.5rem); }
	.tlc-akr .tlc-akr-hero .tlc-hero__img, .tlc-akr.tlc-layout-full-hero > .tlc-akr-hero .tlc-hero__img { top: auto; bottom: 0; right: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
	/* Mobile: the sky and sunrise of the photo behind the text (lightly veiled), the full photo below. */
	.tlc-akr .tlc-akr-hero::after, .tlc-akr.tlc-layout-full-hero > .tlc-akr-hero::after, .tlc-root.tlc-akr.tlc-ev.tlc-layout-full-hero > .tlc-akr-hero::after { height: auto; background-position: 0% 0%; background-size: 260% auto; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 70%); }
	.tlc-akr .tlc-akr-hero::before { display: block; background: linear-gradient(180deg, rgba(246, 249, 253, .74) 0%, rgba(246, 249, 253, .68) 42%, rgba(246, 249, 253, 0) 52%, rgba(245, 248, 252, 0) 94%, rgba(245, 248, 252, .45) 100%); }
	.tlc-akr .tlc-akr-hero .tlc-hero__content { max-width: none; }
}

/* Top area: modes and the form on the left, the estimated instalment and notes on the right (desktop). */
.tlc-akr .tlc-akr-top { display: grid; gap: var(--tlc-gap, 1.25rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.tlc-akr .tlc-akr-main { display: grid; gap: var(--tlc-gap, 1.25rem); min-width: 0; }
.tlc-akr .tlc-akr-aside { display: grid; gap: var(--tlc-gap, 1.25rem); min-width: 0; }
@container tlc (min-width: 980px) {
	.tlc-akr .tlc-akr-top { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
	.tlc-akr .tlc-akr-aside { position: sticky; top: 1rem; }
}
.tlc-akr .tlc-akr-modepart[hidden], .tlc-akr [data-tlv-show][hidden], .tlc-akr [data-tlv-results][hidden], .tlc-akr [data-tlv-cashmonth][hidden], .tlc-akr [data-tlv-vatbuyer][hidden] { display: none; }
.tlc-akr .tlc-akr-modepart { display: grid; gap: .75rem; min-width: 0; }
.tlc-akr .tlc-akr-form > * + * { margin-top: .75rem; }

/* Three finance modes */
.tlc-akr .tlc-akr-modes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@container tlc (max-width: 640px) {
	.tlc-akr .tlc-akr-modes__grid .tlc-ev-mode { flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .7rem .4rem; }
	.tlc-akr .tlc-akr-modes__grid .tlc-ev-mode__desc { display: none; }
	.tlc-akr .tlc-akr-modes__grid .tlc-ev-mode__title { font-size: .9063rem; }
}

/* Interval buttons */
.tlc-akr .tlc-akr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1.5px solid var(--tlc-border, #d7e2f0); border-radius: 12px; overflow: hidden; background: #fff; }
.tlc-akr .tlc-akr-seg__btn { min-height: 44px; border: 0; border-left: 1px solid var(--tlc-border, #d7e2f0); background: #fff; color: var(--tlc-navy, #17365d); font: inherit; font-weight: 700; cursor: pointer; }
.tlc-akr .tlc-akr-seg__btn:first-child { border-left: 0; }
.tlc-akr .tlc-akr-seg__btn[aria-checked="true"] { background: var(--tlc-primary, #1769dd); color: #fff; }
.tlc-akr .tlc-akr-seg__btn:focus-visible { outline: 3px solid var(--tlc-primary, #1769dd); outline-offset: -3px; }
.tlc-akr .tlc-akr-seg__select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tlc-akr [data-tlv-segfield] { position: relative; }

/* Estimated instalment and notes */
.tlc-akr .tlc-akr-summary p { margin: 0; }
.tlc-akr .tlc-akr-summary__label { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--tlc-navy, #17365d); }
.tlc-akr .tlc-akr-summary__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #eef4fc; color: var(--tlc-primary, #1769dd); }
.tlc-akr .tlc-akr-summary__value { margin: .6rem 0 .25rem !important; font-size: 2rem; font-weight: 800; color: var(--tlc-navy, #17365d); line-height: 1.15; overflow-wrap: anywhere; }
.tlc-akr .tlc-akr-summary__per { font-size: 1.1rem; font-weight: 700; color: var(--tlc-muted-strong, #52627a); }
.tlc-akr .tlc-akr-summary__sub { font-size: .8438rem; color: var(--tlc-muted-strong, #52627a); }
.tlc-akr .tlc-akr-summary__go { display: flex; justify-content: center; align-items: center; gap: .35rem; margin-top: .9rem; min-height: 46px; border-radius: 12px; background: var(--tlc-primary, #1769dd); color: #fff; font-weight: 800; text-decoration: none; }
.tlc-akr .tlc-akr-notes { background: #f2f7fe; }
.tlc-akr .tlc-akr-notes__title { margin: 0 0 .4rem; font-weight: 800; color: var(--tlc-navy, #17365d); }
.tlc-akr .tlc-akr-notes ul { margin: 0; padding-left: 1.1rem; font-size: .8438rem; color: #2a4365; }
.tlc-akr .tlc-akr-notes li + li { margin-top: .3rem; }

/* Results */
.tlc-akr .tlc-akr-results-wrap { display: grid; min-width: 0; }
.tlc-akr .tlc-akr-kpis .tlc-akr-kpi--main { border-color: var(--tlc-primary, #1769dd); background: #eef5fe; }
.tlc-akr .tlc-akr-chart__plot { background: #fff; border-radius: 10px; }
.tlc-akr .tlc-akr-chart__plot svg { display: block; width: 100%; height: auto; }
/* 3B chart: calm stacked bars – principal blue, interest warm orange, fees muted turquoise. */
.tlc-akr .tlc-akr-bar--p { fill: #2563eb; }
.tlc-akr .tlc-akr-bar--i { fill: #e88935; }
.tlc-akr .tlc-akr-bar--f { fill: #20a899; }
.tlc-akr .tlc-akr-grid { stroke: #e3eaf3; stroke-width: 1; }
.tlc-akr .tlc-akr-axis { font-size: 10px; fill: #5b6b82; }
.tlc-akr .tlc-akr-chart__note { margin: .35rem 0 0; font-size: .8125rem; color: var(--tlc-muted-strong, #52627a); }
.tlc-akr .tlc-akr-chart__note:empty { display: none; }
.tlc-akr .tlc-akr-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: 0; margin: .2rem 0 .5rem; list-style: none; font-size: .8125rem; }
.tlc-akr .tlc-akr-legend .tlc-legend__item::before { width: 12px; height: 12px; border-radius: 3px; }
.tlc-akr .tlc-akr-legend--p::before { background: #2563eb; }
.tlc-akr .tlc-akr-legend--i::before { background: #e88935; }
.tlc-akr .tlc-akr-legend--f::before { background: #20a899; }
.tlc-akr .tlc-akr-schedule .tlc-table-wrap, .tlc-akr .tlc-table-wrap { max-width: 100%; overflow-x: auto; }
.tlc-akr .tlc-akr-top > *, .tlc-akr .tlc-akr-results > * { min-width: 0; }
/* Mobile: the three-alternative comparison table fits the card without sideways scrolling. */
@container tlc (max-width: 640px) {
	.tlc-akr .tlc-akr-compare .tlc-ev-table { width: 100%; table-layout: fixed; font-size: .75rem; }
	.tlc-akr .tlc-akr-compare .tlc-ev-table th, .tlc-akr .tlc-akr-compare .tlc-ev-table td { padding: .45rem .2rem; white-space: normal; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
	.tlc-akr .tlc-akr-compare .tlc-ev-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
	.tlc-akr .tlc-akr-compare .tlc-ev-table th:first-child, .tlc-akr .tlc-akr-compare .tlc-ev-table td:first-child { width: 31%; text-align: left; }
}
/* Print report: chart legend (the report is rendered outside the calculator, so it uses report-level classes). */
@media print {
	.tlc-akrr .tlc-report__legend { display: flex; gap: 1rem; margin: .3rem 0 0; padding: 0; list-style: none; font-size: 9pt; }
	.tlc-akrr .tlc-akr-rlegend::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: .3rem; border-radius: 2px; background: var(--c); vertical-align: -1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.tlc-akrr .tlc-report__figure svg { width: 100%; height: auto; max-height: 62mm; }
}