/* ========================================
   TEPETL PHOTO SYSTEM v2.0
   
   APPROACH: Minimal overrides. Let WordPress
   handle gallery layout natively. Only add:
   - Width breakout system
   - Square corners
   - Gap size
   - Caption styling
   - Cursor
   - Kadence/WP block width fixes
   ======================================== */

:root {
    --tepetl-photo-narrow: 800px;
    --tepetl-photo-default: 1069px;
    --tepetl-photo-wide: 1400px;
    --tepetl-photo-gap: 22px;
    --tepetl-photo-gap-mobile: 10px;
    --tepetl-editorial-width: var(--tepetl-body-text, 800px);
}

/* Overflow on article so alignfull can escape section */
article.tepetl-single,
article.tepetl-single-route {
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    article.tepetl-single,
    article.tepetl-single-route {
        overflow-x: hidden;
    }
}

/* ========================================
   SQUARE CORNERS: All images everywhere
   ======================================== */
.tepetl-editorial-content img,
.tepetl-editorial-content .wp-block-image img,
.tepetl-editorial-content .wp-block-gallery img {
    border-radius: 0 !important;
}

/* ========================================
   HOVER: Zoom cursor only, no visual change
   ======================================== */
.tepetl-editorial-content .wp-block-image img,
.tepetl-editorial-content .wp-block-gallery img {
    cursor: zoom-in;
}

/* ========================================
   IMAGE BLOCK: Width breakout system
   ======================================== */

/* Default (no alignment) = 1069px */
.tepetl-editorial-content .wp-block-image,
.tepetl-editorial-content .wp-block-image.alignnone,
.tepetl-editorial-content .wp-block-image.aligncenter {
    max-width: var(--tepetl-photo-default);
    width: var(--tepetl-photo-default);
    margin-left: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    position: relative;
}

.tepetl-editorial-content .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Wide = 1400px */
.tepetl-editorial-content .wp-block-image.alignwide {
    max-width: var(--tepetl-photo-wide);
    width: var(--tepetl-photo-wide);
    margin-left: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2);
}

/* Infinite = 100vw */
.tepetl-editorial-content .wp-block-image.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.tepetl-editorial-content .wp-block-image.alignfull figure {
    display: flex;
    justify-content: center;
    background-color: var(--tepetl-bg-infinite, #121212);
}

.tepetl-editorial-content .wp-block-image.alignfull img {
    width: auto;
    max-width: 100%;
}

/* Narrow = 800px (CSS class) */
.tepetl-editorial-content .wp-block-image.tepetl-narrow {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================
   GALLERY BLOCK: Width breakout + gap ONLY
   WordPress handles all internal flex layout
   ======================================== */

/* Default = 1069px */
.tepetl-editorial-content .wp-block-gallery {
    max-width: var(--tepetl-photo-default);
    width: var(--tepetl-photo-default);
    margin-left: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    position: relative;
    gap: var(--tepetl-photo-gap) !important;
}

/* Reset margins on gallery items (no breakout inside gallery) */
/* DO NOT override width/max-width — WP needs those for columns */
.tepetl-editorial-content .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static;
}

/* Wide = 1400px */
.tepetl-editorial-content .wp-block-gallery.alignwide {
    max-width: var(--tepetl-photo-wide);
    width: var(--tepetl-photo-wide);
    margin-left: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2);
}

