/*
 * Product cards component
 *
 * The homepage cards promoting the Future Friends products (Snoopy,
 * Flawcastr). Built as HTML over a CSS gradient rather than as whole-card
 * images, so the text is real text and stays sharp; only the app
 * screenshots and the Snoopy icon are images. The cards keep the products'
 * own dark look in both themes. Placement in the homepage column (order,
 * width cap, phone visibility) lives in components/home-notes.css.
 */

.product-card {
    display: block;
    padding: var(--space-md);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
    font-family: var(--font-sans);
    color: var(--product-text);
    text-decoration: none;
}

/* base.css's a:hover and a:focus-visible out-rank the single class above,
   so the card restates its colour and radius for those states. */
.product-card:hover {
    color: var(--product-text);
}

.product-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-card);
}

.product-card-snoopy {
    background: linear-gradient(165deg,
        var(--product-snoopy-top) 0%,
        var(--product-snoopy-bottom) 55%);
}

.product-card-flawcastr {
    background: linear-gradient(165deg,
        var(--product-flawcastr-top) 0%,
        var(--product-flawcastr-bottom) 60%);
}

.product-card-heading {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
}

.product-card-blurb {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--product-text-muted);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Screenshots: decorative (alt=""), the blurb says what the product does. */
.product-card-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-shot);
    box-shadow: var(--product-shot-shadow);
}

/* Snoopy's three screenshots fanned down the card, bleeding past the
   card padding to its edges. Positions are fractions of a 616 x 720 frame,
   taken from the original card design; the card's overflow clips the
   rotated corners. */
.product-card-fan {
    position: relative;
    aspect-ratio: 616 / 720;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
}

.product-card-fan .product-card-shot {
    position: absolute;
    width: 76%;
}

.product-card-fan .product-card-shot:nth-child(1) {
    left: 3%;
    top: 0;
    transform: rotate(-2deg);
}

.product-card-fan .product-card-shot:nth-child(2) {
    left: 21%;
    top: 29%;
    transform: rotate(2deg);
}

.product-card-fan .product-card-shot:nth-child(3) {
    left: 7%;
    top: 56%;
    transform: rotate(-1.5deg);
}

/* Flawcastr's screenshot: wider than the card and bleeding past its
   padding, turned in perspective so the right edge comes forward, with its
   edges faded into the gradient rather than framed. The card's overflow
   clips what spills. The mask gradient is alpha only, not a colour. */
.product-card-tilt {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    perspective: 900px;
}

.product-card-tilt img {
    display: block;
    width: 150%;
    max-width: none;    /* base.css caps images at 100%; this one must overflow */
    height: auto;
    margin-left: -25%;  /* shifts the inputs sidebar off the left so the chart leads */
    transform: rotateY(-16deg) rotateX(3deg);
    transform-origin: 60% 50%;
    /* Centred right of middle so the fade falls on the left, top and
       bottom, and the right side runs solid off the card's edge. */
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 75% 50%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 70% at 75% 50%, #000 60%, transparent 100%);
}

/* Brand line: the product's icon and name. */
.product-card-brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 1.35rem;
    font-weight: 500;
}

.product-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-icon);
}