/* ============================================================
Enago Indonesia — editor-profiles card reskin (Figma Frame
2095585444): gray photo band flush to the card top, field line
above the degree, publisher logo (placeholder images/test.png on
every card until the real per-editor logos arrive), stats row,
centered gray pills.
Linked by includes/inc_editor_profiles.htm itself (a body-level
at the top of the include), so EVERY page embedding the
component gets this reskin automatically — no per-page .
Being later in the DOM than the stylesheets, it always
overrides css/editor-profiles.css. The include markup is
unchanged: the cards are flex columns, so the new element order
comes from `order`, and the old empty .edp-divider span is
repurposed as the logo slot.
============================================================ */
/* card: 279x427 in Figma — photo full-bleed to the top corners */
.editor-2row .editor-col .edp-card {
padding: 0 0 20px;
height: 427px;
background: #FFFFFF;
box-shadow: 0 0 7.74px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
/* photo band: light gray, 176px, rounded top corners only */
.edp-photo {
order: 0;
height: 176px;
margin-bottom: 12px;
background: #E5E7E8;
border-radius: 10px 10px 0 0;
}
/* the pink dot deco + glow from the old card are gone in this design */
.edp-quote,
.edp-glow {
display: none;
}
/* photo: 227x152 area (24px top / 26px side insets), bottom-anchored */
.edp-img {
box-sizing: border-box;
padding: 24px 26px 0;
object-fit: contain;
object-position: bottom center;
}
.edp-flag {
top: 15px;
right: 16px;
}
/* content order: field (big) -> degree (small) -> logo -> stats -> tags */
.edp-field {
order: 1;
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #1D1D1D;
margin: 0 16px 4px;
min-height: 24px;
}
.edp-degree {
order: 2;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #1D1D1D;
margin: 0 16px;
}
/* the old divider span now carries the publisher logo — single
placeholder images/test.png for ALL cards for now (per Figma
image 86: 174x31, centered).
Logo hidden for now: uncomment the size/margin/background lines
below to bring it back. order + border:none stay so the span
collapses instead of reverting to the base divider line. */
.edp-divider {
order: 3;
border: none;
/* width: 175px;
height: 31px;
margin: 16px auto;
background: url("../images/test.png") center / contain no-repeat; */
}
.edp-stats {
order: 4;
margin: 0 16px;
}
/* pills: light gray, centered, Figma 10px/15 semibold */
.edp-tags {
order: 5;
justify-content: center;
gap: 6px;
margin: 20px 20px 0;
max-height: 50px;
}
.edp-tag {
height: 22px;
padding: 3px 10px 4px;
background: #E5E7E8;
border: 1px solid #E5E7E8;
border-radius: 50px;
font-weight: 600;
font-size: 10px;
line-height: 15px;
color: #283342;
}