/*
  Editorial template — modern, visual, marketing landing-page feel.
  Inspired by Apple / Stripe / Linear / Framer / Squarespace.
*/

.nex-editorial {
    background: var(--nex-white);
}

/* ShareTopNav renders a "fixed-top" navbar (.arc-nav, 50px tall) over the
   page on a real shared-profile visit, but not inside the ProfileBuilder's
   own preview iframe (?mode=desktop/mobile/inner) where that navbar is
   suppressed. A fixed-position element doesn't reserve layout space, so
   without this the navbar simply overlaps the top of the hero/gradient.
   EditorialProfile.razor adds this class only when it detects the navbar
   will actually be drawn (see HasFixedNav), so preview mode is unaffected. */
.nex-editorial-backdrop.nex-editorial-has-fixed-nav {
    padding-top: 50px;
}

/* _Layout.cshtml has a global "body, p, span, a, li, ul, h1-h6, button,
   input, textarea { font-family:'Bergen', sans-serif !important; }" rule
   that overrides everything app-wide, including Editorial — but the mock
   uses Inter throughout (".editorial{font-family:Inter,'Segoe UI',
   Helvetica,Arial,sans-serif;}"). Override it back to Inter here, scoped
   to Editorial only (class selector beats the plain-tag !important rule on
   specificity, and we repeat !important for safety) — Classic/Legal/rest
   of the app keep Bergen, untouched. */
