/* ============================================================
   בטיחות (/safety/) -- template `safety`, React in js/react/safety.
   The page reuses the groups page's markup and social_events.css;
   these rules only add what the safety page needs on top.
   ============================================================ */

/* ---------- banner: the loyalty landing's hero height (/surf_and_save/,
   .lyl-lp__hero in loyalty-landing.css) -- 320px on phones, 38% of the width
   in between, 520px at most -- with the photo/video cropped to fill it,
   instead of the photo's own proportions. ---------- */

body .body_page#social_events.safety_page section#banner {
    height: clamp(320px, 38vw, 520px);
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

body .body_page#social_events.safety_page section#banner > img,
body .body_page#social_events.safety_page section#banner > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------- intro: an optional photo beside the text (urbnsurf.com/safety) ---------- */

body .body_page#social_events.safety_page section#info .content p + p {
    margin-top: 14px;
}

body .body_page#social_events.safety_page section#info.sf-info--image .box_big > .wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body .body_page#social_events.safety_page section#info.sf-info--image .data {
    text-align: start;
}

body .body_page#social_events.safety_page .sf-info__image {
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 9 / 8;
}

body .body_page#social_events.safety_page .sf-info__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- cards: video and placeholder in the image box ---------- */

body .body_page#social_events.safety_page section#events .box_event .image {
    position: relative;
    overflow: hidden;
    background: #cdeaea;
}

body .body_page#social_events.safety_page section#events .box_event .image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .body_page#social_events.safety_page section#events .box_event .image.sf-image--empty {
    background: linear-gradient(180deg, #e6f5f5 0%, #cdeaea 100%);
}

body .body_page#social_events.safety_page .sf-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #9fd3d6;
    opacity: 0.7;
}

body .body_page#social_events.safety_page .sf-placeholder__back {
    fill: #7fc2c7;
    opacity: 0.6;
}

/* the button sits at the bottom, so buttons line up across the row */
body .body_page#social_events.safety_page section#events .box_event .data {
    flex: 1 1 auto;
}

body .body_page#social_events.safety_page section#events .box_event .btn_blue {
    margin-top: auto;
    align-self: center;
    /* .btn_blue is 41px high with 20px padding all round; set the padding
       explicitly so the label stays centred and a long one can wrap */
    height: auto;
    min-height: 44px;
    padding: 10px 28px;
    text-align: center;
}

body .body_page#social_events.safety_page section#events .box_event .data .desc + .read-more-toggle + .btn_blue,
body .body_page#social_events.safety_page section#events .box_event .data .title + .btn_blue {
    margin-top: 20px;
}

/* ---------- desktop ---------- */

@media (min-width: 768px) {
    /* the whole text shows on desktop -- the groups page clamps it to three
       lines there, with no way to open it */
    body .body_page#social_events.safety_page section#events .wrap_events .box_event .data .desc,
    body .body_page#social_events.safety_page section#events .wrap_events .box_event .data .desc.line-clamp-3 {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    body .body_page#social_events.safety_page section#events .box_event .data .desc + .read-more-toggle + .btn_blue {
        margin-top: auto;
    }

    body .body_page#social_events.safety_page section#events .box_event .data .desc {
        margin-bottom: 20px;
    }

    body .body_page#social_events.safety_page section#events .wrap_events.sf-cards--n1 .box_event,
    body .body_page#social_events.safety_page section#events .wrap_events.sf-cards--n2 .box_event {
        width: calc((100% - 80px) / 3);
    }

    body .body_page#social_events.safety_page section#info.sf-info--image .box_big > .wrapper {
        flex-direction: row;
        align-items: center;
        gap: 60px;
    }

    body .body_page#social_events.safety_page section#info.sf-info--image .sf-info__image {
        flex: 0 0 45%;
    }

    body .body_page#social_events.safety_page section#info.sf-info--image .data {
        flex: 1 1 auto;
    }
}