/*
Theme Name: Uncode Child – Starling Lab
Description: Child theme for Uncode theme, customized for Starling Lab
Author: Undsgn™ / Format Digital
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode

@Note:  Starlng-lab specific classes are prefixed with 'sl-'
Non-prefixed classes are generally theme overrides.
*/


:root {
    interpolate-size: allow-keywords;

    --container-max-width: 1598px;
    --thin-border: 1px solid currentColor;
    --thick-border: 20px solid currentColor;
    
    --sl-black: #000000;
    --sl-beige: #FFF9F2;
    --sl-red: #f73432;
	--sl-yellow: #fcba03;
    
    --gap-sm: 18px;
    --gap-md: 36px;
    --gap-lg: 72px;
    
    --grey-45: #737373;
    --grey-88: #e8e2db;


    --text-max-width: 70ch;
}

svg {
    max-width: 100%;
    height: auto;
}

@font-face {
    font-family: 'Founders Grotesk';
    src: url('./fonts/founders-grotesk-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('./fonts/founders-grotesk-regular-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display:swap;
}

@font-face {
    font-family: 'Founders Grotesk';
    src: url('./fonts/founders-grotesk-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display:swap;
}

@font-face {
    font-family: 'Founders Grotesk';
    src: url('./fonts/founders-grotesk-medium.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display:swap;
}


/* ------------------------------- */
/* Global                          */
/* ------------------------------- */

html, body {
    font-family: "Founders Grotesk", "Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
}

html, body, .box-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Use clip rather than overflow to allow sticky headings to work */
.box-wrapper {
    overflow: clip;
}

/* Enable View Transitions */
@view-transition {
    navigation: auto;
}

p u {
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}


.style-dark a[href]:not(.btn){
    color: var(--sl-beige) !important;
    transition: color 0.2s ease;
    &:hover {
        color: var(--sl-beige) !important;
        opacity: 0.9;
    }
}


footer.site-footer .style-dark a:not(.btn) {
    color: var(--sl-beige) !important;
    transition: color 0.2s ease;
}
footer.site-footer .style-dark a:not(.btn):hover {
    color: var(--sl-beige) !important;
    opacity: 0.9;
}
.main-wrapper .style-dark-bg a:not(.btn) {
    color: var(--sl-beige) !important;
    transition: color 0.2s ease;
}
.main-wrapper .style-dark-bg a:not(.btn):hover {
    color: var(--sl-beige) !important;
    opacity: 0.9;
}

/* Customize selection colors */
::selection {
    background: rgba(30, 30, 30, 0.85);
    color: #ffffff !important;
}
::-moz-selection {
    background: rgba(30 30 30 / 0.85);
    color: #ffffff !important;
}

/* Remove padding added by 'custom' styles within WPBakery */
@media (max-width: 569px) {
    div[class*=vc_custom_]:not(.vc_custom_preserve_mobile) {
        padding-right: 0;
        padding-left: 0;
    }
}

.menu-wrapper .row-menu.limit-width .row-menu-inner {
    padding: 0 24px !important;
}
.menu-container .row-menu-inner::after {
    inset: auto 24px 0 24px !important;
}
.overlay .overlay-search {
    margin-top: -1px !important;
}

.sl-top-border {
    border-top: var(--thick-border);
}

.sl-container {
    padding: 0 36px;
    margin: auto;
    max-width: var(--container-max-width);
}

/* Set custom line height (overrides Uncode's default rule) */
p, li, dt, dd, dl, address, label, small, pre, code, span.tab-excerpt {
    line-height: 1.3;
}


/* Reducechorizontal padding for content rows*/
.main-container .row-container .row-parent {
    padding-left: 24px;
    padding-right: 24px;
}

.menu-container .logo-container {
    padding: 24px 0 !important;
    @media (min-width: 960px) {
        padding: 27px 36px 27px 36px !important;
    }
}


/* Reduce padding on divider rows */
/* :not(:has(.wpb_column:nth-child(2))) ensures there's only one column in the row */
.main-container .row-container .row-parent:has(.divider-wrapper:only-child):not(:has(.wpb_column:nth-child(2))):not(.no-top-padding):not(.no-bottom-padding) {
    padding-top: 34px;
    padding-bottom: 34px;
}

/* --------------------------------------------- */
/* MENU / NAVIGATION */

/* Disable sticky header on home page, allow
    positioning of custom home page logo */
.home #masthead .menu-container {
    position: relative !important;
    /* top: 0 !important; */
}

/* @media (min-width: 960px) {
    .home #masthead .logo-container {
        position: absolute;
    }
} */

.home .nav {
    @media (min-width: 960px ){
        height: 78px;
    }
}
.home .logo-image.main-logo.logo-light {
    background: var(--sl-beige);
    padding-right: 10px;
}


/* Add border to nav menu */
.drop-menu {
    box-shadow: 0 4px 8px rgba(0 0 0 / 0.2)
}

.menu-container .row-menu-inner::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    inset: auto 36px 0 36px;
    border-top: 1px solid currentColor;
}

.menu-primary-inner .menu-item {
    font-size: 15px;
    letter-spacing: 0.04em;
}

.navbar-nav .drop-menu {
    background: var(--sl-beige);
}

.navbar-nav .drop-menu .menu-item a {
    font-size: 17px;
}

/* Remove box shadow from 'stuck' menu  */
.menu-primary.is_stuck .menu-container {
    box-shadow: none !important;
}

.menu-primary .menu-item a {
    transition: color 0.2s ease;
    color: var(--grey-45);
    
    &[href="#"] {
        cursor: default;
    }
    &:hover {
        color: var(--sl-black);
    }
}

@media (min-width: 960px) {
    .menu-sub-enhanced.menu-horizontal ul.menu-smart > li ul {
        padding: 18px;
    }
}

/* Search */

#masthead .overlay .overlay-search-wrapper {
    transform: none;
}

