/**
 * AH – Portfolio
 * Widget: dc-ah-portfolio
 *
 * Instelbare waarden komen binnen als custom properties via de Elementor
 * control-selectors; er staat niets inline in de PHP.
 */

.dc-ah-portfolio {
    --pf-accent: #b8845c;
    --pf-bg: #faf8f5;
    --pf-cols: 3;

    /* Licht schema is de standaard; .dc-ah-portfolio--dark zet de tegenhanger. */
    --pf-text: #2c2420;
    --pf-muted: #7d6f64;
    --pf-border: rgba(44, 36, 32, .1);
    --pf-chip: #fff;

    display: block; background: var(--pf-bg);
    padding: 96px 24px;
}
.dc-ah-portfolio .ah-pf__inner { max-width: 1400px; margin: 0 auto; }

.dc-ah-portfolio .ah-pf__head { max-width: 760px; margin: 0 0 34px; }
.dc-ah-portfolio .ah-pf__eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--pf-accent); margin-bottom: 15px;
}
.dc-ah-portfolio .ah-pf__eyebrow-line {
    width: 28px; height: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, var(--pf-accent), transparent);
}
.dc-ah-portfolio .ah-pf__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(26px, 2.9vw, 42px); font-weight: 400;
    line-height: 1.14; color: var(--pf-text); margin: 0 0 16px;
}
.dc-ah-portfolio .ah-pf__hl { font-style: italic; color: var(--pf-accent); }
.dc-ah-portfolio .ah-pf__sub {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 15.5px; line-height: 1.72; color: var(--pf-muted); margin: 0;
}

/* Filters */
.dc-ah-portfolio .ah-pf__filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px;
}
.dc-ah-portfolio .ah-pf__filter {
    appearance: none; cursor: pointer;
    padding: 9px 18px; border-radius: 100px;
    border: 1px solid var(--pf-border); background: var(--pf-chip);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12.5px; font-weight: 500; color: var(--pf-muted);
    transition: all .3s ease; line-height: 1.4;
}
.dc-ah-portfolio .ah-pf__filter:hover { color: var(--pf-text); border-color: var(--pf-accent); }
.dc-ah-portfolio .ah-pf__filter[aria-pressed="true"] {
    background: var(--pf-accent); border-color: var(--pf-accent); color: #fff;
}

/* Grid */
.dc-ah-portfolio .ah-pf__grid {
    display: grid;
    grid-template-columns: repeat(var(--pf-cols), minmax(0, 1fr));
    grid-auto-rows: 10px;
    grid-auto-flow: row dense;
    gap: 16px;
}
.dc-ah-portfolio .ah-pf__item {
    position: relative; border-radius: 16px; overflow: hidden;
    background: #14120f; cursor: zoom-in;
    border: 0; padding: 0; display: block; width: 100%;
    grid-row-end: span 17;
}
.dc-ah-portfolio .ah-pf__item--tall { grid-row-end: span 22; }
.dc-ah-portfolio .ah-pf__item--wide { grid-row-end: span 13; grid-column-end: span 2; }
.dc-ah-portfolio .ah-pf__item[hidden] { display: none; }

.dc-ah-portfolio .ah-pf__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.dc-ah-portfolio .ah-pf__item:hover .ah-pf__img { transform: scale(1.06); }

.dc-ah-portfolio .ah-pf__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,18,16,0) 45%, rgba(20,18,16,.78) 100%);
    opacity: 0; transition: opacity .4s ease;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 18px; text-align: left;
}
.dc-ah-portfolio .ah-pf__item:hover .ah-pf__veil,
.dc-ah-portfolio .ah-pf__item:focus-visible .ah-pf__veil { opacity: 1; }
.dc-ah-portfolio .ah-pf__item-cat {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--pf-accent); margin-bottom: 5px;
}
.dc-ah-portfolio .ah-pf__item-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px; color: #fff; line-height: 1.35;
}
.dc-ah-portfolio .ah-pf__zoom {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: 0; transform: scale(.8);
    transition: opacity .35s ease, transform .35s ease;
}
.dc-ah-portfolio .ah-pf__item:hover .ah-pf__zoom { opacity: 1; transform: scale(1); }
.dc-ah-portfolio .ah-pf__zoom svg { width: 15px; height: 15px; }

