/* ============================================================
   Unisys — Data center services landing page
   Page-level styles. Design tokens live in tokens.css.
   Most layout/visual styling is inline on the elements in
   index.html; this file holds base rules, hover/press states,
   keyframes and responsive overrides.
   ============================================================ */

:root { --sec-py: 96px; } /* section vertical rhythm (compact 64 / regular 96 / spacious 128) */

html, body { background: var(--u-white); margin: 0; overflow-x: hidden; }
* { box-sizing: border-box; }
body { font-family: var(--u-font-sans); color: var(--u-dark-teal); }
::selection { background: var(--u-propel-mint); color: var(--u-dark-teal); }
img { max-width: 100%; }

/* ---- Button hover / press (brand: swap to paired color, size fixed) ---- */
.u-btn { transition: background var(--u-dur-base) var(--u-ease-out), color var(--u-dur-base) var(--u-ease-out), transform var(--u-dur-fast) var(--u-ease-out); }
.u-btn:hover { transform: translateY(-1px); }
.u-btn:active { transform: translateY(0); }
.u-btn-primary:hover { background: var(--u-propel-mint) !important; color: var(--u-dark-teal) !important; border-color: var(--u-propel-mint) !important; }
.u-btn-blueMint:hover { background: var(--u-propel-mint) !important; color: var(--u-dark-teal) !important; border-color: var(--u-propel-mint) !important; }
.u-btn-mint:hover { background: var(--u-dark-teal) !important; color: var(--u-white) !important; border-color: var(--u-dark-teal) !important; }
.u-btn-onDarkMint:hover { background: var(--u-dark-teal) !important; color: var(--u-white) !important; border-color: var(--u-white) !important; }
.u-btn-ghost:hover { background: var(--u-dark-teal) !important; color: var(--u-white) !important; }
.u-btn-ghostOnDark:hover { background: var(--u-white) !important; color: var(--u-dark-teal) !important; }

.u-navlink:hover { color: var(--u-purposeful-teal) !important; border-bottom-color: var(--u-purposeful-teal) !important; }
.dc-chip:hover { border-color: var(--u-dark-teal) !important; }
.dc-cap-card { transition: transform var(--u-dur-base) var(--u-ease-out), border-color var(--u-dur-base) var(--u-ease-out); }
.dc-cap-card:hover { transform: translateY(-3px); border-color: var(--u-dark-teal); }
/* Only the first card in each grid keeps the U-curve; the rest are squared. */
.dc-grid-4 > .dc-cap-card:not(:first-child),
.dc-grid-3 > .dc-cap-card:not(:first-child) { border-top-left-radius: 0 !important; }
.dc-footlink:hover { opacity: 1 !important; color: var(--u-propel-mint) !important; }

input::placeholder, textarea::placeholder { color: var(--u-fg-subtle); }
input:focus, select:focus, textarea:focus { border-color: var(--u-dark-teal) !important; }

/* ---- Filter fade ---- */
@keyframes dcfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.dc-fade { animation: dcfade var(--u-dur-slow) var(--u-ease-out); }

/* ---- Image placeholders ----
   Mark where production imagery should be dropped in. Replace each
   .media-placeholder with an <img> (or <picture>) of the same footprint. */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 440px;
  padding: 24px;
  background: var(--u-bg-soft);
  border: 1.5px dashed var(--u-border-default);
  border-top-left-radius: 28px;
  color: var(--u-fg-subtle);
  font: 600 14px/1.4 var(--u-font-sans);
  letter-spacing: 0.01em;
}
section[style*="dark-teal"] .media-placeholder,
#ai-cooling .media-placeholder {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.7);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .dc-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .dc-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 880px) {
  section { padding-left: 24px !important; padding-right: 24px !important; }
   footer { padding-left: 24px !important; padding-right: 24px !important; }
  .dc-hero-grid, .dc-2col, .dc-grid-4, .dc-grid-3, .dc-grid-2,
  .dc-form-grid, .dc-form-2col, .dc-foot-grid { grid-template-columns: 1fr !important; }
  .dc-navlinks { display: none !important; }
  .dc-foot-grid { gap: 36px !important; }
}