/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/


/* GROUP COMPONENTS / CONTACT MAP
=================================================== */
/* Notes...

	- 

*/
/* HTML Example...

    <header class="c-header-mask c-contact-map">
        <a href="https://www.google.rs/maps/place/Comtrade/@46.0628342,14.568441,16.6z/data=!4m5!3m4!1s0x47653216f84e4db5:0x8c39bbaec384412e!8m2!3d46.0634906!4d14.5660291?hl=en" class="c-contact-map__map"></a>
        <div class="c-contact-map__text">
            <h2>Get in Touch</h2>
            <p>
                Letaliska cesta 29b,<br/>
                1000 Ljubljana, Slovenia
            </p>
            <div>
                <div class="o-icon-with-text">
                    <?php include 'img/svg/phone.php'; ?>
                    <a href="tel://+380681605200" class="u-link-style-none">+38 (0) 6 81 60 5200</a>
                </div>
                <div class="o-icon-with-text">
                    <?php include 'img/svg/email.php'; ?>
                    <a href="mailto:gaming@comtrade.com" class="u-link-style-none">gaming@comtrade.com</a>
                </div>
            </div>
            <div>
                <div class="c-btn c-btn--2">
                    <a href="">Join Our Team</a>
                </div>
            </div>
        </div>
    </header>

*/
/* GROUP COMPONENTS / CONTACT MAP / LAYOUT
=================================================== */
.c-contact-map {
    display: grid;
    /* Prevent overflow on screens less than px value */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    min-height: 85vh;
}

.c-contact-map__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-m);
}

/* Custom */
@media (max-width: 999px) {
    .c-contact-map__map {
        min-height: 60vh;
    }
}
/* GROUP COMPONENTS / CONTACT MAP / SPACING
=================================================== */
.c-contact-map__text {
    padding: var(--spacing-l-4) var(--spacing-l);
}

.c-contact-map__text p {
    padding-block-end: var(--spacing-m);
}

.c-contact-map__text .c-btn {
    margin-block-end: 0;
}

.c-contact-map .o-icon-with-text {
    padding-block-end: var(--spacing-s);
}

.c-contact-map .o-icon-with-text:last-of-type {
    padding-block-end: var(--spacing-l);
}

.c-contact-map__text svg {
    --color1: white;
}

/* Custom */
@media (min-width: 1000px) {
    .c-contact-map__text {
        padding: var(--spacing-l-4);
        padding-block-start: calc(var(--header-height) + var(--spacing-l-4));
    }
}
/* GROUP COMPONENTS / CONTACT MAP / DECORATION
=================================================== */
.c-contact-map {
    background: var(--colour-black);
}

.c-contact-map__map {
    /* https://snazzymaps.com/style/111928/black */
    background-image: url("/img/contact/comtrade.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.c-contact-map__text {
    color: white;
}

.c-contact-map__text p {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
    font-weight: var(--font-family-main-weight-medium);
}

.c-contact-map__text .o-icon-with-text a {
    font-weight: var(--font-family-main-weight-normal);
    text-decoration: underline;
}

/* Custom */
@media (min-width: 1000px) {
    .c-contact-map__text :is(h2, h3) {
        font-size: var(--font-size-s);
        line-height: var(--font-size-s-line-height);
    }
}