/* Soonapie SCG Grid styles (v1.5.0) */
.soonapie-sgc-mosaic, .soonapie-sgc-mosaic * { box-sizing: border-box; }
.soonapie-sgc-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: var(--gap, 2px);
  height: var(--grid-height, 575px);
  width: 100%;
}
.soonapie-sgc-mosaic .scg-card{
  position: relative;
  padding: 36px 48px 60px;
  border-radius: var(--radius, 24px);
  overflow: hidden;
  color: inherit;
  transition: box-shadow .25s ease;
  text-align: left !important;
}
.soonapie-sgc-mosaic .scg-card:not(.scg){ display: block !important; }
.soonapie-sgc-mosaic .scg-card:hover{ box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.soonapie-sgc-mosaic .card-logo{
  display: block;
  max-height: var(--logo-h, 55px);
  width: auto;
  max-width: 100%;
  margin: 0 0 24px 0 !important;
  align-self: flex-start;
  object-fit: contain;
  object-position: left top;
  vertical-align: top;
}
.soonapie-sgc-mosaic .scg-svg{
  display: block;
  max-width: var(--center-w, 80%);
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
}
.soonapie-sgc-mosaic .scg-card h3{ margin: 0 0 16px; font-size: 1.6rem; }
.soonapie-sgc-mosaic .scg-card p { margin: 0; max-width: 32ch; font-size: .95rem; }
.soonapie-sgc-mosaic .more-btn{
  position: absolute; bottom: 20px; right: 32px;
  padding: 10px 18px; border-radius: 9999px;
  background: #fff; color: #1a1a1a; font-weight: 600; font-size: .825rem;
  text-decoration: none; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}
.soonapie-sgc-mosaic .scg-card:hover .more-btn{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* fixed grid positions (12x12 layout) */
.soonapie-sgc-mosaic .lime   { grid-column: 1 / span 4; grid-row: 1 / span 7; background: #d6f97b; color:#1a1a1a; }
.soonapie-sgc-mosaic .cyan   { grid-column: 5 / span 8; grid-row: 1 / span 5; background: #6cd2ff; color:#1a1a1a; }
.soonapie-sgc-mosaic .scg    { grid-column: 5 / span 4; grid-row: 6 / span 2; background: #2b353d; display:flex; justify-content:center; align-items:center; padding:0; color:#fff; }
.soonapie-sgc-mosaic .purple { grid-column: 9 / span 4; grid-row: 6 / span 7; background: #2d3284; color:#fff; }
.soonapie-sgc-mosaic .blue   { grid-column: 1 / span 8; grid-row: 8 / span 5; background: #2b698e; color:#fff; }

@media (max-width: 768px){
  .soonapie-sgc-mosaic{ grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .soonapie-sgc-mosaic .lime,
  .soonapie-sgc-mosaic .cyan,
  .soonapie-sgc-mosaic .scg,
  .soonapie-sgc-mosaic .purple,
  .soonapie-sgc-mosaic .blue { grid-column: auto; grid-row: auto; }
  .soonapie-sgc-mosaic .scg-card{ padding: 28px 28px 60px; }
}