/**
 * Digitale Lösungen hub page — editorial sections, schematic visual, card grids.
 */

:root {
  --pa-digitale-section-gap: var(--wp--preset--spacing--50);
  --pa-digitale-reveal-distance: 20px;
  --pa-digitale-reveal-duration: 0.4s;
  --pa-digitale-card-hover-duration: 0.22s;
}

.pa-digitale-loesungen-section {
  margin-bottom: var(--pa-digitale-section-gap) !important;
}

.pa-digitale-loesungen-section .has-xx-large-font-size {
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-top: 0;
  max-width: 22ch;
}

.pa-digitale-loesungen-section > .is-style-text-specimen:first-child {
  margin-bottom: var(--wp--preset--spacing--30);
}

.pa-digitale-loesungen-hero .has-large-font-size {
  max-width: 62ch;
}

/* Hero copy: always visible (pa-motion is disabled on this page) */
.pa-digitale-loesungen-hero .pa-reveal,
.pa-digitale-loesungen-hero.pa-reveal,
.pa-digitale-loesungen-hero .pa-hub-hero-content .pa-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Section 01: no scroll-reveal — content must not depend on JS */
.pa-digitale-loesungen-grenzen,
.pa-digitale-loesungen-grenzen.pa-digitale-reveal {
  opacity: 1;
  transform: none;
}

/* Section 1: copy block left, schematic right */
.pa-digitale-loesungen-grenzen__body {
  align-items: start;
  column-gap: var(--wp--preset--spacing--50);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  margin-top: var(--wp--preset--spacing--20);
}

.pa-digitale-loesungen-grenzen__copy {
  min-width: 0;
}

.pa-digitale-loesungen-grenzen__copy .has-xx-large-font-size {
  margin: 0;
  max-width: none;
}

.pa-digitale-loesungen-grenzen__copy > p {
  margin-top: var(--wp--preset--spacing--40);
  max-width: var(--wp--style--global--content-size);
}

.pa-digitale-loesungen-grenzen__body .pa-digitale-loesungen-visual__image {
  border: 1px solid var(--wp--preset--color--line);
  justify-self: end;
  margin: 0;
  max-width: 22rem;
  width: 100%;
}

.pa-digitale-loesungen-visual__image img {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

/* Transformation bridge between Lösungen and Transformation (alignwide container) */
.pa-digitale-loesungen-visual-band {
  background: transparent;
  padding: 0;
}

.pa-digitale-loesungen-visual-band__image {
  border: none;
  line-height: 0;
  margin: 0;
  width: 100%;
}

.pa-digitale-loesungen-visual-band__image img {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

/* Cards: ensure padding (invalid --spacing--35 broke earlier rules) */
.pa-digitale-loesungen-cards .wp-block-group.is-style-pa-card.pa-digitale-loesungen-card,
.pa-digitale-loesungen-cards .wp-block-group.is-style-pa-card.pa-card {
  box-sizing: border-box;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  padding: var(--wp--preset--spacing--40);
  position: relative;
  transition:
    border-color var(--pa-digitale-card-hover-duration) ease-out,
    box-shadow var(--pa-digitale-card-hover-duration) ease-out,
    transform var(--pa-digitale-card-hover-duration) ease-out;
}

/* Blueprint: corner marks + faint construction grid */
.pa-digitale-loesungen-card::before,
.pa-digitale-loesungen-card::after {
  content: "";
  height: 8px;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--pa-digitale-card-hover-duration) ease-out;
  width: 8px;
}

.pa-digitale-loesungen-card::before {
  border-left: 1px solid var(--wp--preset--color--line);
  border-top: 1px solid var(--wp--preset--color--line);
  left: var(--wp--preset--spacing--30);
  opacity: 0.32;
  top: var(--wp--preset--spacing--30);
}

.pa-digitale-loesungen-card::after {
  border-bottom: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  bottom: var(--wp--preset--spacing--30);
  opacity: 0.22;
  right: var(--wp--preset--spacing--30);
}

.pa-digitale-loesungen-card {
  background-image:
    linear-gradient(color-mix(in srgb, var(--wp--preset--color--line) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--line) 12%, transparent) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 14px 14px;
}

.pa-digitale-loesungen-card__head {
  align-items: center;
  display: flex;
  gap: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--40);
  position: relative;
  z-index: 1;
}