/* Infinite = 100vw */
.tepetl-editorial-content .wp-block-gallery.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Narrow */
.tepetl-editorial-content .wp-block-gallery.tepetl-narrow {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================
   CAPTIONS: Below image, transparent bg
   ======================================== */
.tepetl-editorial-content .wp-block-image figcaption,
.tepetl-editorial-content .wp-block-gallery figcaption {
    position: relative;
    padding: 6px 0 0 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: center;
}

/* ========================================
   VERTICAL SPACING
   ======================================== */
.tepetl-editorial-content .wp-block-image,
.tepetl-editorial-content .wp-block-gallery {
    margin-top: var(--space-xl, 2rem);
    margin-bottom: var(--space-xl, 2rem);
}

/* Consecutive photo blocks: let CSS margin collapse handle it */
/* Both have 22px margin → collapse to 22px between them */
.tepetl-editorial-content .wp-block-image + .wp-block-image,
.tepetl-editorial-content .wp-block-image + .wp-block-gallery,
.tepetl-editorial-content .wp-block-gallery + .wp-block-image,
.tepetl-editorial-content .wp-block-gallery + .wp-block-gallery {
    margin-top: var(--tepetl-photo-gap);
    margin-bottom: var(--tepetl-photo-gap);
}

/* Collapse empty <p> WordPress inserts between blocks */
.tepetl-editorial-content .wp-block-image + p:empty,
.tepetl-editorial-content .wp-block-gallery + p:empty {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.tepetl-editorial-content .wp-block-image + p:empty + .wp-block-image,
.tepetl-editorial-content .wp-block-image + p:empty + .wp-block-gallery,
.tepetl-editorial-content .wp-block-gallery + p:empty + .wp-block-image,
.tepetl-editorial-content .wp-block-gallery + p:empty + .wp-block-gallery {
    margin-top: var(--tepetl-photo-gap) !important;
}

/* ========================================
   KADENCE + WP BLOCK WIDTH FIXES
   ======================================== */
.tepetl-editorial-content .wp-block-columns.alignwide,
.tepetl-editorial-content .wp-block-media-text.alignwide,
.tepetl-editorial-content .wp-block-cover.alignwide,
.tepetl-editorial-content .wp-block-group.alignwide,
.tepetl-editorial-content [class*="wp-block-kadence"].alignwide {
    max-width: var(--tepetl-photo-wide) !important;
    width: var(--tepetl-photo-wide) !important;
    margin-left: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2) !important;
    margin-right: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2) !important;
}

.tepetl-editorial-content .wp-block-columns.alignfull,
.tepetl-editorial-content .wp-block-media-text.alignfull,
.tepetl-editorial-content .wp-block-cover.alignfull,
.tepetl-editorial-content .wp-block-group.alignfull,
.tepetl-editorial-content [class*="wp-block-kadence"].alignfull {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.tepetl-editorial-content .wp-block-columns:not(.alignwide):not(.alignfull),
.tepetl-editorial-content .wp-block-media-text:not(.alignwide):not(.alignfull),
.tepetl-editorial-content .wp-block-cover:not(.alignwide):not(.alignfull),
.tepetl-editorial-content [class*="wp-block-kadence"]:not(.alignwide):not(.alignfull):not(.tepetl-narrow) {
    max-width: var(--tepetl-photo-default);
    width: var(--tepetl-photo-default);
    margin-left: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
}

.tepetl-editorial-content .wp-block-media-text img,
.tepetl-editorial-content .wp-block-cover img,
.tepetl-editorial-content .wp-block-columns img {
    border-radius: 0;
}

/* ========================================
   GLIGHTBOX THEME
   ======================================== */
.glightbox-clean .goverlay { background: rgba(10, 10, 10, 0.95); }
.glightbox-clean .gslide-description { background: transparent; padding: 12px 20px; }
.glightbox-clean .gslide-title { display: none !important; }
.glightbox-clean .gdesc-inner { padding: 0; }
.glightbox-clean .gslide-desc {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-align: center;
    text-transform: none;
    background: transparent;
}
.glightbox-clean .gnext,
.glightbox-clean .gprev { background-color: rgba(255,255,255,0.08); border-radius: 50%; width: 44px; height: 44px; }
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover { background-color: rgba(255,255,255,0.15); }
.glightbox-clean .gclose { opacity: 0.6; }
.glightbox-clean .gclose:hover { opacity: 1; }
.glightbox-clean .gslide-image img { border-radius: 0; }

/* Prevent image resize when description appears */
.glightbox-clean .gslide-media {
    width: auto !important;
    max-width: 100vw !important;
}
.glightbox-clean .gslide-image {
    max-height: none !important;
}
.glightbox-clean .gslide-inner-content {
    max-width: none !important;
}
.glightbox-clean .gslide-image img {
    border-radius: 0;
}

/* ========================================
   OPTION B: SHORTCODE PHOTO GRID
   [tepetl_photos cols="3" ids="1,2,3"]
   ======================================== */
.tepetl-photo-grid {
    display: grid;
    gap: var(--tepetl-photo-gap);
    max-width: var(--tepetl-photo-default);
    width: var(--tepetl-photo-default);
    margin-left: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-default) - var(--tepetl-editorial-width)) / -2);
    margin-top: 5px;
    margin-bottom: 0;
}

