/* De linkerkant van het registratiescherm: waarom bedrijven voor Jimani kiezen. (17-09-2026)

   Gevraagd door Martijn, 17-09-2026, bij een ontwerp: "Bij registeren wil ik de layout aan de
   linkerant zo hebben als in de afbeelding, alleen dit is nederlands en dit moet natuurlijk per land
   en taal kloppen, kun je dit precies zo namaken?"

   Daarom staat hier geen tekst en geen vlag: alles wat een bezoeker leest komt uit de vertalingen.
   Wat hier staat is alleen vorm. De kleuren zijn die van de rest van het platform.

   Het blok schaalt mee: op een smal scherm staat de kolom er helemaal niet (Bootstrap regelt dat),
   op een breed scherm staan de kaarten twee naast elkaar. */

.reglinks {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(20, 30, 60, .08);
    height: 100%;
}

.reglinks-logo {
    height: 34px;
    margin-bottom: 26px;
}

/* Het beeld staat rechtsboven; de tekst loopt er links van en gaat daaronder over de volle breedte
   verder. Gevraagd door Martijn, 17-09-2026: "wil je het plaatje naar rehcts boven zetten en de teksten
   Waarom bedrijven kiezen voor Jimani tot en met or ondernemers zoals jij. op volledige breedte". */
.reglinks-boven {
    display: block;
}

.reglinks-boven::after {
    content: "";
    display: block;
    clear: both;
}

.reglinks h2 {
    font-size: 2.1rem;
    line-height: 1.15;
    font-weight: 800;
    color: #101828;
    margin: 0 0 12px;
}

.reglinks-sub {
    font-size: 1.05rem;
    font-weight: 700;
    color: #101828;
    margin: 0 0 12px;
}

.reglinks-uitleg {
    color: #475467;
    margin: 0;
}

.reglinks-beeld {
    float: right;
    width: 38%;
    max-width: 320px;
    height: auto;
    margin: 0 0 16px 28px;
}

.reglinks-cijfers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0 16px;
}

.reglinks-cijfer {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    padding: 18px;
}

.reglinks-cijfer i {
    font-size: 22px;
    color: #f37120;
    background: #fdece1;
    border-radius: 12px;
    padding: 12px;
}

.reglinks-cijfer strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    color: #101828;
    line-height: 1;
}

.reglinks-cijfer span {
    color: #475467;
    font-size: .95rem;
}

.reglinks-punten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.reglinks-punt {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 16px;
}

.reglinks-punt i {
    color: #12b76a;
    background: #e6f7ef;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    font-size: 15px;
}

.reglinks-punt strong {
    display: block;
    color: #101828;
    font-weight: 700;
    line-height: 1.25;
}

.reglinks-punt span {
    color: #475467;
    font-size: .92rem;
}

.reglinks-voet {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-top: 28px;
}

/* De handgeschreven regel uit het ontwerp. Er wordt geen lettertype bijgeladen: dat kost tijd bij het
   openen van de pagina en het is maar een zin. Cursief met een streep eronder komt in de buurt. */
.reglinks-schrijf {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;

    /* Past zich aan de breedte aan en breekt nooit af: op een smal paneel wordt hij kleiner in plaats
       van twee regels. Gevraagd door Martijn, 17-09-2026: "zet Meer tijd voor wat echt telt op 1 regel
       (mag niet afbreken, dus maak kleiner.)". */
    font-size: clamp(.8rem, 1.3vw, 1.25rem);
    white-space: nowrap;
    color: #101828;
    border-bottom: 3px solid #f37120;
    padding-bottom: 6px;
}

.reglinks-vertrouwen {
    color: #475467;

    /* Ook deze op een regel, met het hartje erachter. (Martijn, 17-09-2026.) */
    font-size: clamp(.68rem, .9vw, .92rem);
    white-space: nowrap;
    text-align: right;
}

.reglinks-vertrouwen i {
    color: #f37120;
    margin-left: 6px;
}

@media (max-width: 1200px) {
    .reglinks { padding: 28px; }
    .reglinks h2 { font-size: 1.7rem; }
    .reglinks-boven { flex-direction: column; }
    .reglinks-beeld { max-width: 100%; flex-basis: auto; }
    .reglinks-cijfers, .reglinks-punten { grid-template-columns: 1fr; }
    .reglinks-voet { flex-direction: column; align-items: flex-start; }
    .reglinks-vertrouwen { text-align: left; }
}