.nex-editorial,
.nex-editorial-backdrop,
.nex-editorial body,
.nex-editorial p,
.nex-editorial span,
.nex-editorial a,
.nex-editorial li,
.nex-editorial ul,
.nex-editorial h1,
.nex-editorial h2,
.nex-editorial h3,
.nex-editorial h4,
.nex-editorial h5,
.nex-editorial h6,
.nex-editorial button,
.nex-editorial input,
.nex-editorial textarea {
    font-family: Inter, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* Backdrop wrapper — below the breakpoint the card fills the frame flush,
   no gradient reveal (a phone-shaped mobile-preview frame around a second
   gradient looked like two mismatched frames nested in each other). On wide
   viewports it floats the whole Editorial page as a bounded, rounded "page"
   card on an animated gradient background (matches the reference mock's
   outer .editorial/.page split). */
.nex-editorial-backdrop {
    position: relative;
    overflow: hidden;
}

/* This same selector also matches a section popup's own root (NexPopup
   renders "<div class='nex-scope nex-editorial'>", nested wherever
   ProfileQualification/ProfileExperience/etc. place it inside ".nex-sections"
   — not through a portal). That's necessary, not incidental: the popup
   needs to outrank whatever ELSE lives in that same local stacking context,
   including any OTHER section's trigger button sitting there focused with
   Bootstrap's default ".accordion-button:focus{z-index:3}" (arc.css only
   overrides its border/box-shadow, not z-index). z-index:20 clears that
   with margin to spare — the earlier z-index:1 here was enough to beat the
   video outside ".nex-sections" but not enough to beat a focused trigger
   button sitting right next to the popup inside it. */
.nex-editorial-backdrop .nex-editorial {
    position: relative;
    z-index: 20;
    overflow: hidden;
}

/* ".nex-hero-content" (avatar/name/"Save My Contact") has an explicit
   z-index:2 below, so it's a positioned element — and any section popup
   (NexPopup, rendered inline wherever ProfileQualification/ProfileExperience
   etc. sit inside ".nex-sections", not via a portal) is plain static
   content unless given its own z-index. Per CSS stacking rules, a
   positioned descendant with z-index ALWAYS paints above a static sibling
   in the same stacking context regardless of DOM order — so without this,
   the hero content bleeds on top of any open popup wherever they overlap
   on screen (both sit near the top of the viewport). Must stay higher than
   ".nex-hero-content"'s z-index:2.

   The opaque white background is just as necessary as the z-index: each
   ".nex-section-card" row is deliberately "background:transparent" further
   down (that's what makes the list read as one continuous divided list
   instead of separate boxed cards) — it only ever LOOKED solid white
   because it relied on ".nex-editorial"'s single shared background, which
   sits beneath EVERYTHING including the video. Once ".nex-sections" was
   lifted above the video in stacking (for the z-index reason above), its
   own transparent gaps became a window onto the video instead of that
   white background. Giving it an opaque fill of its own closes that
   window regardless of stacking order.

   z-index:10, not just "one more than hero-content's 2": Bootstrap's own
   default ".accordion-button:focus" rule sets z-index:3 (arc.css only
   overrides its border/box-shadow, not z-index) — every section title here
   IS an .accordion-button, so clicking one to open its popup leaves it
   focused with that same z-index:3, tying/beating a same-valued
   ".nex-sections" and letting the (still on-page) trigger button's own text
   paint on top of the popup wherever they visually overlap. */
.nex-editorial-backdrop .nex-sections {
    position: relative;
    z-index: 10;
    background: var(--nex-white);
}

@media (min-width: 992px) {
    .nex-editorial-backdrop {
        background: linear-gradient(120deg, #4A5A60, #7A8B91, #2F4A58, #6A7B81);
        background-size: 300% 300%;
        animation: nexEditorialHeroDrift 16s ease infinite;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        padding: 0 24px;
        box-sizing: border-box;
        /* Full-bleed break-out: anchor centering to the actual browser
           viewport instead of trusting the surrounding page layout
           (ShareProfileLayout's .page/.container-fluid/.content chain) to be
           perfectly symmetric. Whatever gutter that ancestor chain adds on
           one side only, this cancels out, so the card is always dead-center
           on screen regardless of what wraps it. */
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
    }

    .nex-editorial-backdrop .nex-editorial {
        width: 860px;
        max-width: 100%;
        box-shadow: 0 0 60px rgba(0, 0, 0, .25);
        border-radius: 20px 20px 0 0;
        margin-top: 30px;
    }

    /* The 100vw/-50vw break-out above can be a hair wider than the visible
       viewport when a vertical scrollbar is present, which would otherwise
       add its own horizontal scrollbar. Suppress that on whichever ancestor
       ends up holding the backdrop, without touching overflow globally. */
    body:has(.nex-editorial-backdrop) {
        overflow-x: hidden;
    }
}

/* Masthead — an animated gradient stands in as the default backdrop; a real
   photo/video/colour uploaded via the Profile Builder's Imagery tab (see
   EditorialProfile.razor's GetBackgroundStyle()/BackgroundVideoUrl) overrides
   it via inline style, which always wins over this class rule. */
.nex-editorial .nex-hero {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nex-space-hero) var(--nex-space-md) var(--nex-space-lg);
    text-align: center;
    background: linear-gradient(120deg, #4A5A60, #7A8B91, #2F4A58, #6A7B81);
    background-size: 300% 300%;
    animation: nexEditorialHeroDrift 16s ease infinite;
}

/* Nudges the hero down off the very top edge of the card on mobile only —
   without this, on narrow viewports (including the ProfileBuilder's
   phone-shaped mobile-preview frame) the hero's square corners sit flush
   against the frame's rounded top corners. Desktop already gets its own
   breathing room from ".nex-editorial-backdrop .nex-editorial"'s
   margin-top, so this must stay scoped below the breakpoint. */
@media (max-width: 991.98px) {
    .nex-editorial .nex-hero {
        margin-top: 10px;
    }
}

/* Darkening scrim so the white avatar/name/button stay legible over any
   photo, video or gradient sitting behind them. */
.nex-editorial .nex-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
}

/* Mobile: video plays contained inside the hero only, same as any other
   masthead background — clipped by ".nex-hero"'s own overflow:hidden. */
.nex-editorial-bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    /* Desktop: the same video breaks out of the hero to play full-bleed
       across the whole backdrop (including the gutters either side of the
       860px card), fixed to the viewport so it stays put while the page
       scrolls. Safe to use "position:fixed" here — unlike the phone-shaped
       mobile-preview frame, the desktop preview's iframe has no rounded
       mask for a fixed element to bleed past.

       Deliberately no backdrop-filter/tint on ".nex-hero" here (it used to
       have one, for a frosted-glass look): applying backdrop-filter to an
       element makes it a containing block for any position:fixed
       descendant — since the video lives INSIDE the hero, that trapped it
       there instead of letting it escape to the viewport, so the hero just
       showed a small sharp copy instead of the real full-page background.
       Hero needs no styling of its own now — the video is a normal child,
       so within the hero's own box it already paints on top of the hero's
       default gradient, same shared video as everywhere else on the page. */
    .nex-editorial-bg-video {
        position: fixed;
    }
}

