/* ==========================================================
   Growshop365 – SEO Manager Layout v2.2
   Bilder neben Text, Unterkategorien, interne Links ganz unten.
   ========================================================== */

/* ----------------------------------------------------------
   Hero: Text links, Bild rechts
   ---------------------------------------------------------- */

.gr21-seo-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  align-items:stretch;
  gap:18px;
  width:100%;
  margin:0 0 16px;
  padding:clamp(16px,2.2vw,26px);
  border:1px solid var(--gs365-seo-border,rgba(148,163,184,.34));
  border-radius:var(--gs365-seo-radius,18px);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.13),transparent 55%),
    linear-gradient(145deg,rgba(15,23,42,.97),rgba(2,6,23,.92));
  box-shadow:0 8px 22px rgba(2,6,23,.36);
}

.gr21-seo-hero-layout.no-image{
  grid-template-columns:minmax(0,1fr);
}

.gr21-seo-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.gr21-seo-hero-layout .gr21-seo-subheadline{
  margin:0 0 12px;
  padding:0;
  border:0;
  background:transparent;
  color:#f8fafc !important;
  font-size:clamp(1.45rem,2.5vw,2.35rem);
  line-height:1.14;
}

.gr21-seo-hero-layout .gr21-seo-intro{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.gr21-seo-hero-layout .gr21-seo-intro p,
.gr21-seo-hero-layout .gr21-seo-intro li{
  color:#d7e0eb !important;
}

.gr21-seo-hero-layout .gr21-seo-hero-image{
  width:100%;
  height:100%;
  min-height:260px;
  max-height:380px;
  margin:0;
  padding:8px;
  align-self:center;
}

.gr21-seo-hero-layout .gr21-seo-hero-img{
  width:100% !important;
  height:100% !important;
  max-height:362px !important;
  object-fit:contain;
}

/* ----------------------------------------------------------
   Inhaltsabschnitte: Bild und zugehöriger Text nebeneinander
   ---------------------------------------------------------- */

.gr21-seo-section.has-image{
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(18px,2.7vw,34px);
}

.gr21-seo-section.has-image.image-right{
  grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr);
}

.gr21-seo-section.image-right .gr21-seo-section-image{
  grid-column:2;
  grid-row:1;
}

.gr21-seo-section.image-right .gr21-seo-section-copy{
  grid-column:1;
  grid-row:1;
}

.gr21-seo-section-image{
  width:100%;
  height:100%;
  min-height:220px;
  max-height:350px;
  margin:0;
  padding:8px;
}

.gr21-seo-section-image .gr21-seo-img{
  width:100% !important;
  height:100% !important;
  max-height:332px !important;
  object-fit:contain;
}

.gr21-seo-section-copy{
  min-width:0;
}

.gr21-seo-section-copy h2:first-child{
  margin-top:0;
}

.gr21-seo-section-copy p:last-child{
  margin-bottom:0;
}

/* ----------------------------------------------------------
   Medien: Bild direkt neben der Bildbeschreibung
   ---------------------------------------------------------- */

.gr21-seo-media{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.gr21-seo-media-item.has-caption{
  display:grid;
  grid-template-columns:minmax(150px,.75fr) minmax(0,1.25fr);
  align-items:center;
  gap:16px;
}

.gr21-seo-media-visual{
  display:grid;
  place-items:center;
  width:100%;
  min-height:160px;
  max-height:280px;
  overflow:hidden;
  border-radius:12px;
  background:rgba(2,6,23,.45);
}

.gr21-seo-media-visual > a{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}

.gr21-seo-media .gr21-seo-img{
  width:100% !important;
  height:100% !important;
  max-height:272px !important;
  object-fit:contain;
}

.gr21-seo-media-item.has-caption figcaption{
  margin:0;
  padding:0;
  color:#d7e0eb;
}

.gr21-seo-media-item.no-caption{
  display:grid;
  place-items:center;
}

/* ----------------------------------------------------------
   Unterkategorien der aktuellen Kategorie
   ---------------------------------------------------------- */

.gr21-seo-subcategories{
  width:100%;
  margin:0 0 16px;
  padding:clamp(16px,2.2vw,24px);
  border:1px solid var(--gs365-seo-border,rgba(148,163,184,.34));
  border-radius:var(--gs365-seo-radius,18px);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.12),transparent 56%),
    linear-gradient(145deg,rgba(15,23,42,.97),rgba(2,6,23,.92));
  box-shadow:0 8px 22px rgba(2,6,23,.36);
}

.gr21-seo-subcategories-head{
  margin:0 0 14px;
}

.gr21-seo-subcategories-head h2{
  margin:0 0 5px;
  color:#f8fafc;
  font-weight:950;
}

.gr21-seo-subcategories-head p{
  margin:0;
  color:#aebdce;
}

.gr21-seo-subcategory-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.gr21-seo-subcategory-card{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:88px;
  padding:10px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.38);
  border-radius:15px;
  background:rgba(2,6,23,.50);
  color:#f8fafc !important;
  text-decoration:none !important;
  box-shadow:0 5px 14px rgba(2,6,23,.28);
}

.gr21-seo-subcategory-card.no-image{
  grid-template-columns:minmax(0,1fr) auto;
}

