/**
 * Portrait photo overrides
 * -----------------------------------------------------------------
 * Editorial board photos default to 1:1 circular avatars across the
 * five frontend templates and the admin list/preview. The user-
 * visible result was unflattering for portrait headshots — faces got
 * cropped into a square. This override switches every photo slot to
 * 3:4 portrait aspect with subtle 10–12 px rounded corners while
 * keeping object-fit:cover so existing photos still look right.
 */

/* ---------- Frontend: shared (cards) -------------------------------- */
.ebm-card-photo,
.ebm-card-photo--initials,
.ebm-card-photo--icon {
    width: 96px !important;
    height: 128px !important;          /* 3:4 portrait */
    border-radius: 12px !important;    /* slightly rounded corners */
}

/* ---------- Frontend: hierarchical ---------------------------------- */
.ebm-h-photo,
.ebm-h-photo-large {
    width: 110px !important;
    height: 146px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}
.ebm-h-photo-large {
    width: 140px !important;
    height: 186px !important;
    border-radius: 16px !important;
}

/* ---------- Frontend: compact (avatar in a row) --------------------- */
.ebm-compact-row .ebm-card-photo,
.ebm-compact-row .ebm-card-photo--initials,
.ebm-compact-row .ebm-card-photo--icon,
.ebm-compact-photo,
.ebm-compact-photo--initials,
.ebm-compact-photo--icon,
.ebm-row-photo,
.ebm-row-photo--initials,
.ebm-row-photo--icon {
    width: 56px !important;
    height: 72px !important;           /* 3:4 portrait */
    border-radius: 8px !important;
}

/* ---------- Frontend: magazine (already a tall hero) ---------------- */
.ebm-mag-hero img,
.ebm-mag-hero-placeholder {
    aspect-ratio: 3 / 4;
    height: auto !important;
    border-radius: 14px !important;
}

/* ---------- Frontend: table thumbs --------------------------------- */
/* Big enough to recognise a face but still compact for a list. ~5:6
   ratio (slightly portrait, not aggressively narrow). All properties
   marked !important + min-/max-width pinned so theme CSS cannot squash
   the cell down to its photo column header width. */
.ebm-table-th-photo {
    width: 80px !important;
    min-width: 80px !important;
}
.ebm-table .ebm-table-photo,
.ebm-table .ebm-table-photo--initials,
.ebm-table .ebm-table-photo--icon,
img.ebm-table-photo {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    object-position: center top !important; /* prefer keeping the head visible */
    display: block !important;
    flex: 0 0 auto !important;
}

/* ---------- Admin: list thumb -------------------------------------- */
.ebm-admin-thumb {
    width: 42px !important;
    height: 56px !important;           /* 3:4 portrait */
    border-radius: 8px !important;
}

/* ---------- Admin: editor-form preview ----------------------------- */
.ebm-photo-preview {
    aspect-ratio: 3 / 4 !important;    /* portrait */
    border-radius: 12px !important;
    max-width: 240px;
}
.ebm-photo-preview img {
    border-radius: 12px;
}

/* ==========================================================================
 * Dense Table — column re-balancing
 *
 * Goals: make the Links column wrap to 2 rows so it occupies less width;
 * recover that width for Name and Role; render Specialty as italic line
 * under Affiliation.
 * ========================================================================== */

.ebm-table-th-links {
    width: 80px !important;              /* tight 2-column grid width */
    text-align: center !important;
}

/* 2-COLUMN grid (so icons stack vertically next to long affiliations) */
.ebm-table-links .ebm-card-links {
    display: grid !important;
    grid-template-columns: repeat(2, auto) !important;
    gap: 8px 10px !important;
    justify-content: center !important;
    align-content: start !important;
    width: max-content;
    margin: 0 auto;
}
.ebm-table-links .ebm-link {
    width: 18px;
    height: 18px;
    justify-content: center;
}

/* Give the recovered space to Name + Role */
.ebm-table-name {
    min-width: 160px;
    max-width: 200px;
    line-height: 1.3;
    white-space: normal;                 /* allow wrap on long names */
}
/* Title (Prof. Dr.) on its own line, full name on the next. */
.ebm-table-name-title {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ebm-text-muted, #6b7280);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1px;
}
.ebm-table-name-full {
    display: block;
    font-weight: 500;
    color: var(--ebm-text, #1f2937);
}
.ebm-table-role {
    min-width: 110px;
    max-width: 150px;
    padding-right: 8px !important;
}
/* Minimal "tag" treatment for the role column — much less button-like
   than the default pill so it reads as supporting metadata, not a
   primary action. Soft primary tint background with primary text, small
   font, allowed to wrap ONLY at whitespace (never mid-word) — so
   "Editör Yardımcıları" breaks into "Editör / Yardımcıları", never
   "Yardımcıla / rı". */
.ebm-table-role .ebm-pill {
    display: inline-block !important;
    background: color-mix(in srgb, var(--ebm-primary, #1e3a8a) 9%, transparent) !important;
    color: var(--ebm-primary, #1e3a8a) !important;
    border: 0 !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3 !important;
    border-radius: 4px !important;
    white-space: normal !important;       /* allow wrap at whitespace */
    word-break: normal !important;        /* don't break inside a word */
    overflow-wrap: normal !important;     /* never break inside a word */
    hyphens: none !important;
}

/* Keep affiliation flexible — it absorbs slack on wide screens */
.ebm-table-affiliation { min-width: 220px; line-height: 1.35; }
.ebm-table-aff-line   { color: var(--ebm-text-secondary); }
.ebm-table-specialty  {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ebm-text-muted);
}
.ebm-table-specialty em { font-style: italic; }

/* ==========================================================================
 * Country flag <img> (replaces unreliable Unicode flag emoji)
 *
 * Many OJS themes apply a global `img { display: block }` rule which would
 * push the flag onto its own line, breaking the "🇹🇷 Türkiye" inline
 * pairing. !important here so the flag stays inline-block regardless of
 * theme styling. Country wrapper itself is also inline-block + nowrap so
 * the flag and the name never split across two lines.
 * ========================================================================== */
/* Default: flag + country name on the SAME line (cards + rows). */
.ebm-flag-img,
.ebm-card-country .ebm-flag-img,
.ebm-row-country .ebm-flag-img {
    display: inline-block !important;
    vertical-align: -2px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05) !important;
    margin: 0 4px 0 0 !important;
}
.ebm-card-country,
.ebm-row-country {
    display: inline-block;
    white-space: nowrap;
}

/* Dense Table — DIFFERENT: flag stacked ABOVE the country name, both
   centred. Saves horizontal width in the country column and reads more
   like a small badge per row. */
.ebm-table-country {
    text-align: center;
    line-height: 1.3;
    white-space: normal;
}
.ebm-table-country .ebm-flag-img {
    display: block !important;
    margin: 0 auto 4px !important;
    width: 22px !important;
    height: 16px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05) !important;
}

/* ==========================================================================
 * Dense Table — overflow safety
 *
 * Theme containers vary; some hug the right edge tightly which makes the
 * dense table appear cut-off. Force a small breathing margin and constrain
 * the table to the wrapper width so it never spills past the page.
 * ========================================================================== */
.ebm-table-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    overflow-x: auto;                  /* ultra-narrow viewports get scroll */
}
.ebm-table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    box-sizing: border-box;
}
/* Trim cell padding a bit so columns fit without horizontal scroll on
   moderate viewports. */
