/**
 * Fichier  : /ott/library/assets/sections/css/blocks.css
 * Fonction : style des rangées de type 'blocs'
 */


/* ==================================================
   GRID
================================================== */

#library .blocks {
    width: 100%;
}

#library .blocks {
    display: grid;
    gap: clamp(14px, 1.4vw, 22px);
}


/* ==================================================
   ITEM
================================================== */

#library .blocks .item {
    position: relative;
    overflow: hidden;
}

#library .blocks .item {
    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
}

#library .blocks .item {
    box-shadow:
        0 14px 38px rgba(0,0,0,.28);
}

#library .blocks .item {
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

#library .blocks .item:hover {
    transform: translateY(-3px);
}

#library .blocks .item:hover {
    border-color: rgba(255,120,0,.24);
}

#library .blocks .item:hover {
    box-shadow:
        0 18px 46px rgba(0,0,0,.38),
        0 0 28px rgba(255,120,0,.10);
}


/* ==================================================
   LINK
================================================== */

#library .blocks .item > a {
    position: relative;
}

#library .blocks .item > a {
    width: 100%;
    height: 100%;
}

#library .blocks .item > a {
    display: block;
}

#library .blocks .item > a {
    color: inherit;
    text-decoration: none;
}


/* ==================================================
   BACKGROUND
================================================== */

#library .blocks .background {
    position: absolute;
    inset: 0;
}

#library .blocks .background img {
    width: 100%;
    height: 100%;
}

#library .blocks .background img {
    object-fit: cover;
    object-position: center;
}

#library .blocks .background img {
    transition:
        transform .7s ease,
        filter .35s ease;
}

#library .blocks .item:hover img {
    transform: scale(1.04);
    filter: brightness(1.05);
}


/* ==================================================
   INNER
================================================== */

#library .blocks .inner {
    position: relative;
    z-index: 2;
}

#library .blocks .inner {
    width: 100%;
    height: 100%;
}

#library .blocks .inner {
    display: flex;
    align-items: var(--text-position-vertical);
    justify-content: var(--text-position-horizontal);
}

#library .blocks .inner {
    text-align: var(--text-align);
}

#library .blocks .inner {
    background: var(--overlay);
}

#library .blocks .inner > div {
    max-width: min(520px, 92%);
}

#library .blocks .inner > div {
    padding: var(--text-padding);
}


/* ==================================================
   TITLES
================================================== */

#library .blocks h5 {
    margin: 0;
}

#library .blocks h5 {
    font-family: 'title-font';
    font-size: var(--text-title-size);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.045em;
    color: #fff;
}

#library .blocks h5 {
    text-shadow:
        0 2px 20px rgba(0,0,0,.42);
}

#library .blocks p {
    margin: 10px 0 0 0;
}

#library .blocks p {
    font-family: 'content-font';
    font-size: var(--text-second-title-size);
    line-height: 1.45;
    color: rgba(255,255,255,.76);
}

#library .blocks p {
    text-shadow:
        0 2px 16px rgba(0,0,0,.36);
}


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

#library .blocks span {
    margin-top: 18px;
}

#library .blocks span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#library .blocks span {
    padding: 11px 16px;
}

#library .blocks span {
    background:
        linear-gradient(
            135deg,
            #8e0e00,
            #e9401b 60%,
            #ff7b00
        );

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
}

#library .blocks span {
    font-family: 'content-font';
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 768px) {

    #library .blocks {
        grid-template-columns: 1fr !important;
    }

    #library .blocks .inner {
        align-items: var(--text-position-vertical-mobile);
        justify-content: var(--text-position-horizontal-mobile);

        text-align: var(--text-align-mobile);

        background: var(--overlay-mobile);
    }

    #library .blocks .inner > div {
        padding: var(--text-padding-mobile);
    }

    #library .blocks h5 {
        font-size: var(--text-title-size-mobile);
    }

    #library .blocks p {
        font-size: var(--text-second-title-size-mobile);
    }

}