.gr21-seo-subcategory-card:hover,
.gr21-seo-subcategory-card:focus{
  border-color:rgba(190,242,100,.72);
  background:rgba(20,83,45,.48);
}

.gr21-seo-subcategory-image{
  display:grid;
  place-items:center;
  width:74px;
  height:66px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.34);
  border-radius:11px;
  background:#fff;
}

.gr21-seo-subcategory-image img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:74px !important;
  max-height:66px !important;
  object-fit:contain !important;
}

.gr21-seo-subcategory-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.gr21-seo-subcategory-copy strong{
  color:#f8fafc;
  font-size:.94rem;
  font-weight:900;
  line-height:1.3;
}

.gr21-seo-subcategory-copy span{
  color:#aebdce;
  font-size:.78rem;
  line-height:1.3;
}

.gr21-seo-subcategory-arrow{
  color:#bef264;
  font-size:1.35rem;
  font-weight:950;
}

/* ----------------------------------------------------------
   Bottom-Medium und Bottom-Text nebeneinander
   ---------------------------------------------------------- */

.gr21-seo-bottom-feature{
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:18px;
  width:100%;
  margin:0 0 16px;
  padding:clamp(16px,2.2vw,24px);
  border:1px solid var(--gs365-seo-border,rgba(148,163,184,.34));
  border-radius:var(--gs365-seo-radius,18px);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.10),transparent 56%),
    linear-gradient(145deg,rgba(15,23,42,.97),rgba(2,6,23,.92));
  box-shadow:0 8px 22px rgba(2,6,23,.36);
}

.gr21-seo-bottom-feature .gr21-seo-media{
  grid-template-columns:minmax(0,1fr);
  margin:0;
}

.gr21-seo-bottom-feature .gr21-seo-media figure{
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.gr21-seo-bottom-feature .gr21-seo-media-item.has-caption{
  grid-template-columns:minmax(0,1fr);
}

.gr21-seo-bottom-feature .gr21-seo-bottom-html{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

/* ----------------------------------------------------------
   Interne Links: eigener Abschlussblock ganz unten
   ---------------------------------------------------------- */

.gr21-seo-internal-link-section{
  width:100%;
  margin:18px 0 0;
  padding:clamp(16px,2.2vw,24px);
  border:1px solid var(--gs365-seo-border,rgba(148,163,184,.34));
  border-radius:var(--gs365-seo-radius,18px);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.12),transparent 56%),
    linear-gradient(145deg,rgba(15,23,42,.97),rgba(2,6,23,.92));
  box-shadow:0 8px 22px rgba(2,6,23,.36);
}

.gr21-seo-internal-links-head{
  margin:0 0 14px;
}

.gr21-seo-internal-links-head h2{
  margin:0 0 5px;
  color:#f8fafc;
  font-weight:950;
}

.gr21-seo-internal-links-head p{
  margin:0;
  color:#aebdce;
}

.gr21-seo-internal-link-section .gr21-seo-internal-links{
  margin:0;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width:1199.98px){
  .gr21-seo-subcategory-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:991.98px){
  .gr21-seo-hero-layout,
  .gr21-seo-section.has-image,
  .gr21-seo-section.has-image.image-right,
  .gr21-seo-bottom-feature{
    grid-template-columns:minmax(0,1fr);
  }

  .gr21-seo-section.image-right .gr21-seo-section-image,
  .gr21-seo-section.image-right .gr21-seo-section-copy{
    grid-column:auto;
    grid-row:auto;
  }

  .gr21-seo-section.image-right .gr21-seo-section-copy{
    order:2;
  }

  .gr21-seo-hero-layout .gr21-seo-hero-image{
    min-height:220px;
    max-height:320px;
  }

  .gr21-seo-subcategory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gr21-seo-media{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:767.98px){
  .gr21-seo-hero-layout,
  .gr21-seo-bottom-feature,
  .gr21-seo-subcategories,
  .gr21-seo-internal-link-section{
    padding:14px;
    border-radius:15px;
  }

  .gr21-seo-hero-layout .gr21-seo-subheadline{
    font-size:1.4rem;
  }

  .gr21-seo-section.has-image{
    gap:14px;
  }

  .gr21-seo-section-image{
    min-height:180px;
    max-height:270px;
  }

  .gr21-seo-section-image .gr21-seo-img{
    max-height:252px !important;
  }

  .gr21-seo-media-item.has-caption{
    grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr);
    gap:12px;
  }

  .gr21-seo-media-visual{
    min-height:130px;
    max-height:220px;
  }

  .gr21-seo-subcategory-grid{
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }

  .gr21-seo-subcategory-card{
    grid-template-columns:66px minmax(0,1fr) auto;
    min-height:80px;
  }

  .gr21-seo-subcategory-image{
    width:66px;
    height:58px;
  }

  .gr21-seo-subcategory-image img{
    max-width:66px !important;
    max-height:58px !important;
  }
}

@media (max-width:480px){
  .gr21-seo-media-item.has-caption{
    grid-template-columns:minmax(0,1fr);
  }

  .gr21-seo-media-item.has-caption figcaption{
    padding-top:10px;
  }

  .gr21-seo-hero-layout .gr21-seo-hero-image{
    min-height:180px;
    max-height:250px;
  }
}