/* ==========================================================================
   Design gallery - every free homepage design we have produced, as a wide
   grid of browser windows (views/partials/design-gallery.php).

   Four or five across on a desktop (Lee, 2026-09-08: the three-across cards
   with a paragraph each stopped scaling once the bank passed thirty). Each
   card is the top of the design in browser chrome; put the cursor on one
   and it grows, its neighbours fall back, and the screenshot PANS DOWN the
   page so the visitor sees more of the design than the hero. Click opens it
   full size in a new tab. Touch has no hover, so on a phone the tap opens it
   and the "Open" chip in the caption says so.

   Plain CSS on purpose: the pan distance is derived from the frame's own
   width with container query units (the tall capture is 1000px wide and up
   to 2000 tall; the frame is 16:10, so the travel is the image height minus
   62.5% of its width, whatever the card size). No JS is needed.
   ========================================================================== */

/* Two across even on a phone: one column of thirty-odd cards was an
   11,000px scroll, and a 170px screenshot still reads as the site it is. */
.dg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 640px)  { .dg-grid { gap: 1.25rem; } }
@media (min-width: 1024px) { .dg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1280px) { .dg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .dg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.dg-card {
    position: relative;
    display: block;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transform-origin: 50% 50%;
    transition: transform .4s cubic-bezier(.22, .9, .28, 1),
                box-shadow .4s ease,
                opacity .35s ease,
                filter .35s ease,
                border-color .3s ease;
    will-change: transform;
}

/* browser chrome */
.dg-chrome {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.dg-chrome i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    flex: 0 0 auto;
}
.dg-chrome i:nth-child(1) { background: #fca5a5; }
.dg-chrome i:nth-child(2) { background: #fcd34d; }
.dg-chrome i:nth-child(3) { background: #86efac; }
.dg-url {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the screenshot */
/* spans, so every box here is made block-level explicitly: an inline
   .dg-frame would ignore both aspect-ratio and overflow and the cards
   would render at the full height of the tall capture. */
.dg-frame {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f8fafc;
    container-type: inline-size;
}
.dg-frame img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: translateY(0);
    transition: transform .9s cubic-bezier(.22, .9, .28, 1);
    will-change: transform;
}

/* "Open this design" pill, only where there is a cursor */
.dg-open {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%, 8px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    color: #16264a;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}
.dg-open svg { width: 14px; height: 14px; }

/* caption */
.dg-cap > span:first-child { display: block; flex: 1 1 auto; min-width: 0; }
.dg-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.95rem;
}
.dg-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow: hidden;
}
.dg-cap { align-items: flex-start; }
.dg-chip { margin-top: 1px; }
.dg-sector {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #224685;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dg-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #eef2f9;
    color: #224685;
    font-size: 11.5px;
    font-weight: 800;
    transition: background .25s ease, color .25s ease;
}
.dg-chip svg { width: 13px; height: 13px; }

@media (max-width: 639px) {
    .dg-chip { display: none; }
    .dg-cap { padding: 0.6rem 0.7rem 0.7rem; }
    .dg-name { font-size: 0.85rem; }
    .dg-sector { font-size: 0.72rem; }
    .dg-chrome { padding: 6px 8px; }
    .dg-url { font-size: 9.5px; }
}

/* ------------------------------------------------------------------- hover */

@media (hover: hover) and (pointer: fine) {
    .dg-card:hover,
    .dg-card:focus-visible {
        z-index: 5;
        transform: translateY(-8px) scale(1.06);
        border-color: #c7d3e8;
        box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45),
                    0 0 0 1px rgba(34, 70, 133, 0.14);
    }
    /* the pan: down the page while the cursor stays, and a short slide back
       up when it leaves. The delay keeps a cursor merely crossing the grid
       from setting every card in motion. */
    .dg-card:hover .dg-frame img,
    .dg-card:focus-visible .dg-frame img {
        transform: translateY(calc(-100% + 62.5cqw));
        transition: transform var(--dg-pan, 7s) linear .35s;
    }
    .dg-card:hover .dg-open,
    .dg-card:focus-visible .dg-open { opacity: 1; transform: translate(-50%, 0); }
    .dg-card:hover .dg-chip { background: #224685; color: #fff; }

    /* neighbours fall back so the one under the cursor is the one you see */
    .dg-grid:has(.dg-card:hover) .dg-card:not(:hover) {
        opacity: 0.55;
        filter: saturate(0.7);
    }
}
.dg-card:focus-visible { outline: 3px solid #224685; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .dg-card, .dg-frame img, .dg-open { transition: none; }
    .dg-card:hover, .dg-card:focus-visible { transform: none; }
    .dg-card:hover .dg-frame img, .dg-card:focus-visible .dg-frame img { transform: none; }
    .dg-grid:has(.dg-card:hover) .dg-card:not(:hover) { opacity: 1; filter: none; }
}

/* ------------------------------------------------------------------ filter */
/* The "Show me" row above the grid (Lee, 2026-09-18). One broad group at a
   time; the script in the partial hides the other cards in place. On a phone
   the row is one swipeable line rather than five wrapped lines of pills, and
   it bleeds to the screen edges so the last pill is visibly cut off, which is
   what tells people it scrolls. */
.dg-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: -0.5rem 0 2rem;
}
.dg-filter[hidden] { display: none; }
.dg-filter__label {
    margin-right: 0.35rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.dg-pill {
    appearance: none;
    border: 1px solid #d5deec;
    background: #fff;
    color: #16264a;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dg-pill:hover { border-color: #224685; transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(34, 70, 133, 0.55); }
.dg-pill:focus-visible { outline: 3px solid #224685; outline-offset: 2px; }
.dg-pill[aria-pressed="true"] {
    background: linear-gradient(135deg, #16264a, #224685);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(22, 38, 74, 0.8);
}
@media (max-width: 639px) {
    .dg-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: -0.25rem -1rem 1.5rem;
        padding: 0.25rem 1rem 0.5rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .dg-filter::-webkit-scrollbar { display: none; }
    .dg-filter__label, .dg-pill { flex: 0 0 auto; }
    .dg-pill { font-size: 0.85rem; padding: 0.65rem 0.95rem; }
}

/* a hidden card must really go: .dg-card is display:block, which beats the
   browser's own [hidden] rule */
.dg-card[hidden] { display: none; }

/* cards arriving after a filter change rise in, a few at a time */
@keyframes dg-arrive {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.dg-card.dg-arrive {
    animation: dg-arrive .5s cubic-bezier(.22, .9, .28, 1) backwards;
    animation-delay: calc(var(--dg-i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
    .dg-card.dg-arrive { animation: none; }
    .dg-pill, .dg-pill:hover { transition: none; transform: none; }
}