.overlay-search-wrapper {
    max-width: 1368px;
    margin: 0 auto;
}

.overlay-search.style-light .overlay-search-wrapper {
    background-color: var(--sl-beige);
    border-top: none;
    border-bottom: 1px solid var(--sl-black);
}


.uncode_text_column {
    p, ul, ol {
        max-width: var(--text-max-width)
    }
}

/* ------------------------------- */
/* Elementor                       */
/* ------------------------------- */
.elementor-widget-container {
    p, ul, ol {
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        max-width: var(--text-max-width);
    }
    
    & *:first-child {
        margin-top: 0;
    }
    & *:last-child {
        margin-bottom: 0;
    }

    a {
        text-decoration: underline;
        text-underline-offset: 0.3em;
        text-decoration-skip-ink: all;
        transition: text-underline-offset 0.2s ease;
        text-underline-offset: 0.3em;
        text-decoration-thickness: 0.1em;

        &:hover {
            text-underline-offset: 0.15em;
        }
    }

    ul + p, ol + p {
        margin-top: 1.5em
    }
    span.elementor-drop-cap {
        text-align: left;
        font-size: inherit;
        display: block;
        margin: 0 0.2em 0.2em 0;
    }
    span.elementor-drop-cap-letter {
        display: block;
        font-weight: bold;
        font-size: 4.5em;
        position: relative;
        line-height: 0.6;
        top: 0.05em;
        left: -0.02em;
    }
}





/* ------------------------------- */
/* Content Slider (Owl Carousel)   */
/* ------------------------------- */

/* .uncode-nav-dots {
    display: flex;
    gap: 1 rem;;
} */

/* .dots-look-default:not(.dots-numbers).uncode-owl-nav.slider-nav .uncode-nav-index span {
    background-color: var(--sl-black) !important;
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1)
} */

.owl-item .row-child.single-h-padding {
    padding-left: 24px;
    padding-right: 24px;
}

/* .slider-nav .uncode-nav-index {
    background-color: var(--sl-black) !important;
    opacity: 0.7;
    
    &:hover {
        opacity: 0.85;
    }

    &.active-index {
        opacity: 1;
    }
} */




/* ------------------------------- */
/* General Typography              */
/* ------------------------------- */

h1, h2, h3, h4, h5, h6 {
    &:not([class*="fontsize-"]) {
        font-weight: 600;
    }
    &:not([class*="lineheight-"]) {
        line-height: 0.95;
    }
    text-wrap: pretty;
}

