/* =========================================
 * Beyond Steps – Mod Box 001
 * Purpose: Portrait + Text (ruhig, würdevoll)
 * ======================================= */

:root {
  /* Layout */
  --bs-modbox-max-width: var(--bs-sub-content-max-width, var(--bs-sub-layout-max-width, 1400px));
  --bs-modbox-padding-x: var(--bs-sub-hero-padding-x, 2.4rem);

  /* Box Look */
  --bs-modbox-bg: rgba(255, 255, 255, 0.03);
  --bs-modbox-border: rgba(255, 255, 255, 0.12);
  --bs-modbox-radius: 18px;
  --bs-modbox-blur: 3px;

  /* Spacing */
  --bs-modbox-padding: 1.8rem;
  --bs-modbox-gap: 5.2rem;

  /* Media (Portrait) */
  --bs-modbox-media-width: 200px;     /* <- HIER stellst du Portrait-Größe ein */
  --bs-modbox-media-min-height: 240px;
  --bs-modbox-media-radius: 14px;

  /* Text */
  --bs-modbox-text-max: 800px;        /* damit Text ruhig bleibt */
  --bs-modbox-text-size: 0.98rem;
  --bs-modbox-text-line: 1.7;
  --bs-modbox-text-opacity: 0.96;

  /* Title */
  --bs-modbox-title-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-modbox-title-size: clamp(1.8rem, 1.4rem + 0.7vw, 2.3rem);
  --bs-modbox-title-weight: 700;

  /* Divider */
  --bs-modbox-divider-height: 1px;
  --bs-modbox-divider-a: rgba(255, 255, 255, 0.18);
  --bs-modbox-divider-b: rgba(255, 255, 255, 0.00);
}

/* Container */
.bs-modbox {
  width: 100%;
  max-width: var(--bs-modbox-max-width);
  margin: 0 auto;
  padding: var(--bs-modbox-padding-x);
}

/* The module card */
.bs-modbox__card {
  display: grid;
  grid-template-columns: var(--bs-modbox-media-width) 1fr;
  gap: var(--bs-modbox-gap);
  align-items: start;

  background: var(--bs-modbox-bg);
  border: 1px solid var(--bs-modbox-border);
  border-radius: var(--bs-modbox-radius);
  overflow: hidden;
  backdrop-filter: blur(var(--bs-modbox-blur));
}

/* Media */
.bs-modbox__media {
  padding: var(--bs-modbox-padding);
  padding-right: 0;
}

.bs-modbox__img {
  width: 100%;
  min-height: var(--bs-modbox-media-min-height);
  height: auto;
  object-fit: cover;
  border-radius: var(--bs-modbox-media-radius);
  display: block;
}

/* Content */
.bs-modbox__body {
  padding: var(--bs-modbox-padding);
  padding-left: 0;
  max-width: var(--bs-modbox-text-max);
}

.bs-modbox__title {
  margin: 0;
  font-family: var(--bs-modbox-title-font);
  font-size: var(--bs-modbox-title-size);
  font-weight: var(--bs-modbox-title-weight);
}

.bs-modbox__divider {
  width: 100%;
  height: var(--bs-modbox-divider-height);
  margin: 0.9rem 0 1.2rem;
  background: linear-gradient(to right, var(--bs-modbox-divider-a), var(--bs-modbox-divider-b));
}

.bs-modbox__text {
  margin: 0;
  font-family: "Manrope", system-ui;
  font-size: var(--bs-modbox-text-size);
  line-height: var(--bs-modbox-text-line);
  opacity: var(--bs-modbox-text-opacity);
}

.bs-modbox__text + .bs-modbox__text {
  margin-top: 1.05rem;
}

.bs-modbox__text--spacer {
  margin-top: 1.4rem;
}

/* Image position variant: RIGHT */
.bs-modbox--media-right .bs-modbox__card {
  grid-template-columns: 1fr var(--bs-modbox-media-width);
}
.bs-modbox--media-right .bs-modbox__media {
  padding-left: 0;
  padding-right: var(--bs-modbox-padding);
}
.bs-modbox--media-right .bs-modbox__body {
  padding-left: var(--bs-modbox-padding);
  padding-right: 0;
}

/* Responsive */
@media (max-width: 980px) {
  :root {
    --bs-modbox-media-width: 220px;
  }
}

@media (max-width: 820px) {
  .bs-modbox__card {
    grid-template-columns: 1fr;
  }

  .bs-modbox__media {
    padding: var(--bs-modbox-padding);
    padding-bottom: 0;
    max-width: 260px; /* Portrait bleibt klein */
  }

  .bs-modbox__body {
    padding: var(--bs-modbox-padding);
    padding-top: 0.8rem;
  }
}