.nex-editorial .nex-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

@keyframes nexEditorialHeroDrift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Shared .profile-header is normally its own white "card" designed to sit
   below a cover photo, with its avatar pulled up to overlap the cover
   photo's bottom edge (see arc.css .profile-header / .arc-profile-header-
   photo). The masthead here IS the cover photo, so every one of those card/
   offset properties must be neutralized — mirrors the equivalent block in
   experience-engine-classic.css. */
.nex-editorial .nex-hero .profile-header {
    position: static;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.nex-editorial .nex-hero img.arc-profile-header-photo {
    position: static;
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
    border: 3px solid var(--nex-white);
    box-shadow: var(--nex-shadow-hover);
}

/* h4.pr-h3 below already carries margin-top: var(--nex-space-md) for the
   avatar-to-name gap. .row is display:flex (Bootstrap 5), which makes its
   .col-12 child a block-formatting-context root — so the h4's margin can't
   collapse into this row's margin the way it normally would. Giving both an
   equal margin-top doubles the visible gap, so this one is zeroed out. */
.nex-editorial .nex-hero .row.mt-5 {
    margin-top: 0 !important;
}

.nex-editorial .nex-hero h4.pr-h3 {
    font-family: var(--nex-font-primary);
    font-size: 32px;
    font-weight: 800;
    color: var(--nex-white);
    letter-spacing: -.01em;
    margin-top: var(--nex-space-md) !important;
    margin-bottom: 0 !important;
}

.nex-editorial .nex-hero .pr-h6-Grey {
    font-family: var(--nex-font-primary);
    color: #E5E7EB;
}

/* The "Me" tab pill is chrome from the normal profile view — the Presentation
   Pack has its own section list below, so it has no purpose in the masthead. */
.nex-editorial .nex-hero .row.mt-3 {
    display: none;
}

.nex-editorial .nex-hero .nex-btn-primary {
    background: var(--nex-white);
    color: var(--nex-primary);
    font-weight: 700;
    box-shadow: var(--nex-shadow-hover);
}

.nex-editorial .nex-hero .nex-btn-primary:hover {
    background: #F0F0F0;
    color: var(--nex-primary);
}

.nex-editorial .nex-section {
    padding: var(--nex-space-section) var(--nex-space-md);
}

/* No zebra striping for the teaser list — EditorialProfile.razor still
   toggles "nex-alt" on alternating sections, but the magazine teaser design
   is one continuous divided list (see .nex-section-card below), not a grid
   of separated bands, so this is intentionally a no-op. */
.nex-editorial .nex-section.nex-alt {
    background: transparent;
}

/* Matches the mock's .content-inner{max-width:600px;margin:0 auto;} — a
   narrow reading column centered within the 860px page card. This is what
   actually makes teaser rows look balanced (plain left-aligned text, not
   flex-centered) instead of the wide 1040px column that used to pin text
   to the left edge with a lot of empty space on the right. */
.nex-editorial .nex-section-inner {
    max-width: 600px;
    margin: 0 auto;
}

.nex-editorial .nex-section-header {
    font-size: var(--nex-h2);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--nex-space-lg);
}

.nex-editorial .nex-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--nex-space-lg);
}

.nex-editorial .nex-floating-card {
    background: var(--nex-white);
    border-radius: var(--nex-radius-card);
    box-shadow: var(--nex-shadow-light);
    padding: var(--nex-space-lg);
    transition: box-shadow .25s ease, transform .25s ease;
}

.nex-editorial .nex-floating-card:hover {
    box-shadow: var(--nex-shadow-hover);
    transform: translateY(-2px);
}

