/* How the power chain works, on the high density page. Loaded after data-acquisition-2-how.css,
   whose .dh and .dh-fit rules it shares. */

.ph2__chain,
.ph2__steps { display: grid; gap: 16px; }

.ph2__value strong { display: block; font-size: 1.75rem; color: #fff; }

.ph2__module { padding: 14px; background: var(--dh-card); }

.dh .ph2__models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }

.ph2__models a { display: block; text-align: center; text-decoration: none; }

.ph2__models img { width: 100%; max-width: 220px; margin-inline: auto; filter: drop-shadow(0 0 16px rgba(190, 212, 255, 0.18)); }

.ph2__models span {
    display: block;
    margin-top: 2px;
    font-family: var(--v2-head-font);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
}

.ph2__models a:hover span { text-decoration: underline; text-underline-offset: 3px; }

.ph2__steps li { display: flex; gap: 10px; }

@media (min-width: 1100px) {
    .ph2__chain { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr) minmax(0, 0.75fr) minmax(0, 1.6fr) minmax(0, 0.75fr); gap: 26px; align-items: center; }

    .ph2__chain > * { position: relative; }

    .ph2__chain > *:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -22px;
        width: 18px;
        border-top: 2px solid var(--v2-accent);
    }

    .ph2__value { text-align: center; }
}

/* Short screens, such as a laptop at 125%. */
@media (min-width: 1100px) and (max-height: 820px) {
    .ph2__models img { max-width: 175px; }

    .dh .ph2__models { margin-bottom: 8px; }

    .ph2__value strong { font-size: 1.375rem; }

    .ph2__module { padding: 8px 10px; }

    .ph2__steps { gap: 8px; }
}