.ebm-table th,
.ebm-table td {
    padding: 10px 10px !important;
}

/* ==========================================================================
 * Dense Table — search box icon position
 *
 * Theme stylesheets sometimes reset input padding to a flat value, which
 * makes the placeholder text slide UNDER the search-icon. Lock the layout
 * down at high specificity so the icon always sits in its 32-px gutter.
 * ========================================================================== */
.ebm-table-toolbar .ebm-table-searchwrap {
    position: relative !important;
    display: inline-block;
}
.ebm-table-toolbar .ebm-table-searchicon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    color: #9ca3af;
    z-index: 1;
}
.ebm-table-toolbar input.ebm-table-search {
    padding: 8px 12px 8px 36px !important;   /* leave room for the icon */
    box-sizing: border-box !important;
    width: 240px !important;
    max-width: 100%;
}

/* ==========================================================================
 * Hierarchical Cards — flag inline + bottom-aligned social icons
 *
 * 1) Many themes apply `img { display: block }` globally, which knocks the
 *    flag image onto its own line above the country name. Force inline-block
 *    with !important so flag + name sit side-by-side, both centered (the
 *    parent .ebm-h-meta is already text-align: center).
 *
 * 2) Cards in the same grid row should share the height of the tallest one
 *    so the social-icon strip lines up at the bottom of every card. We use
 *    flex-column on the card and `margin-top: auto` on the icon row.
 * ========================================================================== */

/* --- 1. Flag stays on the same line as the country name ----------------- */
.ebm-h-meta .ebm-flag-img,
.ebm-mag-hero-affiliation .ebm-flag-img {
    display: inline-block !important;
    vertical-align: -2px !important;
    margin: 0 4px 0 0 !important;
}

/* --- 2. Equal-height cards with icons pinned to the bottom -------------- */
/* Switch from grid to centered flex so single / pair-of cards within a
   category land in the middle of the row instead of hugging the left
   edge of a 3-column grid. Cards keep a consistent target width with
   min/max so a row of 3 still feels balanced. */
.ebm-h-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: stretch !important;     /* cards stretch to row max */
    gap: 1rem;
}
.ebm-h-grid .ebm-h-card {
    flex: 0 1 280px;                      /* prefer ~280px wide */
    min-width: 220px;
    max-width: 320px;
}
.ebm-h-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto;                         /* let flex sizing set height */
}
.ebm-h-card .ebm-h-photo,
.ebm-h-card .ebm-h-photo-large,
.ebm-h-card img.ebm-h-photo {
    align-self: center;                  /* keep avatar centred horizontally */
    flex: 0 0 auto;                      /* don't let flex squash the photo */
}
.ebm-h-card .ebm-h-name,
.ebm-h-card .ebm-h-name-large,
.ebm-h-card .ebm-h-role,
.ebm-h-card .ebm-h-meta {
    flex: 0 0 auto;
}
.ebm-h-card .ebm-h-divider {
    flex: 0 0 auto;
    margin-top: auto !important;         /* pushes the divider + icons to
                                            the bottom of the card */
}
.ebm-h-card .ebm-card-links {
    margin-top: auto !important;         /* same trick when there's no divider */
    padding-top: 8px;
    justify-content: center !important;
}
/* If both divider and icons are present, only the divider should anchor
   the bottom; icons stay flush to it. */
.ebm-h-card .ebm-h-divider + .ebm-card-links,
.ebm-h-card .ebm-h-divider ~ .ebm-card-links {
    margin-top: 0 !important;
}

/* ==========================================================================
 * Compact Directory — refreshed layout
 *
 * Goals:
 *  1. Three-column row: photo | info (title+name / affiliation / specialty
 *     / country) | social-icons.
 *  2. Search icon stays in its 36-px gutter (theme can't squash padding).
 *  3. Filter tabs scroll horizontally if they exceed the toolbar width.
 *  4. Flag + country name stay on the same line when both are shown.
 * ========================================================================== */

/* --- 1. Row layout -------------------------------------------------------- */
.ebm-compact .ebm-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 16px !important;
    padding: 14px 14px;
    border-bottom: 1px solid #f0f0f0;
}

/* Compact directory photo — 100 px tall, 75 px wide (3:4 portrait).
   Bigger than the previous 56×72 thumb so the row reads more like a
   compact card; width is held to the 3:4 ratio of the height. */
.ebm-compact .ebm-row-photo,
.ebm-compact .ebm-row-photo img,
.ebm-compact .ebm-row-photo--initials,
.ebm-compact .ebm-row-photo--icon {
    width: 75px !important;
    height: 100px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    object-position: center top !important;
    align-self: flex-start;
    flex-shrink: 0 !important;
    display: block;
}

