/* email-product.css — page-local styles for Carbonio (email product).
 * Depends on tokens.css, product-detail.css and shared v2-pd-* extensions
 * from pages/parking-service.css (loaded on this page too for hud/calc/flow/
 * tiers/integrations/testimonials/faq reuse — those classes are generic).
 * Carbonio-only blocks below: benefits grid, screenshots gallery, comparison
 * table, additional services.
 */

/* ── Benefits grid (4 cards: why on-premise) ───────────────────────── */
.v2-pd-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--v2-border);
    border: 1px solid var(--v2-border);
}
.v2-pd-benefits__cell {
    background: var(--v2-bg-card);
    padding: 28px 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.2s;
}
.v2-pd-benefits__cell:hover { background: var(--v2-bg-hover); }
.v2-pd-benefits__code {
    font-family: var(--v2-f-mono); font-size: 10px;
    color: var(--v2-accent); letter-spacing: 1px;
    text-transform: uppercase;
}
.v2-pd-benefits__t {
    font-family: var(--v2-f-head);
    font-size: 18px; font-weight: 500;
    color: var(--v2-text); letter-spacing: -0.3px;
    margin: 0;
}
.v2-pd-benefits__d {
    font-size: 13px; line-height: 1.6;
    color: var(--v2-dim); margin: 0;
}

/* ── Screenshots gallery (1 featured + 2 small, like the Projects block) ── */
.v2-pd-gallery {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    background: var(--v2-border);
    border: 1px solid var(--v2-border);
    aspect-ratio: 16 / 9;
}
.v2-pd-gallery__cell {
    background: var(--v2-bg-card);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.v2-pd-gallery__cell--featured {
    grid-row: 1 / span 2;
    grid-column: 1;
    padding: 22px;
    gap: 12px;
}
.v2-pd-gallery__frame {
    flex: 1;
    min-height: 0;
    background: var(--v2-bg-deep);
    border: 1px solid var(--v2-border-md);
    overflow: hidden;
    position: relative;
    line-height: 0;
}
.v2-pd-gallery__frame img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    object-position: top left;
    opacity: 0.92;
    transition: opacity 0.25s;
}
.v2-pd-gallery__cell--featured .v2-pd-gallery__frame img {
    /* Featured image: show the whole UI (no crop) */
    object-fit: contain;
    object-position: center center;
    background: var(--v2-bg-deep);
}
.v2-pd-gallery__cell:hover .v2-pd-gallery__frame img {
    opacity: 1;
}
/* In small cells, shrink text slightly so description fits with image */
.v2-pd-gallery__cell:not(.v2-pd-gallery__cell--featured) .v2-pd-gallery__t {
    font-size: 14px;
}
.v2-pd-gallery__cell:not(.v2-pd-gallery__cell--featured) .v2-pd-gallery__d {
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2-pd-gallery__meta {
    display: flex; justify-content: space-between;
    font-family: var(--v2-f-mono); font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase;
}
.v2-pd-gallery__code { color: var(--v2-accent); }
.v2-pd-gallery__seq { color: var(--v2-muted-deep); }
.v2-pd-gallery__t {
    font-family: var(--v2-f-head);
    font-size: 16px; font-weight: 500;
    color: var(--v2-text); letter-spacing: -0.2px;
    margin: 0;
}
.v2-pd-gallery__d {
    font-size: 12px; line-height: 1.5;
    color: var(--v2-dim); margin: 0;
}

/* ── Comparison table (Carbonio vs M365 vs Gmail) ──────────────────── */
.v2-pd-compare {
    border: 1px solid var(--v2-border);
    background: var(--v2-bg-card);
    overflow-x: auto;
}
.v2-pd-compare__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.v2-pd-compare__table th,
.v2-pd-compare__table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--v2-border);
    text-align: left;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.4;
}
.v2-pd-compare__table tr:last-child td { border-bottom: 0; }
.v2-pd-compare__table thead th {
    font-family: var(--v2-f-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--v2-muted-deep);
    text-transform: uppercase;
    font-weight: 500;
    background: var(--v2-bg-elev);
    white-space: nowrap;
}
.v2-pd-compare__table thead th.is-us {
    color: var(--v2-accent);
    border-bottom: 2px solid var(--v2-accent);
}
.v2-pd-compare__table tbody th {
    font-family: var(--v2-f-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-text);
    background: var(--v2-bg);
    width: 32%;
}
.v2-pd-compare__table td {
    color: var(--v2-text-dim);
}
.v2-pd-compare__table td.is-us {
    color: var(--v2-text);
    background: rgba(255, 122, 26, 0.04);
    font-weight: 500;
}
.v2-pd-compare__mark {
    display: inline-block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
}
.v2-pd-compare__mark--y { color: var(--v2-accent); }
.v2-pd-compare__mark--n { color: var(--v2-muted-extra); }
.v2-pd-compare__mark--p { color: var(--v2-muted); }

/* ── Additional services grid (4 cards, reuses hardware visual style) */
.v2-pd-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--v2-border);
    border: 1px solid var(--v2-border);
}
.v2-pd-services__cell {
    background: var(--v2-bg-card);
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.2s;
}
.v2-pd-services__cell:hover { background: var(--v2-bg-hover); }
.v2-pd-services__code {
    font-family: var(--v2-f-mono); font-size: 10px;
    color: var(--v2-accent); letter-spacing: 1px;
    text-transform: uppercase;
}
.v2-pd-services__t {
    font-family: var(--v2-f-head);
    font-size: 16px; font-weight: 500;
    color: var(--v2-text); letter-spacing: -0.2px;
    margin: 0;
}
.v2-pd-services__d {
    font-size: 12px; line-height: 1.55;
    color: var(--v2-dim); margin: 0;
}
.v2-pd-services__meta {
    margin-top: auto;
    font-family: var(--v2-f-mono); font-size: 10px;
    color: var(--v2-muted); letter-spacing: 0.5px;
    text-transform: uppercase;
    border-top: 1px solid var(--v2-border);
    padding-top: 10px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .v2-pd-benefits { grid-template-columns: repeat(2, 1fr); }
    .v2-pd-services { grid-template-columns: repeat(2, 1fr); }
    /* Gallery falls back to single column — featured loses its row-span */
    .v2-pd-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        aspect-ratio: auto;
    }
    .v2-pd-gallery__cell--featured {
        grid-row: auto;
        grid-column: auto;
    }
    .v2-pd-gallery__frame {
        aspect-ratio: 16 / 10;
    }
    .v2-pd-gallery__cell:not(.v2-pd-gallery__cell--featured) .v2-pd-gallery__d {
        -webkit-line-clamp: unset;
        font-size: 12px;
    }
}
@media (max-width: 640px) {
    .v2-pd-benefits { grid-template-columns: 1fr; }
    .v2-pd-services { grid-template-columns: 1fr; }
    .v2-pd-compare__table thead th,
    .v2-pd-compare__table tbody th,
    .v2-pd-compare__table td { padding: 10px 12px; font-size: 12px; }
}