/* Horizontal timeline on desktop, vertical on mobile */
.nex-editorial .nex-timeline-horizontal {
    display: flex;
    gap: var(--nex-space-lg);
    overflow-x: auto;
    padding-bottom: var(--nex-space-sm);
}

.nex-editorial .nex-timeline-horizontal .nex-timeline-item {
    flex: 0 0 240px;
    border-top: 3px solid var(--nex-primary);
    padding-top: var(--nex-space-sm);
}

@media (max-width: 767px) {
    .nex-editorial .nex-timeline-horizontal {
        flex-direction: column;
        overflow-x: visible;
    }

    .nex-editorial .nex-timeline-horizontal .nex-timeline-item {
        flex: none;
        border-top: none;
        border-left: 3px solid var(--nex-primary);
        padding-top: 0;
        padding-left: var(--nex-space-sm);
    }

    /* Bump the attachment row's preview/download buttons up to the same
       44px minimum touch target used for the popup's close/nav buttons —
       32px is too small to reliably tap on a phone. */
    .nex-editorial .nex-doc-item {
        gap: 8px;
        padding: 8px 10px;
    }

    .nex-editorial .nex-doc-actions {
        gap: 6px;
    }

    .nex-editorial .nex-doc-btn {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
}

/* Document row (NexAttachmentItem) — used for actual file attachments,
   styled as a soft floating card to match this template's marketing-page
   look (rounded corners, shadow, no hard borders). */
.nex-editorial .nex-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--nex-radius-card);
    box-shadow: var(--nex-shadow-light);
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--nex-white);
    transition: box-shadow .2s ease;
}

.nex-editorial .nex-doc-item:hover {
    box-shadow: var(--nex-shadow-hover);
}

.nex-editorial .nex-doc-item:last-child {
    margin-bottom: 0;
}

.nex-editorial .nex-doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #F5F7F8;
    color: var(--nex-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.nex-editorial .nex-doc-title {
    flex: 1;
    min-width: 0;
    font-size: var(--nex-small);
    font-weight: 600;
    color: var(--nex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nex-editorial .nex-doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nex-editorial .nex-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #F5F7F8;
    color: var(--nex-text-secondary);
    font-size: 13px;
    transition: background .15s ease, color .15s ease;
}

.nex-editorial .nex-doc-btn:hover {
    background: #E1F0EF;
    color: var(--nex-text);
}

.nex-editorial .nex-doc-btn-primary {
    background: var(--nex-primary);
    color: var(--nex-primary-contrast);
}

.nex-editorial .nex-doc-btn-primary:hover {
    background: #0B6667;
    color: var(--nex-primary-contrast);
}

/* Reskin the existing SectionCardAccordian cards as floating cards. */
.nex-editorial .nex-section {
    max-width: 1040px;
    /* No bottom margin: NexSectionCard rows (below) need to sit flush against
       each other as one continuous divided list, not separated bands. */
    margin: 0 auto;
    padding: 0 var(--nex-space-md);
}

.nex-editorial .nex-section .card.arc-card {
    border: none;
    border-radius: var(--nex-radius-card);
    box-shadow: var(--nex-shadow-light);
    transition: box-shadow .25s ease;
}

.nex-editorial .nex-section .card.arc-card:hover {
    box-shadow: var(--nex-shadow-hover);
}

.nex-editorial .nex-section .accordion-button .title {
    font-size: var(--nex-body);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--nex-text);
}

/* NexSectionCard — restyled from a floating card row into a magazine-style
   teaser: no box, a hairline divider between rows, a larger/bolder title.
   NexSectionCard's root div carries both "card arc-card" and "nex-section-
   card", so the ".nex-section .card.arc-card" rule above (4 chained
   classes) beats a plain ".nex-section .nex-section-card" override (3) on
   shared properties regardless of source order — matching ".arc-card" here
   too brings this back to 4, and being declared after wins the tie. Scoped
   to Editorial only — Classic/Legal keep the plain row/chevron look. */
.nex-editorial .nex-section .nex-section-card.arc-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--nex-divider);
    border-radius: 0;
    box-shadow: none;
    /* NexSectionCard's root div also carries Bootstrap's ".mt-10" utility,
       which sets "margin-top: 10px !important" — only another !important
       declaration can beat that. */
    margin-top: 0 !important;
}

