/* =====================================================================
   DPC LAYOUT & VIEWER CSS — FULL MODULE REPLACEMENT (FMR)
   VERSION: 4.1.0 — ARCHITECTURE ALIGNED
   =====================================================================

   ARCHITECTURE OVERVIEW
   ----------------------
   This stylesheet governs ALL front-end layout and viewer styling for
   the DPC system. It is intentionally organized into clear sections
   representing each layout type and the shared viewer system.

   The system consists of:

     1. FEATURE LAYOUT
     2. CENTERED LAYOUT
     3. SLIDER LAYOUT
     4. UNIFIED VIEWER (NON‑TILED LAYOUTS)
     5. TILED LAYOUT (SPECIAL CASE — DO NOT MODIFY)
     6. RESPONSIVE RULES

   IMPORTANT:
   ----------
   • The TILED LAYOUT viewer is a grid‑locked, scroll‑managed,
     layout‑specific component. Its CSS MUST remain untouched.
   • The UNIFIED VIEWER applies ONLY to Feature, Centered, Slider,
     and Gallery layouts.
   • Naming conventions remain unchanged to avoid HTML/JS rewrites.
   • All viewer metadata now uses the new metadata architecture:
       title, description, special_features, credit

   ===================================================================== */


/* ============================================================
   FEATURE LAYOUT — FINAL VERSION
   ============================================================ */

section.wp-block-template-part {
    display: none;
}

.dpc-feature-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dpc-feature-support {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 5px;
    align-items: start;
}

.dpc-feature-grid.dpc-four-col-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

a.dpc-download {
    display: block;
    color: darkred !important;
    text-align: center !important;
    font-size: .8rem !important;
    margin-top: 5px;
}

/* Header */
.dpc-feature-header {
    text-align: center;
}

.dpc-feature-title {
    margin: 0 0 10px 0;
}
/*
.dpc-feature-description {
    margin: 0;
    font-size: 1.1rem;
}
*/
p.dpc-feature-description {
    font-size: 1rem !important;
    margin: auto !important;
    width: 60% !important;
    padding-bottom: 20px !important;
}

.dpc-gallery-viewer-right #dpc-viewer-title {
    text-align: left;
    margin: 0 0 10px 0;
}

/* Top block */
.dpc-feature-layout .dpc-feature-top {
    display: grid !important;
    grid-template-columns: 2fr 2fr;
    gap: 20px;
    align-items: start;
}

/* Featured image */
.dpc-feature-layout .dpc-feature-main img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

/* Thumbnails */
.dpc-feature-layout .dpc-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.dpc-feature-layout .dpc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

/* Viewer container */
.dpc-viewer {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dpc-viewer-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dpc-viewer-info h3,
.dpc-viewer-info p {
    margin: 0;
    padding: 0;
    line-height: 1.3;
    font-size: 0.95rem;
}

/* Viewer controls */
.dpc-viewer-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.dpc-viewer-controls button {
    padding: 8px 16px;
    cursor: pointer;
}

/* Two columns under viewer */
.dpc-viewer-text-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.dpc-viewer-col h3 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
}

.dpc-viewer-col p {
    margin: 0;
    line-height: 1.2;
    text-align: left;
    font-size: 1rem;
}

/* Consult button */
div#dpc-consult {
    font-size: .8rem;
}

/* Credit */
div#dpc-viewer-credit {
    opacity: 1;
    text-align: left;
    font-size: 1rem;
    margin: -3rem 2rem 0 .5rem;
    color: black;
    text-shadow: 1px 1px #ffffff;
}

.dpc-hidden {
    display: none !important;
}


/* ============================================================
   CENTERED LAYOUT
   ============================================================ */

.dpc-centered-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dpc-centered-viewer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.dpc-centered-viewer-container .dpc-viewer {
    width: 100%;
}

.dpc-centered-layout .dpc-feature-grid {
    max-width: 1200px;
    margin: 0 auto;
}


/* ============================================================
   SLIDER LAYOUT
   ============================================================ */

