/* Custom Breakpoints for Bica Child Theme */
/* Mobile: 0px to 991px */
/* Tablet: 992px to 1199px */
/* Desktop: 1200px and above */

/* Base mobile styles (0px to 991px) */
.col, .columns, .gallery-item {
    margin: 0;
    padding: 0 15px 30px;
    position: relative;
    width: 100%;
}

/* Small grid classes (mobile) - apply to all sizes by default */
.small-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; }
.small-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }
.small-3 { flex-basis: 25%; max-width: 25%; }
.small-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }
.small-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }
.small-6 { flex-basis: 50%; max-width: 50%; }
.small-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }
.small-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }
.small-9 { flex-basis: 75%; max-width: 75%; }
.small-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }
.small-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }
.small-12 { flex-basis: 100%; max-width: 100%; }

/* Tablet breakpoint: 992px to 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* Medium grid classes for tablet */
    .medium-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; }
    .medium-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }
    .medium-3 { flex-basis: 25%; max-width: 25%; }
    .medium-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }
    .medium-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }
    .medium-6 { flex-basis: 50%; max-width: 50%; }
    .medium-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }
    .medium-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }
    .medium-9 { flex-basis: 75%; max-width: 75%; }
    .medium-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }
    .medium-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }
    .medium-12 { flex-basis: 100%; max-width: 100%; }

    .medium-col-first { order: -1; }
    .col { padding-bottom: 30px; }
}

/* Desktop breakpoint: 1200px and above */
@media screen and (min-width: 1200px) {
    /* Large grid classes for desktop */
    .large-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; }
    .large-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }
    .large-3 { flex-basis: 25%; max-width: 25%; }
    .large-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }
    .large-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }
    .large-6 { flex-basis: 50%; max-width: 50%; }
    .large-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }
    .large-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }
    .large-9 { flex-basis: 75%; max-width: 75%; }
    .large-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }
    .large-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }
    .large-12 { flex-basis: 100%; max-width: 100%; }

    .large-col-first { order: -1; }

    .col:first-child .col-inner {
        margin-left: auto;
        margin-right: 0;
    }

    .col + .col .col-inner {
        margin-left: 0;
        margin-right: auto;
    }

    .row-divided > .col + .col:not(.large-12) {
        border-left: 1px solid #ececec;
    }

    .row-divided.row-reverse > .col + .col:not(.large-12) {
        border-left: 0;
        border-right: 1px solid #ececec;
    }

    .col-divided {
        border-right: 1px solid #ececec;
        padding-right: 30px;
    }

    .col.col-divided:not(.col-first):last-child {
        border-left: 1px solid #ececec;
        border-right: 0;
        padding-left: 30px;
        padding-right: 0;
    }

    .col-border {
        border-right: 1px solid #ececec;
        padding-right: 0;
    }

    .col-border + .col,
    .col-divided + .col {
        padding-left: 30px;
    }
}

/* Mobile specific styles: up to 991px */
@media screen and (max-width: 991px) {
    .small-col-first { order: -1; }

    /* Hide desktop-only elements on mobile */
    .hide-for-small { display: none !important; }

    /* Mobile navigation adjustments */
    .mobile-sidebar { display: block; }

    /* Mobile text alignment */
    .text-center-mobile { text-align: center !important; }
    .text-left-mobile { text-align: left !important; }
    .text-right-mobile { text-align: right !important; }
}

/* Tablet specific styles: 992px to 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .hide-for-medium { display: none !important; }

    /* Tablet text alignment */
    .text-center-medium { text-align: center !important; }
    .text-left-medium { text-align: left !important; }
    .text-right-medium { text-align: right !important; }
}

/* Desktop specific styles: 1200px and above */
@media screen and (min-width: 1200px) {
    .hide-for-large { display: none !important; }
    .show-for-large { display: block !important; }

    /* Desktop text alignment */
    .text-center-large { text-align: center !important; }
    .text-left-large { text-align: left !important; }
    .text-right-large { text-align: right !important; }
}

