/* ==========================================================================
   PRODUCTS — what EO Robotics builds in-house
   --------------------------------------------------------------------------
   Distinct from the BUYio store, which resells third-party electronics. This
   page is a showcase, not a shop: no prices, no cart, one product per row
   with room for an image and real detail.

   Rows alternate sides so a list of products does not read as a spreadsheet.

   No borders anywhere. Cards are defined by a white surface lifting off the
   grey page on a wide, low-opacity shadow, and internal dividers are gradients
   that fade out rather than rules that run edge to edge. No motion.
   ========================================================================== */

/* --------------------------------------------------------------- hero */

.products-hero {
    /* Clears the fixed header, which nothing does globally. */
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-12);
    background: var(--surface);
    /* No rule under the hero — the change from white to the sunken grey of the
       list below already separates them. */
}

.products-hero h1 {
    margin: 0;
    font-size: var(--text-7xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    color: var(--ink-strong);
}

.products-lead {
    margin: var(--space-5) 0 0;
    max-width: var(--measure);
    font-size: var(--text-2xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-snug);
    color: var(--ink-soft);
}

/* --------------------------------------------------------------- list */

.products-list {
    padding: var(--space-16) 0;
    background: var(--surface-sunken);
}

.products-list .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.product {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-8);
    background: var(--surface);
    border-radius: 0;
    /* No border, no shadow — the card is defined purely by the white surface
       against the section's grey (--surface-sunken), a flat edge rather than
       a lifted one. */
    box-shadow: none;
}

/* Alternate which side the image sits on, so a long list has rhythm. */
.product:nth-child(even) .product-media    { order: 2; }
.product:nth-child(even) .product-body-col { order: 1; }

/* No photo yet. Without this the copy would sit in the first column and leave
   the second one empty, which reads as a broken layout rather than a choice.
   The measure keeps the text from running the full width of the card. */
.product--noimage {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.product--noimage .product-summary,
.product--noimage .product-body p { max-width: var(--measure); }

/* ---------------------------------------------------------- watermark */

/* A ghosted product image bled into the right edge of the card, sitting
   BEHIND the copy rather than beside it. Used where a photo would make the
   row feel like a spec sheet but the card still reads as empty on the right.

   Three things make it recede instead of compete:
     • opacity + grayscale drop it to a tone, not a subject
     • the mask dissolves it left-to-right, so it never has a hard edge
       running down the middle of the paragraph
     • z-index/isolation keep every glyph on top of it                      */

.product--watermark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.product-watermark {
    position: absolute;
    inset: 0 0 0 auto;
    width: clamp(320px, 46%, 720px);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.product-watermark :is(img, video) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    opacity: 0.5;
    filter: grayscale(1) contrast(0.85);

    /* Fades out toward the copy on the left and softens top and bottom so the
       head does not butt against the card edges. Two masks compose. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 34%, #000 72%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 34%, #000 72%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* The ElasticLeaf watermark is a screen capture, not an object cut out of its
   background, so it takes the opposite treatment: colour kept and opacity
   raised, or the interface reads as noise. The video is silent — no audio
   track in the file, and muted on the element so autoplay is allowed. */
/* Centred and sized to its own aspect rather than stretched to the slot: with
   object-fit the letterboxing left the frame's top and bottom as hard edges
   inside the card, because the mask fades the element box and the picture sat
   inside it. Matching the box to the picture puts those edges back under the
   mask. */
.product-watermark--video {
    display: flex;
    align-items: center;
    /* Wider slot than the cut-out watermarks: this one is a screen capture of
       an interface, so it needs the extra width to stay readable rather than
       reading as a thumbnail. The left-edge mask still fades it under the
       copy. */
    width: clamp(480px, 74%, 1120px);
}

.product-watermark--video :is(img, video) {
    height: auto;
    opacity: 0.62;
    filter: none;
    border-radius: var(--radius-md);
}

/* The copy rides above the watermark. Reserving the right column keeps the
   specs row from tracking straight across the robot's face — the image stays
   background, but the text still stops before it. */
.product--watermark .product-body-col {
    position: relative;
    z-index: 1;
    padding-right: clamp(0px, 26%, 340px);
}

/* -------------------------------------------------------------- media */

.product-media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    overflow: hidden;
}

/* contain, not cover — these are objects photographed against a backdrop and
   cropping them cuts limbs off the robot. */
.product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-5);
}

