/*
Theme Name: Calids Minimal
Theme URI: https://calids.com
Description: Premium White Architectural Theme
Version: 6.5.1 (Footer layout fix)
*/

/* =========================================
   0. DESIGN TOKENS
   ========================================= */
:root{
    --calids-menu-font: 'Roboto', sans-serif;
    --calids-body-font: 'Roboto', sans-serif;
    --calids-heading-font: 'Roboto', sans-serif;
    --calids-footer-bg: #f2efea;
    --calids-footer-text: #3a3a3a;
    --calids-footer-title: #1f1f1f;
    --calids-accent: #2f3f37;
}

/* =========================================
   1. FONTS & RESET
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;600;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body{
    font-family: var(--calids-body-font);
color: #555;
    margin: 0;
    padding-top: 120px; 
    background: #fff;
    line-height: 1.8;
    overflow-x: hidden; 
    font-weight: 400;
}

body.home { padding-top: 0 !important; }
body.home #site-content { padding-top: 0 !important; }

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important; 
    color: #222 !important;
    margin-top: 0;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Fluid Sizing */
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem) !important; } 
h2 { font-size: clamp(2rem, 4vw, 3.5rem) !important; } 
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem) !important; } 
h4 { font-size: 1.2rem !important; }

/* Text Alignment */
#site-content p, .entry-content p {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto;
}
.has-text-align-center { text-align: center !important; }
.has-text-align-right { text-align: right !important; }


/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 120px; 
    z-index: 9999; background: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header-inner {
    width: 100%; max-width: 1400px; margin: 0 auto; 
    padding: 0 40px; height: 100%;
    display: flex; justify-content: space-between; align-items: center;
}

/* Logo */
.site-logo { display: flex; align-items: center; height: 100%; z-index: 10002; }
.site-logo img, .custom-logo { max-height: 80px; width: auto; object-fit: contain; }

/* Menu (Desktop) */
.main-navigation ul {
    display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.main-navigation a.main-navigation a {
    text-decoration: none; color: #333; font-weight: 300; 
    font-family: var(--calids-menu-font); font-size: 11px !important;       
    text-transform: uppercase !important; letter-spacing: 0.22em !important;    
    padding: 10px 0;
}
.main-navigation a:hover { color: #000; opacity: 0.7; }

/* Mobile Hamburger (Hidden on Desktop) */
#mobile-menu-toggle {
    display: none !important; 
    background: transparent; border: none; cursor: pointer; 
    padding: 8px; z-index: 10003; width: 44px; height: 44px;
    flex-direction: column; justify-content: center; align-items: center;
}
#mobile-menu-toggle span {
    display: block; width: 26px; height: 2px; background-color: #000; 
    margin-bottom: 6px; transition: 0.3s;
}
#mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
#mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
#mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* Mobile Menu Logic */
@media (max-width: 1024px) {
    .site-header { height: 80px; }
    .header-inner { padding: 0 20px !important; }
    #mobile-menu-toggle { display: flex !important; }
    
    .main-navigation {
        position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); 
        background: #fff; flex-direction: column; align-items: center; padding-top: 40px;
        z-index: 10000 !important; opacity: 0; visibility: hidden;
        transform: translateY(-10px); transition: all 0.3s ease; pointer-events: none;
    }
    .main-navigation.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    .main-navigation ul { flex-direction: column; gap: 30px; text-align: center; }
    .main-navigation a { font-size: 18px !important; display: block; padding: 15px; }
}


/* =========================================
   3. FOOTER
   ========================================= */
.site-footer { background: #fff; border-top: 1px solid #eaeaea; padding: 80px 0 40px; margin-top: 80px; }
.footer-inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; }
.footer-contact p { font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; }
@media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr; text-align: center; } }


/* =========================================
   4. GLOBAL LAYOUT
   ========================================= */
#site-content, .site-main, .entry-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }

/* Readable Width */
.entry-content > *:not(.alignwide):not(.alignfull) {
    max-width: 1160px !important; width: 100% !important;
    margin-left: auto !important; margin-right: auto !important;
    padding-left: 20px; padding-right: 20px;
}

/* Wide & Full */
.alignwide { max-width: 1400px !important; margin: 0 auto !important; padding: 0 40px; }
.alignfull { 
    width: 100vw !important; max-width: 100vw !important; 
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding: 0 40px; box-sizing: border-box; 
}
.wp-block-image.alignfull, .wp-block-cover.alignfull { padding: 0 !important; }

