/* =============================================================================
   Bemuar — services photo cards (homepage + /leistungen/ and translations)
   Loads after real.css (see inc/bmx-leistungen.php) and follows its rules:
   hairlines, flat ink, one accent, crisp radii, no idle motion. The motion
   here is tied to something happening — a card entering the viewport, or
   the pointer resting on it.
   ============================================================================= */

.bsv-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px;
}

/* ---- card ---------------------------------------------------------------- */
.bsv-card{
  grid-column:span 2;
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--bmx-line,#E2E5EA); border-radius:12px;
  overflow:hidden; isolation:isolate;
  color:inherit; text-decoration:none;
}
.bsv-card--feature{ grid-column:span 3; }

/* Entrance: the card rises in and its photo settles from a slight zoom. An
   animation (not bmx-rv's transition) so the stagger never delays hover. */
.bsv-card.bmx-rv{
  opacity:1; transform:none;
  transition:transform .45s var(--bmx-ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow .45s, background-color .45s, border-color .45s;
  transition-delay:0s;
}
.bsv-card.bmx-rv:not(.in){ opacity:0; }
.bsv-card.bmx-rv.in{ animation:bsv-in .9s var(--bmx-ease,cubic-bezier(.22,.61,.36,1)) backwards; animation-delay:var(--bsv-d,0s); }
.bsv-card.d1{ --bsv-d:.04s; } .bsv-card.d2{ --bsv-d:.13s; } .bsv-card.d3{ --bsv-d:.22s; }
@keyframes bsv-in{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

.bsv-media{
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:#E9ECF0;
}
.bsv-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--bsv-d,0s);
}
.bsv-card.in .bsv-media img{ transform:scale(1); }

