/*
 * Aperture Portfolio — minimal, theme-friendly defaults.
 * Override the variables (or any .ap-* rule) in Divi → Theme Options → Custom CSS.
 */
:root {
    --ap-gap: 12px;
    --ap-radius: 4px;
    --ap-min-col: 280px;
    --ap-accent: #1f3a5f;
    --ap-accent-text: #fff;
    --ap-muted: #6b7280;
    --ap-surface: #f5f5f4;
    --ap-lightbox-bg: rgba(10, 10, 10, .94);
}

.ap-gallery-section { margin: 0 0 2.5em; }
.ap-section-heading { margin-bottom: .35em; }
.ap-section-intro { color: var(--ap-muted); max-width: 70ch; margin-bottom: 1em; }

.ap-gallery,
.ap-cards,
.ap-service-list { list-style: none; margin: 0; padding: 0; }

.ap-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ap-min-col), 1fr));
    gap: var(--ap-gap);
}
.ap-gallery-item figure { margin: 0; }
.ap-gallery-item a { display: block; overflow: hidden; border-radius: var(--ap-radius); background: var(--ap-surface); }
.ap-gallery-item img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    transition: transform .35s ease;
}
.ap-gallery-item a:hover img,
.ap-gallery-item a:focus-visible img { transform: scale(1.03); }
.ap-gallery-item figcaption { font-size: .85em; color: var(--ap-muted); margin-top: .4em; }
.ap-section-floor_plan .ap-gallery-item img { object-fit: contain; background: #fff; }

.ap-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75em 1.5em; margin: 0 0 1.5em; }
.ap-fact dt { font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-muted); }
.ap-fact dd { margin: 0; font-weight: 600; }

.ap-service-list { display: flex; flex-wrap: wrap; gap: .5em; }
.ap-service-list li a,
.ap-service-list li { display: inline-block; }
.ap-service-list li > a,
.ap-service-list li:not(:has(a)) {
    padding: .35em .85em; border-radius: 999px; background: var(--ap-surface); text-decoration: none; color: inherit;
}

.ap-service-list li > a.ap-service-all {
    background: none; padding: .35em .25em; font-size: .8em; color: var(--ap-muted); text-decoration: underline;
}

/* Project insight + FAQ (when placed below the gallery) */
.ap-insight { margin: 2em 0; max-width: 75ch; }
.ap-insight-project { color: var(--ap-muted); }
.ap-faq { margin: 2em 0; max-width: 75ch; }
.ap-faq-item + .ap-faq-item { margin-top: 1.25em; }
.ap-faq-q { margin-bottom: .3em; }
.ap-faq-a { margin: 0; }

.ap-credit { color: var(--ap-muted); font-style: italic; }

.ap-cta { background: var(--ap-surface); border-radius: var(--ap-radius); padding: 2em; text-align: center; margin: 2em 0; }
.ap-cta-heading { margin-bottom: .3em; }
.ap-cta-button {
    display: inline-block; margin-top: .75em; padding: .8em 1.6em; border-radius: var(--ap-radius);
    background: var(--ap-accent); color: var(--ap-accent-text) !important; text-decoration: none; font-weight: 600;
}
.ap-cta-button:hover { filter: brightness(1.1); }

/* Click-to-load video / tour */
.ap-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ap-radius); overflow: hidden; margin: 0 0 2em; }
.ap-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ap-embed-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #111; color: #fff; font-size: 1.1em; }
.ap-embed-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.ap-play {
    position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
    background: rgba(0, 0, 0, .65);
}
.ap-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.ap-tour-facade { background: linear-gradient(135deg, #1f2937, #374151); font-weight: 600; }

/* Cards (related + archive) */
.ap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25em; }
.ap-card a { display: block; text-decoration: none; color: inherit; }
.ap-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ap-radius); }
.ap-card-title { display: block; font-weight: 600; margin-top: .5em; }
.ap-card-location { display: block; font-size: .85em; color: var(--ap-muted); }

/* Archive pagination (paginate_links type=list) */
.ap-pagination ul.page-numbers {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .4em; padding: 0; margin: 2em 0 0; line-height: 1;
}
.ap-pagination li { list-style: none; margin: 0; padding: 0; }
.ap-pagination .page-numbers:is(a, span) {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 2.5em; height: 2.5em; padding: 0 .9em; border-radius: var(--ap-radius);
    background: var(--ap-surface); color: inherit; text-decoration: none; font-weight: 600;
}
.ap-pagination a.page-numbers:hover { filter: brightness(.95); }
.ap-pagination a.page-numbers:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.ap-pagination .page-numbers.current { background: var(--ap-accent); color: var(--ap-accent-text); }
.ap-pagination .page-numbers.dots { background: none; min-width: 0; padding: 0 .25em; }