@media (max-width: 768px) {
    .alignwide, .alignfull { padding-left: 20px !important; padding-right: 20px !important; }
}
/* =========================================
   5. HERO BREAKOUT (Fixed: Centered Text)
   ========================================= */
.wp-block-cover.hero-breakout {
    width: 100vw !important; 
    max-width: 1920px !important; 
    position: relative !important; 
    left: 50% !important; 
    right: auto !important;
    transform: translateX(-50%) !important; 
    margin: 0 !important; padding: 0 !important;
    min-height: 85vh !important; 
    display: flex; align-items: center; justify-content: center;
    
    /* Background Image Control */
    background-size: cover !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* INNER CONTAINER: The invisible box holding the text */
/* We force this to be full width and center its contents */
.wp-block-cover.hero-breakout .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Horizontal Center */
    justify-content: center !important; /* Vertical Center */
}

/* MAIN TITLE (CALIDS) */
.wp-block-cover.hero-breakout h1, 
.wp-block-cover.hero-breakout h2 {
    font-size: 3rem !important; 
    font-weight: 700 !important; 
    letter-spacing: 0.3em !important;
    text-transform: uppercase; 
    color: #fff !important; 
    text-align: center !important; 
    width: 100% !important;
    margin-bottom: 20px !important;
    text-shadow: none !important;
}

/* SUBTITLE (Complete Landscape Solutions) */
/* We target every possible tag to ensure it catches the text */
.wp-block-cover.hero-breakout p,
.wp-block-cover.hero-breakout p strong,
.wp-block-cover.hero-breakout span {
    font-size: 1.0rem !important; 
    font-weight: 900 !important; 
    letter-spacing: 0.2em !important;
    text-transform: uppercase; 
    color: #fff !important; 
    
    /* THE FIX: Force it to fill the line and center */
    display: block !important; 
    width: 100% !important; 
    text-align: center !important; 
    margin: 0 !important;
}

@media (max-width: 768px) {
    .wp-block-cover.hero-breakout { min-height: 60vh !important; }
    .wp-block-cover.hero-breakout h1 { font-size: 2rem !important; }
}


/* =========================================
   6. PRO ACCORDION (Elementor Style)
   ========================================= */
.wp-block-details.pro-accordion {
    border: 1px solid #e5e5e5; 
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px; 
    background: #fff;
    transition: all 0.3s ease;
}

.wp-block-details.pro-accordion summary {
    padding: 20px 25px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 600;
    color: #333;
    cursor: pointer;
    list-style: none; 
    position: relative;
    outline: none;
}
.wp-block-details.pro-accordion summary::-webkit-details-marker { display: none; }

/* PLUS ICON */
.wp-block-details.pro-accordion summary::after {
    content: '+'; 
    position: absolute; right: 25px; top: 50%;
    transform: translateY(-50%);
    font-size: 24px; color: #888; font-weight: 300;
}

