/* ================================
   LAYOUT: VIEWER + TEXT CONTENT
   ================================ */

/* Main viewer wrapper — always 1200px max on desktop */
.dpc-layout-viewer {
    max-width: 1200px;
    margin: 0 auto;
}

/* Titles above the viewer */
h1.dpc-title {
    margin-bottom: 1rem !important;
    text-align: center !important;
}

h3.dpc-subtitle {
    margin-top: -0.5rem !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
}

p.dpc-intro {
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

/* Viewer title */
.dpc-layout-viewer h2.image-title {
    text-align: center;
    margin-bottom: 2rem;
}

/* Main viewer image */
.dpc-layout-viewer .dpc-viewer-image {
    width: 100%;
    max-width: 1200px;
    max-height: 900px;
    object-fit: cover;
    border-radius: 6px;
    text-align: center;
}

p.semi-bold-italic {
    font-weight: 400;
    text-align: center;
    font-style: italic;
    font-size: .9rem;
    margin: 1rem;
}

/* Photography credit */
.dpc-layout-viewer p.dpc-credit {
    text-align: left;
    font-size: 0.8rem;
    opacity: 0.8;
    margin: -1.75rem 0 0 .5rem;
    color: #312d2d;
    text-shadow: 1px 1px #ffffff;
}

/* Description section */
td.dpc-left-side-info {
    width: 50%;
    vertical-align: text-top;
}

.dpc-layout-viewer h3.dpc-description-head {
    text-align: left;
    margin-bottom: 1.5rem;
}

.dpc-layout-viewer p.dpc-description {
    text-align: left;
}

/* Features section */
td.dpc-image-features {
    width: 50%;
    vertical-align: text-top;
}

.dpc-layout-viewer h3.dpc-features-head {
    text-align: left;
    margin-bottom: 1.5rem;
}

.dpc-layout-viewer p.dpc-features {
    text-align: left;
}

.dpc-layout-viewer p.dpc-download,
.dpc-layout-viewer p.dpc-consult a {
    color: #8b0000;
    font-size: 0.9rem;
}

/* ================================
   SLIDER ENGINE (REUSABLE)
   ================================ */

/* Embedded slider shortcode outer wrapper — needs position:relative
   so absolutely-positioned children (arrows) anchor correctly.
   Size class applied by PHP based on slider_size folder meta. */
.dpc-slider-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.dpc-slider-wrap.dpc-size-small  { max-width: 400px; }
.dpc-slider-wrap.dpc-size-medium { max-width: 800px; }
.dpc-slider-wrap.dpc-size-large  { max-width: 1200px; }

/* Slider wrapper — sizing controlled by .dpc-slider-wrap size classes */
.dpc-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Ratio box — height set explicitly by JS (setSliderHeight).
   overflow:hidden clips off-screen slides in slide mode.
   Arrows position relative to this box. */
.dpc-slider-ratio-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Track fills the ratio box absolutely — height inherited from ratio box padding */
.dpc-slider-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Layout slider track — height driven by aspect-ratio since no ratio-box present */
.dpc-slider .dpc-slider-track {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    height: auto;
}

/* Fade mode slides — stacked absolutely, invisible by default */
.dpc-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Active slide — visible, stays absolute to remain in stack */
.dpc-slide.is-active {
    opacity: 1;
    position: absolute;
    pointer-events: auto;
}

/* Slide mode — track overrides absolute positioning, becomes a flex row */
.dpc-slider--slide .dpc-slider-track {
    position: relative;
    inset: auto;
    display: flex;
    width: max-content;
    height: 100%;
    transition: transform 0.6s ease;
}

.dpc-slider--slide .dpc-slide {
    position: relative;
    flex: 0 0 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

/* Caption overlay — renders over bottom of slide when captions enabled */
.dpc-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    z-index: 10;
    box-sizing: border-box;
}

/* Slide images — fill the ratio box perfectly */
.dpc-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Arrows — positioned absolute relative to .dpc-slider-ratio-box */
.dpc-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    z-index: 20;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.dpc-slider-arrow:hover {
    background: rgba(0,0,0,0.65);
}

.dpc-slider-arrow--prev,
.dpc-slider-prev {
    left: 10px;
}

.dpc-slider-arrow--next,
.dpc-slider-next {
    right: 10px;
}

/* Dots — sit below the ratio box */
.dpc-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0 0;
}

