/* The energy and telemetry page, loaded after data-acquisition-2.css and using its sections.
   This file holds only what differs from that page. */

/* The two views of the gateway, side by side on one baseline and never touching. */
.et-hero__images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.et-hero__images img { display: block; height: auto; filter: drop-shadow(0 0 26px rgba(190, 212, 255, 0.16)); }

.et-hero__closed { width: 62%; }

.et-hero__ports { width: 100%; }

@media (min-width: 640px) {
    .et-hero__images { flex-direction: row; align-items: flex-end; justify-content: center; gap: 44px; }

    .et-hero__closed { flex: 0 0 37%; width: auto; min-width: 0; }

    .et-hero__ports { flex: 1 1 0; width: auto; min-width: 0; }
}

@media (min-width: 960px) {
    .et-hero .da2-hero__grid { grid-template-columns: 0.85fr 1.15fr; gap: 48px; }
}

/* Four photographs, two over two. */
@media (min-width: 640px) {
    .et-apps article:first-child { grid-column: auto; }
}

@media (min-width: 1100px) {
    .et-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .et-apps article,
    .et-apps article:first-child,
    .et-apps article:nth-child(-n + 2) { grid-column: auto; }
}

/* How it works: a drawn network map from the meters to the Head-End. */
.et-how .da2-head { max-width: none; }

.et-map-wrap { overflow-x: auto; }

.et-map { display: block; width: 100%; max-width: 1120px; min-width: 880px; height: auto; margin-inline: auto; }

.et-map text { font-family: var(--v2-body-font, inherit); fill: #ffffff; }

.et-map .et-map__h { font-family: var(--v2-head-font); font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.et-map .et-map__h--accent { fill: #a32b2c; }

.et-map .et-map__b { font-family: var(--v2-head-font); font-size: 14px; font-weight: 700; }

.et-map .et-map__s { font-size: 12.5px; fill: #c9d4df; }

.et-map .et-map__n { font-size: 11.5px; font-style: italic; fill: #aebbc8; }

.et-map .et-map__c { text-anchor: middle; }

.et-map .et-map__end { text-anchor: end; }

.et-map .et-map__red { fill: #f4a39c; font-weight: 700; }

/* Text on the white gateway card, the cloud and the broker box keeps dark ink. */
.et-map .et-map__ink { fill: #1d2733; }

.et-map .et-map__ink-soft { fill: #4c5866; }

.et-map .et-map__badge { fill: #ffffff; font-weight: 700; }

.et-map__panel { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; }

.et-map__bus { fill: none; stroke: #a9b8c8; stroke-width: 2.2; }

.et-map__bus--thin { stroke-width: 1.6; stroke-dasharray: 5 4; }

.et-map__wire { fill: none; stroke: #a9b8c8; stroke-width: 1.8; }

.et-map__wire--bar { stroke: #6fa0d8; stroke-width: 5; stroke-linecap: round; }

.et-map__link { fill: none; stroke: #ef6b63; stroke-width: 2.4; }

.et-map__dash { fill: none; stroke: #a9b8c8; stroke-width: 1.8; stroke-dasharray: 4 4; }

@media (min-width: 1100px) {
    .et-how.v2-section { padding-block: 32px; }

    .et-how .da2-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 24px; margin-bottom: 16px; }

    .et-how .da2-head p { margin-top: 0; font-size: 0.9375rem; }
}

@media (min-width: 1100px) and (max-height: 820px) {
    .et-how.v2-section { padding-block: 16px; }

    .et-how .da2-head { margin-bottom: 8px; }
}

/* Local service: the laptop and tablet scene. Packets run along the cables, the active
   button pulses and the reading LEDs blink; all of it stops for reduced motion. */
.et-sw__pulse { animation: et-sw-pulse 1.6s ease-in-out infinite; }

.et-sw__blink { animation: et-sw-blink 1s steps(2, jump-none) infinite; }

@keyframes et-sw-pulse { 50% { opacity: 0.72; } }

@keyframes et-sw-blink { 50% { opacity: 0.15; } }

@media (prefers-reduced-motion: reduce) {
    .et-sw__pkt { display: none; }

    .et-sw__pulse,
    .et-sw__blink { animation: none; }
}

/* Models and the dimensional drawing. */
.et-models { display: grid; gap: 32px; }

.et-table { min-width: 0; }

.et-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.et-table th,
.et-table td { padding: 11px 10px; border-bottom: 1px solid var(--v2-rule); text-align: left; vertical-align: top; }

.et-table thead th { padding-top: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v2-ink-soft); }

.et-table tbody th { font-family: var(--v2-head-font); font-weight: 700; white-space: nowrap; }

.et-table .et-actions { margin-top: 20px; }

.et-drawing { margin: 0; }

/* The drawing sits on the section background; the link opens the original on white. */
.et-drawing a { display: block; }

.et-drawing img { display: block; width: 100%; height: auto; }

.et-drawing figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--v2-ink-soft); }

@media (max-width: 639px) {
    .et-table thead { display: none; }

    .et-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; padding-block: 10px; border-bottom: 1px solid var(--v2-rule); }

    .et-table tbody th { grid-column: 1 / -1; }

    .et-table th,
    .et-table td { padding: 0; border-bottom: 0; }

    .et-table td::before { content: attr(data-label) ' '; font-size: 0.75rem; color: var(--v2-ink-soft); }
}

@media (min-width: 1000px) {
    .et-models { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
}

/* Technical summary. */
.et-specs { display: grid; gap: 28px; }

.et-specs dl { margin: 10px 0 0; }

.et-specs dl > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding-block: 8px; border-top: 1px solid var(--v2-rule); }

.et-specs dt { font-size: 0.875rem; color: var(--v2-ink-soft); }

.et-specs dd { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--v2-ink); overflow-wrap: anywhere; }

@media (min-width: 768px) {
    .et-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
}

@media (min-width: 1200px) {
    .et-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}