/* OPEN STATE */
.wp-block-details.pro-accordion[open] { border-color: #ccc; }
.wp-block-details.pro-accordion[open] summary {
    border-bottom: 1px solid #eee; 
    color: #000;
}
.wp-block-details.pro-accordion[open] summary::after {
    content: '-';
    font-size: 32px; top: 48%; color: #000;
}

.wp-block-details.pro-accordion p,
.wp-block-details.pro-accordion .wp-block-group { 
    padding: 20px 25px; margin: 0; color: #666; 
}


/* =========================================
   7. PORTFOLIO GRID
   ========================================= */
.portfolio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px; row-gap: 60px; margin: 40px 0 80px;
}
.img-wrap { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f0f0f0; margin-bottom: 20px; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.portfolio-item:hover .img-wrap img { transform: scale(1.05); }

.portfolio-title { font-size: 1.2rem; margin: 0 0 5px; color: #222; text-transform: uppercase; }
.portfolio-cat { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 2px; }

@media (max-width: 768px) { .portfolio-grid { grid-template-columns: 1fr; gap: 30px; } }


/* =========================================
   8. SERVICE CARDS & SEPARATORS
   ========================================= */
.service-card {
    padding: 40px 30px; text-align: center; background: #fff; height: 100%;
    display: flex; flex-direction: column; align-items: center;
}
.service-card h1, .service-card h2 {
    font-size: 140px !important; font-weight: 700 !important; line-height: 1 !important;
    color: transparent !important; -webkit-text-stroke: 2px #cbcbcb !important;
    margin-bottom: 5px !important;
}
.service-card h3 { font-size: 1.4rem !important; color: #333; text-transform: uppercase; letter-spacing: 1px; }

hr.wp-block-separator {
    border: none !important; border-top: 1px solid #ccc !important;
    margin: 20px auto !important; width: 100px !important; opacity: 1 !important;
}
.wp-block-separator.is-style-wide { max-width: 100% !important; width: 100% !important; }
/* =========================================
   9. LAYOUT ENGINE (Desktop Rules)
   ========================================= */

/* --- A. FULL WIDTH SPLIT (force-split) --- */
.wp-block-columns.force-split {
    display: flex !important; align-items: stretch !important;
    gap: 0 !important; margin: 0 !important; padding: 0 !important;
    width: 100% !important;
}
.wp-block-columns.force-split .wp-block-column:has(.wp-block-image) { position: relative !important; }
.wp-block-columns.force-split .wp-block-column:has(.wp-block-image) img {
    position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
    object-fit: cover !important; z-index: 1;
}
.wp-block-columns.force-split .wp-block-column:not(:has(.wp-block-image)) {
    padding: 80px 60px !important; display: flex; flex-direction: column; justify-content: center; z-index: 2;
}

/* --- B. BOXED STANDARD (force-boxed) --- */
.wp-block-columns.force-boxed {
    width: 100% !important; max-width: 1160px !important;
    margin: 0 auto 80px !important; display: flex !important;
    align-items: center !important; gap: 80px !important;
}
.wp-block-columns.force-boxed .wp-block-column:has(.wp-block-image) img {
    width: 100% !important; height: auto !important; display: block !important;
}

/* --- C. MATCH HEIGHT SYSTEM (match-33, match-50, match-66) --- */
.wp-block-columns.match-33, .wp-block-columns.match-50, .wp-block-columns.match-66 {
    width: 100% !important; max-width: 1160px !important;
    margin: 0 auto 80px !important; display: flex !important;
    align-items: stretch !important; gap: 60px !important;
}
.wp-block-columns.match-33 .wp-block-column:has(.wp-block-image),
.wp-block-columns.match-50 .wp-block-column:has(.wp-block-image),
.wp-block-columns.match-66 .wp-block-column:has(.wp-block-image) {
    position: relative !important; min-height: 100%;
}
.wp-block-columns.match-33 .wp-block-column:has(.wp-block-image) img,
.wp-block-columns.match-50 .wp-block-column:has(.wp-block-image) img,
.wp-block-columns.match-66 .wp-block-column:has(.wp-block-image) img {
    position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}

/* Desktop Widths */
.wp-block-columns.match-33 .wp-block-column:has(.wp-block-image) { flex-basis: 33.33% !important; }
.wp-block-columns.match-33 .wp-block-column:not(:has(.wp-block-image)) { flex-basis: 66.66% !important; }
.wp-block-columns.match-50 .wp-block-column { flex-basis: 50% !important; }
.wp-block-columns.match-66 .wp-block-column:has(.wp-block-image) { flex-basis: 66.66% !important; }
.wp-block-columns.match-66 .wp-block-column:not(:has(.wp-block-image)) { flex-basis: 33.33% !important; }


/* =========================================
   10. NUCLEAR MOBILE FIX (Reordering System)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. CONTAINER: Use Flex Column so we can reorder items */
    body .wp-block-columns.match-33,
    body .wp-block-columns.match-50,
    body .wp-block-columns.match-66,
    body .wp-block-columns.force-split,
    body .wp-block-columns.force-boxed {
        display: flex !important; 
        flex-direction: column !important; /* Stack Vertically */
        width: 100% !important;
        margin: 0 !important; gap: 0 !important; padding: 0 !important;
    }

    /* 2. REORDERING: Force Image Column to ALWAYS be first (Top) */
    /* This solves the "Double Image" issue by forcing Image -> Text order */
    body .wp-block-columns.match-33 .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.match-50 .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.match-66 .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.force-split .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.force-boxed .wp-block-column:has(.wp-block-image) {
        order: -1 !important; 
    }

    /* 3. TEXT COLUMN: Padding & Background */
    body .wp-block-columns.match-33 .wp-block-column:not(:has(.wp-block-image)),
    body .wp-block-columns.match-50 .wp-block-column:not(:has(.wp-block-image)),
    body .wp-block-columns.match-66 .wp-block-column:not(:has(.wp-block-image)),
    body .wp-block-columns.force-split .wp-block-column:not(:has(.wp-block-image)) {
        display: block !important;
        width: 100% !important;
        padding: 30px 20px !important; 
        margin-top: 0 !important;
        background: #fff !important; 
        z-index: 10 !important; 
        order: 2 !important; /* Force Text to be second */
    }

    /* 4. IMAGE COLUMN: The "Solid Box" Technique */
    body .wp-block-columns.match-33 .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.match-50 .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.match-66 .wp-block-column:has(.wp-block-image),
    body .wp-block-columns.force-split .wp-block-column:has(.wp-block-image) {
        display: block !important;
        width: 100% !important;
        height: 350px !important; /* Forces visible height */
        min-height: 350px !important;
        margin-bottom: 0 !important; /* No gap between img and text */
        position: relative !important;
        padding: 0 !important;
        overflow: hidden !important; 
    }

    /* 5. THE IMAGE: Fill the Solid Box */
    body .wp-block-columns.match-33 img,
    body .wp-block-columns.match-50 img,
    body .wp-block-columns.match-66 img,
    body .wp-block-columns.force-split img {
        position: absolute !important; 
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
    }
}


/* =========================================
   11. BACKEND EDITOR VISIBILITY
   ========================================= */
.editor-styles-wrapper .wp-block-columns.force-split,
.editor-styles-wrapper .wp-block-columns.match-33,
.editor-styles-wrapper .wp-block-columns.match-50,
.editor-styles-wrapper .wp-block-columns.match-66 {
    padding: 0 !important; margin-bottom: 0 !important;
}

/* Force images to show in editor */
.editor-styles-wrapper .wp-block-columns.force-split .wp-block-column:has(.wp-block-image),
.editor-styles-wrapper .wp-block-columns.match-33 .wp-block-column:has(.wp-block-image),
.editor-styles-wrapper .wp-block-columns.match-50 .wp-block-column:has(.wp-block-image),
.editor-styles-wrapper .wp-block-columns.match-66 .wp-block-column:has(.wp-block-image) {
    min-height: 400px !important; background-color: #eee; display: block !important;
}

/* =========================================
   BACK TO TOP (SKETCH STYLE)
   ========================================= */
.back-to-top{
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border: 2px solid rgba(30,30,30,.55);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
}
.back-to-top::before{
    content:"";
    position:absolute;
    inset: 4px;
    border-radius: 12px;
    border: 1.5px dashed rgba(30,30,30,.35);
    transform: rotate(-1.5deg);
    pointer-events:none;
}
.back-to-top.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover{
    transform: translateY(-2px);
}
.back-to-top .btt-icon{
    color: rgba(25,25,25,.9);
}


/* =========================================
   FOOTER (WIDGET READY) — CALIDS STYLE
   ========================================= */
.site-footer{
    background: var(--calids-footer-bg);
    color: var(--calids-footer-text);
    border-top: 1px solid rgba(0,0,0,.06);
}
.site-footer .footer-inner{
    max-width: 19px;
    margin: 0 auto;
    padding: 46px 22px 22px;
}
.footer-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 36px;
    align-items: start;
}
.footer-title, .footer-widget-title{
    color: var(--calids-footer-title);
    font-family: var(--calids-menu-font);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    margin: 0 0 12px;
}
.footer-tagline{
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(20,20,20,.55);
}
.site-footer address{
    font-style: normal;
    line-height: 1.7;
    margin: 6px 0 12px;
}
.footer-quote-text{
    font-family: var(--calids-heading-font);
    font-style: italic;
    color: rgba(20,20,20,.55);
    line-height: 1.7;
    margin: 0;
}
.footer-bottom{
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 18px 22px;
    text-align: center;
    font-size: 12px;
    color: rgba(20,20,20,.55);
}
@media (max-width: 900px){
    .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
    .footer-grid{ grid-template-columns: 1fr; }
    .site-footer .footer-inner{ padding-top: 50px; }
}
/* Remove border-left divider */
.site-footer .footer-col { border-left: none !important; }

/* Custom length divider */
.site-footer .footer-col + .footer-col{
  position: relative;
}
.site-footer .footer-col + .footer-col::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;      /* adjust */
  bottom:10px;   /* adjust */
  width:1px;
  background: rgba(0,0,0,.10);
}



