/* LuaDock landing compatibility layer 01.30.23.
 * 01.30.23 keeps the 01.30.22 real-screenshot landing page
 * and only repairs the "Warum LuaDock" benefits layout to Variant A:
 * one balanced four-card row on desktop instead of
 * three cards plus one oversized full-width export block.
 */

.landing-draft-preview-banner{
  position:relative;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  padding:10px 18px;
  background:var(--ld-surface-soft);
  border-bottom:1px solid var(--ld-line);
  color:var(--ld-text);
  font-size:13px;
}
.landing-draft-preview-banner strong{color:var(--ld-heading);letter-spacing:.05em}
.landing-draft-preview-banner a{font-weight:750}

.hero-visual{
  position:relative;
  min-height:430px;
  align-items:center;
  justify-content:center;
}
.hero-real-shot{
  margin:0;
  overflow:hidden;
  background:var(--ld-surface);
  border:1px solid var(--ld-line);
  border-radius:18px;
  box-shadow:var(--ld-shadow);
}
.hero-real-shot img{
  display:block;
  width:100%;
  height:auto;
}
.hero-real-shot figcaption{
  padding:10px 13px;
  border-top:1px solid var(--ld-line);
  color:var(--ld-muted);
  background:var(--ld-surface);
  font-size:12px;
}
.hero-real-shot-main{
  width:min(100%,650px);
  transform:translateX(-14px);
}
.hero-real-shot-secondary{
  position:absolute;
  right:-10px;
  bottom:0;
  width:min(58%,390px);
  box-shadow:0 24px 55px rgba(0,0,0,.24);
}
.hero-real-shot-secondary img{aspect-ratio:16/9;object-fit:cover}

.product-shot img{
  aspect-ratio:5/3!important;
  object-fit:contain!important;
  background:var(--ld-section-alt);
}
.premium-media{
  background:var(--ld-section-alt)!important;
}
.premium-media img{
  object-fit:contain!important;
  background:var(--ld-section-alt);
}

/* Variant A: four evenly weighted cards */
.benefit-grid{
  align-items:stretch;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.benefit-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:320px;
}
.benefit-card h3{margin:0 0 10px}
.benefit-card p{margin:0}
.benefit-card.compatibility-highlight,
.benefit-card.export-highlight{
  border-color:var(--ld-line-strong)!important;
}
.compatibility-facts{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--ld-line);
  display:grid;
  gap:4px;
}
.compatibility-facts strong{color:var(--ld-heading);font-size:17px}
.compatibility-facts span{color:var(--ld-muted);font-size:13px}

.benefit-card.export-highlight{
  grid-column:auto;
  padding:22px;
  background:linear-gradient(155deg,var(--ld-surface),var(--ld-surface-soft))!important;
}
.benefit-card.export-highlight .benefit-mark{
  width:34px;
  height:34px;
  margin:0 0 18px;
  border-radius:10px;
  font-size:18px;
}
.export-facts{
  margin-top:auto;
  padding-top:16px;
  display:grid;
  gap:8px;
  color:var(--ld-text);
  font-size:14px;
}
.export-facts span{
  display:block;
  padding:8px 10px;
  border:1px solid var(--ld-line);
  border-radius:10px;
  background:var(--ld-surface);
}

@media(max-width:980px){
  .hero-visual{min-height:0;padding-bottom:80px}
  .hero-real-shot-main{transform:none}
  .hero-real-shot-secondary{right:0}
}
@media(max-width:600px){
  .hero-visual{padding-bottom:54px}
  .hero-real-shot-secondary{width:66%;right:4px}
  .hero-real-shot figcaption{font-size:11px}
  .benefit-card{min-height:0}
}