/* ==========================================================================
   Corporate Projukti — Redesign :: Product detail
   Page-specific layout only. Consumes tokens; never redefines one.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */

.rd-product-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--sp-12);
    align-items: center;
    padding-block: var(--sp-14) var(--sp-12);
}

.rd-product-cover {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--sp-10);
    min-height: 280px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.rd-product-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 6%, rgba(var(--brand-2-rgb), var(--glow-a-tl)) 0%, transparent 58%),
        radial-gradient(circle at 90% 94%, rgba(var(--brand-1-rgb), var(--glow-a-br)) 0%, transparent 58%);
    pointer-events: none;
}

.rd-product-cover img {
    position: relative;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 900px) {
    .rd-product-hero {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
        padding-block: var(--sp-12) var(--sp-10);
    }
    .rd-product-cover { order: -1; min-height: 220px; padding: var(--sp-8); }
}

/* ---- Resource accordion ------------------------------------------------
   The legacy page opened each resource in a Bootstrap offcanvas drawer.
   These are <details> instead: same disclosure, no JavaScript, and the
   content is in the DOM for search engines.
   ------------------------------------------------------------------------ */

/* A closed row measures 92px. It grows when opened, which only lowers the
   ratio further — safe, since the merge risk is the glow being too large. */
.rd-slab-resources {
    grid-template-columns: 1fr;
    --glow-size: 96px;
    --corner-size: 30px;
}

.rd-slab-resources .rd-cell { padding: 0; }

.rd-resource { width: 100%; }

.rd-resource > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    cursor: pointer;
    list-style: none;
}

.rd-resource > summary::-webkit-details-marker { display: none; }

.rd-resource-thumb {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    transition: border-color var(--t);
}

.rd-cell:hover .rd-resource-thumb { border-color: var(--accent-line); }

.rd-resource-thumb img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

.rd-resource-name {
    flex: 1;
    color: var(--tx-1);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.35;
    transition: color var(--t);
}

.rd-cell:hover .rd-resource-name { color: var(--accent-ink); }

.rd-resource-toggle {
    flex: none;
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: var(--tx-3);
    transition: color var(--t);
}

.rd-cell:hover .rd-resource-toggle { color: var(--accent-ink); }

.rd-resource[open] .rd-resource-toggle-open { display: none; }
.rd-resource:not([open]) .rd-resource-toggle-shut { display: none; }

.rd-resource-body {
    padding: 0 var(--sp-6) var(--sp-6) calc(var(--sp-6) + 52px + var(--sp-4));
    border-top: 1px solid var(--border);
    padding-top: var(--sp-5);
    margin-top: var(--sp-1);
}

@media (max-width: 620px) {
    .rd-resource-body { padding-left: var(--sp-6); }
}

/* ---- Share row --------------------------------------------------------- */
/* .rd-share itself now lives in system.css — the article page uses the same
   component. Only the standalone, page-wide placement is local. */

.rd-share { justify-content: center; }

/* ---- Related products -------------------------------------------------- */

.rd-slab-related {
    grid-template-columns: repeat(4, 1fr);
    --glow-size: 150px;
    --corner-size: 28px;
}

.rd-slab-related .rd-cell {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    min-height: 130px;
}

.rd-related-thumb {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    padding: var(--sp-1);
}

.rd-related-thumb img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

@media (max-width: 900px) { .rd-slab-related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rd-slab-related { grid-template-columns: 1fr; } }