.ebm-compact .ebm-row-info {
    min-width: 0;
    line-height: 1.4;
    padding-top: 2px;
}
.ebm-compact .ebm-row-name {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.3;
}
.ebm-compact .ebm-row-name-title {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ebm-text-muted, #6b7280);
    margin-right: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.ebm-compact .ebm-row-name-full {
    font-weight: 600;
    color: var(--ebm-text, #1f2937);
}
.ebm-compact .ebm-row-affiliation {
    font-size: 13px;
    color: var(--ebm-text-secondary, #4b5563);
    margin: 2px 0;
}
.ebm-compact .ebm-row-specialty {
    font-size: 12px;
    color: var(--ebm-text-muted, #6b7280);
    margin: 2px 0;
}
.ebm-compact .ebm-row-specialty em { font-style: italic; }
.ebm-compact .ebm-row-country {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ebm-text-muted, #6b7280);
    white-space: nowrap;
}

.ebm-compact .ebm-row-links {
    align-self: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;            /* social icons on top, Bio button below */
    align-items: flex-end;
    gap: 8px;
}
.ebm-compact .ebm-row-links .ebm-card-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 200px;
    justify-content: flex-end;
}
/* Bio button drops to its own row, full "Bio" label, minimal pill. */
.ebm-compact .ebm-row-links .ebm-bio-btn--row {
    margin-left: 0 !important;          /* no longer inline */
    align-self: flex-end;
}

/* --- 2. Search icon position --------------------------------------------- */
.ebm-compact-toolbar .ebm-compact-searchwrap {
    position: relative !important;
}
.ebm-compact-toolbar .ebm-compact-searchicon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    color: #9ca3af;
    z-index: 1;
}
.ebm-compact-toolbar input.ebm-compact-search {
    padding: 9px 12px 9px 36px !important;
    box-sizing: border-box !important;
    width: 100%;
}

/* --- 3. Filter tabs overflow handling ------------------------------------ */
.ebm-compact-toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}
.ebm-compact-filters {
    flex: 1 1 320px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;        /* keep on a single horizontal line */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ebm-compact-filters::-webkit-scrollbar { height: 4px; }
.ebm-compact-filters::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15); border-radius: 2px;
}
.ebm-compact-filter {
    flex: 0 0 auto;                      /* never let a tab shrink to ellipsis */
    white-space: nowrap;
}

/* --- 4. Flag + country on same line -------------------------------------- */
.ebm-compact .ebm-row-country .ebm-flag-img {
    display: inline-block !important;
    vertical-align: -2px !important;
    margin: 0 4px 0 0 !important;
}

/* --- Responsive: stack on narrow viewports ------------------------------- */
@media (max-width: 720px) {
    .ebm-compact .ebm-row {
        grid-template-columns: auto 1fr;
    }
    .ebm-compact .ebm-row-links {
        grid-column: 1 / -1;
        align-self: flex-start;
        margin-top: 4px;
    }
    .ebm-compact .ebm-row-links .ebm-card-links {
        justify-content: flex-start;
        max-width: none;
    }
}

/* ==========================================================================
 * Magazine Spread — full visual rewrite
 *
 * Goal: match design-mockups/03 — premium hero (big portrait + serif name +
 * eyebrow label + bio blockquote + divider + clean social row), then minimal
 * borderless avatar cards in 3-column grids. Round avatars on the secondary
 * cards, italic specialty labels, no role pills (the section header above
 * already states the role).
 * ========================================================================== */

/* --- HERO ---------------------------------------------------------------- */
.ebm-magazine .ebm-mag-hero {
    display: grid !important;
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    gap: 2.5rem !important;
    margin-bottom: 3.5rem !important;
    align-items: start;
}
.ebm-magazine .ebm-mag-hero-photo {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}
.ebm-magazine .ebm-mag-hero-photo img,
.ebm-magazine .ebm-mag-hero-placeholder {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;       /* gentle portrait (4:5) */
    height: auto !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}
.ebm-magazine .ebm-mag-hero-body {
    padding-top: 4px;
}
.ebm-magazine .ebm-mag-eyebrow {
    color: #6b7280 !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}
.ebm-magazine .ebm-mag-hero-name {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 38px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    margin: 0 0 14px !important;
    color: #1f2937;
}
.ebm-magazine .ebm-mag-hero-affiliation {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ebm-text-secondary, #4b5563) !important;
    margin-bottom: 1.5rem !important;
}
.ebm-magazine .ebm-mag-hero-affiliation .ebm-flag-img {
    display: inline-block !important;
    vertical-align: -2px !important;
    margin: 0 4px 0 0 !important;
}
.ebm-magazine .ebm-mag-quote {
    border-left: 3px solid var(--ebm-primary, var(--ebm-primary, #1e3a8a)) !important;
    background: #f4f5f7 !important;
    padding: 16px 20px !important;
    margin: 0 0 1.5rem !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #374151;
    /* Preserve user-entered \n line breaks without enabling raw HTML —
       safe because the bio is htmlspecialchars-escaped on output (no
       tags get through) but native newline characters render as
       visible breaks. Same trick is used by the bio modal which
       splits on \n into <p> paragraphs. */
    white-space: pre-line;
}
/* Divider between bio and social icons */
.ebm-magazine .ebm-mag-hero-body .ebm-card-links {
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
    margin-top: 18px;
    gap: 14px;
    color: var(--ebm-text-muted, #6b7280);
}

/* --- SECTION TITLES (DEPUTY EDITORS, etc.) ------------------------------ */
.ebm-magazine .ebm-mag-section-title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #1f2937 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 0 1.5rem !important;
    font-weight: 600 !important;
}

/* --- SECONDARY CARDS — minimal avatar rows ------------------------------ */
.ebm-magazine .ebm-mag-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 40px !important;            /* a touch more room since the
                                             cards are wider in 2-up */
    margin-bottom: 2.5rem !important;
}

.ebm-magazine .ebm-mag-grid .ebm-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.ebm-magazine .ebm-mag-grid .ebm-card:hover {
    background: transparent !important;
    border: 0 !important;
}
.ebm-magazine .ebm-card-photo-wrap {
    grid-row: span 2;                    /* let avatar span name+affiliation */
    align-self: start;
}
.ebm-magazine .ebm-mag-grid .ebm-card-photo,
.ebm-magazine .ebm-mag-grid .ebm-card-photo--initials,
.ebm-magazine .ebm-mag-grid .ebm-card-photo--icon,
.ebm-magazine .ebm-mag-grid img.ebm-card-photo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;       /* round avatar — magazine convention */
    object-fit: cover !important;
    object-position: center top !important;
}
.ebm-magazine .ebm-card-body {
    min-width: 0;
    padding-top: 2px;
}
.ebm-magazine .ebm-mag-grid .ebm-card-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
    color: #1f2937;
    line-height: 1.3;
}
/* Re-style specialty pill as plain italic text; hide the role fallback
   (category name) because the section header above already states it. */
