/* ==========================================================
   Growshop365 – SEO Medien-/Bildbereich Layout v2.3
   Portraitbilder füllen den Bild-/Textblock ohne große Freiflächen.
   ========================================================== */

/* Desktop: Bildbereich und Textbereich gleich hoch */
.gr21-seo-media-item.has-caption{
  display:grid !important;
  grid-template-columns:minmax(320px,.92fr) minmax(0,1.45fr) !important;
  align-items:stretch !important;
  gap:22px !important;
  min-height:430px;
  padding:16px !important;
}

.gr21-seo-media-item.has-caption .gr21-seo-media-visual{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  min-height:398px !important;
  max-height:none !important;
  overflow:hidden !important;
  border:1px solid rgba(148,163,184,.34);
  border-radius:15px;
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.10),transparent 58%),
    rgba(2,6,23,.52) !important;
}

.gr21-seo-media-item.has-caption .gr21-seo-media-visual > a{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
}

.gr21-seo-media-item.has-caption .gr21-seo-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-height:398px !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:14px !important;
}

/* Textblock optisch sauber zur Bildhöhe ausrichten */
.gr21-seo-media-item.has-caption figcaption{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  min-width:0;
  margin:0 !important;
  padding:8px 8px 8px 0 !important;
  color:#d7e0eb !important;
}

.gr21-seo-media-item.has-caption figcaption h2,
.gr21-seo-media-item.has-caption figcaption h3,
.gr21-seo-media-item.has-caption figcaption h4{
  margin-top:0;
  color:#f8fafc !important;
}

.gr21-seo-media-item.has-caption figcaption p,
.gr21-seo-media-item.has-caption figcaption li{
  color:#d7e0eb !important;
  line-height:1.68 !important;
}

.gr21-seo-media-item.has-caption figcaption p:last-child{
  margin-bottom:0;
}

/* Einzelnes Medienobjekt darf die volle Breite nutzen */
.gr21-seo-media:has(.gr21-seo-media-item.has-caption:only-child){
  grid-template-columns:minmax(0,1fr) !important;
}

/* Zwei Medienobjekte bleiben sauber zweispaltig */
.gr21-seo-media{
  align-items:stretch !important;
}

.gr21-seo-media > figure{
  height:100%;
}

/* Tablet: Bild oben, Text darunter */
@media (max-width:991.98px){
  .gr21-seo-media-item.has-caption{
    grid-template-columns:minmax(0,1fr) !important;
    min-height:0;
    gap:14px !important;
  }

  .gr21-seo-media-item.has-caption .gr21-seo-media-visual{
    min-height:340px !important;
    max-height:480px !important;
  }

  .gr21-seo-media-item.has-caption .gr21-seo-img{
    min-height:340px !important;
    max-height:480px !important;
  }

  .gr21-seo-media-item.has-caption figcaption{
    padding:4px 2px 2px !important;
  }
}

/* Smartphone: kompakter, aber weiterhin ohne abgeschnittene Bilder */
@media (max-width:767.98px){
  .gr21-seo-media-item.has-caption{
    padding:12px !important;
    border-radius:15px !important;
  }

  .gr21-seo-media-item.has-caption .gr21-seo-media-visual{
    min-height:280px !important;
    max-height:390px !important;
  }

  .gr21-seo-media-item.has-caption .gr21-seo-img{
    min-height:280px !important;
    max-height:390px !important;
    object-fit:cover !important;
  }
}

@media (max-width:480px){
  .gr21-seo-media-item.has-caption .gr21-seo-media-visual{
    min-height:240px !important;
    max-height:340px !important;
  }

  .gr21-seo-media-item.has-caption .gr21-seo-img{
    min-height:240px !important;
    max-height:340px !important;
  }
}