/* ============================================================
   SMART GALLERY — GRID LAYOUT
   ============================================================ */

.smart-gallery {
    display: grid !important;
    gap: var(--smart-gallery-gap, 5px);
}

.smart-gallery figure,
.smart-gallery a {
    display: block;
}

.smart-gallery[class*="columns-"] {
    grid-template-columns: repeat(var(--smart-gallery-columns, 5), 1fr);
}

/* Gallery items */
.smart-gallery-item {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    aspect-ratio: var(--smart-gallery-aspect, auto);
}

.smart-gallery-thumb,
.smart-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: var(--smart-gallery-aspect, auto);
    object-fit: cover;
    display: block !important;
}

/* Captions */
.smart-gallery-caption {
    margin-top: 4px;
    font-size: 0.85em;
    text-align: center;
}

/* Masonry mode overrides */
.smart-gallery.is-masonry .smart-gallery-item {
    aspect-ratio: auto;
    height: auto;
}

.smart-gallery.is-masonry .smart-gallery-thumb {
    height: auto;
    object-fit: contain;
}

/* ============================================================
   ASPECT RATIO WRAPPER (legacy support)
   ============================================================ */

.sg-aspect-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.sg-aspect-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

.sg-anim-fade-in img {
    opacity: 0;
    animation: sgFadeIn 0.6s ease forwards;
}

.sg-anim-slide-up img {
    opacity: 0;
    transform: translateY(20px);
    animation: sgSlideUp 0.5s ease forwards;
}

.sg-anim-zoom-in img {
    opacity: 0;
    transform: scale(0.9);
    animation: sgZoomIn 0.4s ease forwards;
}

@keyframes sgFadeIn {
    to { opacity: 1; }
}

@keyframes sgSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sgZoomIn {
    to { opacity: 1; transform: scale(1); }
}

/* SG: Caption reveal on hover (desktop) and tap (mobile) */
.sg-caption-overlay {
    position:   absolute;           /* SG: sits over the image */
    bottom:     0;
    left:       0;
    right:      0;
    padding:    10px 12px;
    background: rgba(0,0,0,0.55);   /* SG: semi-transparent dark background */
    color:      #fff;
    font-size:  13px;
    line-height: 1.4;
    opacity:    0;
    transition: opacity 0.3s ease;  /* SG: smooth fade in/out */
}

.smart-gallery-item:hover .sg-caption-overlay,
.smart-gallery-item .smart-gallery-link:hover ~ .sg-caption-overlay,
.smart-gallery-item.sg-tapped .sg-caption-overlay {
    opacity: 1;
}

/* ============================================================
   SMART GALLERY — IMAGE VIEWER LAYOUT
   Added: v3.0.0 — viewer shortcode redesign
   ============================================================

   LAYOUT OVERVIEW (Option B — image over two-column details):
     TOP    — full-width image block (max 1200px, centered)
     BOTTOM — two-column detail row:
                LEFT  — Description
                RIGHT — Special Features + Consultation link
              When only one column has content it spans full width
              via CSS grid auto-fill.
              When neither column has content the detail row is
              omitted by PHP and .sg-viewer--no-text centers the
              image block with no wasted whitespace below.

   MODIFIER CLASS:
     .sg-viewer--no-text — applied by PHP when both description
     and special features are empty. No layout change needed;
     the detail row simply does not exist in the DOM.
     Retained as a hook for future JS dynamic toggling.

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

/* ------------------------------------------------------------
   OUTER WRAPPER
------------------------------------------------------------ */
.sg-viewer-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ------------------------------------------------------------
   INNER CONTAINER
------------------------------------------------------------ */
.sg-viewer-wrap {
    width: 100%;
}

/* ------------------------------------------------------------
   IMAGE BLOCK — full width, stacks above detail row
------------------------------------------------------------ */
.sg-viewer-image-block {
    width: 100%;
    margin-bottom: 24px;
}

/* Viewer image — full width of its container, height auto */
.sg-viewer-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------
   TITLE — below image, above credit
------------------------------------------------------------ */
.sg-viewer-title {
    margin: 12px 0 4px 0;
    text-align: center;
}