.dpc-slider-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: none;
    background: #bbb;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dpc-slider-dot:hover {
    background: #999;
}

.dpc-slider-dot.is-active {
    background: #333;
}

/* ================================
   LIGHTBOX OVERLAY
   ================================ */

/* Full viewport backdrop */
.dpc-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Overlay visible state — toggled by JS */
.dpc-lightbox-overlay.is-open {
    display: flex;
}

/* Centered container — 90% viewport */
.dpc-lightbox-container {
    position: relative;
    width: 90vw;
    height: 90vh;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* Close button — top right corner */
.dpc-lightbox-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.8rem;
    line-height: 1;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    z-index: 10;
}

.dpc-lightbox-close:hover {
    color: #8b0000;
}

/* Lightbox content layout — metadata left, image right */
.dpc-lightbox-content {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Metadata column — 35% */
.dpc-lightbox-meta-col {
    width: 35%;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    border-right: 1px solid #eee;
    box-sizing: border-box;
}

/* Image column — 65% normally, 100% when no metadata present */
.dpc-lightbox-image-col {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Full width image column when no metadata */
.dpc-lightbox-content.no-meta .dpc-lightbox-image-col {
    width: 100%;
}

.dpc-lightbox-content.no-meta .dpc-lightbox-meta-col {
    display: none;
}

/* Image — constrained to column height, maintains aspect ratio */
.dpc-lightbox-img {
    width: 100%;
    max-height: 75vh;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

/* Credit line */
.dpc-lightbox-credit {
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.5rem;
    text-align: right;
    width: 100%;
}

/* Download link */
.dpc-lightbox-download-wrap {
    margin-top: 0.75rem;
    width: 100%;
    text-align: center;
}

.dpc-lightbox-download {
    color: #8b0000;
    font-size: 0.9rem;
    text-decoration: underline;
}

/* Title */
.dpc-lightbox-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
}

/* Section headings */
.dpc-lightbox-desc-head,
.dpc-lightbox-feat-head {
    font-size: 1rem;
    color: #8b0000;
    margin-bottom: 0.5rem;
}

/* Body text */
.dpc-lightbox-description,
.dpc-lightbox-features {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Consultation link */
.dpc-lightbox-consult-wrap a {
    color: #8b0000;
    font-size: 0.9rem;
    text-decoration: underline;
}

/* ================================
   RESPONSIVE BREAKPOINTS
   Desktop / iPad / iPhone
   ================================ */

/* iPad / Tablet (768–1023px) */
@media (max-width: 1023px) {
    .dpc-layout-viewer {
        max-width: 900px;
    }
}

/* iPhone / Mobile (≤ 767px) */
@media (max-width: 767px) {
    .dpc-layout-viewer {
        max-width: 100%;
        padding: 0 1rem;
    }
    .dpc-slider-wrap.dpc-size-small,
    .dpc-slider-wrap.dpc-size-medium,
    .dpc-slider-wrap.dpc-size-large {
        max-width: 100%;
    }
    .dpc-slider-arrow {
        padding: 0.4rem 0.6rem;
    }
    .dpc-slider-dot {
        width: 9px;
        height: 9px;
    }
    /* Lightbox stacks on mobile */
    .dpc-lightbox-content {
        flex-direction: column;
    }
    .dpc-lightbox-image-col,
    .dpc-lightbox-meta-col {
        width: 100%;
    }
    .dpc-lightbox-meta-col {
        border-right: none;
        border-top: 1px solid #eee;
    }
}