/* ==========================================================================
   KOBIL — Industry Public Administration — Section: Key Use Cases (Aug
   2026 redesign). Figma: D-Industries/Public Administration → KEY USE
   CASES, node 5882:46274.
   Simplified from the old rich cards (nested bullet sub-items + phone
   mockups) to the same flat card pattern already verified for the Aug
   2026 net-new industry pages (css/industries/_shared/key-use-cases.css):
   icon badge + label row, title, one description paragraph, divider,
   result line. This page keeps its own file (register_subpage(), no
   _shared mechanism) so the class names/copy stay page-specific.
   ========================================================================== */

.sec-public-administration-key-use-cases {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--w40);
  width: 100%;
  padding: var(--w120) var(--w80) 0;
}

.sec-public-administration-key-use-cases__head {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  max-width: var(--w520);
}

.sec-public-administration-key-use-cases__tag {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-public-administration-key-use-cases__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.3;
  color: var(--navy);
}

.sec-public-administration-key-use-cases__title-accent {
  background: linear-gradient(90deg, #3ebffc 3.4632%, #1046cf 13.161%, #696ef5 41.167%, #ca80f4 63.622%, #ffc4a0 99.443%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-public-administration-key-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--w40);
}

.sec-public-administration-key-use-cases__card {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  padding: var(--w40) var(--w40) var(--w60);
  background: var(--white);
  border-radius: var(--w20);
  box-shadow: 0 4px 22px rgba(17, 36, 74, 0.08);
}

.sec-public-administration-key-use-cases__card-top {
  display: flex;
  flex-direction: column;
  gap: var(--w10);
}

.sec-public-administration-key-use-cases__card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w16);
}

.sec-public-administration-key-use-cases__card-label {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w22);
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-public-administration-key-use-cases__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--w56);
  height: var(--w56);
  border-radius: 17.5px;
  background: #f7f8fd;
}

.sec-public-administration-key-use-cases__card-icon img {
  width: var(--w28);
  height: var(--w28);
}

.sec-public-administration-key-use-cases__card-title {
  font-family: var(--font-sans);
  font-size: var(--w24);
  font-weight: 700;
  line-height: var(--w32);
  color: var(--navy);
}

.sec-public-administration-key-use-cases__card-desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

.sec-public-administration-key-use-cases__card-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--navy-30);
}

.sec-public-administration-key-use-cases__card-result {
  font-family: var(--font-sans);
  font-size: var(--w16);
  line-height: var(--w23);
  color: var(--navy);
}

.sec-public-administration-key-use-cases__card-result strong {
  font-weight: 600;
}

@media (max-width: 768px) {
  .sec-public-administration-key-use-cases {
    padding: var(--w64) var(--w40) 0;
  }

  .sec-public-administration-key-use-cases__title {
    font-size: var(--w44);
  }

  .sec-public-administration-key-use-cases__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sec-public-administration-key-use-cases {
    padding: var(--m48) var(--m24) 0;
    gap: var(--m48);
  }

  .sec-public-administration-key-use-cases__title {
    font-size: var(--m32);
  }

  .sec-public-administration-key-use-cases__card {
    padding: var(--m28) var(--m24) var(--m36);
  }
}