/* ------------------------------------------------------------
   CREDIT — embedded into image block
------------------------------------------------------------ */
.sg-viewer-credit {
    font-style: italic;
    margin: 4px 0 10px 0;
    font-size: 0.8rem;
}

/* ------------------------------------------------------------
   DOWNLOAD LINK
------------------------------------------------------------ */
.sg-viewer-download-wrap {
    margin: 12px 0;
    text-align: center;
}

.sg-viewer-download {
    color: DarkRed;
    text-decoration: underline;
    font-size: .8rem;
}

/* ------------------------------------------------------------
   NAVIGATION BAR — prev / next / first / last
   Shortcode page version (anchor-based links)
------------------------------------------------------------ */
.sg-viewer-nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 16px 0 0 0;
    font-size: .8rem;
}

.sg-viewer-nav a {
    color: DarkRed;
    text-decoration: underline;
}

.sg-viewer-nav a:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------
   DETAIL ROW — two-column grid below image
   Auto-fill: single column when only one detail present,
   two columns when both present.
------------------------------------------------------------ */
.sg-viewer-detail-row {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
    gap: 32px;
    margin-top: 8px;
}

/* ------------------------------------------------------------
   DETAIL COLUMNS
------------------------------------------------------------ */
.sg-viewer-detail-col {
    min-width: 0; /* prevents grid blowout on long words */
}

/* ------------------------------------------------------------
   METADATA HEADINGS — Description / Special Features
------------------------------------------------------------ */
.sg-viewer-meta-head {
    margin: 0 0 8px 0;
}

/* ------------------------------------------------------------
   DESCRIPTION BODY
------------------------------------------------------------ */
.sg-viewer-description {
    line-height: 1.1;
}

/* ------------------------------------------------------------
   SPECIAL FEATURES BODY
------------------------------------------------------------ */
.sg-viewer-special-features {
    line-height: 1.1;
}

/* ------------------------------------------------------------
   CONSULTATION LINK
------------------------------------------------------------ */
.sg-viewer-consult {
    margin-top: 20px;
}

.sg-viewer-consult a {
    color: DarkRed;
    text-decoration: underline;
    font-size: .8rem;
}

.sg-viewer-consult a:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------
   NO-TEXT MODIFIER
   Applied by PHP when both description and special features
   are absent. Detail row does not exist in DOM when active.
   Class retained as JS upgrade hook for overlay viewer.
------------------------------------------------------------ */
.sg-viewer--no-text .sg-viewer-image-block {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   RESPONSIVE — stack on narrow viewports (shortcode page)
------------------------------------------------------------ */
@media ( max-width: 600px ) {

    .sg-viewer-layout {
        padding: 12px;
    }

    .sg-viewer-detail-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sg-viewer-nav {
        gap: 16px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   SMART GALLERY — JS OVERLAY VIEWER
   Added: v4.0.0 — JS modal replaces shortcode page navigation
   ============================================================

   STRUCTURE (injected once into DOM by sg-viewer.js):
     #sg-overlay                 — fixed full-viewport backdrop
       #sg-overlay-modal         — centered modal container
         #sg-overlay-close       — × close button (top-right of modal)
         #sg-overlay-image-block — image + title + credit + download
           #sg-overlay-img       — the image element
           #sg-overlay-title     — image title (conditional)
           #sg-overlay-credit    — photographer credit (conditional)
           .sg-overlay-dl-wrap   — download button wrapper
             #sg-overlay-download — download button
         #sg-overlay-nav         — First / Prev / Next / Last buttons
         #sg-overlay-detail-row  — description + special features columns
           .sg-overlay-detail-col (×2)
         #sg-overlay-consult     — consultation link (conditional)

   VISIBILITY STATES:
     Default hidden: #sg-overlay { display: none }
     JS adds .sg-overlay-open to #sg-overlay to show it.

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

/* ------------------------------------------------------------
   BACKDROP — fixed, full viewport, dimmed
------------------------------------------------------------ */
#sg-overlay {
    display: none;                   /* SG: hidden until JS adds .sg-overlay-open */
    position: fixed;
    inset: 0;                        /* SG: covers full viewport */
    z-index: 99999;
    background: rgba(0, 0, 0, 0.75); /* SG: dimmed backdrop */
    overflow-y: auto;                /* SG: allows scroll when modal taller than viewport */
    padding: 40px 20px;              /* SG: breathing room around modal */
    box-sizing: border-box;
}

#sg-overlay.sg-overlay-open {
    display: flex;
    align-items: flex-start;         /* SG: top-align when modal exceeds viewport height */
    justify-content: center;
}

/* ------------------------------------------------------------
   MODAL CONTAINER — centered card
------------------------------------------------------------ */
#sg-overlay-modal {
    position: relative;
    background: #fff;
    border-radius: 4px;
    width: 100%;
    max-width: 1200px;
    padding: 40px 32px 32px;         /* SG: extra top padding clears close button */
    box-sizing: border-box;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------
   CLOSE BUTTON — top-right corner of modal
------------------------------------------------------------ */
#sg-overlay-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
}