/* Outer layout wrapper */
.dpc-slider-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Page header */
.dpc-slider-layout .dpc-page-title {
    text-align: center;
    margin: 0 0 5px 0;
}

.dpc-slider-layout .dpc-page-description {
    text-align: center;
    margin: 0 0 15px 0;
    font-size: 1.05rem;
}

/* Two-column wrapper */
.dpc-slider-columns {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

/* LEFT COLUMN — slider (40%) */
.dpc-slider-col-left {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* RIGHT COLUMN — viewer (60%) */
.dpc-slider-col-right {
    flex: 0 0 60%;
    max-width: 60%;
}

/* Click instruction text */
.dpc-instruction {
    font-size: 0.85rem;
    color: #555;
    font-style: italic;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}
/* Desktop instruction visible, mobile instruction hidden by default */
.dpc-instruction-desktop {
    display: block;
}

.dpc-instruction-mobile {
    display: none;
}

/* Viewer image fills right column */
.dpc-slider-col-right .dpc-viewer-image-wrap {
    width: 100%;
    margin-bottom: 15px;
}

.dpc-slider-col-right .dpc-viewer-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ============================================================
   UNIFIED VIEWER (NON‑TILED LAYOUTS)
   ============================================================ */

#dpc-viewer,
.dpc-viewer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Viewer image */
#dpc-viewer img,
.dpc-viewer img,
.dpc-viewer-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Title */
#dpc-viewer-title,
.image-title {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
}

/* Column Headers */
.tile-dpc-viewer-col h3 {
    font-size: 1.1rem;
}

/* Text columns */
.dpc-viewer-text-columns,
#dpc-viewer-text-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

/* Headings */
.dpc-viewer-col h3,
.dpc-description-head,
.dpc-features-head {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: left;
    margin: 0 0 5px 0;
}

/* Body text (supports nl2p) */
#dpc-viewer-description,
#dpc-viewer-special-features,
#dpc-viewer-description p,
#dpc-viewer-special-features p,
.dpc-description p,
.dpc-features p {
    line-height: 1.1;
    /*font-size: 0.8rem;*/
    text-align: left;
}

/* Consult link */
#dpc-consult,
.dpc-consult {
    margin-top: 10px;
    font-size: 0.9rem;
}

#dpc-consult a,
.dpc-consult a {
    color: darkred;
    text-decoration: underline;
}

/* Credit */
#dpc-viewer-credit,
.dpc-credit {
    text-align: left;
    font-size: 1Rem;
    opacity: 1;
    color: black;
    margin: -2.5rem 0 0 .5rem;
    text-shadow: 1px 1px #ffffff;
}

/* ============================================================
   GALLERY LAYOUT
   ============================================================ */

.dpc-gallery-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dpc-gallery-layout .dpc-gallery-title {
    text-align: center;
    margin: 0 0 5px 0;
}

.dpc-gallery-layout .dpc-gallery-description {
    text-align: center;
    margin: 0 0 10px 0;
    font-size: 1.05rem;
}

.dpc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 5px;
}

.dpc-gallery-grid .dpc-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f2;
    cursor: pointer;
}

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

/* Two-column viewer — overrides unified viewer flex */
.dpc-gallery-viewer.dpc-viewer {
    display: grid !important;
    grid-template-columns: 60% 40%;
    gap: 2rem;
    align-items: start;
}

/* GALLERY-FULL-WIDTH: single column when no description or special features present */
.dpc-gallery-viewer.dpc-viewer.dpc-viewer--no-text {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dpc-gallery-viewer.dpc-viewer.dpc-viewer--no-text .dpc-gallery-viewer-left {
    width: 100% !important;
    max-width: 100% !important;
}

.dpc-gallery-viewer.dpc-viewer.dpc-viewer--no-text .dpc-gallery-viewer-left img {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

.dpc-gallery-viewer.dpc-viewer.dpc-viewer--no-text .dpc-gallery-viewer-right {
    display: none !important;
}

.dpc-gallery-viewer-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dpc-gallery-viewer-left img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.dpc-gallery-viewer-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 767px) {
    .dpc-gallery-viewer.dpc-viewer {
        gap: 1rem;
    }
}

/* ============================================================
   TILED LAYOUT (DO NOT MODIFY)
   ============================================================ */

.dpc-tiled-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    gap: 5px;
    background-color: #d8d4cc;
    margin: 0 auto;
    align-items: stretch;
    justify-items: stretch;
    grid-auto-flow: row;
}