p {
    text-wrap: pretty;
}

.h1 {
    display: flex;
    gap: 0.5em;
    align-items: center;
    
    span {
        position: relative;
        top: -0.1em;
    }
    img {
        width: auto;
        height: 0.85em;
        margin-top: 0.2em;
    }
}

pre {
    border: none;
    padding: 0;
    font-size: 1rem;
}

.uncont {
    height: 100%;
    display:flex;
    flex-direction: column;
}

.uncode_text_column li {
    margin-bottom: 0.5em;
}

.tmb .t-entry p.t-entry-meta span,
.tmb .t-entry p.t-entry-comments,
.tmb .t-entry p.t-entry-author span.tmb-username-wrap {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}

/* Style links in body text */
.uncode_text_column a:not(h2 a, h3 a, h4 a) {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: auto;
    transition: text-underline-offset 0.15s ease-in-out;
    
    &:hover {
        text-underline-offset: 0.15em;
    }
}

.heading-text:where(h2 a, h3 a, h4 a),
.uncode_text_column:where(h2 a, h3 a, h4 a) {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: auto;
    transition: text-underline-offset 0.15s ease-in-out, opacity 0.15s ease-in-out;
    text-decoration-color: transparent;
    
    &:hover {
        text-decoration-color: currentColor;
        text-underline-offset: 0.15em;
    }
}

.uncell .uncode_text_column * {
    color: inherit;
}

.uncode_text_column h1 {
    font-size: 48px;
    line-height: 1 ;
    @media (width >= 1024px) {
        font-size: 60px;
    }
}

/* Adjust line height on lead text */
.text-lead,
.text-lead:not(ul):not(ol) > * {
    line-height: 1;
}

.custom-link {
    display: inline-block;
    i {
        transition: transform 0.2s ease-in-out;
    }
}
.custom-link:hover, .custom-link:focus-visible {
    i {
        transform: translateX(0.25em);
    }
}

.custom-link > span {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}
.custom-link.btn-top-margin {
    margin-top: 1em;
}

.custom-link.hidden-arrow {
    i {
        transition: transform 0.2s ease, opacity 0.2s ease;
        transform: translateX(-0.125em);
        opacity: 0;
    }
}

