/* ==========================================================================
   KOBIL — Industry Public Administration — Section: Hero (Aug 2026 redesign)
   Figma: D-Industries/Public Administration → hero, node 5882:46146
   (desktop), 5882:49677 (mobile, 393x732).
   Full-bleed gradient background, serif headline, and a bespoke "public
   parking payment" confirmation card (checkmark badge + View/Send Receipt
   buttons + Done button) layered over an un-mirrored, custom-cropped
   photo. Same architecture as css/industries/financial-services/hero.css.
   ========================================================================== */

.sec-public-administration-hero {
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w754);
  background-color: #ffffff;
  background-image: url("/assets/industries/public-administration/hero/hero-bg-new.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-public-administration-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--page-max);
  min-height: var(--w754);
  margin: 0 auto;
  padding: 0 var(--w90);
}

.sec-public-administration-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  max-width: var(--w467);
}

.sec-public-administration-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--navy);
}

.sec-public-administration-hero__eyebrow-dot {
  display: inline-block;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: var(--navy);
}

.sec-public-administration-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

.sec-public-administration-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

.sec-public-administration-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w64);
  line-height: 1.2;
  color: var(--navy);
}

.sec-public-administration-hero__desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

.sec-public-administration-hero__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--white);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.sec-public-administration-hero__cta:hover {
  background: var(--navy-20);
}

.sec-public-administration-hero__cta img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.sec-public-administration-hero__cta:hover img {
  transform: translateX(3px);
}

/* ---- Photo — Figma 5882:46178: left:calc(50%+353.02px) w/
   -translate-x-1/2, bottom:~0, 610.943x572.415 -> left 767.55px (53.3%),
   width 42.43%, height 76.02%. No mirror (unlike Financial/Telecom), but
   a custom zoom+pan crop (inner img: 109.29% wide, 120.42% tall, shifted
   -4.65%/+4.11%) rather than a plain object-fit:cover. ---- */

.sec-public-administration-hero__media {
  position: absolute;
  z-index: 5;
  left: 53.3%;
  bottom: 0;
  width: var(--w611);
  height: var(--w572);
  overflow: hidden;
}

.sec-public-administration-hero__photo {
  position: absolute;
  left: -4.65%;
  top: 4.11%;
  width: 109.29%;
  height: 120.42%;
  max-width: none;
  object-fit: cover;
}

/* ---- Bespoke "public parking payment" card — Figma 5882:46161:
   center-anchored at calc(50%+184.69px)/calc(50%+75.82px), 265x255 ->
   top-left in px: left 772.19px (53.62%), top 325.32px (43.15%). ---- */

.sec-public-administration-hero__card {
  position: absolute;
  z-index: 4;
  left: 53.62%;
  top: 43.15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w18);
  width: var(--w265);
  height: var(--w255);
  padding: var(--w21);
  background: var(--white);
  border-radius: var(--w14);
  box-shadow: 2.438px 2.438px 5.83px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

.sec-public-administration-hero__pa-title {
  font-family: var(--font-ui);
  font-size: var(--w12);
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}

.sec-public-administration-hero__pa-badge {
  flex: none;
  width: var(--w59);
  height: var(--w59);
}

.sec-public-administration-hero__pa-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w11);
  width: 100%;
}

.sec-public-administration-hero__pa-status {
  font-family: "Barlow", var(--font-ui), sans-serif;
  font-weight: 500;
  font-size: var(--w11);
  line-height: 1.54;
  color: #232935;
  text-align: center;
  width: 100%;
}

.sec-public-administration-hero__pa-actions {
  display: flex;
  gap: var(--w7);
  align-items: center;
  width: 100%;
}

.sec-public-administration-hero__pa-action {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--w4);
  padding: var(--w4) var(--w7) var(--w4) var(--w5);
  background: #f5f7fc;
  border-radius: var(--w4);
}

.sec-public-administration-hero__pa-action img {
  flex: none;
  width: var(--w12);
  height: var(--w12);
  transform: rotate(180deg);
}

.sec-public-administration-hero__pa-action span {
  font-family: "Barlow", var(--font-ui), sans-serif;
  font-weight: 500;
  font-size: var(--w11);
  color: #232935;
  white-space: nowrap;
}

