/*
 * frontend-atlas.css — Atlas template
 *
 * Visual style adapted from the JTECH 04 Profile editorial layout:
 *   - alternating tinted sections with member-count meta in the header rule
 *   - two-column tall-portrait cards (3:4 ratio on the photo block)
 *   - colored monospace specialty pills, plus a corner "B" ribbon badge that
 *     triggers the standard bio modal already provided by _layout.tpl
 *   - per-platform colored social icon row (ORCID green, LinkedIn blue, ...)
 *
 * Brand colours come exclusively from the plugin's existing
 *   --ebm-primary / --ebm-secondary
 * custom properties. No extra settings are introduced.
 *
 * Specialty pill colours come from the existing |ebm_pill_color modifier
 * so each chip is visually distinct without a per-editor palette field.
 */

/* ---------------------------------------------------------------------- */
/*  Atlas-local design tokens — derived from the plugin's brand tokens    */
/*  with safe fallbacks so dropping the file into any OJS theme still     */
/*  renders something legible.                                            */
/* ---------------------------------------------------------------------- */
.ebm-atlas {
    /* warm/neutral surfaces */
    --atlas-ink:       #111827;
    --atlas-ink-2:     #374151;
    --atlas-ink-3:     #4b5563;
    --atlas-muted:     #6b7280;
    --atlas-line:      #e5e7eb;
    --atlas-line-2:    #d1d5db;
    --atlas-bg-elev:   #ffffff;
    --atlas-bg-soft:   #f8f9fb;
    --atlas-radius:    14px;
    --atlas-card-pad:  18px;
    --atlas-shadow:    0 6px 18px -8px rgba(15, 23, 42, .14),
                       0 2px 6px  -2px rgba(15, 23, 42, .06);

    /* Brand colour from plugin settings; B ribbon + eyebrows + accents */
    --atlas-accent: var(--ebm-primary, #1e3a8a);

    color: var(--atlas-ink-2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/*  Page-header → first-section gap                                       */
/*  The shared `.ebm-page-header { margin-bottom: 2rem }` rule made the   */
/*  banner sit 32px above whatever follows, then Atlas added another      */
/*  40px of section top-padding — together that's ~70px of empty space    */
/*  between "Editorial Board" and the first section header, which read    */
/*  as a missing block. Atlas tightens that to a single rhythm step.     */
/* ---------------------------------------------------------------------- */
.ebm-page-atlas .ebm-page-header {
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------- */
/*  Section rhythm: vertical breathing room only — no own background.     */
/*  The host theme's page background shows through; Atlas only paints     */
/*  the cards themselves.                                                  */
/* ---------------------------------------------------------------------- */
.ebm-atlas-section {
    padding: 22px 0;
    background: transparent;
    /* No section-level border — each section header already carries its
       own thin horizontal rule (`.ebm-atlas-tier-rule`), so adding a
       second rule between sections produced visible double lines. */
}
/* The first section sits flush under the page header — the 10px from
   the page-header override above is already enough breathing room. */
.ebm-atlas-section:first-child { padding-top: 0; }

/* Keep the modifier class for backwards compat / templates that still
   reference it, but make it transparent so the theme's page bg shows. */
.ebm-atlas-section--tint { background: transparent; }

/* Section header: title + thin rule + uppercase mono count */
.ebm-atlas-tier-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
/* Specificity note — these heading rules are deliberately scoped with
   the `.ebm-atlas` ancestor (class + class = 20 specificity) so they
   beat OJS PKP's base stylesheet rule
       `.pkp_structure_main h1, .pkp_structure_main h2,
        .pkp_structure_main h3, .pkp_structure_main h4 { margin-top: 2.857rem; }`
   (class + element = 11 specificity).  Without the ancestor prefix,
   PKP wins by one specificity point and forces a ~40px top margin
   above each editor name and tier title plus a 16px/1.43 type rule
   that flattens Atlas's 22px serif. */
.ebm-atlas .ebm-atlas-tier-title {
    font-family: Georgia, "Times New Roman", "Newsreader", serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.2;
    color: var(--atlas-ink);
    margin: 0;
    white-space: nowrap;
}
.ebm-atlas-tier-rule {
    flex: 1;
    height: 1px;
    background: var(--atlas-line);
}
.ebm-atlas-tier-count {
    font-family: ui-monospace, "SFMono-Regular", "Geist Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/*  Card grid                                                              */
/* ---------------------------------------------------------------------- */
.ebm-atlas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 880px) {
    .ebm-atlas-grid { grid-template-columns: 1fr; }
}

/* Hero treatment for the first section when it holds a single editor
   (typically the Editor-in-Chief).  Without this, that one card sits
   in the left column of the two-column grid and the right column is
   visibly empty.  Switching to a single wider column and centering
   it reads as a presentation slot, not a layout glitch. */
.ebm-atlas-section--hero .ebm-atlas-grid {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

/* ---------------------------------------------------------------------- */
/*  Card                                                                   */
/* ---------------------------------------------------------------------- */
.ebm-atlas-card {
    position: relative;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 20px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius);
    padding: var(--atlas-card-pad);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ebm-atlas-card:hover {
    border-color: var(--atlas-line-2);
    box-shadow: var(--atlas-shadow);
    transform: translateY(-2px);
}

@media (max-width: 520px) {
    .ebm-atlas-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }
}

/* ---------------------------------------------------------------------- */
/*  LEFT — tall portrait                                                   */
/* ---------------------------------------------------------------------- */
.ebm-atlas-photo {
    width: 140px;
    height: 172px;            /* 3:4-ish ratio */
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--atlas-bg-soft);
}
@media (max-width: 520px) {
    .ebm-atlas-photo { width: 96px; height: 120px; }
}

/* Specificity note — base `.ebm-page img { height: auto }` was forcing
   the portrait to its intrinsic square aspect (140×140 from a 600×600
   source), leaving 32px of empty space at the bottom of the 140×172
   photo slot.  Scoping with `.ebm-atlas-photo` bumps specificity (20)
   above the base rule (11) so the cover-cropped portrait fills the
   full 3:4 photo area. */
.ebm-atlas-photo .ebm-atlas-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ebm-atlas-photo-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.95);
    background: linear-gradient(135deg,
        var(--ebm-primary, #1e3a8a) 0%,
        var(--ebm-secondary, #3b82f6) 100%);
}
.ebm-atlas-photo--initials {
    font-family: Georgia, "Times New Roman", "Newsreader", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -1.5px;
    text-shadow: 0 4px 14px rgba(0,0,0,.18);
}
@media (max-width: 520px) {
    .ebm-atlas-photo--initials { font-size: 36px; }
}

.ebm-atlas-photo--icon { color: rgba(255,255,255,.85); }

/* ---------------------------------------------------------------------- */
/*  RIGHT — info column                                                    */
/* ---------------------------------------------------------------------- */
.ebm-atlas-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-right: 36px;       /* room for the corner B badge */
}

/* Prefix (e.g. "Prof. Dr.", "Dr.", "Prof. Em.") is the editor's
   academic title — semantically part of the name label, not a
   separate piece of metadata. It should hug the name tightly so the
   two read as a single "title + name" unit. The 6px column gap that
   separates the rest of the info-column items is too generous here,
   so we cancel most of it with a small negative margin-bottom.
   Scoped with the `.ebm-atlas` ancestor for the same PKP specificity
   reason documented above on .ebm-atlas-tier-title. */
.ebm-atlas .ebm-atlas-prefix {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--atlas-muted);
    line-height: 1;
    margin: 0 0 -4px;
}

.ebm-atlas .ebm-atlas-name {
    font-family: Georgia, "Times New Roman", "Newsreader", serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -.015em;
    line-height: 1.18;
    color: var(--atlas-ink);
    margin: 0;
}

/* Tag pill row — uses the same |ebm_pill_color tone names that
   _editor_card.tpl applies to .ebm-pill, so every Atlas chip is
   visually distinct without a per-editor palette field. */
.ebm-atlas-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.ebm-atlas-tag {
    display: inline-block;
    padding: 3px 9px;
    font-family: ui-monospace, "SFMono-Regular", "Geist Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    border-radius: 5px;
    border: 1px solid transparent;
}
/* Default fallback first — every tag inherits this base look. The
   eight tone classes below override only the colour triplet, so any
   unrecognised tone still renders with neutral slate. Token names
   match the ones |ebm_pill_color emits:
     amber, pink, purple, green, indigo, orange, cyan, rose          */
.ebm-atlas-tag {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}
.ebm-atlas-tag-amber  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.ebm-atlas-tag-pink   { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }
.ebm-atlas-tag-purple { background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff; }
.ebm-atlas-tag-green  { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.ebm-atlas-tag-indigo { background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
.ebm-atlas-tag-orange { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.ebm-atlas-tag-cyan   { background:#cffafe; color:#155e75; border-color:#a5f3fc; }
.ebm-atlas-tag-rose   { background:#ffe4e6; color:#9f1239; border-color:#fecdd3; }

.ebm-atlas-aff {
    font-size: 13.5px;
    color: var(--atlas-ink-2);
    line-height: 1.45;
    margin-top: 2px;
    letter-spacing: -.005em;
    font-weight: 600;
}

.ebm-atlas-country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--atlas-ink-3);
}
.ebm-atlas-country img,
.ebm-atlas-country svg { display: inline-block; vertical-align: middle; }

/* ---------------------------------------------------------------------- */
/*  Social icons — Atlas reuses the SHARED `_social_icons.tpl` partial     */
/*  exactly as the other templates render it: each platform's SVG already  */
/*  carries its own brand colours (ORCID green ⓘD, LinkedIn blue badge,    */
/*  Scholar blue, ResearchGate teal R, Scopus orange SC, WoS purple WoS,   */
/*  email outline, website globe). Atlas only sets the row's spacing +     */
/*  hover lift; it does NOT recolour or filter the glyphs because that     */
/*  would break the multi-colour brand assets (e.g. LinkedIn's white inner */
/*  letterforms, ORCID's white "iD" text).                                 */
/* ---------------------------------------------------------------------- */
.ebm-atlas-card .ebm-card-links {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--atlas-muted);                  /* outline-icon stroke colour */
}
.ebm-atlas-card .ebm-card-links .ebm-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, opacity .15s;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 1;
}
.ebm-atlas-card .ebm-card-links .ebm-link:hover,
.ebm-atlas-card .ebm-card-links .ebm-link:focus-visible {
    transform: translateY(-1px);
    opacity: .9;
    outline: none;
}
.ebm-atlas-card .ebm-card-links .ebm-link svg {
    width: 25px;
    height: 25px;
    display: block;
}

/* ---------------------------------------------------------------------- */
/*  Corner "B" ribbon badge — opens the shared bio modal.                  */
/*                                                                         */
/*  Visual recipe:                                                          */
/*    - the badge itself is a tall flag (50×72px) anchored to the top-     */
/*      right of the card                                                   */
/*    - clip-path carves a V-notch out of the bottom edge so it reads as   */
/*      a folded ribbon, not a coloured rectangle                           */
/*    - a darker triangle in the very top-left corner suggests the         */
/*      ribbon is tucked under the card's curve (the "fold shadow")        */
/*    - italic serif "B" sits on the upper half of the flag                */
/* ---------------------------------------------------------------------- */
/* B (biography) corner badge — verbatim port of the JTECH 04 Profile
   `.bio-btn` recipe from team-profile.css:
     - 48×48 square anchored to the card's top-right
     - rounded only on the top-right + bottom-left corners (the two
       "cut" corners), the other two stay sharp; that's what gives the
       badge its diagonal "stamp" feel sitting against the card radius
     - italic serif "B", centred via grid place-items
     - two 8×8 darker triangles bleeding off the EDGES of the badge
       (left:-8px and bottom:-8px) — the "folded ribbon" illusion
   The shared `.ebm-bio-btn` styles already on the page are smaller and
   bg-krem; we override with high specificity + !important here. */
.ebm-atlas-card .ebm-atlas-bio-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: var(--atlas-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 var(--atlas-radius) 0 var(--atlas-radius) !important;
    cursor: pointer;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: all .18s;
    z-index: 2;
    line-height: 1;
    overflow: visible !important;
    /* drop any clip-path inherited from previous Atlas iterations */
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
.ebm-atlas-card .ebm-atlas-bio-btn:hover,
.ebm-atlas-card .ebm-atlas-bio-btn:focus-visible {
    filter: brightness(1.1);
    transform: scale(1.05);
    outline: none;
}

/* The two "fold" triangles that bleed OFF the edges of the badge —
   these are the bits that make it read as a folded ribbon stuck on
   the corner of the card rather than a solid coloured square.
   Both are sized to MATCH the card's border-radius (14px), so each
   triangle reaches the exact point where the card's rounded corner
   begins — making the fold "end on the line" of the card edge. */
.ebm-atlas-card .ebm-atlas-bio-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 14px;
    background: var(--atlas-accent);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    filter: brightness(.7);
    pointer-events: none;
}
.ebm-atlas-card .ebm-atlas-bio-btn::after {
    content: "";
    position: absolute;
    bottom: -14px;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--atlas-accent);
    /* Same polygon orientation as ::before so the two folds are
       geometrically symmetric: each triangle has TWO corners that
       sit ON the card's outer edge (one on the horizontal edge, one
       on the vertical edge) and the hypotenuse runs from top-left to
       bottom-right. That is what makes both fold tips "end on the
       card line" instead of poking into empty space. */
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    filter: brightness(.7);
    pointer-events: none;
}

/* Hide the shared partial's icon + label — only the italic "B" shows. */
.ebm-atlas-card .ebm-atlas-bio-btn .ebm-bio-icon,
.ebm-atlas-card .ebm-atlas-bio-btn .ebm-bio-text { display: none !important; }

/* The "B" glyph itself. */
.ebm-atlas-card .ebm-atlas-bio-btn .ebm-atlas-bio-letter,
.ebm-atlas-card .ebm-atlas-bio-btn .ebm-bio-letter {
    position: static !important;
    width: auto !important;
    height: auto !important;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", "Newsreader", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    letter-spacing: -.5px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}