/* ==========================================================================
   Corporate Projukti — Redesign :: Service detail page
   Renders the four ServiceSection types: technology, slider, projects, info.
   ========================================================================== */

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

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

.rd-service-hero-art {
    position: relative;
    /* border: 1px solid var(--border); */
    /* background: var(--surface); */
    overflow: hidden;
    min-height: 260px;
}

.rd-service-hero-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* background: */
        /* radial-gradient(circle at 10% 6%, rgba(var(--brand-2-rgb), var(--glow-a-tl)) 0%, transparent 56%), */
        /* radial-gradient(circle at 90% 94%, rgba(var(--brand-1-rgb), var(--glow-a-br)) 0%, transparent 56%); */
    pointer-events: none;
}

.rd-service-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rd-service-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--tile-bg);
    margin-bottom: var(--sp-5);
}

.rd-service-icon img { width: 30px; height: 30px; object-fit: contain; }

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

/* ---- technology — icon + label grid ------------------------------------ */

/* Cells measure 96px, so the glow stays under the 1.2x merge point. */
.rd-slab-tech {
    grid-template-columns: repeat(3, 1fr);
    --glow-size: 108px;
    --corner-size: 26px;
}

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

.rd-tech-icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--tile-bg);
    transition: border-color var(--t), background var(--t);
}

.rd-cell:hover .rd-tech-icon {
    border-color: var(--accent-line);
    background: var(--tile-bg-hover);
}

.rd-tech-icon img { width: 24px; height: 24px; object-fit: contain; }

.rd-tech-name { color: var(--tx-1); font-weight: 600; line-height: 1.35; }

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

/* ---- slider — a horizontal rail, scrolled in its own container --------- */

.rd-rail {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border: 1px solid var(--border);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.rd-rail .rd-cell {
    flex: 0 0 clamp(190px, 24vw, 240px);
    scroll-snap-align: start;
    min-height: 150px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    --glow-size: 165px;
    --corner-size: 28px;
}

.rd-rail img { max-height: 46px; width: auto; object-fit: contain; }

/* ---- projects ---------------------------------------------------------- */

.rd-slab-projects {
    grid-template-columns: repeat(3, 1fr);
    --glow-size: 250px;
    --corner-size: 40px;
}

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

.rd-project-shot {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.rd-project-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.rd-project-body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }

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

/* ---- info — media beside prose, reusing the split frame ---------------- */

.rd-info-media {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    box-shadow: 1px 0 0 var(--border);
}

.rd-info-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 820px) {
    .rd-info-media { box-shadow: 0 1px 0 var(--border); min-height: 220px; }
}

/* ---- Sibling services -------------------------------------------------- */

.rd-slab-siblings {
    grid-template-columns: repeat(4, 1fr);
    --glow-size: 125px;
    --corner-size: 26px;
}

.rd-slab-siblings .rd-cell {
    padding: var(--sp-5);
    /* min-height: 118px;  */
}

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