.top-text-area{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-direction: column;
}

.sc-wrapper{ display:flex; flex-direction:column; gap:16px; }

.showcase-carousel-wrapper{ /* legacy class kept if used elsewhere */
  overflow-x:auto; overflow-y:hidden; padding-bottom:1rem; scrollbar-width:none;
}

.showcase-carousel { display:grid; grid-template-columns: repeat(auto-fit, minmax(314px, 1fr)); gap: 1.5rem; }

/* Header + CTA mirrored from icon/featureOverflow (independent classes) */
.sc-header{ display:flex; flex-direction:column; gap:16px; }
.sc-cta{ display:inline-flex; align-self:flex-start; }
.sc-cta-desktop{ display:none; }
.sc-cta-mobile{ width:100%; justify-content:start; }


.showcase-carousel-card {
    background: #fff;
    border-radius: var(--radius-component, var(--radius-xl, 12px));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.showcase-carousel-card img {
    width: 100%;
    height: auto;
}

.showcase-carousel-card h3 {
    font-size: 1rem;
    margin: 0;
    color: #333;
}

.text-info{
    width: 70%;
}

.bottom-part{ display:flex; justify-content:space-between; padding:1rem; }

/* New Showcase grid (independent of icon/featureOverflow) */
.sc-grid{ 
    padding:20px;
    border-radius: var(--radius-component, var(--radius-xl, 12px)); 
    display:grid; 
    grid-template-columns:1fr; 
    gap:20px; 
}

@media (min-width:600px){ .sc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:900px){ .sc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .sc-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.sc-card{ display:grid; }
.sc-card .sc-media{ grid-area:1 / 1; }
.sc-card .sc-media img{ width:100%; height:auto; display:block; }
.sc-card .sc-overlay{ grid-area:1 / 1; align-self:end; display:flex; justify-content:space-between; padding:1.5rem; }
.sc-card .sc-text{ max-width:70%; }

/* Desktop behavior for header */
@media (min-width:900px){
  .sc-header{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
  .sc-cta-desktop{ display:inline-flex; }
  .sc-cta-mobile{ display:none; }
}

/* Grid behavior like iconTemplate (no background) */
.sc-grid{
  padding:0px;
  border-radius: var(--radius-component, var(--radius-xl, 12px));
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
}
@media (min-width:600px){ .sc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:900px){ .sc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .sc-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Tablet breakpoint */
@media (min-width: 768px) {
    .showcase-carousel-card {
        flex: 1 1 30%;
    }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
    .showcase-carousel-card {
        flex: 1 1 22%;
    }

    .subheading {
        font-size: 1.1rem;
    }

    h2 {
        font-size: 2rem;
    }
}


.card-link{
    display: block;      /* Makes the anchor tag a block-level element like a div */
  text-decoration: none; /* Removes the default underline */
  color: inherit;
}