.dpc-tiled-grid .tile {
    aspect-ratio: 4 / 3;
    min-height: 0;
    box-sizing: border-box;
    object-fit: cover;
    position: relative;
}

/* Viewer tile */
.tile.VIEWER {
    grid-column: 2 / span 3;
    grid-row: 2 / span 3;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

#dpc-viewer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile.VIEWER #dpc-viewer {
    position: relative !important;
    gap: 0 !important;
}

.tile.VIEWER-DATA {
    grid-column: 2 / span 3;
    grid-row: 5;
    aspect-ratio: auto;
    overflow: hidden;
    background-color: white;
}

.tile.VIEWER-DATA .viewer-data-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0 .2rem;
}

/* Credit overlay — absolutely positioned over bottom of viewer image */
.tile-viewer-credit-overlay {

    text-align: left;
    font-size: 1Rem;
    opacity: 1;
    color: black;
    margin: -2.5rem 0 0 .5rem;
    text-shadow: 1px 1px #ffffff;
        position: absolute;
    bottom: 5px;
    left: 8px;
    pointer-events: none;
}

.tile-dpc-viewer-text-columns {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    max-height: 18vh;
}

.tile-dpc-viewer-col {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    font-size: 0.8rem;
    padding-right: 4px;
}

.tile-dpc-viewer-col p,
.tile-dpc-viewer-col #dpc-viewer-description p,
.tile-dpc-viewer-col #dpc-viewer-special-features p {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0 !important;
}

a#dpc-viewer-download {
    display: block;
    margin-top: 5px;
    color: darkred !important;
    text-align: center !important;
    font-size: 0.8rem !important;
}

@media (max-width: 1024px) {
    .tile-dpc-viewer-col {
        font-size: 0.72rem;
    }
    .tile-dpc-viewer-text-columns {
        max-height: 12vh;
    }
}

span#dpc-viewer-credit {
    text-align: left;
    font-size: 1Rem;
    opacity: 1;
    color: black;
    margin: -2.5rem 0 0 .5rem;
    text-shadow: 1px 1px #ffffff;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE BEHAVIOR
   ============================================================ */

