/* Home page only: the example results under the intro, and the lightbox that enlarges them. */

/* --- Example results --- */
.home-examples .section-title {
    margin-bottom: var(--sp-2);
}

/* balance: no lone last word ("… enlarge / it.") where the line wraps. */
.home-examples__lead {
    max-width: 720px;
    margin: 0 auto var(--sp-5);
    text-align: center;
    text-wrap: balance;
}

.home-examples__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

/* On a phone each example is a row — a small picture beside its caption — so the captions stay
   readable; from 560px the three stand side by side, picture over caption. The whole card is the
   link, and it lifts on hover like the calculator tiles do. */
.home-example {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-3);
    height: 100%;
    padding: var(--sp-2);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--c-navy);
    font-weight: 600;
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-example:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--c-green);
}

.home-example:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
}

/* The thumbnails are 3:2 already; cover + top left only guard the layout if one ever is not. */
.home-example__img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: left top;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.home-example__caption {
    font-size: var(--fs-200);
    line-height: 1.3;
    text-wrap: balance;
}

@media (min-width: 560px) {
    .home-examples__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-4);
    }

    .home-example {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        padding: var(--sp-3);
        text-align: center;
    }
}

@media (min-width: 960px) {
    .home-examples__list {
        gap: var(--sp-5);
    }
}

/* --- Lightbox: a native modal <dialog> ---
   The top layer puts it — and its backdrop — above the sticky header and the phone tab bar.
   The browser's own dialog padding, border and size caps are reset here; display is set only
   while it is open, since an author display would otherwise show the closed dialog too.
   The image carries its CSS size (home.js), so the dialog fits it at 1:1 and never upscales;
   a capture taller than the screen scrolls inside the body. */
.lightbox {
    width: fit-content;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 20px 50px rgba(11, 45, 68, 0.30);
}

.lightbox[open] {
    display: flex;
    flex-direction: column;
}

/* A literal colour: older Chrome and Safari do not pass custom properties to ::backdrop. */
.lightbox::backdrop {
    background: rgba(11, 45, 68, 0.70);
}

.lightbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}

.lightbox__title {
    margin: 0;
    font-size: var(--fs-400);
}

.lightbox__head form {
    margin: 0;
}

.lightbox__close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-navy);
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox__close:hover {
    background: var(--c-yellow);
}

.lightbox__close:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
}

/* The stable gutter is counted in the dialog's fit-content width, so a scrollbar never squeezes
   the image below 1:1 (overlay scrollbars take no room either way). */
.lightbox__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.lightbox__body:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: -3px;
}

.lightbox__img {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* The page behind stays put while the lightbox is open; the gutter keeps the scrollbar's width,
   so nothing shifts sideways when the scrollbar goes. */
html.is-lightbox-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

@media print {
    .lightbox {
        display: none !important;
    }
}