.nex-editorial .nex-section .nex-section-card.arc-card:hover {
    box-shadow: none;
}

/* Each top-level ".nex-section" (Contact Info, Bio, Experience, Qualifications,
   Skills, etc.) wraps exactly ONE ".nex-section-card" teaser row — never a
   list of several. That means ".nex-section-card:last-child" above always
   matched (a lone child is trivially also the last child), silently
   stripping the divider off of every single row, not just the true last
   one. Scope the "no border" exception to the outer ".nex-section" being
   the last one in the whole page instead, so the hairline dividers between
   rows actually render like the mock's continuous divided list. */
.nex-editorial .nex-section:last-of-type .nex-section-card.arc-card {
    border-bottom: none;
}

.nex-editorial .nex-section .nex-section-card .accordion-button {
    /* Mock uses padding:0 24px 28px plus a separate 28px margin-bottom on
       its .teaser div (border sits between the two). Our row's border
       lives on the outer .nex-section-card wrapper instead of a separate
       element, so split that same ~56px total rhythm evenly above/below
       the border here rather than copying the 0-top value literally. */
    padding: 28px 24px;
}

/* The mock's teaser rows are plain left-aligned block content — no flex
   centering at all. What makes them look balanced (instead of pinned to
   the left edge of a wide card) is that the whole list sits in a narrow
   600px reading column centered within the 860px page (see
   .nex-section-inner below, matching the mock's ".content-inner{max-width:
   600px;margin:0 auto;}"). So .section-group just keeps Bootstrap's
   default flex-grow-1/left-aligned text — no override needed here once
   the column itself is narrowed. Scoped to Editorial only — Classic/Legal
   keep their own full-width icon+chevron layout, untouched. */

/* Kicker — small uppercase teal label sitting above the title, matching the
   mock's .teaser-kicker. Only rendered when NexSectionCard's Kicker param is
   set (Editorial call sites only, mirroring the Subtitle pattern). */
.nex-editorial .nex-section .nex-section-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nex-primary);
    margin-bottom: 8px;
}

.nex-editorial .nex-section .nex-section-card .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--nex-text);
    margin-bottom: 4px;
}

/* Mock's arrow is literal text inside .teaser-title ("...more →"), same
   dark colour as the rest of the title — not a separately-styled/animated
   element. Match that: no teal tint, no translate-on-hover. */
.nex-editorial .nex-section .nex-section-card .title::after {
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
}

/* Mock's only title hover state is text-decoration:underline. */
.nex-editorial .nex-section .nex-section-card:hover .title {
    text-decoration: underline;
}

.nex-editorial .nex-section .nex-section-card .nex-section-subtitle {
    font-size: 13px;
    color: var(--nex-text-secondary);
}

/* Kill the global arc.css grey ".accordion-button:hover" background-fill —
   the mock's teaser row has no hover background at all, just the title/arrow
   colour shift above. Scoped to Editorial only. */
.nex-editorial .nex-section .nex-section-card .accordion-button:hover {
    background-color: transparent;
}

/* Mock's teaser row has no icon at all — hide it for Editorial only
   (Classic/Legal keep the icon+chevron look, untouched). */
.nex-editorial .nex-section .nex-section-card .title i {
    display: none;
}

.nex-editorial .nex-section .nex-section-arrow {
    display: none;
}

.nex-editorial .nex-fade-up {
    animation: nexEditorialFadeUp 250ms ease-out;
}

@keyframes nexEditorialFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* NexPopup — Editorial skin: floating card, larger hero-style type, fade-up
   entrance (max 250ms per spec) */
.nex-editorial .nex-popup-dialog {
    box-shadow: var(--nex-shadow-hover);
    animation: nexEditorialPopupIn 250ms ease-out;
}

.nex-editorial .nex-popup-title {
    font-size: var(--nex-h2);
    font-weight: 700;
}

@keyframes nexEditorialPopupIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Banner header — the magazine-style gradient block wrapping the close/back
   buttons, title and subtext. .nex-popup-banner is a plain unstyled wrapper
   for Classic/Legal (no rule targets it in their stylesheets), so this is
   purely additive for Editorial. */
