/* ==========================================================================
   Industries · Public Administration — KOBIL myCity Band
   Dark photo band (1360×744, full-bleed): "One App for All Citizens"
   ========================================================================== */

.sec-public-administration-mycity {
  width: 100%;
  /* 120px clear above the band, matching the other sections' top spacing */
  padding-top: var(--w120);
}

/* The dark photo band itself (Figma 6239:51155 — 1360x744) */
.sec-public-administration-mycity__band {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--w744);
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

/* Holds bg + scrim + phone. Absolute on desktop so the inner geometry keeps
   resolving against the band box exactly as before. */
.sec-public-administration-mycity__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---- Background photo (full-bleed cover) ---- */

.sec-public-administration-mycity__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Blur/tint panel on the left (text readability) ---- */

.sec-public-administration-mycity__overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /* proportional (700/1360) — a fixed 700px swallows the person in the photo
     as the band narrows below 1440 */
  width: 51.47%;
  height: 100%;
  pointer-events: none;
  background: rgba(17, 36, 74, 0.32);
  /* Figma "Background blur 16" = Sigma 8 → CSS blur(8px) */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Blur + tint fade out together smoothly (Figma: the background blur is
     modulated by the gradient fill's alpha ramp — no hard edge) */
  -webkit-mask-image: linear-gradient(90.69deg, #000 66.9%, transparent 99.4%);
  mask-image: linear-gradient(90.69deg, #000 66.9%, transparent 99.4%);
}

/* ---- App screens / store badges (baked composite) ---- */

.sec-public-administration-mycity__phone {
  position: absolute;
  right: var(--w50);
  bottom: 0;
  z-index: 2;
  width: var(--w476);
  height: auto;
}

/* ---- Text column ---- */

.sec-public-administration-mycity__content {
  position: absolute;
  left: var(--w40);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w476);
}

/* Eyebrow: white 12px dot, tight tracking (from Figma) */
.sec-public-administration-mycity__eyebrow {
  gap: var(--w10);
  letter-spacing: 0.48px;
  color: var(--white);
}

.sec-public-administration-mycity__eyebrow::before {
  /* Figma's tag is plain text — no bullet */
  display: none;
}

.sec-public-administration-mycity__title {
  font-family: var(--font-sans);
  font-size: var(--w40);
  line-height: var(--w50);
  font-weight: 700;
  color: var(--white);
}

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

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

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

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

.sec-public-administration-mycity__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--w12);
}

.sec-public-administration-mycity__check {
  flex: 0 0 auto;
  width: var(--w20);
  height: var(--w20);
  margin-top: var(--w3);
}

.sec-public-administration-mycity__feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--w4);
}

.sec-public-administration-mycity__feature-title {
  font-family: var(--font-sans);
  font-size: var(--w16);
  line-height: var(--w23);
  font-weight: 700;
  color: var(--white);
}

.sec-public-administration-mycity__feature-desc {
  font-family: var(--font-sans);
  font-size: var(--w14);
  line-height: var(--w20);
  font-weight: 400;
  color: var(--white);
}

/* ---- Button "Explore myCity": solid white pill, navy text (Figma) ---- */

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

.sec-public-administration-mycity__btn > svg {
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}

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

.sec-public-administration-mycity__btn:hover > svg {
  transform: translateX(3px);
}

.sec-public-administration-mycity__btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.sec-public-administration-mycity__btn:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: stack text over the phone inside the band. */
@media (max-width: 768px) {
  .sec-public-administration-mycity__band {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Flatten the wrapper: bg/overlay stay absolute against the band, while the
     phone becomes a normal flex item so it can sit BELOW the copy instead of
     being trapped inside an inset:0 box on top of it. */
  .sec-public-administration-mycity__visual {
    display: contents;
  }

  .sec-public-administration-mycity__overlay {
    inset: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(17, 36, 74, 0.72) 0%,
      rgba(17, 36, 74, 0.58) 55%,
      rgba(17, 36, 74, 0.72) 100%
    );
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sec-public-administration-mycity__content {
    position: relative;
    z-index: 3;
    order: 1;
    top: auto;
    transform: none;
    width: 100%;
    max-width: var(--w620);
    padding: var(--w56) var(--w40) 0;
  }

  .sec-public-administration-mycity__phone {
    position: relative;
    z-index: 2;
    order: 2;
    right: auto;
    bottom: auto;
    display: block;
    width: min(var(--w440), 82%);
    margin: var(--w32) auto 0;
  }
}

/* ==========================================================================
   Mobile — Figma 6239:51376: a completely different composition. White
   background, navy text, and the photo becomes a contained 337x530 rounded
   block sitting BETWEEN the title and the intro copy. Solid navy button.
   `display: contents` flattens __content/__body so the visual can be
   re-ordered in among their children.
   ========================================================================== */
@media (max-width: 768px) {
  .sec-public-administration-mycity {
    padding: var(--m40) 0;
  }

  .sec-public-administration-mycity__band {
    height: auto;
    overflow: visible;
    background: transparent;
    color: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m12);
  }

  .sec-public-administration-mycity__content,
  .sec-public-administration-mycity__body {
    display: contents;
  }

  .sec-public-administration-mycity__eyebrow,
  .sec-public-administration-mycity__title,
  .sec-public-administration-mycity__intro-group,
  .sec-public-administration-mycity__visual,
  .sec-public-administration-mycity__btn {
    width: var(--m337);
    max-width: calc(100% - var(--m32));
  }

  .sec-public-administration-mycity__eyebrow {
    order: 1;
    color: var(--navy-70);
  }

  .sec-public-administration-mycity__title {
    order: 2;
    margin-top: var(--m12);   /* + the 12px flex gap = Figma's 24 */
    font-family: var(--font-serif);
    font-size: var(--m34);
    line-height: 1.2;
    font-weight: 400;
    color: var(--navy);
  }

  /* The photo block, between title and intro */
  .sec-public-administration-mycity__visual {
    order: 3;
    /* re-establish the box: the <=1024 rule flattens it with display:contents,
       which also matches here and would dissolve this image block */
    display: block;
    position: relative;
    inset: auto;
    margin-top: var(--m12);
    height: var(--m530);
    border-radius: var(--m6);
    overflow: hidden;
  }

  .sec-public-administration-mycity__overlay {
    display: none;
  }

  .sec-public-administration-mycity__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* Phone inside the block: Figma 63.94/275.84, 179.9x363 within 337x530 */
  .sec-public-administration-mycity__phone {
    position: absolute;
    left: 19%;
    top: 52%;
    right: auto;
    bottom: auto;
    width: 53.4%;
    height: auto;
    margin: 0;
  }

  .sec-public-administration-mycity__intro-group {
    order: 4;
    gap: var(--m12);
  }

  .sec-public-administration-mycity__intro,
  .sec-public-administration-mycity__feature-title,
  .sec-public-administration-mycity__feature-desc {
    color: var(--navy-80);
  }

  .sec-public-administration-mycity__feature {
    gap: var(--m10);
  }

  .sec-public-administration-mycity__check {
    width: var(--m18);
    height: var(--m18);
  }

  /* Solid navy pill on the light background */
  .sec-public-administration-mycity__btn {
    order: 5;
    align-self: flex-start;
    /* line up with the left edge of the 337px column, not the band edge */
    margin-left: max(var(--m16), calc((100% - var(--m337)) / 2));
    margin-top: var(--m12);
    width: auto;
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    background: var(--navy);
    color: var(--white);
    font-size: var(--m14);
    line-height: var(--m18);
  }

  .sec-public-administration-mycity__btn:hover {
    background: #1a3164;
  }
}