/* main style.css */

/* visit out linked in page button styling start */

.ldw-company-link {
    text-align: right;
    margin: 0;
    margin-bottom: 30px;
}


.ldw-company-link .ldw-company-btn {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #FFF;
    background-color: transparent;
    background-image: linear-gradient(45deg, #1F729F 10%, #045199 100%);
    border-radius: 50px;
    padding: 10px 22px;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.ldw-company-link .ldw-company-btn:hover,
.ldw-company-link .ldw-company-btn:focus {
    color: #FFF;
    opacity: 0.85;
    text-decoration: none;
}
/* --- Add these rules to your existing style.css ---
   (or drop this file's contents at the bottom of it)

   They cover:
   1. Sensible no-JS fallback: before masonry.js runs, posts just
      stack full-width in order — no broken layout, no horizontal
      scroll, no CSS column-count leftovers.
   2. Sizing for the iframe cards once JS has built the column divs.
*/

.ldw-linkedin-wall {
    width: 100%;
}

.ldw-linkedin-post {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px; /* fallback spacing before JS takes over */
}

.ldw-linkedin-post iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Once masonry.js runs it sets inline flex styles on .ldw-linkedin-wall
   and creates .ldw-linkedin-wall-column children — the margin-bottom
   fallback above is redundant then (columns use `gap`), which is fine,
   it just adds a touch of extra spacing that still looks fine. */
.ldw-linkedin-wall-column {
    min-width: 0;
}