.nex-editorial .nex-popup-banner {
    background: linear-gradient(135deg, var(--nex-primary), #0B6667);
    border-radius: var(--nex-radius-card) var(--nex-radius-card) 0 0;
    padding-bottom: var(--nex-space-md);
}

.nex-editorial .nex-popup-banner .nex-popup-btn-icon {
    color: rgba(255, 255, 255, .85);
}

.nex-editorial .nex-popup-banner .nex-popup-btn-icon:hover {
    background: rgba(255, 255, 255, .15);
    color: var(--nex-white);
}

.nex-editorial .nex-popup-banner .nex-popup-nav-arrow {
    color: var(--nex-white);
}

.nex-editorial .nex-popup-banner .nex-popup-nav-arrow:disabled {
    color: rgba(255, 255, 255, .4);
}

.nex-editorial .nex-popup-banner .nex-popup-title {
    color: var(--nex-white);
}

.nex-editorial .nex-popup-banner .nex-popup-subtext {
    color: #DFF5F3;
}

.nex-editorial .nex-popup-banner .nex-popup-icon-img {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .2));
}

/* =====================================================================
   Popup body content — "editorial item" card language shared by every
   section popup (Overview, Academic Qualifications, Experience, Skills,
   Vocational, Languages, Contact, Licences, Profession). All of these
   popups already render through the same shared .nex-* class taxonomy
   (see experience-engine-classic.css for the flat/bordered Classic take
   on the same markup) — this is purely the Editorial reskin: soft white
   floating cards with shadows instead of hairline borders, no left-hand
   timeline rail.
   ===================================================================== */

/* Chronological entries (Academic Qualifications, Experience, Vocational)
   — no dot/connector rail; each entry is its own floating white card,
   matching the reference's .editorial-item treatment. */
.nex-editorial .nex-timeline-rail {
    display: none;
}

/* Mock's modal item titles were originally plain text, no icon — hiding it
   broadly here avoided the icon eating enough width to push the Grade badge
   onto its own line below the title instead of sitting beside it. */
.nex-editorial .nex-timeline-icon {
    display: none;
}

/* Brand/category icon, matching Legal's treatment — re-shown specifically
   inside .nex-timeline-title-group (Experience company, Qualification
   level, Vocational role) and .nex-group-label-head (Skills/Languages
   category), the two contexts these modals actually use it in. Sized at
   28px rather than Legal's Experience-icon 40px to reduce the width
   pressure that caused the original hide rule above; .nex-timeline-head
   already has flex-wrap: wrap as a safety net if a badge still needs to
   drop to its own line. */
.nex-editorial .nex-timeline-title-group .nex-timeline-icon,
.nex-editorial .nex-group-label-head .nex-timeline-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Overview category icon — matches Legal's 24px treatment (was the shared
   32px default before, now consistent between the two templates). */
.nex-editorial .nex-block-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* InfoPack (Profession) group-label icon — same 22px treatment as Legal's
   .nex-legal .nex-table-icon; Editorial has no tables so this only ever
   applies to the Key Facts/Key Links/Meetings/Attachments/References
   labels in ProfileInfoPack.razor. */
.nex-editorial .nex-table-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
}

.nex-editorial .nex-timeline-item {
    display: block;
    margin-bottom: 8px;
}

.nex-editorial .nex-timeline-item:last-child {
    margin-bottom: 0;
}

.nex-editorial .nex-timeline-content {
    background: var(--nex-white);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    padding: 14px 16px;
}

.nex-editorial .nex-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nex-space-md);
    flex-wrap: wrap;
}

.nex-editorial .nex-timeline-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--nex-text);
    margin: 0;
}

.nex-editorial .nex-timeline-dates {
    font-size: 12px;
    color: var(--nex-text-secondary);
    white-space: nowrap;
}

.nex-editorial .nex-timeline-sub {
    font-size: 13px;
    color: var(--nex-text-secondary);
    margin: 2px 0 14px;
}

.nex-editorial .nex-timeline-group-label,
.nex-editorial .nex-group-label {
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
    margin: 18px 0 10px;
}

