/*
 * Filename:  adam_software_detail.css
 * Location:  /adam-collection/adam_software_detail.css
 * Revision:  1
 * Date:      2026-08-09
 *
 * The software title page, /adam-collection/software_detail.php.
 *
 * A separate file rather than more rules in adam.css, for the same reason
 * adam_detail.css is separate: these selectors are used by exactly one page,
 * and adam.css is loaded by every page in the interface. It is linked after
 * adam.css, so the variables below are already defined.
 *
 * The palette is taken entirely from adam.css variables. No colour is written
 * as a literal here, so a theme change there moves this page with it.
 */

/* The header block is four things - back link, title, publisher, media - and it
   used to be four stacked rows carrying about six words between them, which put
   the panels below the fold on a laptop. The title keeps its own line; the rest
   share one. */
.sw-back { display: inline-block; margin: 0 0 8px 0; font-size: 13px; }

.sw-head { margin: 0 0 16px 0; }
.sw-head h1 {
    color: var(--adam-heading);
    font-size: 26px; font-weight: bold; letter-spacing: 1px;
    margin: 0 0 7px 0; line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .8);
}
/* One row, wrapping as a group on a narrow window. align-items centres the
   badges against the publisher name, which sits on a larger line-height. */
.sw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
.sw-pub { color: var(--adam-muted); font-size: 14px; }
.sw-active {
    font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
    padding: 2px 7px; border-radius: 3px; white-space: nowrap;
    background: rgba(74, 127, 199, .25); color: var(--adam-text);
    border: 1px solid var(--adam-border-soft);
}

/* Two columns on a wide screen, one on a narrow one.
   The aside carries the box art, the details and the downloads - what a visitor
   most often came for - and is FIRST in the source, so it falls on the left here
   and at the top when the columns stack. No order property is needed in either
   direction, and the reading order matches the visual one at every width. */
.sw-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.sw-main { flex: 1 1 520px; min-width: 0; }
.sw-side { flex: 0 1 340px; min-width: 0; }

.sw-panel {
    background: var(--adam-panel);
    border: 1px solid var(--adam-border-soft); border-radius: 8px;
    padding: 16px 18px; margin: 0 0 18px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sw-panel h2 {
    color: var(--adam-heading); font-size: 14px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 12px 0; padding-bottom: 9px;
    border-bottom: 1px solid var(--adam-border-soft);
}
.sw-panel p { color: var(--adam-text); font-size: 14px; line-height: 1.75; margin: 0; }

/* Facts. A definition list rather than a table: it is a set of label/value
   pairs, it wraps sensibly at any width, and it needs no column sizing. */
.sw-facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; }
.sw-facts dt {
    color: var(--adam-label); font-size: 11px; text-transform: uppercase;
    letter-spacing: 1px; font-weight: bold; white-space: nowrap; padding-top: 2px;
}
.sw-facts dd { color: var(--adam-text); font-size: 13.5px; margin: 0; }

.sw-lead {
    background: var(--adam-panel);
    border: 1px solid var(--adam-border-soft); border-radius: 8px;
    padding: 12px; margin: 0 0 18px 0; text-align: center;
}
.sw-lead img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; }

