/* ==========================================================
   ICON BALI DIGITAL — COMPONENT STANDARD v1.0
   Phase 2 R1 / Semantic component layer
   Loaded after enterprise-standard.css.
   Purpose: remove inline presentation rules and centralize
   reusable component behavior without changing Phase 1 visuals.
   ========================================================== */

body[data-product="vdeck"]   { --ib-product-accent: var(--ib-vdeck);   --ib-product-accent-rgb: 59, 130, 246; }
body[data-product="opsdeck"] { --ib-product-accent: var(--ib-opsdeck); --ib-product-accent-rgb: 16, 185, 129; }
body[data-product="cydeck"]  { --ib-product-accent: var(--ib-cydeck);  --ib-product-accent-rgb: 239, 68, 68; }
body[data-product="workdeck"]{ --ib-product-accent: var(--ib-workdeck);--ib-product-accent-rgb: 217, 119, 6; }

/* Product dropdown metadata */
.nav-product-meta {
  font-size: 12px;
  opacity: .7;
}

/* Shared hero helpers */
.hero-logo-centered {
  display: block;
  margin-inline: auto;
}

.content-width-800,
.content-width-850,
.content-width-900 {
  margin-inline: auto;
}
.content-width-800 { max-width: 800px; }
.content-width-850 { max-width: 850px; }
.content-width-900 { max-width: 900px; }

.product-hero-tag {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 25px;
}
.product-accent-tag {
  border-color: var(--ib-product-accent);
  color: var(--ib-product-accent);
  background: rgba(var(--ib-product-accent-rgb), .1);
}
.product-accent-text,
.product-accent-icon {
  color: var(--ib-product-accent);
}
.product-accent-text-strong { font-weight: 600; }

/* Product detail pattern */
.detail-section { padding-bottom: 100px; }
.detail-title {
  font-size: 32px;
  margin-bottom: 20px;
}
.detail-subtitle {
  color: #fff;
  margin-bottom: 20px;
}
.detail-subtitle-tight { margin-bottom: 15px; }
.detail-copy {
  color: #b7c7d8;
  line-height: 1.8;
}
.detail-copy-spaced { margin-bottom: 20px; }
.detail-copy-large-gap { margin-bottom: 30px; }
.detail-list {
  list-style: none;
  padding: 0;
}
.detail-list-item {
  margin-bottom: 15px;
  color: #b7c7d8;
}
.detail-list-item-compact { margin-bottom: 12px; }
.detail-list-item-flex {
  display: flex;
  gap: 10px;
}

/* Architecture media wrapper */
.arch-image-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}