@media (max-width: 1024px) {
    .dpc-four-col-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Tablet: shift to 50/50 split */
    .dpc-slider-col-left {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .dpc-slider-col-right {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    /*
    .dpc-four-col-grid {
        grid-template-columns: repeat(2, 1fr);
    }*/
    /* Gallery thumbnail grid — 3 columns on mobile */
    .dpc-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Maintain two-column layout — reduce gap only */
    .dpc-viewer-text-columns,
    #dpc-viewer-text-columns {
        gap: 10px;
    }

    /* Viewer title */
    #dpc-viewer-title,
    .image-title {
        font-size: .9rem;
        margin: .1rem !important;
    }

    /* Section headings */
    .dpc-description-head,
    .dpc-features-head,
    .dpc-viewer-col h3 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    /* Body text */
    #dpc-viewer-description,
    #dpc-viewer-special-features,
    .dpc-viewer-col p {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    /* Credit */
    #dpc-viewer-credit,
    span#dpc-viewer-credit {
        font-size: 0.5rem;
        margin-top: -2rem;
    }

    /* Slider credit — needs less negative margin than other layouts */
    #dpc-viewer-credit.dpc-credit-slider {
        margin: -1rem 0 0 .5rem !important;
    }

    /* Download link — !important required to override base rule */
    a#dpc-viewer-download {
        font-size: 0.6rem !important;
        margin: .1rem;
    }

    .dpc-viewer-controls {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    /* Prev / Next buttons */
    .dpc-viewer-controls button {
        font-size: 0.4rem;
        padding: 0.3rem 0.6rem;
    }

    /* Page header */
    .dpc-feature-title,
    .dpc-gallery-title,
    .dpc-page-title {
        font-size: 1.2rem;
    }

    .dpc-feature-description,
    .dpc-gallery-description,
    .dpc-page-description {
        font-size: 0.85rem;
    }

    /* Mobile: stack slider columns vertically */
    .dpc-slider-columns {
        flex-direction: column;
    }

    .dpc-slider-col-left,
    .dpc-slider-col-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #dpc-consult a, .dpc-consult a {
        color: darkred !important;
        text-decoration: underline;
        font-size: .5rem !important;
    }

    .dpc-instruction {
        font-size: 0.6rem;
        color: #555;
        font-style: italic;
        margin: .4rem;
        text-align: center;
        line-height: 1.1;
    }

    span#dpc-viewer-credit {
        text-align: left;
        font-size: .6rem;
        opacity: 1;
        color: black;
        margin: -1.8rem 0 0 .5rem;
        text-shadow: 1px 1px #ffffff;
        pointer-events: none;
    }

    /* Swap instruction variants on mobile */
    .dpc-instruction-desktop {
        display: none;
    }

    .dpc-gallery-layout .dpc-gallery-title {
        text-align: center;
        margin: 0;
        font-size: 1.1rem;
    }

    .dpc-gallery-layout .dpc-gallery-description {
        text-align: center;
        margin: 0;
        font-size: .8rem;
        line-height: 1.1;
    }

h2#dpc-viewer-title {
    font-size: .9rem;
}

    .dpc-viewer-col h3, .dpc-description-head, .dpc-features-head {
        font-size: .7rem !important;
        font-weight: 500;
        text-align: left;
        margin: .1rem !important;
    }

    .dpc-instruction-mobile {
        display: block;
    }

/* TILED VIEWER-DATA — mobile text sizing */
    .tile-dpc-viewer-col h3 {
        font-size: .6rem;
    }

    .tile-dpc-viewer-col {
        font-size: 0.65rem;
    }

    .tile.VIEWER-DATA a#dpc-viewer-download {
        font-size: 0.35rem !important;
        margin: 0 !important;
    }

    h2#dpc-viewer-title {
    font-size: .8rem !important;
    }

    h2#dpc-viewer-title.tile-dpc-viewer-title {
        font-size: 0.5rem !important;
        margin: 0 !important;
    }

    p.dpc-feature-description {
    font-size: .8rem !important;
    line-height: 1.2 !important;
}

    .tile.VIEWER-DATA .tile-dpc-viewer-col h3 {
        font-size: 0.4rem !important;
        margin: 0 !important;
    }

    .tile.VIEWER-DATA #dpc-viewer-description,
    .tile.VIEWER-DATA #dpc-viewer-special-features,
    .tile.VIEWER-DATA #dpc-viewer-description p,
    .tile.VIEWER-DATA #dpc-viewer-special-features p {
        font-size: 0.35rem !important;
        line-height: 1.1 !important;
    }

    .tile.VIEWER-DATA #dpc-consult a {
        font-size: 0.35rem !important;
    }

    /* Body text (supports nl2p) */
    #dpc-viewer-description,
    #dpc-viewer-special-features,
    #dpc-viewer-description p,
    #dpc-viewer-special-features p,
    .dpc-description p,
    .dpc-features p {
        line-height: 1.1 !important;
        font-size: 0.5rem !important;
        text-align: left;
    }

.tile-dpc-viewer-text-columns {
        display: flex;
        flex-direction: row;
        flex: 1;
        gap: 10px;
        min-height: 0;
        overflow: hidden;
        max-height: 5vh;
    }

    .tile.VIEWER-DATA {
        height: 100%;
        align-self: stretch;
    }

    .tile.VIEWER-DATA .viewer-data-inner {
        height: 100%;
        overflow-y: auto;
    }
}