/* R05 visual upgrade
   Replaces prototype-like HTML/SVG illustrations with photographic and 3D media,
   while keeping process information as calm editorial text. */

.r04-page :where(.r05-visual, .r05-tour-media) {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #061a31;
    border: 1px solid rgba(112, 145, 176, 0.22);
    border-radius: 20px;
    box-shadow:
        0 34px 84px rgba(5, 27, 51, 0.17),
        0 8px 24px rgba(5, 27, 51, 0.09);
    isolation: isolate;
}

.r04-page .r05-visual {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
}

.r04-page :where(.r05-visual, .r05-tour-media)::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.r04-page :where(.r05-visual, .r05-tour-media) :where(picture, img) {
    display: block;
    width: 100%;
    height: 100%;
}

.r04-page :where(.r05-visual, .r05-tour-media) img {
    object-fit: cover;
    transition: transform 900ms cubic-bezier(0.2, 0.68, 0.2, 1);
}

.r04-page :where(.r05-visual, .r05-tour-media):hover img {
    transform: scale(1.018);
}

.r05-visual--hero {
    width: 100%;
    min-height: clamp(430px, 39vw, 610px);
    align-self: center;
    aspect-ratio: 16 / 11;
}

.r05-visual--hero .r05-picture {
    position: absolute;
    inset: 0;
}

.r05-visual--hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 16, 33, 0.02), rgba(3, 16, 33, 0.16)),
        radial-gradient(circle at 80% 16%, rgba(112, 187, 240, 0.13), transparent 38%);
    content: "";
    pointer-events: none;
}

.r05-visual--architecture,
.r05-visual--technology,
.r05-visual--system {
    aspect-ratio: 16 / 9;
}

.r05-visual--architecture .r05-picture,
.r05-visual--technology .r05-picture,
.r05-visual--system :where(.r05-picture, .r05-low-system-picture, .r05-world-model-core-picture, .r05-world-model-cycle-picture) {
    position: absolute;
    inset: 0;
}

.r04-products-architecture .r04-section-split {
    grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
}

.r04-products-architecture .r05-visual {
    min-height: 0;
}

/* Product tours: editorial copy paired with a real industrial scene. */

:where(.r04-autometro, .r04-semiconductor) .r04-tour__stage {
    position: relative;
    background: linear-gradient(145deg, #f7fafe, #edf4f9);
    border: 1px solid var(--r04-software-line);
}

:where(.r04-autometro, .r04-semiconductor) .r04-tour__panel {
    padding: clamp(2rem, 3.6vw, 3.5rem);
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
}

.r05-tour-media {
    min-height: 330px;
    align-self: stretch;
    border-radius: 14px;
    box-shadow: 0 24px 55px rgba(5, 31, 59, 0.18);
}

.r05-tour-media .r05-picture {
    position: absolute;
    inset: 0;
}

.r05-tour-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(115deg, rgba(2, 17, 34, 0.08), transparent 48%, rgba(35, 119, 190, 0.08));
    content: "";
    pointer-events: none;
}

/* Text-first process sequences: no diagram arrows or decorative flow lines. */

.r05-process-list {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(22px, 3.2vw, 42px);
    list-style: none;
    counter-reset: r05-step;
}

.r05-process-list li {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 138px;
    gap: 10px;
    padding: 22px 0 0;
    border-top: 2px solid rgba(8, 42, 77, 0.24);
    counter-increment: r05-step;
}

