/* =====================================================
   ORELI BRANCHES
   HỆ THỐNG CHI NHÁNH
===================================================== */

.oreliBranches,
.oreliBranches * {
    box-sizing: border-box;
}

.oreliBranches {
    --branch-accent: #a41478;
    --branch-text: #171d2a;
    --branch-muted: #747b88;

    background: #f4f5f7;

    padding: 54px 0 38px;

    width: 100%;

    overflow: hidden;
}


/* =====================================================
   CONTAINER
===================================================== */

.oreliBranches__inner {
    width: calc(100% - var(--oreli-home-gutter) * 2);
    max-width: var(--oreli-home-width);
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   HEADER
===================================================== */

.oreliBranches__header {
    display: grid;

    grid-template-columns: 1.35fr 1fr auto;

    align-items: center;

    gap: 36px;

    margin-bottom: 28px;
}


/* EYEBROW */

.oreliBranches__eyebrow {
    display: block;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1.5;

    color: #858b96;

    margin-bottom: 10px;
}


/* HEADING */

.oreliBranches__heading h2 {
    margin: 0;

    font-size: clamp(30px, 3vw, 42px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1.1px;

    color: var(--branch-text);
}


/* INTRO */

.oreliBranches__intro {
    align-self: center;
}

.oreliBranches__intro p {
    margin: 0;

    max-width: 390px;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;

    color: var(--branch-muted);
}


/* MORE LINK */

.oreliBranches__more {
    align-self: center;

    white-space: nowrap;
}

.oreliBranches__more a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 600;

    color: var(--branch-accent);

    text-decoration: underline;

    text-underline-offset: 4px;

    transition: opacity .25s ease;
}

.oreliBranches__more a span {
    font-size: 20px;

    line-height: 1;

    text-decoration: none;

    transition: transform .25s ease;
}

.oreliBranches__more a:hover {
    opacity: .75;
}

.oreliBranches__more a:hover span {
    transform: translateX(4px);
}


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

.oreliBranches__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;
}


/* =====================================================
   BRANCH CARD
===================================================== */

.oreliBranch {
    min-width: 0;

    background: #fff;

    border: 1px solid #e9ebef;

    border-radius: 11px;

    overflow: hidden;

    box-shadow: 0 4px 14px rgba(20, 30, 50, .025);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.oreliBranch:hover {
    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(20, 30, 50, .08);
}


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

.oreliBranch__image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #e7eaf0;

    text-decoration: none;
}

.oreliBranch__photo {
    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    object-position: center;

    margin: 0 !important;

    transition: transform .5s ease;
}

.oreliBranch:hover .oreliBranch__photo {
    transform: scale(1.035);
}


/* =====================================================
   FEATURED TAG
===================================================== */

.oreliBranch__tag {
    position: absolute;

    left: 14px;

    bottom: 12px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 13px;

    border-radius: 30px;

    background: var(--branch-accent);

    color: #fff;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    box-shadow: 0 3px 10px rgba(80, 0, 60, .15);
}


/* =====================================================
   CARD BODY
===================================================== */

.oreliBranch__body {
    padding: 16px 20px 14px;
}


/* NAME */

.oreliBranch__name {
    margin: 0 0 8px !important;

    font-size: 20px !important;

    line-height: 1.25 !important;

    font-weight: 700 !important;

    letter-spacing: -.35px;

    color: var(--branch-text) !important;
}


/* =====================================================
   ADDRESS
===================================================== */

.oreliBranch__address {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    min-width: 0;

    margin-bottom: 12px;
}

.oreliBranch__address svg {
    flex-shrink: 0;

    margin-top: 1px;

    color: var(--branch-accent);
}

.oreliBranch__address p {
    margin: 0;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 400;

    color: #646b77;
}


/* =====================================================
   CARD FOOTER
===================================================== */

.oreliBranch__footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding-top: 11px;

    border-top: 1px solid #f0f1f4;
}


/* PHONE */

.oreliBranch__phone {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 500;

    color: var(--branch-text);

    text-decoration: none;

    white-space: nowrap;
}

.oreliBranch__phone svg {
    flex-shrink: 0;

    color: var(--branch-accent);
}


/* MAP */

.oreliBranch__map {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

    color: var(--branch-accent);

    text-decoration: none;

    white-space: nowrap;
}

.oreliBranch__map span {
    font-size: 17px;

    transition: transform .25s ease;
}

.oreliBranch__map:hover span {
    transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .oreliBranches__inner {
        width: calc(100% - 48px);
    }

    .oreliBranches__header {
        grid-template-columns: 1.2fr 1fr;

        gap: 24px;
    }

    .oreliBranches__more {
        grid-column: 2;

        justify-self: start;

        margin-top: -12px;
    }

    .oreliBranches__heading h2 {
        font-size: 32px;
    }

    .oreliBranches__grid {
        gap: 14px;
    }

    .oreliBranch__body {
        padding: 14px 13px 12px;
    }

    .oreliBranch__name {
        font-size: 17px !important;
    }

}


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

@media (max-width: 767px) {

    .oreliBranches {
        padding: 40px 0 42px;
    }

    .oreliBranches__inner {
        width: calc(100% - 36px);
    }


    /* HEADER */

    .oreliBranches__header {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-bottom: 22px;
    }

    .oreliBranches__eyebrow {
        font-size: 10px;

        letter-spacing: 1.7px;

        margin-bottom: 8px;
    }

    .oreliBranches__heading h2 {
        font-size: clamp(27px, 7vw, 34px);

        line-height: 1.1;

        letter-spacing: -.7px;
    }

    .oreliBranches__intro p {
        font-size: 13px;

        line-height: 1.55;

        max-width: 100%;
    }

    .oreliBranches__more {
        grid-column: auto;

        margin-top: 0;
    }

    .oreliBranches__more a {
        font-size: 12px;
    }


    /* GRID */

    .oreliBranches__grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    /* IMAGE */

    .oreliBranch__image {
        aspect-ratio: 4/ 3;
    }


    /* BODY */

    .oreliBranch__body {
        padding: 14px 15px 13px;
    }

    .oreliBranch__name {
        font-size: 18px !important;

        margin-bottom: 8px !important;
    }

    .oreliBranch__address p {
        font-size: 12px;
    }

    .oreliBranch__footer {
        padding-top: 10px;
    }

    .oreliBranch__phone,
    .oreliBranch__map {
        font-size: 11px;
    }

}


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

@media (max-width: 380px) {

    .oreliBranches__inner {
        width: calc(100% - 28px);
    }

    .oreliBranch__body {
        padding: 13px 12px;
    }

    .oreliBranch__phone,
    .oreliBranch__map {
        font-size: 10px;

        gap: 5px;
    }

}