/* ============================
   Capability Detail Page (Shared)
   Use this file for ALL 10 subpages
============================ */

.cap-detail-hero {
  padding: 18rem 8% 7rem;
  position: relative;
  background: center/cover no-repeat;
  text-align: left;
}

.cap-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 26, 47, 0.45),
    rgba(10, 26, 47, 0.85)
  );
}

.cap-detail-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}

.cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.22);
  background: rgba(248, 250, 252, 0.06);
  color: var(--off-white);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.cap-detail-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.2rem, 3.2vw, 4rem);
  line-height: 1.08;
  color: var(--gold-color);
}

.cap-subtitle {
  margin: 0;
  max-width: 900px;
  color: rgba(248, 250, 252, 0.92);
  font-size: 1.15rem;
  line-height: 1.75;
}

.cap-detail-section {
  background: var(--federal-blue);
  padding: 5rem 10%;
}

.cap-detail-card {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.cap-detail-card h2 {
  margin: 0 0 1rem;
  font-size: 2rem;
  color: var(--off-white);
}

.cap-detail-card h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.4rem;
  color: var(--gold-color);
}

.cap-detail-card p {
  margin: 0.75rem 0 0;
  color: #E5E7EB;
  font-size: 1.05rem;
  line-height: 1.9;
}

/* Nice bullets (no ugly default bullets) */
.cap-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.cap-list li {
  position: relative;
  padding: 0.9rem 0.25rem 0.9rem 2.2rem;
  color: #E5E7EB;
  line-height: 1.7;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.cap-list li:last-child {
  border-bottom: none;
}

.cap-list li::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 1.25rem;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold-color);
  box-shadow: 0 0 0 4px rgba(178, 138, 52, 0.18);
}

.cap-divider {
  height: 1px;
  background: rgba(148, 163, 184, 0.22);
  margin: 2.25rem 0;
}

.cap-cta {
  margin-top: 2.2rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
}

.cap-btn {
  display: inline-block;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: var(--gold-color);
  color: var(--navy-blue);
  text-decoration: none;
  font-weight: 800;
  transition: 0.2s ease;
}

.cap-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.cap-back {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 650;
  border-bottom: 1px solid rgba(56, 189, 248, 0.5);
  padding-bottom: 0.1rem;
}

.cap-back:hover {
  border-bottom-color: var(--cyan);
}

/* ============================
   Nested Capability Lists
   (Used for Integration & Test
   and other detailed pages)
============================ */

/* Top-level list item title */
.cap-list > li > strong {
  display: block;
  font-size: 1.15rem;
  color: var(--off-white);
  margin-bottom: 0.45rem;
}

/* Inner list container */
.cap-list ul {
  list-style: disc;
  margin: 0.6rem 0 0.8rem 1.6rem;
  padding-left: 0;
}

/* Inner bullet items */
.cap-list ul li {
  padding: 0.35rem 0;
  border: none;
  font-size: 0.98rem;
  color: #CBD5E1;
  line-height: 1.65;
}

/* Remove custom gold dot from inner bullets */
.cap-list ul li::before {
  content: none;
}


/* Responsive Design */

/* ≤ 2560px: ultra-wide */
@media (max-width: 2560px) {
    .cap-detail-hero-inner {
        max-width: 1200px;
    }

    .cap-detail-section {
        padding: 5rem 12%;
    }
}

/* ≤ 1920px: standard desktops */
@media (max-width: 1920px) {
    .cap-detail-hero {
        padding: 18rem 8% 7rem;
    }

    .cap-detail-section {
        padding: 5rem 10%;
    }
}

/* ≤ 1200px: laptops */
@media (max-width: 1200px) {
    .cap-detail-hero {
        padding: 16rem 8% 6rem;
    }

    .cap-detail-section {
        padding: 4.25rem 8%;
    }

    .cap-detail-card {
        padding: 2.75rem;
    }

    .cap-detail-card h2 {
        font-size: 1.9rem;
    }

    .cap-detail-card p {
        font-size: 1.02rem;
    }

    .cap-list li {
        padding-left: 2rem;
    }
}

/* ≤ 992px: large tablets / small laptops */
@media (max-width: 992px) {
    .cap-detail-hero {
        padding: 16rem 6% 5.5rem;
        background-position: center;
    }

    .cap-subtitle {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .cap-detail-section {
        padding: 4rem 7%;
    }

    .cap-detail-card {
        padding: 2.5rem 2.25rem;
    }

    .cap-list li {
        padding: 0.85rem 0.25rem 0.85rem 1.9rem;
    }

    .cap-list li::before {
        left: 0.5rem;
        top: 1.1rem;
        width: 9px;
        height: 9px;
    }

    .cap-list ul {
        margin-left: 1.4rem;
    }
}

/* ≤ 768px: tablets */
@media (max-width: 768px) {
    .cap-detail-hero {
        padding: 16rem 5% 4.75rem;
        text-align: left;
    }

    .cap-detail-hero-inner {
        max-width: 100%;
    }

    .cap-subtitle {
        max-width: 100%;
    }

    .cap-detail-section {
        padding: 3.5rem 6%;
    }

    .cap-detail-card {
        padding: 2.25rem 1.75rem;
        border-radius: 14px;
    }

    .cap-detail-card h2 {
        font-size: 1.75rem;
    }

    .cap-detail-card h3 {
        font-size: 1.3rem;
    }

    .cap-detail-card p {
        font-size: 0.98rem;
        line-height: 1.8;
    }

    .cap-list li {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .cap-list ul li {
        font-size: 0.94rem;
    }

    .cap-cta {
        gap: 1rem;
    }
}

/* ≤ 480px: small mobile */
@media (max-width: 480px) {
    .cap-detail-hero {
        padding: 16rem 1.5rem 3.5rem;
        text-align: left;
    }

    .cap-detail-hero h1 {
        font-size: 2.1rem;
    }

    .cap-subtitle {
        font-size: 0.96rem;
    }

    .cap-detail-section {
        padding: 2.75rem 1.25rem 3rem;
    }

    .cap-detail-card {
        padding: 1.9rem 1.4rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    }

    .cap-detail-card h2 {
        font-size: 1.55rem;
    }

    .cap-detail-card p {
        font-size: 0.95rem;
    }

    .cap-list li {
        padding: 0.8rem 0.2rem 0.8rem 1.7rem;
        font-size: 0.94rem;
    }

    .cap-list li::before {
        left: 0.45rem;
        top: 1.05rem;
        width: 8px;
        height: 8px;
    }

    .cap-cta {
        margin-top: 1.75rem;
        flex-direction: column;
        align-items: stretch;
    }

    .cap-btn {
        width: 100%;
        text-align: center;
    }

    .cap-back {
        text-align: center;
    }
}