/*
 * /colors: the four finishes and the add-ons, on one short page.
 *
 * This is the link the team sends when somebody on WhatsApp asks what colors
 * there are, so a phone is the first case and the page stays one scroll.
 * Tokens, type roles, the ask and the doors come from css/pages.css; this
 * file is the tiles, the two wide pieces and the add-on cards.
 *
 * The photographs are the catalogue's own, untouched. An earlier pass masked
 * the shelves out of them onto one shared paper and the masks showed, so the
 * tiles now do the unifying instead: one square, the picture whole inside it,
 * one radius, one keyline, one caption shape. See .co-pic below.
 */

.co {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) 24px clamp(64px, 8vw, 96px);
}

.co > * + * { margin-top: var(--gap); }

/* ------------------------------------------------------------- the four */

.co-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3vw, 36px) clamp(14px, 2vw, 24px);
}

.co-tile { margin: 0; }

.co-tile a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* A photograph in a tile, and the hover.

   The empty catalogue shot sits in flow and sets the size. The populated shot
   of the same shelf lies over it, hidden, and fades in while a pointer is on
   the tile or the keyboard is on its link. Both are the catalogue's own
   1400x1400 squares, so the square tile crops nothing and the two line up
   exactly; nothing moves when the swap happens.

   The overlay is display:none until the (hover: hover) query says there is a
   pointer, and its <picture> only names the populated file inside a <source>
   gated on the same query. A phone therefore never fetches the populated
   shots at all: no matching source, no box to lazy-load into. A laptop fetches
   them lazily as the tiles come near the viewport, so the swap is ready before
   the pointer arrives. */
.co-pic {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--wash);
}

.co-pic > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
}

/* One keyline over every picture. The papers in the six shots are close but
   not the same white, and the line gives them one edge to share. */
.co-pic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(27, 31, 30, 0.08);
    pointer-events: none;
}

.co-full {
    display: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.co-full img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) {
    .co-full { display: block; }
    .co-pic:hover .co-full,
    .co-tile a:hover .co-full,
    a:focus-visible .co-full { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .co-full { transition: none; }
}

/* Keyboard focus rings the picture, not the whole tile: the browser's own
   ring around the link would sit outside this one and read as two. */
.co-tile a:focus-visible { outline: none; }

.co-tile a:focus-visible .co-pic {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* The caption: the name on one line with its dot, then one line saying what
   the color is like to live with, then the muted "As shown" for the shelf in
   the photograph. */
.co-tile figcaption { padding: 14px 2px 0; }

.co-name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}

.co-tile figcaption span:not(.co-name):not(.co-dot) { display: block; }
.co-tile figcaption .pg-shown { margin-top: 6px; }

/* Steel on the left of the dot, board on the right, both from the builder's
   own palette in assets/shelving/builder-contract.json. */
.co-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: none;
    background: linear-gradient(90deg, var(--steel) 50%, var(--board) 50%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.co-tile a:hover .co-name,
.co-tile a:focus .co-name { color: var(--accent); }

/* --------------------------------------------------- the two wide pieces */

/* A picture beside its paragraph: the mix, and how a shelf grows. */
.co-feature {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}

.co-feature .co-pic { max-width: 520px; }

.co-feature-text p { max-width: 46ch; }

@media (min-width: 860px) {
    .co-grid { grid-template-columns: repeat(4, 1fr); }
    .co-feature { grid-template-columns: 1fr 1fr; }
    /* The mix is the answer to a question the four tiles raise, so it reads
       right to left: picture first on the page, words beside it. */
    .co-feature-flip .co-feature-text { order: -1; }
}

/* ---------------------------------------------------------------- add-ons */

.co-addons ul {
    list-style: none;
    padding: 0;
    margin: clamp(28px, 4vw, 44px) 0 0;
    display: grid;
    gap: clamp(24px, 3vw, 36px);
}

/* One card shape at every width: the picture, then the name, then the
    words. A phone used to get the picture in a 132px column beside the text,
    which was too small to read a bookend or a lampshade in; the picture now
    takes the column, capped so it does not swallow the page. */
.co-addon {
    display: grid;
    gap: 14px;
    align-content: start;
}

.co-addon > a:first-child { max-width: 340px; }

.co-addon img,
.co-addon video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    background: var(--wash);
}

.co-addon > div { align-self: start; }

.co-addon a { display: block; color: inherit; text-decoration: none; }

.co-addon b { display: block; margin-bottom: 4px; }

.co-addon p { margin: 0; }

.co-addon .pg-shown { margin-top: 8px; }

.co-addon a:hover b, .co-addon a:focus b { color: var(--accent); }

/* The Bookend's picture is a short clip of the mechanism, the one add-on whose
   whole point is one. It is rendered square, to the same shape as the two
   photographs beside it, and it is fitted rather than covered so that a clip
   of another ratio would letterbox on the wash rather than lose its top and
   its bottom. The poster is the seated frame, so the card is complete before
   the clip is fetched, and complete if it never is. */
.co-addon .co-clip { object-fit: contain; }

/* One column on a phone, two on a tablet, three across in one row on a laptop.
   Three cards in a two-column list leave one stranded on a second row, so the
   three-column band starts where three of them still read. */
@media (min-width: 560px) {
    .co-addons ul { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
    .co-addons ul { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .co-addon > a:first-child { max-width: none; }
}