/* Mobile/tablet header styling mapped from original bicasolutions.dk */
@media screen and (max-width: 1199px) {
    #header .mobile-nav.nav-left,
    #header .mobile-nav.nav-right {
        align-items: center;
        column-gap: 12px;
        flex-wrap: nowrap;
    }

    #header .mobile-nav.nav-left > li,
    #header .mobile-nav.nav-right > li {
        margin: 0 !important;
    }

    #header .header-main li.html.custom.html_topbar_right {
        display: inline-block !important;
    }

    #header .mobile-nav a.button.primary.is-outline,
    #header .mobile-nav a.button.alert {
        align-items: center;
        background: transparent !important;
        border: 1.25px solid var(--header-button-outline-border) !important;
        border-radius: 200px !important;
        color: var(--header-button-outline-text) !important;
        display: inline-flex !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
        min-height: 34.7px !important;
        padding: 6.4px 19.2px 4.8px !important;
        text-transform: none !important;
    }

    #header .mobile-nav.nav-right:has(.adt-mobile-find-forhandler-icon) > li.header-button-1 {
        display: none !important;
    }

    #header .mobile-nav .adt-mobile-find-forhandler-icon,
    #header .mobile-nav .adt-mobile-find-forhandler-icon:visited,
    #header .mobile-nav .adt-mobile-find-forhandler-icon:hover,
    #header .mobile-nav .adt-mobile-find-forhandler-icon:focus,
    #header .mobile-nav .adt-mobile-find-forhandler-icon:active {
        align-items: center;
        color: var(--header-base-text-color) !important;
        display: inline-flex !important;
        justify-content: center;
        line-height: 0;
        padding: 6.4px 8px 4.8px !important;
        text-decoration: none !important;
    }

    #header a.button.primary.is-outline[href*='find-forhandler'],
    #header #masthead .header-nav-main li a.button.primary.is-outline[href*='find-forhandler'],
    #header #masthead .mobile-nav li a.button.primary.is-outline[href*='find-forhandler'] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #header #masthead .header-nav li a.adt-mobile-find-forhandler-icon,
    #header #masthead .header-nav-main li a.adt-mobile-find-forhandler-icon,
    #header #masthead .mobile-nav li a.adt-mobile-find-forhandler-icon {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #header .mobile-nav .adt-mobile-find-forhandler-icon svg {
        display: block;
        height: 24px;
        width: 24px;
    }

    #header .mobile-nav .adt-mobile-find-forhandler-icon svg path,
    #header .mobile-nav .adt-mobile-find-forhandler-icon svg circle {
        stroke: currentColor !important;
    }

    #header .mobile-nav li.header-search > a,
    #header .mobile-nav li.header-search > a i.icon-search {
        color: var(--header-base-text-color) !important;
    }

    #header .stuck .mobile-nav a.adt-mobile-find-forhandler-icon,
    #header .stuck .mobile-nav li.header-search > a,
    #header .stuck .mobile-nav li.header-search > a i.icon-search {
        color: var(--header-base-text-color) !important;
    }

    #header .mobile-nav a.button.primary.is-outline span,
    #header .mobile-nav a.button.alert span {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    #header .mobile-nav a.button.alert[href*="kontakt-os"] {
        min-width: 0 !important;
        white-space: nowrap !important;
        width: auto !important;
    }

    #header .mobile-nav > li > a[aria-label="Menu"] {
        align-items: center;
        border-radius: 4px !important;
        color: var(--header-base-text-color) !important;
        display: inline-flex !important;
        line-height: 14px !important;
        padding: 6.4px 8px 4.8px !important;
    }

    #header .mobile-nav > li > a[aria-label="Menu"] i.icon-menu {
        display: inline-block;
        font-size: 0;
        height: 13.5px;
        line-height: 0;
        position: relative;
        width: 18px;
    }

    #header .mobile-nav > li > a[aria-label="Menu"] i.icon-menu::before,
    #header .mobile-nav > li > a[aria-label="Menu"] i.icon-menu::after {
        border-top: 1.5px solid currentColor !important;
        content: "" !important;
        left: 0;
        position: absolute;
        width: 18px;
    }

    #header .mobile-nav > li > a[aria-label="Menu"] i.icon-menu::before {
        top: 0;
        box-shadow: 0 6px 0 0 currentColor;
    }

    #header .mobile-nav > li > a[aria-label="Menu"] i.icon-menu::after {
        top: 12px;
    }
}