.sw-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.sw-shot { margin: 0; width: 150px; }
.sw-shot img {
    width: 150px; height: 118px; object-fit: contain;
    background: rgba(10, 16, 24, .92);
    border: 1px solid var(--adam-border-soft); border-radius: 4px;
    display: block; transition: all .3s ease;
}
.sw-shot a:hover img { border-color: #4a7fc7; box-shadow: 0 4px 12px rgba(74, 127, 199, .45); }
.sw-shot figcaption {
    color: var(--adam-muted); font-size: 11px; line-height: 1.5;
    margin-top: 5px; word-break: break-word;
}

/* HOVER PREVIEW - the browse grids' .thumb-zoom, re-anchored for this gallery.
 *
 * adam.css positions the popup to the RIGHT of the thumbnail (left: 64px),
 * which is tuned for the 54px thumbnails on a card. These are 150px wide and
 * sit about six across the main column, so the same rule would put the popup
 * for the rightmost thumbnail past the edge of the window and give the whole
 * page a horizontal scrollbar - and there is no CSS way to know which figure
 * ended a wrapped flex row, so the nth-child(5n) flip adam.css uses for the
 * fixed card grid cannot be reproduced here.
 *
 * Centred ABOVE the thumbnail instead. It cannot overflow horizontally at any
 * width, needs no JavaScript, and every visible part - frame, shadow, caption -
 * is still adam.css's, so it reads as the same feature.
 *
 * The figure is raised on hover for the same reason adam.css raises the card:
 * the popup's z-index only orders it within its own stacking context, so the
 * ancestor has to win against the figures that paint after it. */
.sw-shot { position: relative; }
.sw-shot:hover { z-index: 600; }
.sw-shot .thumb-zoom { display: block; }
.sw-shot .thumb-zoom-pop {
    left: 50%; right: auto; top: auto; bottom: calc(100% + 8px);
    transform: translateX(-50%);
    /* Drives the image size below. Capped against the viewport so a narrow
       desktop window cannot push the preview off the page. */
    width: min(64vw, 512px);
    max-width: calc(100vw - 32px);
}
/* THE PREVIEW HAS TO UPSCALE, WHICH IS WHY width IS NOT auto.
 *
 * adam.css sizes the popup image "width: auto; max-width: 260px", so it renders
 * at its natural size up to that cap. On a 54px card thumbnail that is a real
 * enlargement. Here it was not, and measuring the library explains why: of 355
 * images on disk the MEDIAN is 256x192 and the 90th percentile width is 258px -
 * these are native ADAM screenshots, not scans. Natural size is therefore about
 * 256px against a 150px thumbnail, and "auto" can never exceed it, so nine
 * images in ten barely changed size at all.
 *
 * width: 100% of the box above makes the preview 512px wide whatever the source
 * measures - 3.4x the thumbnail, and exactly 2x for the median 256px image,
 * which is the cleanest possible scale factor for pixel art. The handful of real
 * scans (up to 2220px) are scaled down to the same 512px and still read as an
 * enlargement.
 *
 * height stays auto so the aspect ratio is the image's own. Only 1 of the 355 is
 * portrait, and at 512 wide it comes out 628 tall, which fits. */
.sw-shot .thumb-zoom-pop img {
    width: 100%; height: auto;
    max-width: none;
    /* A cap the WINDOW sets, because width alone could not provide one. A tall
       scan at 512 wide came out 820 high, which no clamping can fit into an
       781-high window - the preview was correctly placed and still cut off.
       object-fit keeps the aspect ratio inside the capped box; without it,
       width:100% plus a height limit would stretch the image. The letterbox this
       leaves shows the popup's own background and affects 1 image in 355 - the
       only portrait one in the library. */
    max-height: 62vh;
    object-fit: contain;
}
.sw-shot .thumb-zoom-cap { max-width: 100%; white-space: normal; }
/* A preview needs somewhere to sit. Below roughly a phone's height the popup
   would cover the gallery it came from, and touch has no hover anyway - adam.css
   already disables it there. */
@media (max-height: 520px) { .sw-shot .thumb-zoom-pop { display: none !important; } }

.sw-links { list-style: none; margin: 0; padding: 0; }
.sw-links li {
    padding: 8px 0; border-bottom: 1px solid var(--adam-border-soft);
    font-size: 13px; line-height: 1.6; word-break: break-word;
}
.sw-links li:last-child { border-bottom: none; }
.sw-links li:first-child { padding-top: 0; }
.sw-linknote, .sw-linktype {
    display: block; color: var(--adam-muted); font-size: 11px; margin-top: 2px;
}
.sw-linktype { text-transform: uppercase; letter-spacing: .5px; }

.sw-museum { font-size: 13px; margin: 0; color: var(--adam-muted); }

@media (max-width: 900px) {
    /* Stacking is all that is needed - the aside is already first in the source,
       so it lands above the prose without an order override. */
    .sw-cols { flex-direction: column; }
    .sw-side { flex-basis: auto; width: 100%; }
    .sw-main { flex-basis: auto; width: 100%; }
    .sw-head h1 { font-size: 22px; }
    .sw-shot, .sw-shot img { width: 116px; }
    .sw-shot img { height: 92px; }
}