/* Screenshot gallery.
   Written as plain CSS on purpose. The Tailwind build in this repository does
   not run (daisyUI 5 emits no components under Tailwind 3.4), so assets/css/
   output.css cannot be regenerated and any utility class it does not already
   carry would silently do nothing. These rules own everything the gallery
   needs and depend only on the theme variables in styles.css. */

.shot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shot {
    /* The stylesheet sets figure to display:flex inside a card, which put the
       caption beside the image and shrank the thumbnail to its intrinsic width.
       Block layout is forced here, with !important, because the rule it fights
       lives in the generated output.css. */
    display: block !important;
    margin: 0;
}

.shot > label { display: block; }

.shot-thumb {
    display: block;
    width: 100%;
    /* A fixed height rather than a cap, so a row of mixed desktop and phone
       captures lines up instead of stepping. object-fit keeps both intact. */
    height: 16rem;
    object-fit: contain;
    border-radius: 0.5rem;
    background: var(--base-200);
    border: 1px solid var(--base-300);
    cursor: zoom-in;
}

.shot-caption {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 0.5rem;
}

.shot-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.shot-lightbox { display: none; }

.shot-toggle:checked + .shot-lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.85);
}

.shot-close {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

.shot-lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: min(1100px, 92vw);
    max-height: 90vh;
}

.shot-lightbox-inner img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

.shot-lightbox-caption {
    color: #ffffff;
    font-size: 0.9rem;
    margin: 0;
}

.shot-close-btn {
    align-self: flex-end;
    cursor: pointer;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.shot-close-btn:hover { background: rgba(255, 255, 255, 0.28); }

/* Project card images.
   styles.css sets .project-image to h-64 object-cover, which crops a 16:9 card
   into a near square box and cut the phone screenshots into unreadable slices.
   output.css cannot be rebuilt (see docs/superpowers/specs), so the override
   lives here, after it in the cascade. */
.project-image {
    height: 12rem !important;
    object-fit: contain !important;
    background: var(--base-200) !important;
}