.pa-digitale-loesungen-card__glyph {
  flex-shrink: 0;
  height: var(--pa-icon-sm);
  margin: 0;
  position: relative;
  width: var(--pa-icon-sm);
}

.pa-digitale-loesungen-card__glyph::before {
  background-color: var(--wp--preset--color--graphite);
  content: "";
  display: block;
  height: var(--pa-icon-sm);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  width: var(--pa-icon-sm);
}

.pa-digitale-loesungen-card__glyph--calc::before {
  mask-image: url("../icons/digitale/glyph-calc.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-calc.svg");
}

.pa-digitale-loesungen-card__glyph--capture::before {
  mask-image: url("../icons/digitale/glyph-capture.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-capture.svg");
}

.pa-digitale-loesungen-card__glyph--pdf::before {
  mask-image: url("../icons/digitale/glyph-pdf.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-pdf.svg");
}

.pa-digitale-loesungen-card__glyph--plan::before {
  mask-image: url("../icons/digitale/glyph-plan.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-plan.svg");
}

.pa-digitale-loesungen-card__glyph--flow::before {
  mask-image: url("../icons/digitale/glyph-flow.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-flow.svg");
}

.pa-digitale-loesungen-card__glyph--data::before {
  mask-image: url("../icons/digitale/glyph-data.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-data.svg");
}

.pa-digitale-loesungen-card__glyph--web::before {
  mask-image: url("../icons/digitale/glyph-web.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-web.svg");
}

.pa-digitale-loesungen-card__glyph--extend::before {
  mask-image: url("../icons/digitale/glyph-extend.svg");
  -webkit-mask-image: url("../icons/digitale/glyph-extend.svg");
}

@media (hover: hover) and (pointer: fine) {
  body.pa-digitale-loesungen-page .pa-digitale-loesungen-card.is-style-pa-card:hover,
  body.pa-digitale-loesungen-page .pa-digitale-loesungen-card.pa-card:hover {
    border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, var(--wp--preset--color--line));
    box-shadow:
      inset 3px 0 0 0 var(--wp--preset--color--accent-9),
      var(--pa-shadow-stack);
    transform: translateY(-3px);
  }

  body.pa-digitale-loesungen-page .pa-digitale-loesungen-card:hover::before,
  body.pa-digitale-loesungen-page .pa-digitale-loesungen-card:hover::after {
    opacity: 0.62;
  }
}

.pa-digitale-loesungen-card__head .has-large-font-size {
  flex: 1;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 0;
  min-width: 0;
}

.pa-digitale-loesungen-card > p {
  hyphens: none;
  line-height: 1.5;
  margin-top: 0;
  position: relative;
  text-wrap: pretty;
  z-index: 1;
}

/* Scroll reveal — once per element, transform + opacity only */
.pa-digitale-reveal {
  opacity: 0;
  transform: translateY(var(--pa-digitale-reveal-distance));
  transition:
    opacity var(--pa-digitale-reveal-duration) ease-out,
    transform var(--pa-digitale-reveal-duration) ease-out;
  will-change: opacity, transform;
}

.pa-digitale-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pa-digitale-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* Prozessdigitalisierung: 2-column aligned grid */
.pa-digitale-loesungen-transform-grid__row {
  align-items: baseline;
  column-gap: var(--wp--preset--spacing--50);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  padding: var(--wp--preset--spacing--30) 0;
  row-gap: var(--wp--preset--spacing--20);
}

.pa-digitale-loesungen-transform-grid__row--head {
  margin-bottom: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--20);
  padding-top: 0;
}

.pa-digitale-loesungen-transform-grid__row > p {
  margin: 0;
}

.pa-digitale-loesungen-transform-grid__row:not(.pa-digitale-loesungen-transform-grid__row--head) > p:last-child {
  padding-left: var(--wp--preset--spacing--30);
  position: relative;
}