/* =========================================================
   v6.3 Calids.com-inspired thin typography + footer background
   ========================================================= */

/* Global typography */
body{
    font-family: var(--calids-body-font);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--calids-heading-font);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Header logo: ensure it always shows and matches minimalist style */
.site-logo .custom-logo{
    max-height: 62px;
    width: auto;
    opacity: .92;
}
.site-logo img{
    display: block;
}
.site-logo .text-logo{
    font-weight: 300;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Menu: thinner like calids.com */
.main-navigation a{
    font-weight: 300 !important;
    letter-spacing: 0.22em !important;
    color: rgba(0,0,0,.68);
}
.main-navigation a:hover{
    color: rgba(0,0,0,.92);
}

/* Footer background + clean layout */
.site-footer{
    background: var(--calids-footer-bg);
    border-top: 1px solid rgba(0,0,0,.06);
}
.site-footer .footer-inner{
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px 30px;
}
.footer-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 0;
    align-items: start;
}
.footer-col{
    padding: 0 28px;
}
.footer-col + .footer-col{
    border-left: 1px solid rgba(0,0,0,.08);
}
.footer-title{
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 12px;
    color: rgba(0,0,0,.55);
    margin-bottom: 14px;
}
.site-footer p, .site-footer address, .site-footer a{
    font-weight: 300;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(0,0,0,.55);
}
.footer-logo .custom-logo{
    max-height: 78px;
    opacity: .75;
}
.footer-tagline{
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-top: 10px;
}
.footer-quote-text{
    font-style: italic;
    color: rgba(0,0,0,.50);
    font-size: 13px;
    line-height: 1.7;
}

