@import "../_common"

footer
    @include media(991)
        margin-bottom: 64px

    .rowA
        background: #666666
        padding: 10px var(--containerfluid)
        .container
            display: flex
            justify-content: space-between
            align-items: center
            .colA
                display: flex
                .col
                    display: flex
                    align-items: flex-start
                    gap: 16px
                    padding: 10px 0
                    &:not(:last-child)
                        border-right: 1px solid #FFFFFF4D
                        padding-right: 30px
                    &:not(:first-child)
                        padding-left: 30px
                    img
                        margin-top: 6px
                        flex-shrink: 0
                    .info
                        h6
                            font-size: 18px
                            color: $white
                            margin-bottom: 4px
                        a
                            font-size: 16px
                            color: $white
            .colB
                display: flex
                gap: 16px
                flex-shrink: 0

    .rowB
        padding: 50px var(--containerfluid)
        .container
            display: flex
            justify-content: space-between
            gap: 24px
            .col
                flex: 1 1 0
                min-width: 0
                h5
                    font-size: 18px
                    color: $black
                    margin-bottom: 16px

                
                ul
                    list-style: none
                    padding: 0
                    margin: 0
                    li
                        &:not(:last-child)
                            margin-bottom: 6px
                        a
                            font-size: 16px
                            color: $text
                            font-weight: 400
                            text-decoration: none
                            &:hover
                                color: $black
                        &:has(.icon)
                            display: flex
                            align-items: flex-start
                            gap: 6px
                            .icon
                                flex-shrink: 0
                                margin-top: 3px
                .social
                    display: flex
                    gap: 16px
                    margin-bottom: 20px
                    a
                        display: flex
                .btn-group
                    display: flex
                    flex-direction: column
                    gap: 12px
                    .btn
                        width: 100%
                    .btn-outline
                        width: 100%
                        border: 1px solid var(--black)
                        color: var(--black)
                        height: 38px
                        padding: 0 18px
                        border-radius: 4px
                        background: transparent
                        cursor: pointer
                        transition: all 0.3s ease
                        &:hover
                            background: var(--black)
                            color: var(--white)

    .rowC
        border-top: 1px solid var(--border)
        padding: 20px var(--containerfluid)
        .container
            display: flex
            justify-content: space-between
            align-items: center
            p
                font-size: 14px
                color: #9C9A9A
                margin: 0
                a
                    color: #9C9A9A
                    font-size: 14px
                    text-decoration: none
                .prettify_logo
                    vertical-align: middle
                    height: 21px


// ─── 1024px ──────────────────────────────────────────────────────────────────
@include media(1024)
    footer
        .rowB
            .container
                flex-wrap: wrap
                gap: 30px
                .col
                    &:nth-of-type(1)
                        flex: 0 0 100%
                    &:nth-of-type(2),
                    &:nth-of-type(3)
                        flex: 0 0 calc(50% - 15px)
                    &:nth-of-type(4)
                        flex: 0 0 100%
                    &:nth-of-type(5)
                        flex: 0 0 100%
                        .btn-group
                            flex-direction: row
                            .btn,
                            .btn-outline
                                width: auto


// ─── 768px ───────────────────────────────────────────────────────────────────
@include media(768)
    footer
        .rowA
            padding: 25px var(--containerfluid)
            .container
                flex-direction: column
                gap: 20px
                align-items: flex-start
                .colA
                    flex-direction: column
                    width: 100%
                    .col
                        width: 100%
                        &:not(:last-child)
                            border-right: none
                            border-bottom: 1px solid #FFFFFF4D
                            padding-right: 0
                            padding-bottom: 16px
                        &:not(:first-child)
                            padding-left: 0
                .colB
                    width: 100%
                    justify-content: flex-start

        .rowB
            padding: 40px var(--containerfluid)
            .container
                flex-wrap: wrap
                gap: 24px
                .col
                    &:nth-of-type(1)
                        flex: 0 0 100%
                    &:nth-of-type(2),
                    &:nth-of-type(3)
                        flex: 0 0 calc(50% - 12px)
                    &:nth-of-type(4),
                    &:nth-of-type(5)
                        flex: 0 0 100%
                    &:nth-of-type(5)
                        .btn-group
                            flex-direction: row
                            .btn,
                            .btn-outline
                                flex: 1 1 auto


// ─── 540px ───────────────────────────────────────────────────────────────────
@include media(540)
    footer
        .rowA
            .colB
                flex-direction: column
                gap: 10px
                .btn
                    width: 100%
                    text-align: center

        .rowB
            .container
                .col
                    &:nth-of-type(2),
                    &:nth-of-type(3),
                    &:nth-of-type(4),
                    &:nth-of-type(5)
                        flex: 0 0 100%
                    &:nth-of-type(5)
                        .btn-group
                            flex-direction: column
                            .btn,
                            .btn-outline
                                width: 100%

        .rowC
            .container
                flex-direction: column
                gap: 8px
                text-align: center