.pa-digitale-loesungen-transform-grid__row:not(.pa-digitale-loesungen-transform-grid__row--head) > p:last-child::before {
  color: var(--wp--preset--color--graphite);
  content: "→";
  font-family: var(--wp--preset--font-family--geist-mono);
  left: 0;
  position: absolute;
  top: 0;
}

.pa-digitale-loesungen-transform .is-style-pa-divider-register {
  margin: 0;
}

/* Domain experience badges (no vendor logos) */
.pa-digitale-loesungen-domain-badges {
  gap: var(--wp--preset--spacing--20);
}

.pa-digitale-loesungen-domain-badge {
  background: var(--wp--preset--color--warm-white, #fdfcfa);
  border: 1px solid var(--wp--preset--color--line);
  margin: 0;
  padding: 0.55rem 0.85rem;
  position: relative;
  transition:
    background-color var(--pa-transition-base),
    border-color var(--pa-transition-base),
    box-shadow var(--pa-transition-base),
    transform var(--pa-transition-base);
}

/* Trust block + Abschluss vor CTA */
.pa-digitale-loesungen-trust {
  border-top: 1px solid var(--wp--preset--color--line);
  margin-bottom: 0 !important;
  padding-bottom: var(--pa-digitale-section-gap) !important;
  padding-top: var(--pa-digitale-section-gap) !important;
}

.pa-digitale-loesungen-trust p.is-style-text-specimen:has(+ .pa-digitale-loesungen-competence-badges) {
  margin-bottom: var(--wp--preset--spacing--20) !important;
  margin-top: var(--wp--preset--spacing--40) !important;
}

.pa-digitale-loesungen-trust .pa-digitale-loesungen-competence-badges {
  margin-top: var(--wp--preset--spacing--25);
}

.pa-digitale-loesungen-trust .pa-digitale-loesungen-competence-badges + * {
  margin-top: 0;
}

.pa-digitale-loesungen-cta.pa-hub-cta-teaser {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: var(--pa-digitale-section-gap) !important;
  padding-top: var(--pa-digitale-section-gap) !important;
}

.pa-digitale-loesungen-trust .has-xx-large-font-size {
  max-width: 20ch;
}

.pa-digitale-loesungen-trust .has-large-font-size {
  max-width: 52ch;
}

.pa-digitale-loesungen-trust .wp-block-list {
  columns: 2;
  column-gap: var(--wp--preset--spacing--50);
  display: block;
  margin: 0;
  max-width: 56ch;
  padding-left: 1.1rem;
}

.pa-digitale-loesungen-trust .wp-block-list li {
  break-inside: avoid;
  line-height: 1.45;
  margin-bottom: var(--wp--preset--spacing--20);
}

.pa-digitale-loesungen-competence-badges .pa-digitale-loesungen-domain-badge {
  text-transform: uppercase;
}

.pa-digitale-loesungen-cta .wp-block-buttons {
  flex-wrap: wrap;
}

@media (max-width: 781px) {
  .pa-digitale-loesungen-section .has-xx-large-font-size {
    max-width: none;
  }

  .pa-digitale-loesungen-grenzen__body {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--40);
  }

  .pa-digitale-loesungen-grenzen__body .pa-digitale-loesungen-visual__image {
    justify-self: start;
    max-width: min(100%, 18rem);
    order: 2;
    width: 100%;
  }

  .pa-digitale-loesungen-grenzen__copy {
    order: 1;
  }

  .pa-digitale-loesungen-split > .wp-block-column {
    flex-basis: 100% !important;
  }

  .pa-digitale-loesungen-visual {
    margin-top: var(--wp--preset--spacing--50);
    min-height: 0;
  }

  .pa-digitale-loesungen-trust {
    padding-bottom: var(--wp--preset--spacing--60) !important;
    padding-top: var(--wp--preset--spacing--60) !important;
  }

  .pa-digitale-loesungen-trust .wp-block-list {
    columns: 1;
  }

  .pa-digitale-loesungen-transform-grid__row {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--15);
  }

  .pa-digitale-loesungen-transform-grid__row:not(.pa-digitale-loesungen-transform-grid__row--head) > p:last-child {
    padding-left: var(--wp--preset--spacing--40);
  }
}