/*
 * Tuottolaskuri Core – Rahoituslaskuri ajoneuvoille. Builds on the shared calculator styles and the Sähköauton
 * kannattavuuslaskuri styles (tlc-sahkoauto.css, tlc-sahkoauto-osto.css); only the differences are here.
 */
/* ---------------- Hero: approved photo (silver car right, lake left) ---------------- */
/* The photo fills the whole hero; a light veil on the left keeps the title readable; the car stays at the right.
 * object-fit: cover keeps the aspect ratio (never stretched). */
.tlc-ajo .tlc-ajo-hero { min-height: 300px; justify-content: center; }
/* 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 set padding-bottom: 0 and 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-ajo .tlc-ajo-hero, .tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero { justify-content: center; padding-top: clamp(1.75rem, 4.2vw, 3rem); padding-bottom: clamp(1.75rem, 4.2vw, 3rem); }
	.tlc-ajo .tlc-ajo-hero .tlc-ir-hero__content { flex: 0 0 auto; top: var(--tlc-rahoitus-hero-shift, 0px); }
	.tlc-ajo .tlc-ajo-hero .tlc-ir-hero__content > .tlc-title { margin-top: 0; }
}
.tlc-ajo .tlc-ajo-hero .tlc-hero__img,
.tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero .tlc-hero__img { width: 100%; height: 100%; opacity: 1; object-fit: cover; object-position: 72% 86%; -webkit-mask-image: none; mask-image: none; }
.tlc-ajo .tlc-ajo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(246, 249, 253, .94) 0%, rgba(246, 249, 253, .88) 34%, rgba(246, 249, 253, .55) 50%, rgba(246, 249, 253, 0) 64%);
	pointer-events: none;
}
.tlc-ajo .tlc-ajo-hero .tlc-hero__content { z-index: 2; max-width: 600px; }
.tlc-ajo .tlc-ajo-hero .tlc-subtitle { color: #1e3a5f; }
/* Only a thin fade into the page at the bottom, so the car is not covered. */
.tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero::after { height: 10%; z-index: 1; }
/* rc.1 finishing: the EV stylesheet (shared root class tlc-ev) set a 16 % bottom fade here, which together with the
 * crop hid the lower part of the car. The fade is now 6 % and the crop shows the whole car including the wheels. */
.tlc-root.tlc-ajo.tlc-ev.tlc-layout-full-hero > .tlc-ajo-hero::after { height: 6%; }
@container tlc (min-width: 1600px) {
	.tlc-ajo .tlc-ajo-hero, .tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero { min-height: 340px; }
	.tlc-ajo .tlc-ajo-hero .tlc-hero__img, .tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero .tlc-hero__img { object-position: 70% 81%; }
}
/* Tablet: the text takes more width; the photo shifts so the car stays clear of it. */
@container tlc (min-width: 641px) and (max-width: 899px) {
	.tlc-ajo .tlc-ajo-hero { min-height: 280px; }
	.tlc-ajo .tlc-ajo-hero .tlc-hero__img, .tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero .tlc-hero__img { object-position: 84% 90%; }
	.tlc-ajo .tlc-ajo-hero::before { background: linear-gradient(90deg, rgba(246, 249, 253, .95) 0%, rgba(246, 249, 253, .9) 46%, rgba(246, 249, 253, .5) 62%, rgba(246, 249, 253, 0) 74%); }
	.tlc-ajo .tlc-ajo-hero .tlc-hero__content { max-width: 58%; }
}
/* Mobile: text at the top on a light veil, the car visible below it at the bottom right. */
@container tlc (max-width: 640px) {
	.tlc-ajo .tlc-ajo-hero { min-height: 0; justify-content: flex-start; padding-bottom: 150px; }
	.tlc-ajo .tlc-ajo-hero .tlc-hero__img, .tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero .tlc-hero__img { width: 100%; height: 100%; opacity: 1; object-position: 84% 100%; -webkit-mask-image: none; mask-image: none; }
	.tlc-ajo .tlc-ajo-hero::before { background: linear-gradient(180deg, rgba(246, 249, 253, .95) 0%, rgba(246, 249, 253, .9) 52%, rgba(246, 249, 253, .35) 70%, rgba(246, 249, 253, 0) 82%); }
	.tlc-ajo.tlc-layout-full-hero > .tlc-ajo-hero::after, .tlc-root.tlc-ajo.tlc-ev.tlc-layout-full-hero > .tlc-ajo-hero::after { height: 5%; }
}