.ebm-magazine .ebm-mag-grid .ebm-card .ebm-pill {
    background: transparent !important;
    color: #6b7280 !important;
    font-style: italic !important;
    padding: 0 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    display: inline-block !important;
    margin: 0 0 2px !important;
    line-height: 1.4 !important;
}
.ebm-magazine .ebm-mag-grid .ebm-card .ebm-card-role {
    display: none !important;
}
.ebm-magazine .ebm-mag-grid .ebm-card-affiliation {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--ebm-text-secondary, #4b5563) !important;
    margin: 2px 0 !important;
}
.ebm-magazine .ebm-mag-grid .ebm-card-affiliation .ebm-flag-img,
.ebm-magazine .ebm-mag-grid .ebm-card-country .ebm-flag-img {
    display: inline-block !important;
    vertical-align: -2px !important;
    margin: 0 4px 0 0 !important;
}
.ebm-magazine .ebm-mag-grid .ebm-card-country {
    color: var(--ebm-text-muted, #6b7280);
    font-size: 12px;
    margin-left: 0;
}
.ebm-magazine .ebm-mag-grid .ebm-card .ebm-card-links {
    gap: 10px !important;
    margin-top: 8px !important;
    flex-wrap: wrap;
    color: var(--ebm-text-muted, #6b7280);
}
.ebm-magazine .ebm-mag-grid .ebm-card .ebm-link {
    width: 16px;
    height: 16px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
    .ebm-magazine .ebm-mag-hero {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}
@media (max-width: 640px) {
    .ebm-magazine .ebm-mag-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Magazine hero affiliation/country lines (rendered as <div>s now). */
.ebm-magazine .ebm-mag-hero-aff-line {
    display: block;
}
.ebm-magazine .ebm-mag-hero-country {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ebm-text-muted, #6b7280);
}

/* ==========================================================================
 * Magazine Spread — flat-grid + per-card category pill
 *
 * After the hero, every remaining editor flows into a single 2-column grid
 * (no per-section headers). Each card has a soft white box with subtle
 * shadow and a tiny "EDITOR-IN-CHIEF / DEPUTY EDITORS / …" pill at the top
 * so the role is still clear without dedicated section dividers.
 * ========================================================================== */

/* Card wrapper provides the visual chrome. The inner .ebm-card stays
   borderless / transparent, as set earlier in this file. */
.ebm-magazine .ebm-mag-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ebm-magazine .ebm-mag-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #d1d5db;
}

/* Mini category "button" pill at the top of each card. */
.ebm-magazine .ebm-mag-cat-pill {
    display: inline-block;
    background: color-mix(in srgb, var(--ebm-primary, #1e3a8a) 14%, transparent);
    color: var(--ebm-primary, #1e3a8a);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
    line-height: 1.2;
}

/* Section title rule from the previous iteration is no longer needed —
   sections aren't rendered. The selector still exists in case any other
   template still references it; harmless. */

/* ==========================================================================
 * Title (Prof. Dr.) on its own line above the full name — every template
 * ========================================================================== */

/* Magazine hero name */
.ebm-magazine .ebm-mag-hero-name { line-height: 1.1 !important; }
.ebm-mag-hero-title {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 6px;
}
.ebm-mag-hero-fullname { display: block; }

/* Editor card (sectioned + magazine secondary) */
.ebm-card-name-title {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ebm-text-muted, #6b7280);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1px;
    line-height: 1.2;
}
.ebm-card-name-full {
    display: block;
    font-weight: 600;
    color: var(--ebm-text, #1f2937);
}

/* Hierarchical card name */
.ebm-h-name { line-height: 1.25; }
.ebm-h-name-title {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 2px;
}
.ebm-h-name-full { display: block; }
.ebm-h-name-large .ebm-h-name-title { font-size: 14px; }

/* ==========================================================================
 * Magazine hero affiliation — flag should match the bigger text scale
 * ========================================================================== */
.ebm-magazine .ebm-mag-hero-affiliation .ebm-flag-img,
.ebm-magazine .ebm-mag-hero-country .ebm-flag-img {
    display: inline-block !important;
    width: 24px !important;
    height: 18px !important;
    vertical-align: -3px !important;
    margin: 0 6px 0 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* ==========================================================================
 * Magazine secondary cards — portrait avatar (matches our 56×72 standard)
 * Replaces the earlier round 56×56 setting in this same file. Later rule
 * wins via cascade order, so this is what actually applies.
 * ========================================================================== */
.ebm-magazine .ebm-mag-grid .ebm-card-photo,
.ebm-magazine .ebm-mag-grid .ebm-card-photo--initials,
.ebm-magazine .ebm-mag-grid .ebm-card-photo--icon,
.ebm-magazine .ebm-mag-grid img.ebm-card-photo {
    width: 56px !important;
    height: 72px !important;             /* portrait, same ratio as Compact */
    border-radius: 8px !important;       /* slightly rounded corners */
    object-fit: cover !important;
    object-position: center top !important;
}

/* ==========================================================================
 * Specialty / research area — make sure it's visible in every card
 *
 * The editor partial renders specialty inside a <span class="ebm-pill ...">.
 * Magazine context strips the pill chrome so it looks like plain text, but
 * span/inline-block left it tucked next to the name and easy to miss.
 * Force it to its own line, italic gray, with a small left accent in the
 * hero so it reads as supporting metadata.
 * ========================================================================== */

/* HERO specialty (newly added <div class="ebm-mag-hero-specialty">) */
.ebm-magazine .ebm-mag-hero-specialty {
    margin: -6px 0 14px;
    padding: 4px 0 4px 12px;
    border-left: 3px solid #c7d2fe;        /* soft primary tint */
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}
.ebm-magazine .ebm-mag-hero-specialty em {
    font-style: italic;
}

/* SECONDARY cards: lift the pill to its own visible line */
.ebm-magazine .ebm-mag-grid .ebm-card .ebm-pill {
    display: block !important;
    margin: 4px 0 6px !important;
}

/* Sectioned (default) template — same treatment so specialty is consistent */
.ebm-sectioned .ebm-card .ebm-pill {
    display: inline-block;                  /* stays a coloured pill */
    margin-top: 4px;
}

/* ==========================================================================
 * Magazine hero category — same pill styling as the secondary cards
 * ========================================================================== */
.ebm-magazine .ebm-mag-hero-cat {
    margin-bottom: 14px;
}
/* Override the inherited hero scale so the pill stays compact even though
   it lives inside the very-large hero block. */
.ebm-magazine .ebm-mag-hero-cat .ebm-mag-cat-pill {
    font-size: 11px !important;       /* matches secondary cards */
    padding: 4px 12px !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
 * Magazine hero — "rich" contact rows (email + ORCID) above the icon strip
 * ========================================================================== */
.ebm-magazine .ebm-mag-hero-contacts {
    margin: 18px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}
.ebm-mag-contact-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f2937;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.15s ease;
}
.ebm-mag-contact-row:hover {
    color: var(--ebm-primary, #1e3a8a);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ebm-mag-contact-icon {
    flex: 0 0 auto;
    color: #6b7280;
}
.ebm-mag-contact-orcid .ebm-mag-contact-icon {
    color: #A6CE39;          /* ORCID brand fill colour set on the SVG */
}
.ebm-mag-contact-text {
    word-break: break-word;
}

/* The icon strip below sits flush — remove its own border-top because
   we already have one on the contacts block. */
.ebm-magazine .ebm-mag-hero-body .ebm-mag-hero-contacts + .ebm-card-links {
    border-top: 0 !important;
    padding-top: 4px !important;
    margin-top: 4px !important;
}

/* ==========================================================================
 * Sectioned (default) — hide the in-card role/category label
 *
 * `_editor_card.tpl` falls back to printing the category name inside the
 * card when specialty is empty. Sectioned already shows the category as
 * a section header above the row, so the in-card duplicate is noise.
 * (Magazine got the same treatment earlier.)
 * ========================================================================== */
.ebm-sectioned .ebm-card .ebm-card-role,
.ebm-sectioned-cards .ebm-card .ebm-card-role {
    display: none !important;
}

/* ==========================================================================
 * Bio button + modal — only renders when an editor's bio field is set.
 *
 * Card templates: positioned at the bottom-right corner of the card
 * (cards become position: relative implicitly because of the `min-height
 * 100%` flex layout in hierarchical, or set explicitly here for cards
 * that don't already have it). Compact + table get an inline pill.
 * ========================================================================== */

/* The button has THREE children:
 *   .ebm-bio-letter ("B")  — shown only in card-corner variant
 *   .ebm-bio-icon   (ⓘ)    — shown only in inline (--row) variant
 *   .ebm-bio-text   ("Bio") — shown only in inline (--row) variant
 * The wrapper styling per parent toggles which child is visible. */

.ebm-bio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    /* Bio buttons use the SECONDARY brand colour (20–30% lighter than the
       primary by design) so they read as "an extra action" — a sibling
       of the primary brand colour rather than a competing third hue.
       On hover/focus they shift to the primary for emphasis. */
    background: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 14%, #fff);
    color: var(--ebm-secondary, #3b82f6);
    border: 1px solid color-mix(in srgb, var(--ebm-secondary, #3b82f6) 35%, transparent);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    /* Default = card-corner = small round B */
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    font-family: Georgia, "Times New Roman", serif;
}
.ebm-bio-btn:hover,
.ebm-bio-btn:focus-visible {
    background: var(--ebm-primary, #1e3a8a);
    color: #fff;
    border-color: var(--ebm-primary, #1e3a8a);
    outline: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ebm-primary, #1e3a8a) 35%, transparent);
}
.ebm-bio-btn .ebm-bio-letter {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.ebm-bio-btn .ebm-bio-icon,
.ebm-bio-btn .ebm-bio-text { display: none; }

/* HERO variant — Magazine first editor.
   A "real" labelled pill button placed below the social-icon strip.
   Larger and more emphatic than the small round B used elsewhere; the
   first editor deserves a visible call-to-action because we have the
   real estate. */
.ebm-mag-hero-bio-wrap {
    margin-top: 14px;
}
.ebm-bio-btn--hero {
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;        /* squared-pill, more "button" than badge */
    padding: 9px 18px !important;
    gap: 8px;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    font-family: inherit;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 14%, #fff) !important;
    color: var(--ebm-secondary, #3b82f6) !important;
    border: 1px solid color-mix(in srgb, var(--ebm-secondary, #3b82f6) 35%, transparent) !important;
}
.ebm-bio-btn--hero .ebm-bio-letter { display: none !important; }
.ebm-bio-btn--hero .ebm-bio-icon,
.ebm-bio-btn--hero .ebm-bio-text { display: inline-flex; }
.ebm-bio-btn--hero:hover,
.ebm-bio-btn--hero:focus-visible {
    background: var(--ebm-primary, #1e3a8a) !important;
    color: #fff !important;
    border-color: var(--ebm-primary, #1e3a8a) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ebm-primary, #1e3a8a) 30%, transparent);
    transform: translateY(-1px);
}

/* INLINE variant — Compact rows + Dense Table name cell.
   Same secondary→primary brand pairing as the round-B variant: tinted
   secondary by default, full primary on hover. */
.ebm-bio-btn--row {
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    margin-left: 8px;
    vertical-align: 1px;
    background: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 12%, #fff) !important;
    color: var(--ebm-secondary, #3b82f6) !important;
    border: 1px solid color-mix(in srgb, var(--ebm-secondary, #3b82f6) 30%, transparent) !important;
    font-family: inherit;
}
.ebm-bio-btn--row .ebm-bio-letter { display: none !important; }
.ebm-bio-btn--row .ebm-bio-icon,
.ebm-bio-btn--row .ebm-bio-text { display: inline-flex; }
.ebm-bio-btn--row:hover,
.ebm-bio-btn--row:focus-visible {
    background: var(--ebm-primary, #1e3a8a) !important;
    color: #fff !important;
    border-color: var(--ebm-primary, #1e3a8a) !important;
}

/* Per-template anchor positions for the round B button */
.ebm-card,
.ebm-h-card,
.ebm-mag-card { position: relative; }

/* When `.ebm-card` is nested inside `.ebm-mag-card` (the magazine wrapper
   provides the visible chrome), let the inner card defer to the outer
   one for absolute-positioning. Otherwise the corner ribbon would anchor
   to the inner borderless card and float in the middle of the chrome. */
.ebm-mag-card .ebm-card { position: static !important; }

/* Sectioned cards + Magazine secondary cards — TOP-RIGHT corner ribbon.
   Mirrors the Hierarchical badge (which sits top-LEFT). Sharp top + right
   + bottom-right edges, rounded bottom-LEFT so it reads as a tab hanging
   from the top-right corner of the card. */
.ebm-mag-card .ebm-bio-btn,
.ebm-sectioned .ebm-card > .ebm-bio-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 34px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 0 0 0 18px !important;       /* sharp TR + TL + BR, soft BL */
    background: var(--ebm-secondary, #3b82f6) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.18);
    z-index: 5;
    overflow: hidden;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ebm-mag-card .ebm-bio-btn:hover,
.ebm-mag-card .ebm-bio-btn:focus-visible,
.ebm-sectioned .ebm-card > .ebm-bio-btn:hover,
.ebm-sectioned .ebm-card > .ebm-bio-btn:focus-visible {
    background: var(--ebm-primary, #1e3a8a) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: -1px 3px 10px color-mix(in srgb, var(--ebm-primary, #1e3a8a) 45%, transparent);
    transform: scale(1.05);
    transform-origin: top right;
}
.ebm-mag-card .ebm-bio-btn .ebm-bio-letter,
.ebm-sectioned .ebm-card > .ebm-bio-btn .ebm-bio-letter {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    /* Mirror of hierarchical: push letter toward the TOP-right visible
       half (away from the rounded BL notch). */
    transform: translate(3px, -3px);
}
/* The hero variant lives in .ebm-mag-hero-bio-wrap, NOT inside an
   .ebm-mag-card, so the descendant rule above won't match it. But
   guard explicitly anyway in case future markup nests them. */
.ebm-mag-hero-bio-wrap .ebm-bio-btn {
    position: static !important;
    width: auto !important;
    height: auto !important;
}

/* Hierarchical — corner ribbon-tab badge in the TOP-LEFT corner.
   Inspired by the "indirim / popüler / yeni" promo badges on e-commerce
   cards: sharp top + left edges flush against the card corner, rounded
   bottom-right edge so it reads as a small tab hanging into the card.
   Solid SECONDARY brand colour by default; hover deepens to PRIMARY. */
.ebm-h-card > .ebm-bio-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 38px;
    padding: 0;
    border-radius: 0 0 18px 0 !important;       /* sharp TL + TR + BL, soft BR */
    background: var(--ebm-secondary, #3b82f6) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.18);
    z-index: 5;
    overflow: hidden;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ebm-h-card > .ebm-bio-btn:hover,
.ebm-h-card > .ebm-bio-btn:focus-visible {
    background: var(--ebm-primary, #1e3a8a) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 1px 3px 10px color-mix(in srgb, var(--ebm-primary, #1e3a8a) 45%, transparent);
    transform: scale(1.05);
    transform-origin: top left;
}
.ebm-h-card > .ebm-bio-btn .ebm-bio-letter {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    /* Push the letter slightly toward the visible (top-left) corner so it
       reads centered in the visible badge area, not the geometric center
       which sits inside the rounded notch. */
    transform: translate(-3px, -3px);
}

/* Hidden source content read by JS — never rendered visually. */
.ebm-bio-content { display: none !important; }


/* ===== Modal ===== */
.ebm-bio-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 20px;
}
.ebm-bio-modal.is-open { opacity: 1; }
.ebm-bio-modal[hidden] { display: none; }

.ebm-bio-modal-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: 620px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px 30px;
    position: relative;
    transform: translateY(8px);
    transition: transform 0.18s ease;
}
.ebm-bio-modal.is-open .ebm-bio-modal-card { transform: translateY(0); }

.ebm-bio-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.ebm-bio-modal-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.ebm-bio-modal-eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
    font-weight: 600;
}
.ebm-bio-modal-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 14px;
    line-height: 1.3;
}
.ebm-bio-modal-text {
    color: #374151;
    line-height: 1.65;
    font-size: 14px;
}
.ebm-bio-modal-text p {
    margin: 0 0 0.8em;
}
.ebm-bio-modal-text p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .ebm-bio-modal-card { padding: 22px 20px; }
    .ebm-bio-modal-name { font-size: 17px; }
}

/* ==========================================================================
 * Magazine hero — inline "more" link inside the bio blockquote
 *
 * The hero blockquote shows the bio truncated to ~30 words; if there's
 * more text we append a small inline "more" button that opens the same
 * shared modal with the full bio. The button reuses .ebm-bio-btn (so the
 * existing click handler picks it up), but visually it must NOT look like
 * the round-B card-corner badge — it's a typographic affordance.
 * ========================================================================== */
.ebm-mag-quote .ebm-mag-quote-more {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    background: transparent !important;
    color: var(--ebm-primary, #1e3a8a) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font: inherit !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer;
    box-shadow: none !important;
    line-height: inherit !important;
    transition: color 0.15s ease;
}
.ebm-mag-quote .ebm-mag-quote-more:hover,
.ebm-mag-quote .ebm-mag-quote-more:focus-visible {
    color: var(--ebm-secondary, #3b82f6) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
/* Letter span exists for the round-B variant; not needed here. */
.ebm-mag-quote .ebm-mag-quote-more .ebm-bio-letter,
.ebm-mag-quote .ebm-mag-quote-more .ebm-bio-icon { display: none !important; }

/* ==========================================================================
 * Dense Table — Bio button as a frosted-glass minimal pill with full text
 *
 * Tables benefit from a low-key affordance — readers are scanning rows,
 * not picking actions. A glassmorphism pill (translucent white + slight
 * blur + 1px border) sits gently next to the name and reads as a quiet
 * "more info" tag rather than a bright primary call-to-action.
 * ========================================================================== */
.ebm-table .ebm-bio-btn--row {
    width: auto !important;
    height: auto !important;
    padding: 2px 9px !important;
    margin-left: 6px !important;
    border-radius: 4px !important;
    gap: 4px !important;
    vertical-align: 1px;

    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;

    color: var(--ebm-text-muted, #6b7280) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em;
    font-family: inherit;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}
.ebm-table .ebm-bio-btn--row .ebm-bio-letter {
    display: none !important;
}
.ebm-table .ebm-bio-btn--row .ebm-bio-icon {
    display: inline-flex !important;
    width: 9px !important;
    height: 9px !important;
    color: var(--ebm-text-muted, #6b7280);
}
.ebm-table .ebm-bio-btn--row .ebm-bio-text {
    display: inline !important;
}
.ebm-table .ebm-bio-btn--row:hover,
.ebm-table .ebm-bio-btn--row:focus-visible {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--ebm-primary, #1e3a8a) !important;
    border-color: color-mix(in srgb, var(--ebm-primary, #1e3a8a) 25%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.ebm-table .ebm-bio-btn--row:hover .ebm-bio-icon,
.ebm-table .ebm-bio-btn--row:focus-visible .ebm-bio-icon {
    color: var(--ebm-primary, #1e3a8a);
}

/* ==========================================================================
 * CSV Import — demo notice block
 *
 * Shown under the "Download sample" button so admins know what they're
 * about to download before they open it.
 * ========================================================================== */
.ebm-import-notice {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 8%, #fff);
    border-left: 3px solid var(--ebm-secondary, #3b82f6);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ebm-text-secondary, #4b5563);
}
.ebm-import-notice strong {
    display: block;
    color: var(--ebm-primary, #1e3a8a);
    font-weight: 600;
    margin-bottom: 4px;
}
.ebm-import-notice p { margin: 0; }

/* Prominent variant — used at the top of the CSV import page to nudge
 * non-technical editors toward the standard editor form when CSV isn't
 * the right tool for them. Warmer amber accent so it actually catches
 * the eye above the form, not buried alongside the sample-file notice. */
.ebm-import-notice.ebm-import-notice-prominent {
    margin: 14px 0 24px;
    padding: 16px 18px;
    background: color-mix(in srgb, #f59e0b 10%, #fff);
    border-left: 4px solid #f59e0b;
    font-size: 14px;
    line-height: 1.6;
}
.ebm-import-notice.ebm-import-notice-prominent strong {
    color: #92400e;
    font-size: 15px;
    margin-bottom: 6px;
}

/* ==========================================================================
 * Specialty / Research area — uniform visual identity across templates
 *
 * The pattern is consistent everywhere it appears: italic, slightly
 * muted text, with a subtle left accent (• marker or border) so the
 * reader immediately distinguishes it from the affiliation, which is
 * always rendered as plain non-italic body text.
 * ========================================================================== */

/* Hierarchical — sits between role pill and affiliation, italic
   supporting line so it's clearly NOT the institution. */
.ebm-h-specialty {
    font-size: 12.5px;
    color: var(--ebm-text-muted, #6b7280);
    margin: 4px 0 6px;
    line-height: 1.4;
    text-align: center;          /* hierarchical cards are centre-aligned */
}
.ebm-h-specialty em {
    font-style: italic;
    /* faint dotted accent so it never blurs into the affiliation that
       follows on the very next line */
    border-left: 2px dotted color-mix(in srgb, var(--ebm-secondary, #3b82f6) 40%, transparent);
    padding-left: 8px;
    margin-left: 6px;
}
/* Cancel the centred-text accent treatment above for cards that contain
   long specialties — keep the dotted accent but allow flow to wrap. */
.ebm-h-specialty em { display: inline-block; }

/* Compact + Dense Table specialty already styled earlier — strengthen
   the italic + muted contrast so it doesn't read as another affiliation
   line. Adds a small leading bullet so the eye groups it correctly. */
.ebm-row-specialty,
.ebm-table-specialty {
    font-style: italic;
    color: var(--ebm-text-muted, #6b7280) !important;
}
.ebm-row-specialty em,
.ebm-table-specialty em {
    font-style: italic;
}

/* Magazine secondary cards — pill is already restyled to plain italic
   text. Add the same dotted left accent so it visually anchors as a
   "research area" indicator (not affiliation). */
.ebm-magazine .ebm-mag-grid .ebm-card .ebm-pill {
    border-left: 2px dotted color-mix(in srgb, var(--ebm-secondary, #3b82f6) 40%, transparent) !important;
    padding-left: 8px !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
 * Settings — "Plugin status" section
 * ========================================================================== */
.ebm-status-grid {
    display: grid;
    gap: 18px 28px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 8px;
}
.ebm-status-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ebm-status-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ebm-text-muted, #6b7280);
    font-weight: 600;
}
.ebm-status-value {
    font-size: 14px;
    color: var(--ebm-text, #1f2937);
    font-weight: 500;
    word-break: break-all;
}
.ebm-status-on {
    color: #16a34a;
}
.ebm-status-link {
    color: var(--ebm-primary, #1e3a8a);
    text-decoration: none;
}
.ebm-status-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ebm-status-note {
    font-size: 12px;
    color: var(--ebm-text-muted, #6b7280);
    line-height: 1.5;
    margin-top: 2px;
}

/* ==========================================================================
 * Photo fallback placeholders — gradient backgrounds with big stylish
 * letters (initials) or a refined silhouette (icon). Inspired by modern
 * journal-card placeholders that use a brand-coloured gradient with a
 * single oversized character.
 *
 * Background = primary→secondary brand gradient (so it follows the
 * journal's chosen colours). The letter sits at ~55% opacity so it
 * reads as part of the gradient texture, not a separate label.
 * ========================================================================== */

/* Common base — gradient + serif weight + uppercase initials.
 * Per-variant font-size is set further down so the letter scales with
 * its container. */
/* Frontend "initials" placeholder — big serif letters (AY) on a brand
   gradient. Used by every public template's avatar fallback.
   NOTE: `.ebm-photo-placeholder` was previously included in this list
   by mistake — that class lives ONLY in the admin editor form preview
   (renders the localised "No photo uploaded" text), so it should NOT
   inherit the giant serif uppercase styling. Its sizing is handled
   below in a dedicated block. */
.ebm-card-photo--initials,
.ebm-h-photo.ebm-card-photo--initials,
.ebm-h-photo-large.ebm-card-photo--initials,
.ebm-row-photo--initials,
.ebm-table-photo--initials,
.ebm-mag-hero-placeholder.ebm-card-photo--initials,
.ebm-admin-thumb-initials {
    background: linear-gradient(135deg,
        var(--ebm-primary, #1e3a8a) 0%,
        var(--ebm-secondary, #3b82f6) 100%) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: Georgia, "Times New Roman", "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    line-height: 1 !important;
}

/* Per-variant size — letter ~ 50% of container height for visual weight */
.ebm-card-photo--initials                     { font-size: 48px !important; }
.ebm-h-photo.ebm-card-photo--initials         { font-size: 56px !important; }
.ebm-h-photo-large.ebm-card-photo--initials   { font-size: 80px !important; }
.ebm-row-photo--initials                      { font-size: 42px !important; }
.ebm-table-photo--initials                    { font-size: 28px !important; }
.ebm-mag-hero-placeholder.ebm-card-photo--initials { font-size: 96px !important; }
.ebm-admin-thumb .ebm-admin-thumb-initials,
.ebm-admin-thumb:not(:has(img)) {              /* admin list 42×56 thumb */
    font-size: 22px;
}
/* Admin editor-form photo preview placeholder. Renders the
   "No photo uploaded" string when no image is set yet. Wraps,
   stays small, sits centred against a soft gradient backdrop. */
.ebm-photo-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px !important;
    background: linear-gradient(135deg,
        rgba(30, 58, 138, 0.06) 0%,
        rgba(59, 130, 246, 0.06) 100%) !important;
    color: #6b7280 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* Icon fallback — same gradient backdrop with a centred white silhouette
 * sized relative to the container. The original SVG only had width="36"
 * which looked tiny in the bigger card variants. */
.ebm-card-photo--icon,
.ebm-h-photo.ebm-card-photo--icon,
.ebm-h-photo-large.ebm-card-photo--icon,
.ebm-row-photo--icon,
.ebm-table-photo--icon,
.ebm-mag-hero-placeholder.ebm-card-photo--icon {
    background: linear-gradient(135deg,
        var(--ebm-primary, #1e3a8a) 0%,
        var(--ebm-secondary, #3b82f6) 100%) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}
/* Make any inline SVG inside the icon placeholder fill ~50% of the cell
 * so it doesn't look like a tiny postage stamp inside a big portrait. */
.ebm-card-photo--icon svg,
.ebm-h-photo.ebm-card-photo--icon svg,
.ebm-h-photo-large.ebm-card-photo--icon svg,
.ebm-row-photo--icon svg,
.ebm-table-photo--icon svg,
.ebm-mag-hero-placeholder.ebm-card-photo--icon svg {
    width: 50% !important;
    height: 50% !important;
    stroke: rgba(255, 255, 255, 0.85) !important;
    stroke-width: 1.5 !important;
    fill: none !important;
}

/* ==========================================================================
 * Dense Table — re-flex the initials/icon placeholder so the letter is
 * vertically + horizontally centred. The shared photo rule above sets
 * `display: block !important` (correct for <img>) which would otherwise
 * suppress the flex centering applied to the placeholder variants.
 * ========================================================================== */
.ebm-table .ebm-table-photo--initials,
.ebm-table .ebm-table-photo--icon,
.ebm-table-photo--initials,
.ebm-table-photo--icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
 * Unified subtle hover across every card / row variant
 *
 * Cards (Sectioned, Hierarchical, Magazine secondary): lift 1px, soft
 * brand-tinted shadow, slightly stronger border. Rows (Compact, Dense
 * Table): brand-tinted background tint. All transitions ≤200ms so it
 * feels responsive, not floaty.
 * ========================================================================== */

/* Cards — gentle lift + tinted shadow */
.ebm-card,
.ebm-h-card {
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ebm-card:hover,
.ebm-h-card:hover {
    border-color: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 35%, var(--ebm-border, #e5e7eb)) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ebm-primary, #1e3a8a) 12%, transparent);
    transform: translateY(-2px);
}

/* Magazine secondary card already has nicer hover from earlier — make
   sure the inner .ebm-card hover doesn't double-stack the transform. */
.ebm-magazine .ebm-mag-grid .ebm-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;        /* magazine cards are
                                                    borderless; the chrome
                                                    lives on .ebm-mag-card */
}

/* Compact rows — branded background tint on hover */
.ebm-compact .ebm-row {
    transition: background 0.15s ease;
}
.ebm-compact .ebm-row:hover {
    background: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 4%, transparent);
}

/* Dense Table rows — matching tint so rows respond to mouse-over */
.ebm-table tbody tr {
    transition: background 0.12s ease;
}
.ebm-table tbody tr:hover {
    background: color-mix(in srgb, var(--ebm-secondary, #3b82f6) 5%, transparent);
}