.sec-public-administration-hero__pa-done {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--w8) 0;
  background: var(--btn-blue);
  border-radius: var(--w5);
  font-family: "Barlow", var(--font-ui), sans-serif;
  font-weight: 500;
  font-size: var(--w11);
  color: var(--white);
}

@media (max-width: 768px) {
  .sec-public-administration-hero {
    min-height: var(--m732);
    padding: 0;
    background-image: url("/assets/industries/public-administration/hero/hero-bg-mobile-new.webp");
    --phone-canvas-left: calc((100% - var(--m393)) / 2);
    margin-top: calc(-1 * var(--m68));
  }

  .sec-public-administration-hero__inner {
    min-height: var(--m732);
    padding: 0;
    display: block;
  }

  .sec-public-administration-hero__content {
    position: absolute;
    left: 50%;
    top: var(--m140);
    transform: translateX(-50%);
    width: var(--m329);
    max-width: 84%;
    align-items: center;
    text-align: center;
  }

  .sec-public-administration-hero__eyebrow {
    justify-content: center;
    font-size: var(--m11);
    letter-spacing: 1.5px;
  }

  .sec-public-administration-hero__body {
    align-items: center;
    gap: var(--m32);
  }

  .sec-public-administration-hero__text {
    align-items: center;
    gap: var(--m12);
  }

  .sec-public-administration-hero__title {
    font-size: var(--m36);
    line-height: 1.2;
    text-align: center;
  }

  .sec-public-administration-hero__desc {
    text-align: center;
  }

  .sec-public-administration-hero__cta {
    align-self: center;
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
  }

  /* Figma's mobile photo IS mirrored (unlike desktop) — its wrapper uses
     the same net scaleY(-1)+rotate(180deg) = scaleX(-1) trick as
     Financial Services' desktop photo. Left is 13px, not the raw
     get_metadata x (261px) — that number is a rotated-bbox artifact,
     confirmed wrong against get_design_context and the actual mobile
     screenshot (man sits on the LEFT, card floats to his right). */
  .sec-public-administration-hero__media {
    z-index: 5;
    left: calc(var(--phone-canvas-left) + var(--m13));
    bottom: 0;
    top: auto;
    width: var(--m248);
    max-width: none;
    height: var(--m275);
    max-height: none;
    border-radius: 0;
  }

  /* See Healthcare's hero.css for why the mirror needs a box-sized
     wrapper instead of applying scaleX(-1) to the offset img directly
     (this crop happens to be nearly centered already, so the practical
     effect here is tiny, but the correct structure is cheap to keep
     consistent). */
  .sec-public-administration-hero__photo-flip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: scaleX(-1);
  }

  .sec-public-administration-hero__photo {
    left: -11.43%;
    top: 3.76%;
    width: 122.85%;
    height: 110.79%;
  }

  /* Figma's mobile card isn't a scaled clone of the desktop one — it's
     laid out with its own explicit numbers (get_design_context 5882:49692),
     used directly below instead of a transform:scale. */
  .sec-public-administration-hero__card {
    z-index: 2;
    top: auto;
    bottom: var(--m67);
    left: calc(var(--phone-canvas-left) + var(--m157));
    gap: var(--m11);
    width: var(--m197);
    height: var(--m162);
    padding: var(--m14);
    border-radius: var(--m8);
    box-shadow: 1.552px 1.552px 3.712px rgba(0, 0, 0, 0.07);
    transform: none;
  }

  .sec-public-administration-hero__pa-title {
    font-size: var(--m8);
  }

  .sec-public-administration-hero__pa-badge {
    width: var(--m38);
    height: var(--m38);
  }

  .sec-public-administration-hero__pa-body {
    gap: var(--m7);
  }

  .sec-public-administration-hero__pa-status {
    font-size: var(--m7);
  }

  .sec-public-administration-hero__pa-actions {
    gap: var(--m4);
  }

  .sec-public-administration-hero__pa-action {
    gap: 2.25px;
    padding: 2.25px var(--m4) 2.25px var(--m3);
    border-radius: 2.25px;
  }

  .sec-public-administration-hero__pa-action img {
    width: var(--m8);
    height: var(--m8);
  }

  .sec-public-administration-hero__pa-action span {
    font-size: var(--m7);
  }

  .sec-public-administration-hero__pa-done {
    width: var(--m171);
    padding: var(--m5) 0;
    border-radius: var(--m3);
    font-size: var(--m7);
  }
}