/* ProductSection — ported from core/presentation/section/ProductSection.kt */

.product-row {
    /* The ornament is a layer behind the content, so the row is its containing
       block and clips it at the card's rounded edges. */
    position: relative;
    overflow: hidden;

    display: grid;
    /* The first column is deliberately empty: it is the channel the ornament
       reads in before the mask fades it out under the copy. */
    grid-template-columns: var(--ornament-width) minmax(0, 1fr) var(--product-media-width);
    align-items: center;
    gap: var(--product-gap);
    padding: var(--product-padding-v) var(--product-padding-h);
}

/* Cards float clear of one another instead of being divided by a hairline. */
.product-rows {
    display: flex;
    flex-direction: column;
    gap: var(--surface-gap);
    padding: var(--surface-gap) var(--band-padding-h);
}

/* The ornament is absolutely positioned, so it takes no grid cell — the content
   is placed explicitly to leave the first column empty for it. Both sit above it. */
.product-row__text {
    position: relative;
    grid-column: 2;
}
.product-row__media {
    position: relative;
    grid-column: 3;
}

.product-row__title {
    margin: 0 0 10px;
    color: var(--text-primary);
}

.product-row__body {
    max-width: var(--product-text-max-width);
    margin: 0;
    color: var(--text-body-dim);
}

.product-row__explore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--accent);
    text-decoration: none;
}
.product-row__explore .glyph { width: 0.9em; height: 0.9em; }
.product-row__explore:hover { color: var(--chalk); }

/* "Planned" — a product that has no link to follow yet. */
.product-row__badge {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 6px 12px;
    border: 1px solid var(--outline-subtle);
    border-radius: var(--pill-radius);
    color: var(--text-label);
}

.product-row__media {
    width: var(--product-media-width);
    height: var(--product-media-height);
    border-radius: var(--media-radius);
    overflow: hidden;
}
.product-row__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--outline-media);
    border-radius: var(--media-radius);
}
.product-row__media .media-placeholder {
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .product-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .product-row__text,
    .product-row__media { grid-column: 1; }
    .product-row__media { width: 100%; }
    .product-row__body { max-width: none; }
}