{% scope_css %}

/* ===== GRID ===== */
.fcards-grid{
  display:grid;
  gap:24px;
}

.fc-layout-featured .fcards-grid{
  grid-template-columns: 2fr 1fr;
}

.fc-layout-equal .fcards-grid{
  grid-template-columns: repeat(3, 1fr);
}

/* ===== CARD BASE ===== */
.fcard{
  background:#f5f4fb;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

.fcard-content{
  padding:24px;
  flex:1; /* iguala alturas */
}

/* ===== TIPOGRAFÍA (SEO/visual) ===== */
/* Subheader = H2 (SEO), visual chico */
.fsubheader{
  display:flex;
  align-items:center;
  gap:8px;

  font-size:14px;
  line-height:1.45;
  font-weight:300;

  text-transform:uppercase;
  letter-spacing:0.06em;

  margin:0 0 8px;
}

/* Título = H3 (visual grande) */
.ftitle{
  font-size:24px;
  line-height:1.2;
  font-weight:300;
  margin:0 0 12px;
}

/* Copy natural */
.fcopy,
.fcopy p,
.fcopy li{
  font-size:15px;
  line-height:1.55;
  font-weight:300;
}

.fcopy p:last-child{
  margin-bottom:0;
}

/* ===== MEDIA ===== */
/* Featured: imagen a la derecha */
.fcard.is-featured{
  flex-direction:row;
  min-height:320px;
}

.fcard.is-featured .fcard-content{
  width:67%;
}

.fmedia-side{
  width:55%;
}

.fmedia-side img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Cards normales/equal: imagen abajo */
.fmedia-bottom img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1140px){
  .fc-layout-featured .fcards-grid,
  .fc-layout-equal .fcards-grid{
    grid-template-columns:1fr;
  }

  .fcard.is-featured{
    flex-direction:column;
    min-height:auto;
  }

  .fmedia-side{
    width:100%;
  }

  .fmedia-side img{
    height:220px;
  }
}

{% end_scope_css %}