﻿/* myDigiCard - Public Card 01-25 production layout consistency
   Applies one card rail, compact section rhythm, consistent minimum section
   sizing and shared gallery lightbox styling while preserving each template's
   own colours, typography and visual identity. Content is never clipped. */

:root {
    --dvc-uniform-width: 480px;
    --dvc-uniform-side-gap: 18px;
    --dvc-uniform-section-padding: 16px;
    --dvc-uniform-section-gap: 10px;
}

/* ------------------------------------------------------------------
   ONE WIDTH / RAIL FOR TEMPLATES 01-10
   ------------------------------------------------------------------ */
body.dvc-public-card :is( #home, .card, .card2, .share-section, .modern-share, .qr-section, .social-media-card, .social-card, .dvc-premium-social, .dvc-advanced-wrap, .dvc-brand-footer, #mdc-commerce, .mdc-commerce ) {
    width: min(calc(100% - var(--dvc-uniform-side-gap)), var(--dvc-uniform-width)) !important;
    max-width: var(--dvc-uniform-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Compact, consistent vertical rhythm. Old templates use different margins;
   normalize them here instead of maintaining 10 template-specific values. */
body.dvc-public-card :is( #home, .card, .card2, .share-section, .modern-share, .qr-section, .social-media-card, .social-card, .dvc-premium-social, .dvc-advanced-wrap, .dvc-brand-footer, #mdc-commerce, .mdc-commerce ) {
    margin-top: 0 !important;
    margin-bottom: var(--dvc-uniform-section-gap) !important;
}

/* v29: removed forced minimum-height rule 1; original theme owns its height. */

/* v29: removed forced minimum-height rule 2; original theme owns its height. */

/* ------------------------------------------------------------------
   ONE WIDTH / RAIL FOR TEMPLATES 11-25
   ------------------------------------------------------------------ */
body.dvcx :is( .dvcx-hero, .dvcx-top-actions, .dvcx-section, .dvc-premium-social, .dvc-advanced-wrap, .dvcx-footer, .dvc-brand-footer, #mdc-commerce, .mdc-commerce ) {
    width: min(calc(100% - var(--dvc-uniform-side-gap)), var(--dvc-uniform-width)) !important;
    max-width: var(--dvc-uniform-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body.dvcx :is( .dvcx-hero, .dvcx-top-actions, .dvcx-section, .dvc-premium-social, .dvc-advanced-wrap, .dvcx-footer, .dvc-brand-footer, #mdc-commerce, .mdc-commerce ) {
    margin-top: 0 !important;
    margin-bottom: var(--dvc-uniform-section-gap) !important;
}

/* v29: removed forced minimum-height rule 3; original theme owns its height. */

/* v29: removed forced minimum-height rule 4; original theme owns its height. */

/* Remove wrapper-level double spacing where the premium shell already uses
   grid/flex gaps. */
body.dvcx :is(.dvcx-main, .dvcx-content, .dvcx-sections) {
    gap: var(--dvc-uniform-section-gap) !important;
    row-gap: var(--dvc-uniform-section-gap) !important;
}

/* Advanced cards (Business Hours, Appointment, Team, Branches, Documents,
   FAQ, Location) keep one full-width column and the same compact rhythm. */
body.dvc-public-card .dvc-advanced-grid,
body.dvcx .dvc-advanced-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--dvc-uniform-section-gap) !important;
    width: 100% !important;
}

body.dvc-public-card .dvc-advanced-card,
body.dvcx .dvc-advanced-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: var(--dvc-uniform-section-padding) !important;
}

/* Keep common section content padding compact without removing template shape. */
body.dvc-public-card :is(.card2, .share-section, .modern-share, .qr-section),
body.dvcx .dvcx-section {
    padding-top: var(--dvc-uniform-section-padding) !important;
    padding-bottom: var(--dvc-uniform-section-padding) !important;
}

/* ------------------------------------------------------------------
   DESIGNATION / POSITION - SAME IDENTITY HIERARCHY ON ALL TEMPLATES
   ------------------------------------------------------------------ */
body.dvc-public-card .dvc-card-designation {
    display: block !important;
    max-width: 100% !important;
    margin: 5px auto 7px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: .015em !important;
    text-align: center !important;
    color: inherit !important;
    opacity: .88 !important;
    overflow-wrap: anywhere !important;
}

body.dvcx .dvcx-role {
    display: block !important;
    margin: 5px 0 6px !important;
    font-weight: 800 !important;
    letter-spacing: .015em !important;
    overflow-wrap: anywhere !important;
}

body.dvc-public-card .dvc-card-position {
    display: block !important;
    max-width: 100% !important;
    margin: -2px auto 7px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: inherit !important;
    opacity: .72 !important;
    overflow-wrap: anywhere !important;
}

body.dvcx .dvcx-position {
    display: block !important;
    margin: -2px 0 6px !important;
    font-size: .92rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    opacity: .76 !important;
    overflow-wrap: anywhere !important;
}

/* Prevent old template rules from forcing narrower child content. */
body.dvc-public-card :is(.card2, .share-section, .qr-section, .dvc-advanced-card) > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Keep media within the shared section dimensions. */
body.dvc-public-card :is(.card2,.dvc-advanced-card) img,
body.dvcx :is(.dvcx-section,.dvc-advanced-card) img {
    max-width: 100% !important;
}

/* Gallery thumbnails use one predictable visual size while retaining the
   native grid of each theme. This also makes every image clearly clickable. */
body.dvc-public-card #gallery img,
body.dvc-public-card .project-gallery img,
body.dvc-public-card #projects .gallery_row img,
body.dvcx #gallery .dvcx-gallery img,
body.dvcx #projects .dvcx-gallery img {
    cursor: zoom-in !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3;
}

