/* =========================================================
   ROCK & BLUES CAFÉ ZARAGOZA
   CONTACTO
   Mobile-first
========================================================= */


/* =========================================================
   CABECERA
========================================================= */

.rb-contact-header {

    max-width:
        820px;

    margin:
        0
        auto
        44px;

    text-align:
        center;

}


.rb-contact-kicker {

    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        var(--rb-red);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.6px;

}


.rb-contact-header .rb-page-title,
.rb-contact-header .rb-page-subtitle {

    text-align:
        center;

}


.rb-contact-header .rb-page-subtitle {

    justify-content:
        center;

    margin-left:
        auto;

    margin-right:
        auto;

}


.rb-contact-intro {

    max-width:
        690px;

    margin:
        0
        auto;

    color:
        #c6c6c6;

    font-size:
        15px;

    line-height:
        1.7;

}


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

.rb-contact-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        14px;

    margin-bottom:
        48px;

}


/* =========================================================
   TARJETAS
========================================================= */

.rb-contact-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        100%;

    padding:
        18px;

    background:
        #111;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius:
        14px;

}


.rb-contact-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        16px;

    color:
        #fff;

    background:
        var(--rb-red);

    border-radius:
        50%;

    font-size:
        15px;

}


.rb-contact-card-kicker {

    display:
        inline-block;

    margin-bottom:
        4px;

    color:
        var(--rb-red);

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

}


.rb-contact-card h2 {

    margin:
        0;

    color:
        #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        30px;

    line-height:
        1;

    font-weight:
        900;

    text-transform:
        uppercase;

}


.rb-contact-card > p {

    margin:
        11px
        0
        0;

    color:
        #aaa;

    font-size:
        12px;

    line-height:
        1.6;

}


.rb-contact-card-data {

    display:
        grid;

    gap:
        5px;

    margin-top:
        17px;

}


.rb-contact-card-data a,
.rb-contact-card-data span {

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.45;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

}


.rb-contact-card-data a:hover {

    color:
        var(--rb-red-light);

}


/* =========================================================
   BOTONES
========================================================= */

.rb-contact-card-actions {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        8px;

    margin-top:
        auto;

    padding-top:
        20px;

}


.rb-contact-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        48px;

    padding:
        0
        15px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;

    text-decoration:
        none;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;

}


.rb-contact-button--primary {

    color:
        #fff;

    background:
        var(--rb-red);

    border-color:
        var(--rb-red);

}


.rb-contact-button--primary:hover {

    color:
        #fff;

    background:
        var(--rb-red-light);

    border-color:
        var(--rb-red-light);

}


.rb-contact-button--secondary {

    color:
        #fff;

    background:
        #080808;

    border-color:
        rgba(255,255,255,.12);

}


.rb-contact-button--secondary:hover {

    color:
        #fff;

    background:
        #0c0c0c;

    border-color:
        rgba(255,255,255,.28);

}


/* =========================================================
   UBICACIÓN
========================================================= */

.rb-contact-location {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        14px;

    align-items:
        center;

    padding:
        18px;

    background:
        #111;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius:
        14px;

}


.rb-contact-location-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    color:
        #fff;

    background:
        var(--rb-red);

    border-radius:
        50%;

    font-size:
        17px;

}


.rb-contact-location-content > span {

    display:
        inline-block;

    margin-bottom:
        3px;

    color:
        var(--rb-red);

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

}


.rb-contact-location-content h2 {

    margin:
        0;

    color:
        #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        28px;

    line-height:
        1;

    font-weight:
        900;

    text-transform:
        uppercase;

}


.rb-contact-location-content p {

    margin:
        7px
        0
        0;

    color:
        #aaa;

    font-size:
        11px;

    line-height:
        1.5;

}


.rb-contact-location-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        48px;

    padding:
        0
        16px;

    color:
        #fff;

    background:
        #080808;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;

    text-decoration:
        none;

}


.rb-contact-location-link:hover {

    color:
        #fff;

    background:
        #0c0c0c;

    border-color:
        rgba(255,255,255,.28);

}


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

@media (min-width: 620px) {

    .rb-contact-grid {

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

    }


    .rb-contact-card-actions {

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

    }


    .rb-contact-card-actions > :only-child {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 820px) {

    .rb-contact-header {

        margin-bottom:
            52px;

    }


    .rb-contact-intro {

        font-size:
            16px;

    }


    .rb-contact-grid {

        gap:
            16px;

        margin-bottom:
            58px;

    }


    .rb-contact-card {

        padding:
            22px;

        border-radius:
            16px;

    }


    .rb-contact-location {

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

        gap:
            18px;

        padding:
            22px;

        border-radius:
            16px;

    }


    .rb-contact-location-link {

        min-width:
            230px;

    }

}