/* designs-lb.css — homepage designs gallery + lightbox. Pairs with designs-lb.js.
   Tokens follow DESIGN.md / style3.css: purple #646CD2, ink #202630, radius 13px,
   signature shadow 0 20px 36px #2B2F6433. The grid itself is .grid3 / .g-cell from
   style3.css:1192 — only the interactive affordances are added here. */

/* ── grid cells become clickable ──────────────────────────────────────────── */
.bl-designs .g-cell.dg-thumb .dg-thumb-link {
    display: block;
    border-radius: 26px;             /* matches .bl-designs .grid3 .g-cell img */
    outline: none;
}

.bl-designs .g-cell.dg-thumb img {
    display: block;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* hover lift only where there IS a hover — no sticky :hover state on touch */
@media (hover: hover) and (min-width: 769px) {
    .bl-designs .g-cell.dg-thumb .dg-thumb-link:hover img {
        transform: translateY(-4px);
        box-shadow: 0 20px 36px #2B2F6433;
    }
}

.bl-designs .g-cell.dg-thumb .dg-thumb-link:focus-visible img {
    outline: 3px solid #646CD2;
    outline-offset: 3px;
}

/* ── "הצג עוד" ────────────────────────────────────────────────────────────── */
.designs-more-row {
    text-align: center;
    margin-top: 28px;
}

.designs-more {
    position: relative;
    display: inline-block;
    padding: 10px 30px 10px 44px;
    border-radius: 30px;
    background: #646CD21A;
    color: #646CD2;
    font-weight: bold;
    font-size: 0.95em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}

/* down chevron — same glyph as the hero link, rotated */
.designs-more:after {
    content: '';
    position: absolute;
    left: 22px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.674 15.674'%3E%3Cpath fill='none' stroke='%23646CD2' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M7.822,0H-.261V8.083' transform='translate(2.306 7.652) rotate(-45)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    /* the shared glyph is a LEFT chevron (vertex left, arms opening right). Clockwise +90
       would put the vertex on top and point it up — -90 puts it at the bottom, pointing down. */
    transform: rotate(-90deg);
}

.designs-more:hover { background: #646CD233; }
.designs-more:focus-visible { outline: 2px solid #646CD2; outline-offset: 2px; }

/* ── lightbox ─────────────────────────────────────────────────────────────── */
body.dg-lb-open { overflow: hidden; }

.dg-lb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #202630E6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.dg-lb.is-open { opacity: 1; visibility: visible; }

.dg-lb-frame {
    position: relative;
    max-width: 1000px;
    width: 100%;
}

.dg-lb-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    /* room for the nav buttons on both sides at desktop widths */
    padding: 0 64px;
    touch-action: pan-y;             /* let vertical scroll through, keep horizontal for swipe */
}

.dg-lb-img {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 13px;
    box-shadow: 0 20px 36px #00000059;
    background: #fff;
    /* designs slide in/out rather than cutting; designs-lb.js drives transform/opacity and
       toggles .dg-nofx for the instant reposition between the out and in halves */
    transition: transform 240ms ease, opacity 240ms ease;
}

.dg-lb-img.dg-nofx { transition: none; }

.dg-lb-cap {
    margin-top: 16px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.05em;
}

.dg-lb-close {
    position: absolute;
    top: -6px;
    left: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF26;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.dg-lb-close:before,
.dg-lb-close:after {
    content: '';
    position: absolute;
    left: 11px;
    top: 19px;
    width: 18px;
    height: 2px;
    background: #fff;
}

.dg-lb-close:before { transform: rotate(45deg); }
.dg-lb-close:after { transform: rotate(-45deg); }
.dg-lb-close:hover { background: #FFFFFF40; }

/* nav — RTL: .dg-lb-next on the LEFT, .dg-lb-prev on the RIGHT (see designs-lb.js) */
.dg-lb-nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF26 no-repeat center;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.dg-lb-nav:hover { background-color: #FFFFFF40; }
.dg-lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.dg-lb-nav:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    margin: -7px 0 0 -6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.674 15.674'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M7.822,0H-.261V8.083' transform='translate(2.306 7.652) rotate(-45)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.dg-lb-next { left: 0; }
.dg-lb-prev { right: 0; }
.dg-lb-prev:before { transform: rotate(180deg); }

@media only screen and (max-width: 768px) {
    .dg-lb { padding: 14px; }
    /* on touch the swipe is the primary control, so the arrows stop stealing image width */
    .dg-lb-stage { padding: 0; }
    /* ...which means the image now fills the frame, so the close button would land ON the
       artwork (and #FFFFFF26 over a light design is invisible). Reserve a strip above the
       stage and sit it there, on the backdrop. */
    .dg-lb-frame { padding-top: 48px; }
    .dg-lb-close { top: 0; }
    .dg-lb-img { max-height: 66vh; }
    .dg-lb-nav { margin-top: 0; top: auto; bottom: -60px; }
    .dg-lb-next { left: 28%; }
    .dg-lb-prev { right: 28%; }
    .dg-lb-cap { margin-top: 12px; font-size: 1em; }
    .designs-more { padding: 12px 28px 12px 44px; font-size: 15px; }
}