.nex-editorial .nex-timeline-group-label:first-child,
.nex-editorial .nex-group-label:first-child {
    margin-top: 0;
}

.nex-editorial .nex-group-label-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.nex-editorial .nex-group-label-head:not(:first-child) {
    margin-top: 18px;
}

.nex-editorial .nex-group-label-head .nex-group-label {
    margin: 0;
}

/* Status/grade pill beside timeline titles */
.nex-editorial .nex-badge {
    background: #DFF5F3;
    color: #085041;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

/* 2-column grid of soft grey key/value boxes (Subject, Duration, Salary, etc.) */
.nex-editorial .nex-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.nex-editorial .nex-fields .nex-field.full {
    grid-column: 1 / 3;
}

.nex-editorial .nex-field {
    background: #F5F7F8;
    border-radius: 10px;
    padding: 10px 12px;
}

.nex-editorial .nex-field-label {
    font-size: 11px;
    color: var(--nex-text-muted);
    margin: 0 0 2px;
}

.nex-editorial .nex-field-value {
    font-size: 13px;
    color: var(--nex-text);
    margin: 0;
}

/* Non-chronological plain card (Contact, Licences, Profession message) */
.nex-editorial .nex-plain-card {
    background: var(--nex-white);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    padding: 14px 16px;
    margin-bottom: 8px;
}

.nex-editorial .nex-plain-card:last-child {
    margin-bottom: 0;
}

.nex-editorial .nex-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--nex-text);
    margin: 0 0 4px;
}

.nex-editorial .nex-card-text {
    font-size: 13px;
    color: var(--nex-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Icon + label/value row — Contact Information */
.nex-editorial .nex-icon-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nex-editorial .nex-icon-field-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F5F7F8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--nex-primary);
}

.nex-editorial .nex-icon-field-label {
    font-size: 11px;
    color: var(--nex-text-muted);
    margin: 0 0 2px;
}

.nex-editorial .nex-icon-field-value {
    font-size: 14px;
    color: var(--nex-text);
    margin: 0;
}

.nex-editorial .nex-icon-field-value.is-link {
    color: var(--nex-primary);
}

/* Plain link row — external links / "Join meeting" (Profession) */
.nex-editorial .nex-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nex-primary);
    text-decoration: none;
    margin-bottom: 8px;
}

.nex-editorial .nex-attachment:last-child {
    margin-bottom: 0;
}

.nex-editorial .nex-attachment:hover {
    color: var(--nex-primary);
    text-decoration: none;
    box-shadow: var(--nex-shadow-hover);
}

/* Language / proficiency scale (Overview, Second Languages) */
.nex-editorial .nex-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--nex-text-muted);
    margin-bottom: 8px;
}

.nex-editorial .nex-slider-track {
    position: relative;
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    margin: 0 0 10px;
}

.nex-editorial .nex-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    background: var(--nex-primary);
    border-radius: 2px;
}

.nex-editorial .nex-slider-dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--nex-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Native <details>/<summary> accordion (Key Facts / Key Achievements /
   Placements / References / Meetings) — restyled as a floating card, same
   CSS-only chevron rotation as Classic, just white-on-shadow instead of
   bordered-on-white. */
.nex-editorial .nex-details-item {
    background: var(--nex-white);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    margin-bottom: 8px;
    overflow: hidden;
}

.nex-editorial .nex-details-item:last-of-type {
    margin-bottom: 0;
}

.nex-editorial .nex-details-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--nex-text);
    list-style: none;
}

.nex-editorial .nex-details-item > summary::-webkit-details-marker {
    display: none;
}

.nex-editorial .nex-details-item > summary .nex-summary-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
}

.nex-editorial .nex-details-item > summary::after {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #F5F7F8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230E7F80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 200ms ease, background-color 200ms ease;
}

.nex-editorial .nex-details-item[open] > summary::after {
    transform: rotate(180deg);
}

.nex-editorial .nex-details-item > summary:hover::after {
    background-color: #DFF5F3;
}

.nex-editorial .nex-details-item[open] > summary {
    padding-bottom: 10px;
}