/* Footer bottom */
.footer-bottom{
    border-top: 1px solid rgba(0,0,0,.06);
    background: transparent;
    padding: 18px 0;
}
.footer-bottom p{
    text-align: center;
    margin: 0;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(0,0,0,.42);
}

/* Responsive footer */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-col{ padding: 18px 0; border-left: 0 !important; border-top: 1px solid rgba(0,0,0,.08); }
  .footer-col:first-child{ border-top: 0; }
}


/* =========================================================
   v6.4 Fix: desktop logo visibility + Calids-like thin type + footer T/A/E rows
   ========================================================= */

/* Make sure logo always shows on desktop */
.site-logo{
  display:flex !important;
  align-items:center;
  min-width: 180px;
}
.site-logo a.custom-logo-link{ display:flex; align-items:center; }
.site-logo a.custom-logo-link img{ display:block; }

/* Thinner typography (Calids-like) */
body{ font-weight: 300; }
p, li, a{ font-weight: 300; }
.main-navigation a{ font-weight: 300 !important; letter-spacing: .24em !important; }
h1,h2,h3,h4,h5,h6{ font-weight: 200; }

/* Footer contact rows like: T: / A: / E: */
.calids-footer-rows{ display:flex; flex-direction:column; gap: 10px; }
.calids-footer-row{ display:flex; gap: 10px; align-items:flex-start; }
.calids-footer-row .calids-footer-label{
  width: 22px;
  flex: 0 0 22px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}
.calids-footer-row .calids-footer-value{
  flex: 1 1 auto;
}


/* =========================================================
   v6.5 Desktop header parity with calids.com
   ========================================================= */
.site-header{
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.header-inner{
    max-width: 1600px;
    padding: 0 56px;
}
.site-logo img, .custom-logo{
    max-height: 72px;
    opacity: .85;
}
.main-navigation ul{
    gap: 34px;
}
.main-navigation a{
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.20em !important;
    color: rgba(0,0,0,.8);
    position: relative;
}
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a{
    color: rgba(0,0,0,.82);
}
.main-navigation li.current-menu-item > a::after,
.main-navigation li.current_page_item > a::after,
.main-navigation a:hover::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:1px;
    background: rgba(0,0,0,.28);
    transform: scaleX(1);
}
.main-navigation a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:1px;
    background: rgba(0,0,0,.0);
    transform: scaleX(0);
    transition: transform .2s ease, background .2s ease;
}
.main-navigation a:hover::after{
    background: rgba(0,0,0,.50);
    transform: scaleX(1);
}

/* =========================================================
   v6.5 Footer: reduce height + rows like calids.com
   ========================================================= */
.site-footer .footer-inner{
    padding: 42px 40px 18px; /* reduced height */
}
.footer-grid{
    grid-template-columns: 1fr 1.2fr 1.2fr 1fr; /* closer to calids.com proportions */
}
.footer-col{
    padding: 0 22px;
}
.footer-col + .footer-col{
    border-left: 1px solid rgba(0,0,0,.10);
}
.footer-logo .custom-logo{
    max-height: 70px;
}