.custom-link.hidden-arrow:hover {
    i {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Link with Arrow on Hover */
.hover-arrow {
    i {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    &:hover i {
        opacity: 1;
        transform: none;
    }
}

.uncode-info-box,
.author-info,
.date-info {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


h2:has(img.alignright),
h3:has(img.alignright),
h4:has(img.alignright), h3, h4 {
    display: block !important;
}

/* Full-width separator above headings */
hr.separator-break {
    display: block !important;
    width: 6em;
    border-top: 20px solid currentColor !important;
}

/* Vertically justify column contents – first-child */
.first-v-justify {
    & .uncont {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        width: 100%;
        justify-items: stretch;
        height: 100%;
        justify-self: stretch;
        margin-bottom: auto;
        
        & > *:first-child {
            margin-bottom: auto !important;
        }
    }
    
    & .uncol {
        height: 100%;
    }
}

/* Vertically justify column contents – last-child */
.last-v-justify {
    & .uncont {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        width: 100%;
        justify-items: stretch;
        height: 100%;
        justify-self: stretch;
        margin-bottom: auto;
        
        & > *:last-child {
            margin-top: auto !important;
        }
        
        .uncode-single-media {
            margin: unset !important;
        }
    }
    
    & .uncol {
        height: 100%;
    }
}

.style-light p strong {
    color: inherit !important;
}


/* Sticky Heading */
@media (width > 960px) {
    .uncont:has(.heading-sticky) {
        &, .vc_row, .uncol, .uncoltable, .uncell, .row, .row-inner, .column-child {
            height: 100%;
            vertical-align: top;
        }
    }
    
    
    /* Select .uncont within the first column that has a sticky-heading class */
    .heading-sticky {
        position: sticky !important;
        top: 120px;
        transition: top 0.5s ease-in-out;
    }
    body:has(.menu-hided) .heading-sticky {
        top: 40px;
    }
}


/* ------------------------------- */
/* Footer                          */
/* ------------------------------- */
.site-footer {
    color: var(--sl-beige);
    background-color: var(--sl-black);
    font-size: 1rem;
    
    & .footer-logo {
        width: auto;
        height: auto;
        max-width: 100%;
    }
    
    & > .row-container:first-child {
        padding: var(--gap-md) 0 0 0;
    }
    
    .site-info {
        color: #777777;
        font-size: 1rem;
        padding-top: 0; 
        a {
            color: inherit;
        }
    }
    a {
        color: var(--sl-beige);
        transition: opacity 0.2s ease-in-out;
        &:hover {
            opacity: 0.8;
        }
        
    }
    
    .sub-menu {
        display: none;
    }

    .footer-row > .row  > .row-inner {
        display: grid !important;
        grid-template-columns:repeat(1, minmax(0, 1fr));
        gap: 36px;
    }

    .site-info {
        font-size: 14px;
    }

    .icon-media {
        max-width: 240px;
    }

    @media(width > 720px) {
        .footer-row > .row  > .row-inner {
            grid-template-columns:repeat(2, minmax(0, 1fr));
            grid-template-rows:repeat(2, minmax(0, min-content));
        }
        .footer-menu {
            grid-column: 2;
        }
        .footer-labs {
            grid-column: 2;
        }
        .footer-extra {
            grid-row: 2;
        }
    }
    
    @media(width > 1000px) {
        .footer-row > .row > .row-inner {
            grid-template-columns:repeat(4, minmax(0, 1fr));
        }
        .footer-menu {
            grid-row: 1;
            grid-column: 2;
        }
        .footer-labs {
            grid-row: 1;
            grid-column: 3;
        }
        .footer-extra {
            grid-row: 1;
            grid-column: 4;
        }
    }

    [class*="footer-"] {
        display: block !important;
        height: auto !important;
        width: auto !important;
        margin-bottom: 36px;
    }

    .wpb_column {
        height: auto !important;
    }

    .footer-brand {

    }
    .footer-menu {

    }
    .footer-labs {

    }
    .footer-extra {

    }
}


/* ------------------------------- */
/* Tabs                            */
/* ------------------------------- */
.sl-tabs-vertical {
    .vertical-tab-menu {
        padding-top: 1.5rem;
    }
    .vc_tta-tabs-list {
        .vc_tta-tab a {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }
}

.sl-tabs-invert {
    .vc_tta-tabs-list {
        .vc_tta-tab a {
            color: var(--sl-beige);
            opacity: 0.7;

            &:hover {
                opacity: 1;
                color: inherit;
            }
        }
        .vc_tta-tab.active a {
            opacity: 1;
        }
    }
}


/* Block list wih separators */
.sl-separators-list-2up {
    .tmb {
        border-right: 1px solid transparent;
        position: relative;
        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0 -36px 0 auto;
            border-left: 1px solid var(--sl-black);
        }
        
        @media(width > 1024px) {
            &:nth-child(off) {
                &::before {
                    display: none;
                }
            }
        }
    }
}


.sl-separators-list-3up {
    .tmb {
        border-right: 1px solid transparent;
        position: relative;
        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0 -36px 0 auto;
            border-left: 1px solid var(--sl-black);
        }
        
        @media(width > 1024px) {
            &:nth-child(3n + 3) {
                &::before {
                    display: none;
                }
            }
        }
    }
}

.sl-separators-list-4up {
    .tmb {
        position: relative;
        border-right: 1px solid transparent;
        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0 -36px 0 auto;
            border-left: 1px solid var(--sl-black);
        }
        @media(width > 1024px) {
            &:nth-child(4n + 4) {
                &::before {
                    display: none;
                }
            }
        }
    }
}


/* ------------------------------- */
/* Custom Shortcodes               */
/* ------------------------------- */

/* Chip – used to display tags */
.sl-chip {
    display: inline-flex;
    line-height: 1;
    vertical-align: baseline;
    border: 1px solid currentColor;
    padding: 0.4em 0.5em;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 14px;
}

/* Cast Studies Count */
h1:has(.sl-case-studies-count) {
    line-height: 0.9;
}

.case-study-filters a {
    text-decoration: none !important;
    transition: opacity 0.2s ease;
    opacity: 0.8;
    &:hover {
        color: currentColor !important;
        opacity: 1;
    }
}

/* Categories */
.tmb .t-entry p.t-entry-meta:has(.t-entry-category){
    justify-self: end;
}

.tmb .t-entry p.t-entry-meta .t-entry-category {
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    vertical-align: baseline;
    border: 1px solid currentColor;
    padding: 0.4em 0.5em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 14px;
    
    .small-spacer,
    .cat-comma {
        display: none;
    }
}

/* Align chip within headings */
.vc_custom_heading_wrap:has(.sl-chip) {
    & .heading-text {
        display: flex;
        gap: 1rem;
    }
    & *:first-child {
        flex: 1;
    }
    
    & .sl-chip {
        flex: 0 0 auto;
        align-self: start;
        margin-top: 0.75em;
        justify-self: end;
    }
}


/* ------------------------------- */
/* General Layouts                 */
/* ------------------------------- */

/* Media */
/* Tidy up media with caption above image */
.uncode-single-media .t-inside {
    display: flex !important;
    flex-direction: column;
    gap: var(--gap-sm);
    
    .t-entry-text-tc {
        padding-top: 0;
    }
}

.t-entry-title.h2 {
    line-height: 1.1;
}
.t-entry-title.h3 {
    line-height: 1.2;
}

.t-entry-meta {
    margin: 0 !important;
    display: flex;
    column-gap: 0.5em;
    row-gap: 0.2em;
    flex-wrap: wrap;
}

/* ------------------------------- */
/* Accordion                       */
/* ------------------------------- */

.uncode-accordion {
    & .panel:first-child {
        a {
            margin-top: -18px;
        }
    }
    & .panel:not(:last-child) {
        border-bottom: 1px solid currentColor;
    }
    
    & [role="tabpanel"] .panel-body {
        padding-bottom: 6em;
    }
    
}


/* ------------------------------- */
/* Case Studies List               */
/* ------------------------------- */

.case-studies-list {
    /**
    * Post Cards
    * Customisations on top of Uncode
    */
    
    .tmb {
        position: relative;
    }
    
    /* .t-entry-visual {
        margin-bottom: 9px;
    } */
    
    .t-entry {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
        display: relative;
    }
    
    .t-entry-meta {
        margin: 0 !important;
        margin-bottom: 0.5em !important;
        display: flex;
        flex: 1 1 calc(50% - 0.25rem);
        column-gap: 0.5em;
        row-gap: 0.2em;
        align-items: start;

        &:has(.t-entry-category) {
           justify-content: end;
        }
    }

    .t-entry-title:has(a) {
        order: 3;
        margin: 0 0 0.5em 0 !important;
    }
    .t-entry-excerpt {
        order: 4;
    }
    
    .t-entry-date {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: bold;
    }
    
    .t-entry-category {
        display: inline-flex;
        line-height: 1;
        vertical-align: baseline;
        /* border: 1px solid currentColor;
        padding: 0.4em 0.5em; */
        border: none !important;
        padding: 0 !important;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.05em;
        font-size: 14px;
        
        a {
            transition: opacity 0.2s ease;
        }
        a:hover {
            color: currentColor !important;
            opacity: 0.8;
        }
    }
    
    .t-entry-title {
        flex: 1 0 100%;
        margin-bottom: 0.5em !important;
    }
    
    /* Stacking */
    &.two-up .tmb:nth-child(odd) {
        @media (width > 960px) {
            &::after {
                display: block;
                content: '';
                position: absolute;
                inset: 0 -36px 0 auto;
                border-inline-end: 1px solid currentColor;
            }
        }
    }


    /* Entry title link hover effect */
    .t-entry-title a {
        transition: opacity 200ms ease;
    }
    .style-dark .t-entry-title a:hover {
        color:white !important;
    }
    .t-entry-title a:hover,
    .t-entry-title a:focus {
        opacity: 0.8
    }
}


/* ------------------------------- */
/* Post Lists                      */
/* ------------------------------- */

.sl-posts-highlights {
    .t-entry-visual {
        margin-bottom: 18px;
    }
    
    .t-entry {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .t-entry-meta {
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    /* Categories */
    .t-entry-meta:nth-child(1) {
        flex: 1 1 50%;
    }
    
    /* Date */
    .t-entry-meta:nth-child(2) {
        flex: 1 1 auto;
        align-items: start;
        justify-content: end;
    }
    .t-entry-date {
        display: inline-block;
        margin-top: 2px !important;
    }
    
    .t-entry-title:has(a) {
        order: 3;
        margin-bottom: 0 !important;
    }
    .t-entry-excerpt {
        order: 4;
    }
    
    .t-entry-title {
        margin-bottom: 0.5em !important;
    }
}

.sl-posts-news-events {
    .tmb:not(:last-child) {
        border-bottom: 1px solid currentColor;
        padding-bottom: 36px;
    }

    .t-entry-visual img {
        object-fit: cover;
        object-position: center;
    }
    
    .t-entry-category {
        display: inline-flex;
        line-height: 1;
        border: 1px solid currentColor;
        padding: 0.4em 0.5em;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.05em;
    }
    
    .t-entry-date {
        line-height: 1;
        margin: 1em 0 !important;
        font-size: 14px;
        font-weight: 600 !important;
        text-transform: uppercase;
    }
}

/* ------------------------------- */
/* Related Articles List           */
/* ------------------------------- */
.sl-related-posts {
    border-top: var(--thick-border);
    padding-top: var(--gap-md);
    margin-top: var(--gap-md);
    
    h2 {
        margin: 0 0 var(--gap-md) 0;
        padding-bottom: var(--gap-sm);
        border-bottom: var(--thin-border);
    }
}

.sl-related-posts-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
    
    @media (width > 540px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gap-md);
    }
    
    @media (width > 900px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sl-related-post {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    
    a {
        color: inherit;
    }
    
    .t-entry-title {
        margin: var(--gap-sm) 0;
    }
}

.sl-related-post-image img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}


/* ------------------------------- */
/* Case Study                      */
/* ------------------------------- */

@media (width > 768px) {
    .single-case_study .contents {
        position: sticky;
        top: 60px;
        transition: top 0.2s 0.2s ease;
    }

    .single-case_study:has(header.is_stuck) .contents {
        top: 120px;
    }
}

.single-case_study .contents a {
    color: var(--grey-45);
    text-decoration: none;
    transition: colors 0.2s ease-in-out;
}

.single-case_study.contents a:hover {
    color: currentColor;
}


/* ------------------------------- */
/* Home Page
/* ------------------------------- */

/* Hide all content initially on home page - JS will show it when overlay is ready */
/* .home > *:not(#loading-overlay):not(.overlay.overlay-search) {
    opacity: 0;
    visibility: hidden;
} */

/* Show all content when overlay-ready class is added to body (set by JS) */
/* .home.overlay-ready > *:not(#loading-overlay):not(.overlay.overlay-search) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
} */

#loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sl-beige);
    /* Popover API automatically handles top layer, no z-index needed */
    isolation: isolate;
    contain: layout style paint;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Remove default popover styling */
    border: none;
    padding: 0;
    margin: 0;
    /* Performance optimization */
    will-change: opacity;
    transform: translateZ(0);
}

#loading-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    contain: layout style paint;
}

#loading-logo img.loading-logo-img,
#loading-logo img,
#loading-logo video,
#loading-logo svg {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    /* Performance optimization */
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Fallback for browsers without popover support */
@supports not selector(:popover-open) {
    #loading-overlay {
        z-index: 2147483647 !important;
    }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    #loading-overlay {
        transition: opacity 0.3s ease;
    }
    
    #loading-logo img,
    #loading-logo svg {
        transition: none;
        animation: none;
    }
}

.event-flag .uncell {
    padding: 12px !important;
}

.t-entry-visual img { padding: 2px; }

.authenticity-by-design {
	hr.separator-break {
    	border-top: 20px solid #111 !important;
	}
}

/* Custom display in History Lab for Highlights */
  .cssgrid-180544 .cssgrid-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .cssgrid-180544 .tmb:first-child {
    grid-column: span 3;
    grid-row: span 2;
    border-right: 1px solid currentColor;
    padding-right: 36px;
  }

  .cssgrid-180544 .tmb:first-child .t-entry-title {
    font-size: 52px;
  }