/* =============================================
   CoRAI Labs — Products section + product pages
   Layered on the design system in styles.css.
   Editorial: monogram marks, hairlines, serif.
   ============================================= */

/* -----------------------------------------
   Products section (homepage)
   ----------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-6);
}

.product-card {
    display: block;
    position: relative;
    border: 1px solid var(--c-line);
    border-top: 2px solid var(--c-ink);
    border-radius: var(--r-sm);
    padding: var(--s-6);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease-out);
}

.product-card:hover {
    border-top-color: var(--c-blue);
}

/* Decorative + informative monogram */
.product-mark {
    position: absolute;
    top: var(--s-4);
    right: var(--s-5);
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-line);
    pointer-events: none;
}

.product-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-blue);
}

.product-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    margin: var(--s-2) 0 var(--s-3);
}

.product-card p {
    font-size: var(--fs-small);
    color: var(--c-text-2);
    line-height: 1.65;
    max-width: 54ch;
    margin-bottom: var(--s-4);
}

.product-cta {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-blue);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--t-fast) var(--ease-out);
}

.product-card:hover .product-cta {
    border-bottom-color: var(--c-blue);
}

/* -----------------------------------------
   Product page hero
   ----------------------------------------- */
.product-hero {
    border-bottom: 1px solid var(--c-line);
}

.product-hero-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-8) 40px var(--s-6);
}

.product-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-blue);
    margin-bottom: var(--s-3);
}

.product-hero h1 {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    margin-bottom: var(--s-4);
    max-width: 20ch;
}

.product-lede {
    font-size: 18px;
    color: var(--c-text-2);
    line-height: 1.65;
    max-width: var(--measure);
    margin-bottom: var(--s-5);
}

/* -----------------------------------------
   Carousel
   ----------------------------------------- */
.carousel {
    margin-top: var(--s-6);
    outline: none;
}

.carousel-viewport {
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
}

.carousel-track {
    display: flex;
    transition: transform var(--t-slow) var(--ease-out);
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

/* 2:1 matches the product screenshots (wide app UI), so they fill the frame
   instead of sitting letterboxed inside a 16:9 box. */
.carousel-frame {
    aspect-ratio: 2 / 1;
    background: var(--c-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--c-line);
}

/* contain, not cover: these are UI screenshots — cropping would cut off
   part of the interface. Slight letterboxing is preferable to lost content. */
.carousel-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Placeholder chip until a real screenshot replaces it */
.carousel-frame .ph {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-2);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-xs);
    padding: 8px 14px;
}

.carousel-caption {
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-small);
    color: var(--c-text-2);
    line-height: 1.6;
}

.carousel-caption b {
    color: var(--c-ink);
    font-weight: 600;
}

.carousel-controls {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.carousel-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.carousel-btn:hover {
    border-color: var(--c-blue);
    background: var(--c-bg-2);
}

.carousel-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.carousel-dots {
    display: flex;
    gap: var(--s-2);
    margin-left: auto;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--c-line-strong);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--t-fast) var(--ease-out);
}

.carousel-dot[aria-current="true"] {
    background: var(--c-blue);
}

/* -----------------------------------------
   Responsive
   ----------------------------------------- */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-hero-inner {
        padding: var(--s-7) 20px var(--s-5);
    }

    .product-mark {
        font-size: 34px;
    }
}