/* =====================================================================
   BP 20 COMPONENTS
   Best Placed Kit v4.2

   Fluent Snippet:  BP 20 Components  Type: CSS, front end      Priority: 3

   The whole of the kit's bespoke styling for the native sections.
   There is no colour, font or measure in this file. Those live in
   Elementor. What is here is the handful of RELATIONSHIPS the panel has
   no control for.

     bp-span-2 / bp-row-2   a grid item that takes two columns or rows
     bp-media + bp-fill     a photograph that fills its box, cropped not squashed
     bp-lift                a card that rises slightly on hover
     bp-more                on a Text Editor: long text folds to six lines on
                            phones with a Read more link. Needs BP 30 Rails JS.
                            Set --bp-more-lines on the widget for a different fold.
     bp-cols-2              on an Icon List: two columns from tablet up, one on phones.
                            Pair it with bp-more and a long list folds on phones too.
===================================================================== */

/* ---- text ---- */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }

/* ---- grid spans ---- */
.e-con.bp-span-2 { grid-column: span 2; }
.e-con.bp-row-2  { grid-row: span 2; }
@media (max-width: 767px) {
    .e-con.bp-span-2 { grid-column: auto; }
    .e-con.bp-row-2  { grid-row: auto; }
}

/* ---- photograph fills its box. Set the box height with Min Height in the panel ---- */
.e-con.bp-media { --position: relative; }
.e-con.bp-media > .elementor-widget.bp-fill,
.e-con.bp-media > .e-con-inner > .elementor-widget.bp-fill { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; }
.e-con.bp-media .bp-fill .elementor-widget-container,
.e-con.bp-media .bp-fill a { display: block; height: 100%; }
.e-con.bp-media .bp-fill img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* ---- card lift ---- */
.e-con.bp-lift { transition: transform .25s ease, box-shadow .25s ease; }
.e-con.bp-lift:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow); }
@media (prefers-reduced-motion: reduce) {
    .e-con.bp-lift { transition: none; }
    .e-con.bp-lift:hover { transform: none; }
}

/* ---- read more: phones only. The script adds is-clamped when the text is long enough to be worth folding ---- */
@media (max-width: 767px) {
    .elementor-widget.bp-more.is-clamped:not(.is-open) {
        max-height: 9.6em; max-height: calc(var(--bp-more-lines, 6) * 1lh); overflow: hidden;
        -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent);
    }
}
/* Three classes on purpose, as in BP 30 Rails: Site Settings > Buttons styles every <button>.
   Brand green from the globals; the script adds on-dark where the text is light, for the lighter green. */
.bp-more-btn.bp-more-btn.bp-more-btn,
.bp-more-btn.bp-more-btn.bp-more-btn:hover,
.bp-more-btn.bp-more-btn.bp-more-btn:focus {
    align-self: flex-start; width: auto; min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: none;
    color: var(--brand-accent-solid);
}
.bp-more-btn.bp-more-btn.bp-more-btn:hover { color: var(--brand-accent-solid-hover); }
.bp-more-btn.bp-more-btn.bp-more-btn.on-dark,
.bp-more-btn.bp-more-btn.bp-more-btn.on-dark:hover { color: var(--brand-accent); }
.bp-more-btn.bp-more-btn.bp-more-btn:focus:not(:focus-visible) { outline: 0; }
.bp-more-btn.bp-more-btn[hidden] { display: none; }

/* ---- icon list in two columns from tablet up ---- */
@media (min-width: 768px) {
    .elementor-widget.bp-cols-2 .elementor-icon-list-items { column-count: 2; column-gap: var(--gap-l); }
    .elementor-widget.bp-cols-2 .elementor-icon-list-item { break-inside: avoid; }
}