/* ==========================================================
   BRIDGE NEWS
   VERSION 1.0
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body.bridge-news{

    background:#f0f2f5;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

    color:#222;

    line-height:1.6;

    min-height:100vh;

}

/* ========================= */

.bridge-container{

    width:100%;

    max-width:520px;

    margin:0 auto;

    padding:20px 15px 40px;

}

/* ========================= */

.bridge-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

    position:relative;

}

/* ========================= */

.bridge-image{

    position:relative;

    overflow:hidden;

}

.bridge-image img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

/* ========================= */

.bridge-content{

    padding:22px;

    position:relative;

}

.bridge-content h1{

    font-size:24px;

    line-height:1.35;

    font-weight:700;

    margin-bottom:15px;

    color:#1d2129;

}

/* ========================= */

.bridge-content p{

    position:relative;

    font-size:16px;

    color:#666;

    line-height:1.7;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    max-height:82px;

    padding-bottom:55px;

}

/* ========================= */

.bridge-content p::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:65px;

    background:

    linear-gradient(

    rgba(255,255,255,0),

    rgba(255,255,255,.95),

    #fff

    );

}

/* ========================= */

.bridge-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:54px;

    border-radius:16px;

    background:#ffffff;

    color:#1877F2;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    letter-spacing:.3px;

    border:1px solid #d9dde5;

    box-shadow:

        0 4px 12px rgba(0,0,0,.08);

    transition:

        transform .2s ease,

        box-shadow .2s ease,

        background .2s ease,

        color .2s ease;

}

/* ========================= */

.bridge-button:hover{

    background:#1877F2;

    color:#ffffff;

    box-shadow:

        0 10px 25px rgba(24,119,242,.30);

    transform:translateY(-2px);

}
/* ========================= */

@media(max-width:480px){

.bridge-container{

padding:15px 10px 30px;

}

.bridge-content{

padding:18px;

}

.bridge-content h1{

font-size:21px;

}

.bridge-button{

left:18px;

right:18px;

bottom:18px;

}

}

/* ==========================================================
   TITLE
========================================================== */

.bridge-title{

    margin-bottom:16px;

}

.bridge-title h1{

    word-break:break-word;

    overflow-wrap:break-word;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.bridge-description{

    position:relative;

    min-height:120px;

}

.bridge-description p{

    margin:0;

}

/* ==========================================================
   ACTION
========================================================== */

.bridge-action{

    position:absolute;

    left:22px;

    right:22px;

    bottom:22px;

    z-index:20;

}

/* ==========================================================
   BUTTON
========================================================== */

.bridge-button{

    cursor:pointer;

    user-select:none;

    -webkit-user-select:none;

    -webkit-tap-highlight-color:transparent;

}

.bridge-button:active{

    transform:scale(.98);

}

.bridge-button:active{

    transform:scale(.97);

}

.bridge-button:focus{

    outline:none;

}

.bridge-button::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:16px;

    pointer-events:none;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .bridge-container{

        max-width:100%;

        padding:12px;

    }

    .bridge-card{

        border-radius:18px;

    }

    .bridge-content{

        padding:18px;

    }

    .bridge-title h1{

        font-size:22px;

        line-height:1.45;

    }

    .bridge-description{

        min-height:110px;

    }

    .bridge-description p{

        font-size:15px;

        line-height:1.7;

    }

    .bridge-action{

        left:18px;

        right:18px;

        bottom:18px;

    }

    .bridge-button{

        height:52px;

        font-size:16px;

        border-radius:14px;

    }

}

@media (max-width:480px){

    body.bridge-news{

        background:#f2f2f2;

    }

    .bridge-container{

        padding:10px;

    }

    .bridge-card{

        border-radius:16px;

    }

    .bridge-content{

        padding:16px;

    }

    .bridge-title h1{

        font-size:20px;

    }

    .bridge-description{

        min-height:105px;

    }

    .bridge-description p{

        font-size:15px;

    }

    .bridge-action{

        left:16px;

        right:16px;

        bottom:16px;

    }

    .bridge-button{

        height:50px;

        font-size:16px;

    }

}

/* ==========================================================
   IMAGE
========================================================== */

.bridge-image{

    background:#ececec;

}

.bridge-image img{

    vertical-align:middle;

    border:0;

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================================
   TITLE
========================================================== */

.bridge-title h1{

    text-wrap:balance;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.bridge-description p{

    word-break:break-word;

    overflow-wrap:break-word;

}