/* Business Management System page — modular workflow visual narrative */

/* "Ein System, das sich anpasst" — the mockup image IS the card (box sized
   to the image's exact aspect ratio, 2143:941, no letterboxing gap), text
   overlaid on top, right-aligned. Same pattern as .bms-growth-card /
   .websites-story-card. */
.bms-foundation-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 2143 / 941;
  padding: 60px;
}

.bms-foundation-card .bms-foundation-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bms-foundation-card__text {
  position: relative;
  z-index: 1;
  max-width: 44%;
}

/* Readability scrim over the right ~68% where the text sits — the new
   generated mockup has bright brushed-metal highlights in that area that
   would otherwise fight with the text. Same recipe as .case-study--bg
   (css/secondary.css) for a consistent look across these overlay cards. */
.bms-foundation-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 32%, rgba(5,6,6,.55) 48%, rgba(5,6,6,.88) 100%);
  pointer-events: none;
}

.bms-hero { padding-bottom: 40px; }
/* padding:0 override — .bms-hero__device also carries the shared
   .section__inner class, which adds `padding: 0 4vw` (base.css); this
   wrapper holds only a full-bleed image, so it doesn't need edge padding. */
.bms-hero__device { margin-top: 48px; position: relative; max-width: 620px; margin-left: auto; margin-right: auto; padding: 0; }
/* The dashboard screen is baked directly into the SVG mockup (vector iPad
   frame + a clip-masked <image> of the real dashboard screenshot, see
   images/icons/business-management-system-hero.svg) — no separate CSS
   overlay needed. Aspect ratio matches the SVG's own viewBox (242.55:192.07). */
.bms-hero__device img {
  width: 100%;
  max-width: 620px;
  height: auto;
  aspect-ratio: 242.55 / 192.07;
  margin: 0 auto;
  display: block;
}

.bms-modules { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-top: 48px; }
.bms-module { padding: 28px; text-align: left; }
.bms-module__icon { width: 44px; height: 44px; margin-bottom: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.bms-module__title { font-family: var(--font-sans); font-weight: 600; color: var(--ivory); font-size: 17px; margin-bottom: 8px; }
.bms-module__desc { color: var(--warm-gray); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .bms-modules { grid-template-columns: 1fr; } }

.bms-workflow { display: flex; flex-direction: column; margin-top: 40px; }

/* Mobile: the photo doesn't fit a narrow column readably, so it's dropped
   entirely and the card falls back to a plain dark-titanium surface (same
   noise+gradient recipe as .dh-card--surface in cards.css) with just the
   text — same rule the other horizontal media cards site-wide follow
   (#work-example, #responsive-story, .case-study--bg). */
@media (max-width: 900px) {
  .bms-foundation-card {
    aspect-ratio: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    padding: 28px;
    background-color: var(--dh-card-bg-mid);
    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.12'/%3E%3C/svg%3E"),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%),
      radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
      linear-gradient(145deg, var(--dh-card-bg-start) 0%, var(--dh-card-bg-mid) 47%, var(--dh-card-bg-end) 100%);
  }

  .bms-foundation-card .bms-foundation-card__img {
    display: none;
  }

  .bms-foundation-card__text {
    max-width: none;
  }
}

/* Growth section: the vector iPad mockup (images/icons/business-management-
   system-hero.svg, same asset as the hero) is the card's own CSS background
   image (not an <img>), sitting behind the text — a bordered dh-card, not
   the frame-free treatment the hero uses. */
.bms-growth-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 480px;
  padding: 60px;
  margin-top: 48px;
  background-color: var(--dh-card-bg-mid);
  background-image: url("../images/icons/business-management-system-hero.svg");
  background-repeat: no-repeat;
  background-position: right 40px center;
  background-size: 520px auto;
}

.bms-growth-card__text {
  position: relative;
  z-index: 1;
  max-width: 420px;
}

@media (max-width: 900px) {
  .bms-growth-card {
    min-height: 0;
    padding: 32px 28px;
    background-image: none;
  }

  .bms-growth-card__text {
    max-width: none;
  }
}