/* T/A/E rows helper (works inside widgets too) */
.calids-footer-rows{ display: grid; gap: 10px; }
.calids-footer-row{ display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: start; }
.calids-footer-label{
    font-weight: 400;
    color: rgba(0,0,0,.55);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
}
.calids-footer-value{
    color: rgba(0,0,0,.55);
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Footer bottom tighter */
.footer-bottom{ padding: 14px 0; }


/* =========================================================
   v6.5.1 Footer fix: neutralize legacy footer grid rules
   - Prevent footer-inner from becoming a grid container
   - Remove legacy padding that causes extra height
   ========================================================= */
.site-footer{
    padding: 0 !important; /* legacy theme had padding on footer element */
}
.site-footer .footer-inner{
    display: block !important; /* legacy theme set this to grid, which squeezes widgets */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}
.site-footer .footer-grid{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   v6.6 Calids.com footer typography tuning
   ========================================================= */
.site-footer .footer-contact,
.site-footer .footer-contact p,
.site-footer .footer-contact a{
    font-family: var(--calids-menu-font);
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    line-height: 1.7;
}
.site-footer .footer-contact p{ margin: 0 0 10px; }
.site-footer .footer-contact a{ text-decoration: none; }

.site-footer .footer-quote,
.site-footer .footer-quote p,
.site-footer .footer-quote a{
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 300;
}

.site-footer .footer-brand p{
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 300;
    color: rgba(20,20,20,.55);
}

.site-footer .footer-grid{ align-items: center; }


/* --- Calids footer tweaks (v6.6.1) --- */
.site-footer .footer-contact,
.site-footer .footer-contact p,
.site-footer .footer-contact address{
  color: #3a3a3a;
}

.site-footer .footer-contact strong,
.site-footer .footer-contact b{
  font-weight: 600; /* thicker fold for T/A/E labels */
  color: #222;
}

/* if label is its own paragraph, keep it compact */
.site-footer .footer-contact p{
  line-height: 1.55;
}

/* Slogan/quote block should be Roboto (non-italic) like calids.com */
.site-footer .footer-quote,
.site-footer .footer-quote p,
.site-footer .footer-quote .footer-quote-text,
.site-footer .footer-quote em,
.site-footer .footer-quote i{
  font-family: Roboto, sans-serif;
  font-style: normal !important;
  color: #3a3a3a;
}

/* slightly darker dividers for readability */
.site-footer .footer-grid{
  border-top-color: rgba(0,0,0,.12);
}
.site-footer .footer-col{
  border-left-color: rgba(0,0,0,.12);
}


/* --- Calids footer meta style match --- */
.site-footer{
  background: #faf8f7;
}
.site-footer .footer-contact,
.site-footer .footer-contact p,
.site-footer .footer-contact a,
.site-footer .footer-contact address{
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #2b2b2b;
  line-height: 20px;
}
.site-footer .footer-contact p{
  margin-bottom: 9px;
}
.site-footer .footer-contact p:first-of-type{
  margin-top: 0;
}


/* Footer slogan/quote: Roboto, normal case like calids.com */
.site-footer .footer-quote,
.site-footer .footer-quote p{
  font-family: Roboto, sans-serif !important;
  font-style: normal !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #2b2b2b;
}


/* --- Footer visual parity fixes (v6.6.3) --- */
.site-footer{
  background: #faf8f7 !important;
}
.site-footer .footer-inner,
.site-footer .footer-grid{
  background: transparent !important;
}

/* consistent partition lines */
.site-footer .footer-grid{
  border-top: 1px solid rgba(0,0,0,.10);
  align-items: stretch;
}
.site-footer .footer-col{
  border-left: 1px solid rgba(0,0,0,.10);
}
.site-footer .footer-col:first-child{
  border-left: none;
}

/* last widget (slogan) should be regular + slightly larger, non-italic */
.site-footer .footer-quote,
.site-footer .footer-quote p,
.site-footer .footer-quote em,
.site-footer .footer-quote i,
.site-footer .footer-quote strong,
.site-footer .footer-quote b{
  font-style: normal !important;
  font-weight: 300 !important;
  font-family: Roboto, sans-serif !important;
  font-size: 16px;
  line-height: 20px;
  color: #2b2b2b;
}


/* --- Footer: remove top divider line (v6.6.4) --- */
.site-footer .footer-grid{
  border-top: none !important;
}

/* Footer: force stacking on small screens (put at END of style.css) */
@media (max-width: 980px){
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
  }

  .site-footer .footer-col{
    padding: 18px 0 !important;
    border-left: 0 !important;
  }

  /* optional: keep the meta text readable on small widths */
  .site-footer .footer-contact,
  .site-footer .footer-contact p,
  .site-footer .footer-contact a,
  .site-footer .footer-contact address{
    letter-spacing: .12em !important; /* was .25em */
  }
}
/* Remove vertical divider lines between footer widgets */
.site-footer .footer-col + .footer-col{
  border-left: 0 !important;
}

.site-footer .footer-col + .footer-col::before{
  content: none !important;
  display: none !important;
}
/* =========================================
   101. TRUE PARALLAX (JS + CSS)
   ========================================= */

/* 1. Unlock Scroll (Crucial) */
body.home, body.home #site-content {
    overflow: visible !important;
}