.bsv-body{ position:relative; display:flex; flex-direction:column; flex:1; padding:0 24px 24px; }
.bsv-top{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:-26px 0 14px;
}
.bsv-ic{
  width:52px; height:52px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background:#fff; color:var(--bmx-primary,#3B55E6);
  border:1px solid var(--bmx-line,#E2E5EA);
  box-shadow:0 6px 18px rgba(10,16,22,.10);
  transition:background-color .45s, color .45s, border-color .45s;
}
.bsv-ic svg{ width:26px; height:26px; }
.bsv-badge{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:700; line-height:1;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:100px;
  background:var(--bmx-ink,#0A1016); color:#fff;
}
.bsv-grid .bsv-card h3{ font-size:1.18rem; line-height:1.25; margin:0 0 8px; color:var(--bmx-h,#0A1016); transition:color .45s; }
.bsv-grid .bsv-card p{ font-size:.95rem; line-height:1.6; color:var(--bmx-muted,#5F6B79); margin:0 0 18px; transition:color .45s; }
.bsv-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:.92rem; color:var(--bmx-primary,#3B55E6); transition:color .45s;
}
.bsv-more svg{ width:16px; height:16px; transition:transform .35s var(--bmx-ease,cubic-bezier(.22,.61,.36,1)); }

.bsv-card:focus-visible{ outline:2px solid var(--bmx-primary,#3B55E6); outline-offset:3px; }

/* Hover only where there is a real pointer — on touch screens a tapped card
   would otherwise stay dark until the next tap somewhere else. */
@media (hover:hover){
  .bsv-card:hover{
    transform:translateY(-6px);
    background:var(--bmx-ink,#0A1016); border-color:var(--bmx-ink,#0A1016);
    box-shadow:var(--bmx-sh-lg,0 24px 50px rgba(10,16,22,.13));
  }
  .bsv-card.in:hover .bsv-media img{ transform:scale(1.05); transition-duration:.9s; transition-delay:0s; }
  .bsv-grid .bsv-card:hover h3{ color:#fff; }
  .bsv-grid .bsv-card:hover p{ color:#B7C4D2; }
  .bsv-card:hover .bsv-more{ color:#93A6FF; }
  .bsv-card:hover .bsv-more svg{ transform:translateX(5px); }
  .bsv-card:hover .bsv-ic{ background:var(--bmx-ink,#0A1016); color:#93A6FF; border-color:rgba(147,166,255,.35); }
}

/* ---- featured cards: the photo is the card, text sits on it --------------- */
@media (min-width:641px){
  .bsv-card--feature{
    min-height:430px;
    background:var(--bmx-ink,#0A1016); border-color:var(--bmx-ink,#0A1016);
  }
  .bsv-card--feature .bsv-media{ position:absolute; inset:0; aspect-ratio:auto; }
  .bsv-card--feature .bsv-media::after{
    content:""; position:absolute; inset:0;
    /* legibility, not decoration: the lower half carries white text */
    background:linear-gradient(180deg, rgba(10,16,22,0) 0%, rgba(10,16,22,.18) 30%, rgba(10,16,22,.64) 58%, rgba(10,16,22,.94) 100%);
  }
  .bsv-card--feature .bsv-body{ z-index:1; flex:none; margin-top:auto; padding:30px 32px 32px; }
  .bsv-card--feature .bsv-top{ margin:0 0 16px; justify-content:flex-start; }
  .bsv-card--feature .bsv-ic{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; box-shadow:none; }
  .bsv-card--feature .bsv-badge{ background:#fff; color:var(--bmx-ink,#0A1016); }
  .bsv-grid .bsv-card--feature h3{ color:#fff; font-size:1.65rem; }
  .bsv-grid .bsv-card--feature p{ color:#D6DEE6; max-width:46ch; }
  .bsv-card--feature .bsv-more{ color:#fff; }
}
@media (min-width:641px) and (hover:hover){
  .bsv-card--feature:hover .bsv-ic{ background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.4); }
  .bsv-grid .bsv-card--feature:hover p{ color:#E4EAF0; }
  .bsv-card--feature:hover .bsv-more{ color:#fff; }
}

/* ---- who it is for (overview page) --------------------------------------- */
.bsv-who{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.bsv-who-card{ background:#fff; border:1px solid var(--bmx-line,#E2E5EA); border-radius:12px; padding:26px 24px; }
.bsv-who-card .bsv-ic{ margin-bottom:16px; box-shadow:none; }
.bsv-who .bsv-who-card h3{ font-size:1.1rem; line-height:1.3; margin:0 0 8px; }
.bsv-who .bsv-who-card p{ font-size:.94rem; line-height:1.6; color:var(--bmx-muted,#5F6B79); margin:0 0 16px; }
.bsv-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bsv-chips a{
  font-size:.82rem; font-weight:600; padding:6px 11px; border-radius:100px; white-space:nowrap;
  border:1px solid var(--bmx-line,#E2E5EA); color:var(--bmx-primary,#3B55E6);
  text-decoration:none; transition:background-color .25s, color .25s, border-color .25s;
}
.bsv-chips a:hover, .bsv-chips a:focus-visible{ background:var(--bmx-ink,#0A1016); border-color:var(--bmx-ink,#0A1016); color:#fff; }

/* ---- layout ------------------------------------------------------------- */
@media (max-width:1024px){
  .bsv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .bsv-card, .bsv-card--feature{ grid-column:span 1; }
  .bsv-who{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .bsv-grid{ grid-template-columns:1fr; gap:16px; }
  .bsv-body{ padding:0 18px 20px; }
  .bsv-who{ grid-template-columns:1fr; }
}

/* ---- right-to-left (Arabic) ---------------------------------------------- */
[dir="rtl"] .bsv-more svg{ transform:scaleX(-1); }
@media (hover:hover){
  [dir="rtl"] .bsv-card:hover .bsv-more svg{ transform:scaleX(-1) translateX(5px); }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .bsv-card.bmx-rv, .bsv-card.bmx-rv:not(.in){ opacity:1; }
  .bsv-card.bmx-rv.in{ animation:none; }
  .bsv-media img, .bsv-card.in .bsv-media img{ transform:none; transition:none; }
  .bsv-card, .bsv-card:hover{ transform:none; }
}