/* Sub-item heading for repeated flat field-groups inside a popup section
   (Experience Placements / References) — no card, no collapse, just a
   title followed directly by .nex-fields. */
.nex-editorial .nex-subitem-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nex-text);
    margin: 16px 0 0;
}

.nex-editorial .nex-timeline-group-label + .nex-subitem-title {
    margin-top: 0;
}

.nex-editorial .nex-details-desc {
    padding: 0 16px 14px;
    font-size: 12px;
    color: var(--nex-text-secondary);
    background: var(--nex-white);
}

/* Overview — category cards with a clamped description + Read more toggle */
.nex-editorial .nex-block {
    background: var(--nex-white);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    padding: 14px 16px;
    margin-bottom: 8px;
}

.nex-editorial .nex-block-title {
    font-size: 14px;
    font-weight: 600;
}

.nex-editorial .nex-block-desc {
    font-size: 12px;
}

.nex-editorial .nex-read-more {
    display: inline-block;
    font-size: 12px;
    color: var(--nex-primary);
    font-weight: 600;
    margin-top: 4px;
    cursor: pointer;
}

/* "View My Contact Card" row (EditorialProfile.razor's "VCard" section) — a
   plain centered pill row matching the mock's teaser-list rhythm, opening
   the same NexPopup as the hero's own "Save My Contact" button. */
.nex-editorial .nex-vcard-row {
    text-align: center;
    padding: 20px 24px;
    font-weight: 700;
    color: var(--nex-primary);
    cursor: pointer;
    transition: background .15s ease;
}

.nex-editorial .nex-vcard-row:hover {
    background: #F5F7F8;
}

/* Highlights row (EditorialProfile.razor's "Highlights" section) — a plain,
   clickable, single-line row within the same divided list as every other
   section, no icon (this template hides icons on every other row too — see
   ".nex-section .nex-section-card .title i{display:none}" below) and no
   separate button (the whole row is the click target, like every other
   row). Padding/divider match ".nex-section .nex-section-card .accordion-button". */
.nex-editorial .nex-highlight-card {
    display: block;
    padding: 28px 24px;
    border-bottom: 1px solid var(--nex-divider);
    cursor: pointer;
}

.nex-editorial .nex-highlight-card:hover .nex-highlight-title {
    text-decoration: underline;
}

.nex-editorial .nex-highlight-title {
    /* Explicit + !important: ".title" (an h5) gets Inter/700/20px from the
       tag-based "h1,h2,...,h6{font-family:Inter !important}" rule near the
       top of this file, matched directly because it's a real heading tag.
       This row's title is a plain div, which that tag rule can't match —
       it only inherits Inter from ".nex-editorial" above it, and inherited
       values lose to any later same-specificity rule without !important.
       Spelling it out here removes any doubt, rather than relying on
       inheritance to carry every property correctly. */
    font-family: Inter, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--nex-text) !important;
    margin: 0;
}

/* Every other row's kicker gets Bootstrap's "mb-0 !important" utility
   (NexSectionCard.razor), which beats the shared ".nex-section-kicker
   {margin-bottom:8px}" rule and leaves it flush against the title below.
   This row's kicker is a plain div (no mb-0), so it needs the override
   spelled out directly. */
.nex-editorial .nex-highlight-card .nex-section-kicker {
    font-family: Inter, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    margin-bottom: 0;
}

/* Same trailing arrow as every other section title (see ".nex-section-card
   .title::after" above) — this row uses its own ".nex-highlight-title" class
   rather than ".title", so it needs its own copy of that rule. */
.nex-editorial .nex-highlight-title::after {
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
}

/* Third line, matching every other row's ".nex-section-subtitle" (that rule
   is scoped to a ".nex-section-card" ancestor this row doesn't have, so it
   needs its own copy here) — including its own "margin-top:2px" from
   NexSectionCard.razor's embedded <style>, which is what keeps it flush
   under the title instead of the wider gap a bare div would otherwise get. */
.nex-editorial .nex-highlight-subtitle {
    font-family: Inter, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    color: var(--nex-text-secondary);
    margin: 2px 0 0;
}