/* 2. The Slider (Background Layer) */
/* We fix it to the viewport, but we will move it with JS */
.parallax-hero {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh !important;
    z-index: 0; /* Stays behind */
    margin: 0 !important;
    will-change: transform; /* Optimizes painting for smoothness */
    object-fit: cover;
}

/* 3. The Content (Foreground Layer) */
/* We push the content down 100vh so the slider is visible */
body.home #site-content {
    position: relative;
    z-index: 10;
}

/* This creates the transparent gap for the slider */
.parallax-spacer {
    height: 100vh;
    width: 100%;
    background: transparent;
    pointer-events: none;
}

/* 4. The Curtain (Solid White Content) */
/* Everything AFTER the spacer must be white and on top */
.parallax-spacer ~ * {
    background-color: #ffffff;
    position: relative;
    z-index: 20;
    box-shadow: none; /* Optional shadow */
}

/* 5. Mobile Reset (Disable on phones for battery/performance) */
@media (max-width: 768px) {
    .parallax-hero {
        position: relative !important;
        height: auto !important;
        min-height: 500px;
    }
    .parallax-spacer {
        display: none;
    }
}


/* =========================================
   PORTFOLIO UPGRADE (Filters + Masonry + Lightbox + Gallery)
   (Merged from Minimal Modern Portfolio)
   ========================================= */

/* Ensure portfolio image wrappers can host overlay + lightbox button */
.portfolio-card .img-wrap,
.portfolio-item .img-wrap {
    position: relative;
    border-radius: 16px;
}

/* Portfolio cards: subtle lift + shadow */
.portfolio-item { transition: transform .22s ease, box-shadow .22s ease; }
.portfolio-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.portfolio-item a { display: block; text-decoration: none; color: inherit; }

/* =========================================
   PORTFOLIO FILTERS (Category-wise)
   ========================================= */
.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px 0 10px;
}

.portfolio-filter {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    color: #222;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.portfolio-filter:hover {
    transform: translateY(-1px);
    border-color: rgba(0,0,0,.28);
}

.portfolio-filter.is-active {
    background: #111;
    border-color: #111;
    color: #fff;
}

.portfolio-item.is-hidden { display: none; }

/* Pagination fallback (noscript) */
.portfolio-pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0 80px;
}

.portfolio-pagination .page-numbers {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 10px;
    text-decoration: none;
    color: #222;
    margin: 0 6px;
}

.portfolio-pagination .page-numbers.current {
    background: #111;
    border-color: #111;
    color: #fff;
}

.portfolio-empty {
    text-align: center;
    padding: 50px 0;
    color: #666;
}

/* =========================================
   PORTFOLIO SINGLE (Modern)
   ========================================= */
.portfolio-single-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 90px;
}

.portfolio-back {
    display: inline-block;
    margin: 10px 0 18px;
    text-decoration: none;
    color: #222;
    opacity: .7;
}

.portfolio-back:hover { opacity: 1; }

.portfolio-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.portfolio-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    color: #222;
}

.portfolio-chip:hover { border-color: rgba(0,0,0,.28); }

.portfolio-related {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* =========================================
   LIGHTBOX (No plugin) + Thumbnails + Arrows
   ========================================= */
body.calids-lightbox-open { overflow: hidden; }

/* Hide helper links used only to group images for lightbox navigation */
.calids-hidden-lightbox-link { display: none !important; }

.portfolio-lightbox-trigger {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.22);
    transition: background-color .18s ease, transform .18s ease;
}

.portfolio-lightbox-trigger:hover {
    background: rgba(0,0,0,.75);
    transform: translateY(-1px);
}

/* Core lightbox overlay */
.calids-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

.calids-lightbox-overlay.is-open { display: block; }

.calids-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
}

.calids-lightbox-dialog {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
}

.calids-lightbox-image {
    max-width: min(1200px, 92vw);
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    background: #111;
}

.calids-lightbox-close,
.calids-lightbox-prev,
.calids-lightbox-next {
    position: absolute;
    top: 20px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.calids-lightbox-close { right: 20px; font-size: 24px; line-height: 1; }
.calids-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.calids-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; }

