/* Data Centre Solutions page. Layout and colour only; all type comes from the
   typography.css / content.css classes in the markup. Builds on green-hydrogen.css
   (section rhythm, cards, step list) like the other emerging-solution pages.
   No coloured left stripes on any box: even thin borders and panel fills only. */

/* Banner: eyebrow, title, lead */
.dc-page .page-banner__eyebrow{margin:0}
.dc-page .page-banner__title{text-wrap:balance}

/* Home card links land on a section: keep its top padding clear of the 87px sticky header */
.dc-page section[id]{scroll-margin-top:87px}

/* Two-column copy and photo */
.dc-page .dc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.gh-page.dc-page .section .dc-split__copy .ds-body-large{max-width:none}
.dc-page .dc-figure img{aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-large)}
#cooling-solutions .dc-split .dc-figure img{object-position:70% 50%}
#water-footprint .dc-figure img{object-position:60% 40%}

/* Cooling technologies: photo beside the three technologies, controls panel below */
.dc-page .dc-tech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;margin-top:64px}
.dc-page .dc-tech__fig img{aspect-ratio:1/1;object-position:72% 50%}
.dc-page .dc-tech__item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid var(--color-border-light)}
.dc-page .dc-tech__item:first-child{padding-top:0;border-top:0}
.dc-page .dc-tech__item:last-child{padding-bottom:0}
.dc-page .dc-tech__item .gh-title,.dc-page .dc-panel .gh-title{margin:0 0 8px}
.dc-page .dc-tech__item .gh-body,.dc-page .dc-panel .gh-body{margin:0}
.dc-page .dc-panel{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;margin-top:56px;padding:32px;border:1px solid var(--color-border-light);border-radius:var(--radius-large);background:var(--color-surface-card)}
.dc-page .dc-panel .gh-body{max-width:none}

/* EPC and project integration: the shared step list, photo under the lead */
.gh-page.dc-page .section .dc-epc__lead .ds-body-large{max-width:none}
.dc-page .dc-epc__lead .dc-figure,.dc-page .dc-why__head .dc-figure{margin-top:32px}
.dc-page .dc-steps .gh-step .ds-eyebrow{margin:0 0 6px}

/* Water footprint: check list */
#main-content.dc-page .dc-checks{display:grid;gap:12px;margin:28px 0 0}
.dc-page .dc-checks li{position:relative;padding-left:34px;color:var(--text-reading)}
.dc-page .dc-checks li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background-color:var(--color-brand-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E");background-size:12px 12px;background-position:center;background-repeat:no-repeat}

/* Applications: icon beside the text */
#main-content.dc-page .dc-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px 0 0}
.gh-page.dc-page .dc-app{flex-direction:row;align-items:center;gap:16px}
.dc-page .dc-app .gh-step__icon{flex:none}

/* Why Ion Exchange?: same lead and step timeline as the EPC section */
.gh-page.dc-page .section .dc-why__head .ds-h2{margin:0}

/* Closing section: the industry pages' consultation block (us-contact in content.css) */

/* Sticky lead columns only where they fit on screen */
@media(min-width:1024px) and (min-height:820px){
.dc-page .dc-tech__fig,.dc-page .dc-epc__lead,.dc-page .dc-why__head{position:sticky;top:140px}
}

@media(max-width:1023px){
.dc-page .dc-split,.dc-page .dc-tech{grid-template-columns:minmax(0,1fr);gap:32px}
.dc-page .dc-tech{margin-top:48px}
.dc-page .dc-tech__fig img{aspect-ratio:16/10}
.dc-page .dc-epc__lead .dc-figure,.dc-page .dc-why__head .dc-figure{margin-top:24px}
#main-content.dc-page .dc-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:639px){
.dc-page .dc-tech__item{gap:16px}
.dc-page .dc-panel{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px;padding:24px 20px}
#main-content.dc-page .dc-apps{grid-template-columns:minmax(0,1fr);gap:12px}
.gh-page.dc-page .dc-app{padding:16px 20px}
}