/* "Vaata lisaks": image cards under the start page and every audience page. */
#toolbox-more { box-sizing: border-box; width: min(1240px, 100%); margin: 0 auto; padding: 0 28px 80px; color: #15354a; font-family: 'Nunito Sans', sans-serif; }
.tl-more, .tl-more *, .tl-more *::before, .tl-more *::after { box-sizing: border-box; }
.tl-more { margin-top: 64px; padding-top: 40px; border-top: 1px solid #d5e0e7; }
.tl-more .tl-section-title { margin: 0 0 20px; color: #17394b; font: 700 clamp(24px, 3vw, 30px)/1.2 'Fira Sans', sans-serif; }
.tl-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; margin: 0; padding: 0; list-style: none; }
.tl-panels > li { display: flex; min-width: 0; margin: 0; }
.tl-panel { display: flex; flex: 1; min-width: 0; overflow: hidden; border: 1px solid #d5e0e7; border-radius: 24px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
/* The photo fills its side and never sets the card height, whatever its shape. */
.tl-panel-media { position: relative; flex: 0 0 38%; min-height: 218px; background: #e8f3fa; }
.tl-panel-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-panel-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 22px 24px 18px; }
.tl-panel h3 { margin: 0 0 8px; color: #17394b; font: 700 21px/1.2 'Fira Sans', sans-serif; }
.tl-panel p { margin: 0 0 16px; color: #46606f; font-size: 15px; line-height: 1.5; }
.tl-panel .tl-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #e3eaef; color: #00557f; font-size: 15px; font-weight: 800; }
.tl-panel .tl-ring { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border: 1.5px solid #0878bd; border-radius: 50%; background: #fff; color: #0878bd; transition: background-color .2s ease, color .2s ease; }
.tl-panel .tl-ring svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.tl-panel:is(:hover, :focus-visible) { box-shadow: 0 14px 30px rgb(24 58 79 / 16%); transform: translateY(-2px); }
:is(#toolbox-landing, #toolbox-more) .tl-panel:is(:hover, :focus-visible, :active) .tl-ring { background: #0878bd; color: #fff; }
.tl-panel:focus-visible { outline: 3px solid #0878bd; outline-offset: 3px; }
@media (max-width: 960px) { .tl-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  #toolbox-more { padding: 0 16px 56px; }
  .tl-panel { flex-direction: column; }
  .tl-panel-media { flex: 0 0 auto; height: 170px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .tl-panel, .tl-panel * { transition: none; } .tl-panel:is(:hover, :focus-visible) { transform: none; } }
@media print { #toolbox-more { display: none; } }