.r05-process-list li::before {
    color: var(--r04-orange, #c94a12);
    content: counter(r05-step, decimal-leading-zero);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0.12em;
}

.r05-process-list strong {
    color: var(--r04-ink, #082a4d);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.45;
}

.r05-process-list span {
    color: var(--r04-muted, #697e92);
    font-size: 13px;
    line-height: 1.7;
}

.r05-process-list--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r05-process-list--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.r05-process-list--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.r05-process-list--stacked li {
    min-height: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 17px 0;
    border-top-width: 1px;
}

.r05-process-list--stacked li:last-child {
    border-bottom: 1px solid rgba(8, 42, 77, 0.2);
}

.r05-process-list--stacked li::before {
    grid-column: 1;
}

.r05-process-list--stacked strong {
    grid-column: 2;
}

/* Large image stories with adjacent factual notes. */

.r05-technology-story,
.r05-visual-story {
    display: grid;
    min-width: 0;
    align-items: start;
    grid-template-columns: minmax(0, 1.42fr) minmax(250px, 0.58fr);
    gap: clamp(28px, 4vw, 58px);
}

.r04-technology-connection .r05-technology-story,
.r04-technology-decision .r05-technology-story {
    grid-template-columns: minmax(0, 1fr);
}

.r04-technology-connection .r05-visual,
.r04-technology-decision .r05-visual {
    min-height: 300px;
}

.r05-technology-notes {
    display: grid;
    align-content: center;
    gap: 0;
    min-width: 0;
}

.r05-technology-notes > h3 {
    margin: 0 0 20px;
    font-size: clamp(20px, 2vw, 28px);
}

.r05-technology-notes > :where(article, div, p) {
    margin: 0;
    padding: 17px 0;
    border-top: 1px solid rgba(8, 42, 77, 0.17);
}

.r05-technology-notes > :where(article, div, p):last-child {
    border-bottom: 1px solid rgba(8, 42, 77, 0.17);
}

.r05-technology-notes :where(h3, strong) {
    color: var(--r04-ink, #082a4d);
}

.r05-technology-notes article h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.r05-technology-notes :where(p, span, li) {
    color: var(--r04-muted, #697e92);
    font-size: 13px;
    line-height: 1.7;
}

.r05-technology-notes article p {
    margin: 5px 0 0;
}

.r05-technology-notes ul {
    display: flex;
    flex-wrap: wrap;
    margin: 9px 0 0;
    padding: 0;
    gap: 7px 15px;
    list-style: none;
}

.r05-technology-notes .r05-process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.r05-technology-notes .r05-process-list li {
    min-height: 104px;
    padding-top: 14px;
}

.r05-technology-notes .r05-process-list li::before {
    font-size: 9px;
}

.r05-technology-notes .r05-process-list strong {
    font-size: 14px;
}

/* World-model dark treatment. */

.r04-world-model :where(.r05-visual, .r05-tour-media) {
    border-color: rgba(103, 176, 232, 0.3);
    box-shadow: 0 34px 90px rgba(0, 3, 12, 0.52);
}

.r04-world-model .r05-technology-notes > :where(article, div, p),
.r04-world-model .r05-process-list li {
    border-color: rgba(126, 187, 234, 0.21);
}

.r04-world-model :where(.r05-technology-notes, .r05-process-list) :where(h3, strong) {
    color: #edf5fc;
}

.r04-world-model :where(.r05-technology-notes, .r05-process-list) :where(p, span, li) {
    color: #97adc1;
}

.r04-world-model .r05-process-list li::before {
    color: #61b6fa;
}

.r04-world-model .r05-visual-story--cycle {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
}

.r04-world-model .r05-visual-story--cycle .r05-process-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.r04-world-model .r05-visual-story--cycle .r05-process-list li {
    min-height: 0;
    padding: 16px 0;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 5px 10px;
}

.r04-world-model .r05-visual-story--cycle .r05-process-list li::before {
    grid-row: 1 / 3;
}

.r05-scene-media {
    min-height: 510px;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.r05-scene-media .r05-world-scene-picture {
    position: absolute;
    inset: 0;
}

.r05-scene-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 12, 27, 0.34), transparent 36%);
    content: "";
    pointer-events: none;
}

/* Semiconductor system relationship: three text groups, no arrows. */

.r05-system-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(8, 42, 77, 0.22);
    border-bottom: 1px solid rgba(8, 42, 77, 0.22);
}

.r05-system-summary article {
    display: grid;
    align-content: center;
    min-height: 150px;
    gap: 10px;
    padding: 28px clamp(20px, 3vw, 42px);
}

.r05-system-summary article + article {
    border-left: 1px solid rgba(8, 42, 77, 0.14);
}

.r05-system-summary article:nth-child(2) {
    background: #eef5fb;
}

.r05-system-summary span {
    color: var(--r04-muted, #697e92);
    font-size: 13px;
    line-height: 1.7;
}

.r05-system-summary strong {
    color: var(--r04-ink, #082a4d);
    font-size: 17px;
    line-height: 1.5;
}

@media (max-width: 1120px) {
    .r05-process-list--five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .r05-technology-story,
    .r05-visual-story,
    .r04-world-model .r05-visual-story--cycle {
        grid-template-columns: minmax(0, 1fr);
    }

    .r05-technology-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        column-gap: 28px;
    }

    .r05-technology-notes > h3,
    .r05-technology-notes > .r05-process-list {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .r05-visual--hero {
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-radius: 15px;
    }

    :where(.r04-autometro, .r04-semiconductor) .r04-tour__tabs {
        grid-auto-flow: column;
        grid-auto-columns: minmax(132px, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    :where(.r04-autometro, .r04-semiconductor) .r04-tour__panel {
        min-height: 0;
        padding: 24px 18px 18px;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .r05-tour-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-radius: 11px;
    }

    .r05-process-list,
    .r05-process-list--six,
    .r05-process-list--five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 20px;
    }

    .r05-process-list li {
        min-height: 124px;
    }

    .r05-process-list--stacked {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .r05-technology-notes {
        grid-template-columns: minmax(0, 1fr);
    }

    .r05-technology-notes > h3,
    .r05-technology-notes > .r05-process-list {
        grid-column: auto;
    }

    .r05-technology-notes .r05-process-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r05-system-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .r05-system-summary article {
        min-height: 0;
        padding: 24px 0;
    }

    .r05-system-summary article + article {
        border-top: 1px solid rgba(8, 42, 77, 0.14);
        border-left: 0;
    }

    .r05-system-summary article:nth-child(2) {
        padding-inline: 20px;
    }

    .r04-products-architecture .r04-section-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .r04-products-architecture .r05-visual,
    .r04-technology-connection .r05-visual,
    .r04-technology-decision .r05-visual {
        min-height: 0;
    }

    .r04-scene-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .r05-scene-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-top: 1px solid rgba(106, 177, 233, 0.2);
    }
}

@media (max-width: 480px) {
    .r05-visual--architecture,
    .r05-visual--technology,
    .r05-visual--system {
        aspect-ratio: 4 / 3;
        border-radius: 13px;
    }

    .r05-process-list,
    .r05-process-list--six,
    .r05-process-list--five,
    .r05-technology-notes .r05-process-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .r05-process-list li,
    .r05-technology-notes .r05-process-list li {
        min-height: 0;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 5px 10px;
        padding: 17px 0;
        border-top-width: 1px;
    }

    .r05-process-list li::before {
        grid-row: 1 / 3;
    }

    .r05-process-list strong,
    .r05-process-list span {
        grid-column: 2;
    }

    .r05-technology-story,
    .r05-visual-story {
        gap: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .r04-page :where(.r05-visual, .r05-tour-media) img {
        transition: none;
    }
}