/*
Theme Name: BBI Galaxy
Theme URI: https://bbigalaxy.com/
Author: BBI Marketing
Author URI: https://bbimarketing.com
Description: 
Version: 1.0
License: 
License URI: 
Tags: 
Text Domain: theme
*/


/* Styles below are imported for dev convenience. Compile & minify before deploying. */

/* -- Normalize -- */
@import 'css/normalize.css';

/* -- WordPress Core -- */
@import 'css/wordpress-core.css';

/* -- Typography -- */
@import 'css/typography.css';

/* -- Theme Colors & Global Styles -- */
@import 'css/theme.css';

/* -- Header & Nav Styles -- */
@import 'css/header-nav.css';

/* -- Template Styles */
@import 'css/template-hotel-marketing.css';

@import 'css/template-direct-mail.css';

@import 'css/template-social-media.css';

.program-template-template-custom-print {
    .section-2 {
        .background-red .container {
            margin-bottom: 0;
            text-align: center;
        }

        .columns {
            max-width: var(--narrow-content-max-width);
            text-align: center;

            h3 {
                font-size: var(--font-size-x-large)
            }
        }

        /* Abstract this later */
        h2.bars {
            align-items: center;
            display: grid;
            gap: 1rem;
            grid-template-columns: 1fr auto 1fr;
            max-width: var(--narrow-content-max-width);

            &::after,
            &::before {
                align-self: center;
                background: var(--white);
                content: '';
                height: 2px;
                width: 100%;
            }

            @media (min-width: 768px) {
                padding: 0 2rem;
            }
        }

        @media (min-width: 768px) {
            .columns > div {
                align-items: center;
                display: grid;
                gap: 1rem;
                grid-template-columns: auto 1fr;
                text-align: left;
            }
        }
    }

    .section-3 {
        text-align: center;

        .card {
            background: #fff;
            border: 2px solid var(--red);
            border-radius: var(--border-radius);
            margin-bottom: 1rem;

            .background-red {
                margin-top: 1.5rem;
                padding: 0 1rem 0 5rem;
                position: relative;

                h3 {
                    align-items: center;
                    display: grid;
                    font-size: var(--font-size-large);
                    margin: 0;
                    min-height: 2.6em; /* Double line height */
                    text-align: left;
                }

                .icon-bubble {
                    align-items: center;
                    background: var(--white);
                    border: 1px solid var(--black);
                    border-radius: 100%;
                    box-sizing: border-box;
                    display: flex;
                    height: 60px;
                    inset: 50% auto auto 0.5rem;
                    justify-content: center;
                    padding: 0.5rem;
                    position: absolute;
                    transform: translateY(-50%);
                    width: 60px;

                    img {
                        box-sizing: border-box;
                        display: block;
                        max-height: 100%;
                        max-width: 100%;
                        min-width: 0;
                        object-fit: contain;
                    }
                }
            }

            .text {
                margin: 0.5rem;

                img {
                    height: 200px;
                    object-fit: contain;
                }
            }
        }

        @media (min-width: 768px) {
            .columns {
                grid-template-columns: repeat(6, 1fr);

                &:has(> div:nth-child(5)):not(:has(> div:nth-child(6))) {
                    & > div:nth-child(-n + 3) {
                        grid-column: span 2;
                    }

                    & > div:nth-child(4) {
                        grid-column: 2 / span 2;
                    }

                    & > div:nth-child(5) {
                        grid-column: 4 / span 2;
                    }
                }

                &:has(> div:nth-child(4)):not(:has(> div:nth-child(5))) {
                    & > div:nth-child(1),
                    & > div:nth-child(3) {
                        grid-column: 2 / span 2;
                    }

                    & > div:nth-child(2),
                    & > div:nth-child(4) {
                        grid-column: 4 / span 2;
                    }
                }
            }
        }

        @media (min-width: 1280px) {
            .columns {
                grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));

                & > div {
                    grid-column: auto !important;
                }
            }
        }
    }
}