.calids-lightbox-prev[disabled],
.calids-lightbox-next[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.calids-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    max-width: min(900px, 86vw);
    text-align: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.92);
    font-size: 14px;
    letter-spacing: .02em;
}

/* Lightbox thumbnails strip */
.calids-lightbox-thumbs {
    position: absolute;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);
    max-width: min(1000px, 92vw);
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.32);
    backdrop-filter: blur(6px);
    scrollbar-width: none;
}

.calids-lightbox-thumbs::-webkit-scrollbar { display: none; }

.calids-lightbox-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: transparent;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: .65;
    transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}

.calids-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.calids-lightbox-thumb:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.calids-lightbox-thumb.is-active {
    opacity: 1;
    border-color: rgba(255,255,255,.55);
}

@media (max-width: 768px) {
    .calids-lightbox-thumbs { bottom: 58px; gap: 8px; padding: 6px 8px; }
    .calids-lightbox-thumb { width: 48px; height: 36px; border-radius: 10px; }
}

/* =========================================
   PORTFOLIO MASONRY (Pinterest-style)
   ========================================= */
.portfolio-grid--masonry {
    display: block;
    column-count: 4;
    column-gap: 28px;
}

@media (max-width: 1400px) {
    .portfolio-grid--masonry { column-count: 3; column-gap: 26px; }
}

@media (max-width: 1100px) {
    .portfolio-grid--masonry { column-count: 2; column-gap: 22px; }
}

@media (max-width: 700px) {
    .portfolio-grid--masonry { column-count: 1; column-gap: 0; }
}

.portfolio-grid--masonry .portfolio-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin: 0 0 28px;
}

/* Let images keep their natural height in masonry */
.portfolio-grid--masonry .img-wrap {
    aspect-ratio: auto;
}

.portfolio-grid--masonry .img-wrap img {
    width: 100%;
    height: auto;
}

/* =========================================
   PORTFOLIO ENHANCEMENTS (Overlay + Load More + Motion)
   ========================================= */

/* Hover overlay: "View Project" */
.portfolio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(255,255,255,0.0);
    transition: opacity .22s ease, background-color .22s ease;
    pointer-events: none;
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
    background: rgba(255,255,255,0.10);
}

.portfolio-overlay-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.16);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(8px);
    color: #111;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Load more (replaces pagination on /portfolio) */
.portfolio-loadmore-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 10px 0 90px;
}

.portfolio-loadmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.16);
    background: transparent;
    color: #111;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .18em;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.portfolio-loadmore:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.portfolio-loadmore:active {
    transform: translateY(0);
    box-shadow: none;
}

.portfolio-loadmore[disabled] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.portfolio-loadmore-status {
    font-size: 14px;
    color: #777;
    min-height: 1.2em;
}

/* Smooth reveal for AJAX-loaded items */
.portfolio-item.is-enter { opacity: 0; transform: translateY(14px); }
.portfolio-item.is-enter.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .38s ease, transform .38s ease;
}

/* Placeholder if a project has no image */
.portfolio-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.06));
}

/* =========================================
   PROJECT GALLERY SLIDER + THUMB STRIP
   ========================================= */
.calids-gallery {
    position: relative;
    margin: 26px 0 44px;
}

.calids-gallery-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    scrollbar-width: none;
}

.calids-gallery-track::-webkit-scrollbar { display: none; }

.calids-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.calids-gallery-slide a {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: #f3f3f3;
    aspect-ratio: 16 / 10;
}

.calids-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.calids-gallery-slide a:hover img { transform: scale(1.02); }

.calids-gallery-prev,
.calids-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.82);
    color: #111;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.calids-gallery-prev { left: 16px; }
.calids-gallery-next { right: 16px; }

.calids-gallery-prev[disabled],
.calids-gallery-next[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.calids-gallery-counter {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px);
    font-size: 13px;
    color: #111;
}

@media (max-width: 768px) {
    .calids-gallery-prev,
    .calids-gallery-next {
        width: 40px;
        height: 40px;
    }

    .calids-gallery-slide a {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
}

/* Thumbnail strip */
.calids-gallery-thumbs {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.calids-gallery-thumbs::-webkit-scrollbar { display: none; }

.calids-gallery-thumb {
    flex: 0 0 auto;
    width: 88px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.14);
    background: #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
    opacity: .75;
}

.calids-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.calids-gallery-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    opacity: 1;
}

.calids-gallery-thumb.is-active {
    opacity: 1;
    border-color: rgba(0,0,0,.35);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

@media (max-width: 768px) {
    .calids-gallery-thumb { width: 76px; height: 54px; border-radius: 12px; }
}