/* Before / after slider */
.ap-compare-list {
    list-style: none; margin: 0 0 var(--ap-gap); padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--ap-gap);
}
.ap-compare-figure { margin: 0; }
.ap-compare-figure figcaption { font-size: .85em; color: var(--ap-muted); margin-top: .4em; }
.ap-compare {
    --ap-pos: 50%;
    position: relative; overflow: hidden; border-radius: var(--ap-radius); background: var(--ap-surface);
    aspect-ratio: 3 / 2; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.ap-compare-img {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none;
    object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.ap-compare-before { clip-path: inset(0 calc(100% - var(--ap-pos)) 0 0); }
.ap-compare-handle {
    position: absolute; top: 0; bottom: 0; left: var(--ap-pos); width: 3px; margin-left: -1.5px;
    background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .45); pointer-events: none;
}
.ap-compare-handle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.ap-compare-handle::before {
    content: "\2039\00a0\203A"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%);
    z-index: 1; color: #333; font-size: 20px; line-height: 1; font-weight: 700; white-space: nowrap;
}
.ap-compare-label {
    position: absolute; top: 10px; padding: .25em .6em; border-radius: var(--ap-radius);
    background: rgba(0, 0, 0, .6); color: #fff; font-size: .75em; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; pointer-events: none; transition: opacity .2s;
}
.ap-compare-label--before { left: 10px; }
.ap-compare-label--after { right: 10px; }
.ap-compare.is-dragging .ap-compare-label { opacity: .35; }
/* Visually hidden but focusable: keyboard + screen-reader control. */
.ap-compare-range {
    position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; margin: 0; padding: 0;
    opacity: 0; pointer-events: none;
}
.ap-compare:has(.ap-compare-range:focus-visible) .ap-compare-handle::after { outline: 3px solid var(--ap-accent); outline-offset: 2px; }

/* Portfolio Projects widget / [ap_projects] */
.ap-projects { list-style: none; margin: 0; padding: 0; }
.ap-projects a { display: flex; gap: .75em; align-items: center; text-decoration: none; color: inherit; }
.ap-projects a:hover .ap-project-title,
.ap-projects a:focus-visible .ap-project-title { text-decoration: underline; }
.ap-project-thumb { flex: none; display: block; overflow: hidden; border-radius: var(--ap-radius); background: var(--ap-surface); }
.ap-project-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-project-text { min-width: 0; }
.ap-project-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-weight: 600; line-height: 1.3;
}
.ap-project-location { display: block; font-size: .8em; color: var(--ap-muted); margin-top: .15em; }
.ap-projects--list .ap-project + .ap-project { margin-top: .85em; }
.ap-projects--list .ap-project-thumb { width: 72px; height: 72px; }
.ap-projects--cards .ap-project + .ap-project { margin-top: 1.25em; }
.ap-projects--cards a { flex-direction: column; align-items: stretch; gap: .5em; }
.ap-projects--cards .ap-project-thumb { aspect-ratio: 3 / 2; }
.ap-projects--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
.ap-projects--grid a { flex-direction: column; align-items: stretch; gap: .35em; }
.ap-projects--grid .ap-project-thumb { aspect-ratio: 1; }
.ap-projects--grid .ap-project-title { font-size: .85em; }
.ap-projects--grid .ap-project-location { display: none; }
.ap-projects-all { margin: 1em 0 0; font-weight: 600; }
.ap-projects-heading { margin-bottom: .75em; }

/* Lightbox */
.ap-lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: var(--ap-lightbox-bg); color: #fff; }
.ap-lightbox::backdrop { background: var(--ap-lightbox-bg); }
.ap-lightbox-stage { position: absolute; inset: 48px 64px 72px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.ap-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.ap-lightbox-caption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; padding: 0 64px; font-size: .95em; opacity: .9; }
.ap-lightbox button { position: absolute; background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 32px; line-height: 1; padding: 12px; opacity: .85; }
.ap-lightbox button:hover, .ap-lightbox button:focus-visible { opacity: 1; }
.ap-lightbox-close { top: 4px; right: 8px; }
.ap-lightbox-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.ap-lightbox-next { right: 4px; top: 50%; transform: translateY(-50%); }
.ap-lightbox-count { position: absolute; top: 14px; left: 16px; font-size: .85em; opacity: .7; }
@media (max-width: 600px) {
    .ap-lightbox-stage { inset: 48px 8px 72px; }
    .ap-lightbox-prev, .ap-lightbox-next { display: none; }
}

/*
 * Divi: collapse empty blocks. A shortcode with nothing to show (no video, no
 * related projects, no insight…) renders nothing, but its Code module, row and
 * section keep their padding and leave a large gap. Hide a Code module whose
 * output has no elements, then any row or section left with only such modules.
 * Scoped to the Theme Builder body so headers and footers are never touched;
 * modules other than Code (text, images, dividers, groups) always keep a row visible.
 */
.et-l--body .et_pb_code:has(> .et_pb_code_inner:not(:has(> *))) { display: none; }
.et-l--body .et_pb_row:has(.et_pb_code):not(:has(.et_pb_module:not(.et_pb_code))):not(:has(.et_pb_code_inner > *)),
.et-l--body .et_pb_section:has(.et_pb_code):not(:has(.et_pb_module:not(.et_pb_code))):not(:has(.et_pb_code_inner > *)) { display: none; }

/* Divi gives every body list bullets and an indent (.et-l--body ul, loaded after
   this file). Out-rank it so cards and pagination don't get stray bullets. */
.et-l--body ul.ap-gallery,
.et-l--body ul.ap-cards,
.et-l--body ul.ap-service-list,
.et-l--body ul.ap-compare-list,
.et-l--body ul.ap-projects,
.et-l--body .ap-pagination ul.page-numbers { list-style: none; padding: 0; line-height: inherit; }
.et-l--body .ap-pagination ul.page-numbers { line-height: 1; }

/* Inside a Divi Code module the template's spacing is the only spacing: drop the
   blocks' own outer margins so they don't stack on top of the section/row padding. */
.et-l--body .et_pb_code_inner > :first-child { margin-top: 0; }
.et-l--body .et_pb_code_inner > :last-child { margin-bottom: 0; }
.et-l--body .et_pb_code_inner .ap-gallery-wrap > .ap-gallery-section:last-child { margin-bottom: 0; }