/* --------------------------------------------------------------- copy */

.product-body-col { min-width: 0; }

.product h2 {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--ink-strong);
}

.product-summary {
    margin: var(--space-4) 0 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-snug);
    color: var(--ink);
    max-width: var(--measure);
}

.product-body {
    margin-top: var(--space-4);
}

.product-body p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
    max-width: var(--measure);
}

.product-body p:last-child { margin-bottom: 0; }

/* The closing line — "Built by EO Robotics Lab. Designed to explore what's
   next in robotics." It is a statement, not body copy, so it gets a rule and
   a little air rather than sitting as a third identical paragraph.
   Scoped through .product-body to outrank the paragraph rule above on
   specificity; this project does not use !important. */
.product-body .product-signoff {
    position: relative;
    margin: var(--space-5) 0 0;
    padding-top: var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-light);
    color: var(--ink);
}

/* Dividers fade out instead of ruling edge to edge. Still enough to separate
   two blocks, without the hard line of a border. */
.product-body .product-signoff::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(to right,
                rgba(0, 0, 0, 0.09) 0%,
                rgba(0, 0, 0, 0.03) 45%,
                transparent 85%);
}

/* -------------------------------------------------------------- specs */

.product-specs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: var(--space-6) 0 0;
}

.product-specs::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(to right,
                rgba(0, 0, 0, 0.09) 0%,
                rgba(0, 0, 0, 0.03) 45%,
                transparent 85%);
}

/* Sentence case, not all-caps: at 12px the wide-tracked capitals read as a
   form label rather than a spec. Size nudged up a step and the tracking
   dropped with the transform — both only existed to make capitals legible. */
.product-specs dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--ink-faint);
}

.product-specs dd {
    margin: var(--space-1) 0 0;
    font-size: var(--text-base);
    color: var(--ink);
}

/* ------------------------------------------------------------ actions */

/* A row, so a product can carry a second, quieter action beside its primary
   one and still wrap cleanly on a narrow card. */
.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.product-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: 0;
    background: var(--brand);
    color: var(--on-inverse);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.product-cta:hover { background: var(--brand-dark); }

/* Secondary action: same box, outlined instead of filled, so it sits beside
   the primary CTA without competing with it. */
.product-cta--ghost {
    background: transparent;
    color: var(--ink-strong);
    box-shadow: inset 0 0 0 1px var(--line);
}

.product-cta--ghost:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.product-cta--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

/* ---------------------------------------------------------------- cta */

.products-cta {
    padding: var(--section-y) 0;
    background: var(--surface);
    text-align: center;
}

.products-cta h2 {
    margin: 0;
    font-size: var(--text-5xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink-strong);
}

.products-cta p {
    margin: var(--space-4) auto var(--space-8);
    max-width: var(--measure-tight);
    font-size: var(--text-lg);
    color: var(--ink-soft);
}

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .product {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        padding: var(--space-6);
    }

    /* Image always leads on narrow screens; alternating sides is meaningless
       once the columns stack. */
    .product:nth-child(even) .product-media    { order: 0; }
    .product:nth-child(even) .product-body-col { order: 0; }

    .product-media { aspect-ratio: 16 / 10; }

    /* Below this width the copy needs the full card, so the watermark drops to
       a faint corner mark rather than a half-width image behind the text. */
    .product--watermark .product-body-col { padding-right: 0; }
    .product-watermark { width: 58%; }
    .product-watermark :is(img, video) { opacity: 0.28; }
    .product-watermark--video :is(img, video) { opacity: 0.4; }
    .products-hero h1 { font-size: var(--text-5xl); }
    .products-lead { font-size: var(--text-xl); }
}

@media (max-width: 560px) {
    .products-hero { padding-top: calc(var(--header-height) + var(--space-10)); }
    .products-hero h1 { font-size: var(--text-4xl); }
    .product h2 { font-size: var(--text-3xl); }
    .product-summary { font-size: var(--text-lg); }
    .product-cta { width: 100%; justify-content: center; }
    .product-watermark { display: none; }
}