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

/* ---- Perks slab -------------------------------------------------------- */

.rd-slab-perks {
    grid-template-columns: repeat(4, 1fr);
    --glow-size: 195px;
    --corner-size: 36px;
}

.rd-slab-perks .rd-cell { padding: var(--sp-6); }

@media (max-width: 900px) { .rd-slab-perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
    .rd-slab-perks {
        grid-template-columns: 1fr;
        --glow-size: 165px;
        --corner-size: 30px;
    }
}

/* ---- Photo cluster -----------------------------------------------------
   Three office photos in one bordered frame, sharing hairlines with the
   rest of the page rather than floating as rounded cards.
   ------------------------------------------------------------------------ */

.rd-photo-cluster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    overflow: hidden;
}

.rd-photo {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}

.rd-photo-wide { grid-column: 1 / -1; min-height: 240px; }

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

@media (max-width: 900px) {
    .rd-photo { min-height: 150px; }
    .rd-photo-wide { min-height: 200px; }
}

/* ---- Mission / values list --------------------------------------------- */

.rd-pillars {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

.rd-pillar { display: flex; gap: var(--sp-4); align-items: flex-start; }

.rd-pillar-icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--tile-bg);
    color: var(--accent-ink);
}

.rd-pillar-title { color: var(--tx-1); font-weight: 600; }
.rd-pillar-body { color: var(--tx-2); margin-top: var(--sp-1); }

/* ---- Job list ----------------------------------------------------------
   One row per opening, grouped by department. Rendered server-side, not
   fetched by script, so the listings survive with JavaScript off and are
   visible to search engines.
   ------------------------------------------------------------------------ */

.rd-dept {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: var(--sp-10) 0 var(--sp-4);
}

.rd-dept:first-of-type { margin-top: 0; }

.rd-slab-jobs {
    grid-template-columns: 1fr;
    --glow-size: 100px;
    --corner-size: 28px;
}

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

.rd-job-main { flex: 1; min-width: 0; }

.rd-job-title {
    color: var(--tx-1);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.35;
    letter-spacing: var(--track-head);
    transition: color var(--t);
}

.rd-cell:hover .rd-job-title { color: var(--accent-ink); }

.rd-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.rd-job-cta {
    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-job-cta { color: var(--accent-ink); }

@media (max-width: 620px) {
    .rd-slab-jobs .rd-cell { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
    .rd-job-cta { align-self: flex-start; }
}

/* ---- Deadline emphasis ------------------------------------------------- */

.rd-job-deadline { color: var(--tx-3); }