/* ------------------------------------------------------------------
   GLOBAL GALLERY LIGHTBOX - TEMPLATES 01-25
   ------------------------------------------------------------------ */
body.dvc-lightbox-open {
    overflow: hidden !important;
    touch-action: none;
}

#dvc-gallery-lightbox[hidden] {
    display: none !important;
}

#dvc-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3, 7, 18, .94);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

    #dvc-gallery-lightbox .dvc-lb-stage {
        position: relative;
        width: min(1120px, 100%);
        height: min(86vh, 900px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #dvc-gallery-lightbox .dvc-lb-image {
        display: block;
        max-width: 100%;
        max-height: calc(86vh - 58px);
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 14px;
        box-shadow: 0 24px 70px rgba(0,0,0,.55);
        user-select: none;
        -webkit-user-drag: none;
    }

    #dvc-gallery-lightbox .dvc-lb-close,
    #dvc-gallery-lightbox .dvc-lb-prev,
    #dvc-gallery-lightbox .dvc-lb-next {
        position: absolute;
        z-index: 2;
        border: 1px solid rgba(255,255,255,.28);
        background: rgba(15, 23, 42, .78);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 8px 26px rgba(0,0,0,.28);
    }

    #dvc-gallery-lightbox .dvc-lb-close {
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 29px;
        line-height: 1;
    }

    #dvc-gallery-lightbox .dvc-lb-prev,
    #dvc-gallery-lightbox .dvc-lb-next {
        top: 50%;
        width: 46px;
        height: 54px;
        transform: translateY(-50%);
        border-radius: 14px;
        font-size: 26px;
    }

    #dvc-gallery-lightbox .dvc-lb-prev {
        left: 0;
    }

    #dvc-gallery-lightbox .dvc-lb-next {
        right: 0;
    }

    #dvc-gallery-lightbox .dvc-lb-caption {
        position: absolute;
        left: 60px;
        right: 60px;
        bottom: 0;
        color: #fff;
        text-align: center;
        font-size: 14px;
        line-height: 1.35;
        text-shadow: 0 2px 10px rgba(0,0,0,.75);
        overflow-wrap: anywhere;
    }

    #dvc-gallery-lightbox .dvc-lb-counter {
        position: absolute;
        top: 10px;
        left: 12px;
        color: rgba(255,255,255,.9);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
    }

    #dvc-gallery-lightbox :is(.dvc-lb-close,.dvc-lb-prev,.dvc-lb-next):focus-visible {
        outline: 3px solid rgba(255,255,255,.92);
        outline-offset: 3px;
    }

@media (max-width: 600px) {
    :root {
        --dvc-uniform-side-gap: 14px;
        --dvc-uniform-section-padding: 14px;
        --dvc-uniform-section-gap: 8px;
    }

    #dvc-gallery-lightbox {
        padding: 10px;
    }

        #dvc-gallery-lightbox .dvc-lb-stage {
            height: 88vh;
        }

        #dvc-gallery-lightbox .dvc-lb-image {
            max-height: calc(88vh - 66px);
            border-radius: 10px;
        }

        #dvc-gallery-lightbox .dvc-lb-close {
            width: 40px;
            height: 40px;
            font-size: 27px;
        }

        #dvc-gallery-lightbox .dvc-lb-prev,
        #dvc-gallery-lightbox .dvc-lb-next {
            width: 40px;
            height: 48px;
            font-size: 22px;
        }

        #dvc-gallery-lightbox .dvc-lb-caption {
            left: 48px;
            right: 48px;
            font-size: 13px;
        }
}

@media (max-height: 520px) and (orientation: landscape) {
    :root {
    }

    #dvc-gallery-lightbox .dvc-lb-stage {
        height: 94vh;
    }

    #dvc-gallery-lightbox .dvc-lb-image {
        max-height: calc(94vh - 42px);
    }
}
