/* =================================================
   FLOWSUITE LAYOUT SYSTEM
   Sections – Containers – Cards
   ================================================= */


/* -------------------------------------------------
   SECTION BASE
------------------------------------------------- */

.fs-section{

padding:80px 30px;

}



/* -------------------------------------------------
   SECTION BACKGROUNDS
------------------------------------------------- */

.fs-section-light{

background:var(--fs-warm-white);
color:var(--fs-text-dark);

}

.fs-section-white{

background:var(--fs-white);
color:var(--fs-text-dark);

}

.fs-section-dark{

background:var(--fs-azure);
color:var(--fs-text-light);

}



/* -------------------------------------------------
   CONTAINER
------------------------------------------------- */

.fs-container{

max-width:1200px;
margin:auto;

}



/* kleinere container */

.fs-container-sm{

max-width:900px;
margin:auto;

}



/* brede container */

.fs-container-lg{

max-width:1400px;
margin:auto;

}



/* -------------------------------------------------
   GRID SYSTEM
------------------------------------------------- */

.fs-grid-2{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;

}

.fs-grid-3{

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;

}



/* -------------------------------------------------
   CARD BASE
------------------------------------------------- */

.fs-card{

background:var(--fs-white);

padding:30px;

border-radius:var(--fs-radius-md);

box-shadow:var(--fs-shadow-sm);

transition:var(--fs-transition);

}



/* hover effect */

.fs-card:hover{

transform:translateY(-4px);

box-shadow:var(--fs-shadow-md);

}



/* -------------------------------------------------
   CARD DARK
------------------------------------------------- */

.fs-card-dark{

background:var(--fs-azure);
color:var(--fs-text-light);

}



/* -------------------------------------------------
   CARD GOLD
------------------------------------------------- */

.fs-card-gold{

background:var(--fs-gold);
color:var(--fs-white);

}



/* -------------------------------------------------
   CARD TITLE
------------------------------------------------- */

.fs-card-title{

font-size:22px;
font-weight:600;

margin-bottom:12px;

}



/* -------------------------------------------------
   CARD BODY
------------------------------------------------- */

.fs-card-body{

font-size:16px;
line-height:1.7;

color:var(--fs-text-mid);

}



/* -------------------------------------------------
   RESPONSIVE
------------------------------------------------- */

@media (max-width:900px){

.fs-grid-2,
.fs-grid-3{

grid-template-columns:1fr;

}

}