.dc-ah-portfolio .ah-pf__more-wrap { display: flex; justify-content: center; margin-top: 40px; }
.dc-ah-portfolio .ah-pf__more {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 32px; border-radius: 100px;
    background: transparent; color: var(--pf-text);
    border: 1px solid var(--pf-border);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: .3px;
    transition: all .35s ease;
}
.dc-ah-portfolio .ah-pf__more:hover { border-color: var(--pf-accent); color: var(--pf-accent); transform: translateY(-2px); }
.dc-ah-portfolio .ah-pf__empty {
    font-family: system-ui, sans-serif; font-size: 14px; color: var(--pf-muted);
    padding: 30px 0;
}

/* Lightbox */
.dc-ah-portfolio-lb {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(16,14,12,.96);
    display: none; align-items: center; justify-content: center;
    padding: 40px 64px;
}
.dc-ah-portfolio-lb.is-open { display: flex; animation: ahPfFade .3s ease; }
@keyframes ahPfFade { from { opacity: 0 } to { opacity: 1 } }
.dc-ah-portfolio-lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dc-ah-portfolio-lb img {
    max-width: 100%; max-height: 78vh; object-fit: contain;
    border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.dc-ah-portfolio-lb figcaption {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13.5px; color: rgba(255,255,255,.7); text-align: center;
}
.dc-ah-portfolio-lb figcaption strong { color: #fff; font-weight: 600; display: block; margin-bottom: 3px; font-size: 15px; }
.dc-ah-portfolio-lb .ah-pf__lb-btn {
    position: absolute; appearance: none; cursor: pointer;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
    color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .3s ease, transform .3s ease;
}
.dc-ah-portfolio-lb .ah-pf__lb-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.dc-ah-portfolio-lb .ah-pf__lb-btn svg { width: 18px; height: 18px; }
.dc-ah-portfolio-lb .ah-pf__lb-close { top: 24px; right: 24px; }
.dc-ah-portfolio-lb .ah-pf__lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.dc-ah-portfolio-lb .ah-pf__lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.dc-ah-portfolio-lb .ah-pf__lb-prev:hover, .dc-ah-portfolio-lb .ah-pf__lb-next:hover { transform: translateY(-50%) scale(1.06); }
.dc-ah-portfolio-lb .ah-pf__lb-count {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font-family: system-ui, sans-serif; font-size: 12px; color: rgba(255,255,255,.5);
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .dc-ah-portfolio .ah-pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dc-ah-portfolio { padding: 68px 22px; }
}
@media (max-width: 640px) {
    .dc-ah-portfolio { padding: 52px 14px; }
    .dc-ah-portfolio .ah-pf__grid { grid-template-columns: minmax(0,1fr); grid-auto-rows: 10px; gap: 12px; }
    .dc-ah-portfolio .ah-pf__item { grid-row-end: span 20; }
    .dc-ah-portfolio .ah-pf__item--tall { grid-row-end: span 24; }
    .dc-ah-portfolio .ah-pf__item--wide { grid-column-end: span 1; grid-row-end: span 14; }
    .dc-ah-portfolio .ah-pf__veil { opacity: 1; background: linear-gradient(180deg, rgba(20,18,16,0) 55%, rgba(20,18,16,.72) 100%); }
    .dc-ah-portfolio-lb { padding: 56px 12px; }
    .dc-ah-portfolio-lb .ah-pf__lb-prev { left: 8px; }
    .dc-ah-portfolio-lb .ah-pf__lb-next { right: 8px; }
}

/* Donker kleurschema */
.dc-ah-portfolio--dark {
    --pf-text: rgba(255, 255, 255, .94);
    --pf-muted: rgba(255, 255, 255, .55);
    --pf-border: rgba(255, 255, 255, .12);
    --pf-chip: rgba(255, 255, 255, .06);
}

.dc-ah-portfolio .ah-pf__more-icon { width: 14px; height: 14px; }