/* First grid after text gets normal spacing */
.tepetl-editorial-content p + .tepetl-photo-grid,
.tepetl-editorial-content h2 + .tepetl-photo-grid,
.tepetl-editorial-content h3 + .tepetl-photo-grid,
.tepetl-editorial-content h4 + .tepetl-photo-grid,
.tepetl-editorial-content ul + .tepetl-photo-grid,
.tepetl-editorial-content ol + .tepetl-photo-grid {
    margin-top: 2rem;
}

/* Last grid before text gets bottom space */
.tepetl-editorial-content .tepetl-photo-grid:last-child {
    margin-bottom: 2rem;
}

/* Grid followed by text needs bottom margin */
.tepetl-editorial-content .tepetl-photo-grid + p:not(:empty),
.tepetl-editorial-content .tepetl-photo-grid + h2,
.tepetl-editorial-content .tepetl-photo-grid + h3 {
    margin-top: 2rem;
}

.tepetl-photo-grid.cols-1 { grid-template-columns: 1fr; }

/* Kill ALL empty <p> between grids */
.tepetl-editorial-content .tepetl-photo-grid ~ p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
.tepetl-photo-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.tepetl-photo-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.tepetl-photo-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.tepetl-photo-grid.width-narrow {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.tepetl-photo-grid.width-wide {
    max-width: var(--tepetl-photo-wide);
    width: var(--tepetl-photo-wide);
    margin-left: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2);
    margin-right: calc((var(--tepetl-photo-wide) - var(--tepetl-editorial-width)) / -2);
}
.tepetl-photo-grid.width-infinite {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.tepetl-photo-grid-item {
    overflow: hidden;
    line-height: 0;
}

.tepetl-photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    cursor: zoom-in;
    display: block;
}

.tepetl-photo-grid-item figcaption {
    padding: 6px 0 0 0;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.3;
}

/* Consecutive shortcode grids: 22px gap via margin-top only (margin-bottom is 0) */

/* ========================================
   RESPONSIVE: Tablet
   ======================================== */
@media (max-width: 1024px) {
    .tepetl-editorial-content .wp-block-image:not(.alignfull),
    .tepetl-editorial-content .wp-block-gallery:not(.alignfull),
    .tepetl-photo-grid:not(.width-infinite) {
        max-width: calc(100% + 2rem) !important;
        width: calc(100% + 2rem) !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }

    .tepetl-editorial-content .wp-block-image.alignwide,
    .tepetl-editorial-content .wp-block-gallery.alignwide,
    .tepetl-photo-grid.width-wide {
        max-width: calc(100% + 3rem) !important;
        width: calc(100% + 3rem) !important;
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
    }

    .tepetl-editorial-content .wp-block-columns:not(.alignfull),
    .tepetl-editorial-content .wp-block-media-text:not(.alignfull),
    .tepetl-editorial-content [class*="wp-block-kadence"]:not(.alignfull) {
        max-width: calc(100% + 2rem) !important;
        width: calc(100% + 2rem) !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }
}

/* ========================================
   RESPONSIVE: Mobile
   ======================================== */
@media (max-width: 768px) {
    :root { --tepetl-photo-gap: var(--tepetl-photo-gap-mobile, 10px); }

    .tepetl-editorial-content .wp-block-image:not(.alignfull),
    .tepetl-editorial-content .wp-block-gallery:not(.alignfull),
    .tepetl-photo-grid:not(.width-infinite) {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tepetl-photo-grid.cols-3 { grid-template-columns: 1fr 1fr; }
    .tepetl-photo-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .tepetl-photo-grid.cols-3 { grid-template-columns: 1fr; }
}

@media print {
    .tepetl-editorial-content .wp-block-image,
    .tepetl-editorial-content .wp-block-gallery,
    .tepetl-photo-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}