/* Two finance modes side by side from 640 px. */
@container tlc (min-width: 640px) {
	.tlc-ajo .tlc-ajo-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tlc-ajo .tlc-ajo-main { display: grid; gap: var(--tlc-gap, 1.25rem); }
.tlc-ajo .tlc-ajo-panel[hidden], .tlc-ajo [data-tlv-vat][hidden], .tlc-ajo [data-tlv-cmp][hidden], .tlc-ajo [data-tlv-neg][hidden], .tlc-ajo [data-tlv-vatgroup][hidden] { display: none; }
.tlc-ajo .tlc-ajo-panel { display: grid; gap: var(--tlc-gap, 1.25rem); min-width: 0; }
.tlc-ajo .tlc-ajo-vat { min-width: 0; }
/* Comparison */
.tlc-ajo .tlc-ajo-compare__result { min-width: 0; display: grid; gap: .75rem; align-content: start; }
.tlc-ajo .tlc-ajo-verdict { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #e9f7f3; color: #0e5c50; font-weight: 700; }
.tlc-ajo .tlc-ajo-verdict:empty { display: none; }
.tlc-ajo .tlc-ajo-compare .tlc-ev-table td, .tlc-ajo .tlc-ajo-compare .tlc-ev-table th { white-space: normal; }
.tlc-ajo .tlc-ajo-compare tr.is-total th, .tlc-ajo .tlc-ajo-compare tr.is-total td { font-weight: 800; }
.tlc-ajo .tlc-evc-ranknote ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.tlc-ajo .tlc-ajo-results.is-stale .tlc-evb-highlight, .tlc-ajo .tlc-ajo-results.is-stale .tlc-evb-kpis, .tlc-ajo .tlc-ajo-results.is-stale section { opacity: .45; }
/* Grid children may shrink, so wide tables scroll inside their own wrapper (no page-level horizontal scroll). */
.tlc-ajo .tlc-ajo-panel > *, .tlc-ajo .tlc-ajo-main > *, .tlc-ajo .tlc-ajo-compare .tlc-evc-sharedgrid > * { min-width: 0; }
.tlc-ajo .tlc-table-wrap { max-width: 100%; overflow-x: auto; }

/* ---------------- Vehicle type cards (desktop/tablet) and select (mobile) ---------------- */
.tlc-ajo .tlc-ajo-vcards__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .35rem; }
.tlc-ajo .tlc-ajo-vcard { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-height: 92px; padding: .7rem .5rem; border: 1.5px solid var(--tlc-border, #d7e2f0); border-radius: 14px; background: #fff; color: var(--tlc-navy, #17365d); font: inherit; font-size: .875rem; font-weight: 700; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.tlc-ajo .tlc-ajo-vcard:hover { border-color: #9cbde9; }
.tlc-ajo .tlc-ajo-vcard[aria-checked="true"] { border-color: var(--tlc-primary, #1769dd); background: #eef5fe; box-shadow: 0 0 0 1px var(--tlc-primary, #1769dd) inset; }
.tlc-ajo .tlc-ajo-vcard:focus-visible { outline: 3px solid var(--tlc-primary, #1769dd); outline-offset: 2px; }
.tlc-ajo .tlc-ajo-vcard__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eef4fc; color: var(--tlc-primary, #1769dd); }
.tlc-ajo .tlc-ajo-vcard[aria-checked="true"] .tlc-ajo-vcard__icon { background: #dbe9fb; }
.tlc-ajo .tlc-ajo-vselect { display: none; }
@container tlc (max-width: 640px) {
	.tlc-ajo .tlc-ajo-vcards { display: none; }
	.tlc-ajo .tlc-ajo-vselect { display: block; }
}
.tlc-ajo .tlc-ajo-vehicle__grid { margin-bottom: .5rem; }
.tlc-ajo .tlc-ajo-vatgroup { margin-top: .75rem; }

/* ---------------- Collapsible sections with a summary and an error badge ---------------- */
.tlc-ajo .tlc-ajo-section { margin-top: .75rem; }
.tlc-ajo .tlc-ajo-section .tlc-collapse__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.tlc-ajo .tlc-ajo-section__icon { display: inline-flex; color: var(--tlc-primary, #1769dd); }
.tlc-ajo .tlc-ajo-section__sum { font-weight: 500; color: var(--tlc-muted-strong, #52627a); font-size: .875rem; }
.tlc-ajo .tlc-ajo-badge { margin-left: auto; margin-right: .5rem; padding: .1rem .55rem; border-radius: 999px; background: #fdecea; color: #a12b1f; font-size: .75rem; font-weight: 800; }
.tlc-ajo .tlc-ajo-badge[hidden] { display: none; }
.tlc-ajo .tlc-ajo-section .tlc-ev-advanced__panel { padding-top: .75rem; }

/* ---------------- Compact result line (narrow screens) ---------------- */
.tlc-ajo .tlc-ajo-mini { display: none; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 12px; background: #eef5fe; border: 1px solid #cfe0f6; color: var(--tlc-navy, #17365d); text-decoration: none; }
.tlc-ajo .tlc-ajo-mini__label { font-size: .8438rem; font-weight: 700; color: var(--tlc-muted-strong, #52627a); }
.tlc-ajo .tlc-ajo-mini__value { font-size: 1.15rem; }
.tlc-ajo .tlc-ajo-mini__go { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .8438rem; font-weight: 700; color: var(--tlc-primary, #1769dd); }
@container tlc (max-width: 899px) {
	.tlc-ajo .tlc-ajo-mini { display: flex; }
}
.tlc-ajo .tlc-ev-errors__list .tlc-link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
/* Mobile: the two finance modes as compact side-by-side cards (as in the approved mockup). */
@container tlc (max-width: 640px) {
	.tlc-ajo .tlc-ajo-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
	.tlc-ajo .tlc-ajo-modes__grid .tlc-ev-mode { flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .7rem .5rem; }
	.tlc-ajo .tlc-ajo-modes__grid .tlc-ev-mode__desc { display: none; }
	.tlc-ajo .tlc-ajo-modes__grid .tlc-ev-mode__title { font-size: .9063rem; }
}

/* rc.4: with the title block higher, the introduction would run over the dark trees on narrower screens; the text
 * column is kept left of them (desktop 980–1199 px: 46 %, tablet: 50 %). */
@container tlc (min-width: 980px) and (max-width: 1199px) {
	.tlc-ajo .tlc-ajo-hero .tlc-hero__content { max-width: 46%; }
}
@container tlc (min-width: 641px) and (max-width: 979px) {
	.tlc-ajo .tlc-ajo-hero .tlc-hero__content { max-width: 50%; }
}
/* rc.5: with the title block centred vertically, the boxed (non-full-hero) hero at 1200–1599 px would put the
 * introduction over the guard rail and trees; the same 46 % column keeps the contrast. Full-hero is unchanged. */
@container tlc (min-width: 1200px) and (max-width: 1599px) {
	.tlc-ajo:not(.tlc-layout-full-hero) .tlc-ajo-hero .tlc-hero__content { max-width: 46%; }
}