#sg-overlay-close:hover {
    color: DarkRed;
    background: rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------
   IMAGE BLOCK — full width inside modal
------------------------------------------------------------ */
#sg-overlay-image-block {
    width: 100%;
    margin-bottom: 20px;
}

/* Viewer image */
#sg-overlay-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------
   TITLE
------------------------------------------------------------ */
#sg-overlay-title {
    margin: 12px 0 4px 0;
    text-align: center;
    font-size: 2rem;
}

/* ------------------------------------------------------------
   CREDIT
------------------------------------------------------------ */
#sg-overlay-credit {
    font-style: italic;
    font-size: 0.8rem;
    margin: 4px 0 10px 0;
    text-align: center;
    color: #555;
}

/* ------------------------------------------------------------
   DOWNLOAD BUTTON
------------------------------------------------------------ */
.sg-overlay-dl-wrap {
    margin: 12px 0 0 0;
    text-align: center;
}

#sg-overlay-download {
    background: none;
    border: none;
    color: DarkRed;
    text-decoration: underline;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

#sg-overlay-download:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------
   NAVIGATION BAR — First / Prev / Next / Last buttons
   All <button> elements — no anchors.
------------------------------------------------------------ */
#sg-overlay-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0 0 0;
}

/* Base button style — red pill buttons */
#sg-overlay-nav button {
    background: DarkRed;
    border: none;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 20px;             /* SG: rounded pill shape */
    text-decoration: none;
    transition: background 0.2s;
}

#sg-overlay-nav button:hover {
    background: #a00000;             /* SG: slightly darker red on hover */
    text-decoration: none;
}

/* Disabled state — shown when at first or last image */
#sg-overlay-nav button:disabled {
    background: #ccc;                /* SG: grey out when at boundary */
    color: #fff;
    text-decoration: none;
    cursor: default;
}

/* ------------------------------------------------------------
   DETAIL ROW — description + special features
   Mirrors shortcode page layout exactly.
------------------------------------------------------------ */
#sg-overlay-detail-row {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
    gap: 32px;
    margin-top: 20px;
}

.sg-overlay-detail-col {
    min-width: 0; /* SG: prevents grid blowout on long words */
}

.sg-overlay-meta-head {
    margin: 0 0 8px 0;
}

.sg-overlay-description,
.sg-overlay-special-features {
    line-height: 1.4;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------
   CONSULTATION LINK
------------------------------------------------------------ */
#sg-overlay-consult {
    margin-top: 20px;
    text-align: right;
}

#sg-overlay-consult a {
    color: DarkRed;
    text-decoration: underline;
    font-size: 0.8rem;
}

#sg-overlay-consult a:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------
   LOADING STATE — shown while REST fetch is in flight
------------------------------------------------------------ */
#sg-overlay-loading {
    text-align: center;
    padding: 40px 0;
    color: #777;
    font-size: 0.9rem;
    display: none;                   /* SG: JS sets display:block during fetch */
}

/* ------------------------------------------------------------
   RESPONSIVE — narrow viewports
------------------------------------------------------------ */
@media ( max-width: 600px ) {

    #sg-overlay {
        padding: 20px 12px;
    }

    #sg-overlay-modal {
        padding: 36px 16px 24px;
    }

    #sg-overlay-detail-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #sg-overlay-nav {
        gap: 10px;
    }

    #sg-overlay-nav button {
        font-size: 0.85rem;
    }
}