/*
  Classic template — professional, clean, minimal, corporate.
  Inspired by Apple documentation / modern annual reports.
*/

.nex-classic {
    position: relative;
    min-height: 100vh;
    background: var(--nex-white);
    padding-top: var(--nex-space-section);
    padding-bottom: var(--nex-space-section);
}

/* NexPopup's own wrapper carries this same "nex-classic" class (see
   NexPopup.razor's TemplateClass), but its actual content (backdrop, wrap)
   is all position:fixed and contributes no height — so without this reset,
   the page-level padding/background/min-height above still paints on that
   wrapper, showing up as a stray block of white space wherever <NexPopup>
   sits in the DOM (right after each section's row) any time a popup is
   open. Same fix as ".nex-legal.nex-popup-scope" in
   experience-engine-legal.css. */
.nex-classic.nex-popup-scope {
    position: static;
    min-height: 0;
    background: none;
    padding-top: 0;
    padding-bottom: 0;
}

/* Full-bleed, fixed to the viewport, on desktop (the .nex-cover card
   floats on top of it, same as it's always been). Only on mobile (see the
   max-width:767px block below) does this switch to being contained inside
   .nex-cover instead, matching Editorial's .nex-hero. */
.nex-classic-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

/* .nex-cover is the single hero card — avatar, name and the "Save My Contact"
   button (a sibling of SharedProfileHeader, added in ClassicProfile.razor) all
   render inside it, so it reads as one bordered card, not two stacked ones. */
.nex-classic .nex-cover {
    text-align: center;
    max-width: 480px;
    margin: 0 auto var(--nex-space-lg);
    background: var(--nex-white);
    border: 1px solid var(--nex-divider);
    border-radius: var(--nex-radius-card);
    box-shadow: none;
    padding: var(--nex-space-lg);
}

.nex-classic .nex-cover .nex-btn-primary {
    margin-top: var(--nex-space-md) !important;
}

@media (max-width: 767px) {
    /* Mobile only: the motion background switches from the desktop's
       full-page fixed video to being contained inside .nex-cover instead,
       matching Editorial's .nex-hero — desktop keeps the video as a
       full-bleed page background (see the base .nex-classic-bg-video rule
       above), unchanged from how it originally worked. */
    .nex-classic-bg-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    /* .nex-cover becomes the video's containing block and gets a dark
       scrim so the name/pronoun/language stay readable, same idea as
       Editorial's .nex-hero::before scrim. .nex-cover already has
       border-radius which overflow:hidden now also clips the video to.

       min-height (not a flat height) matches Editorial's .nex-hero: it
       gives the box a floor for the shortest case (avatar + name + button,
       nothing else) while letting it grow with the actual content when
       Headline/Pronouns/Native Language add more lines — a flat height
       either left a bare strip of video below the button (too tall for
       short content) or clipped the button entirely (too short for long
       content), depending on what was enabled. The video below still
       fills via inset:0 + width/height:100% against this container's
       *resolved* box (definite once layout completes, whether that came
       from min-height or from taller content), same technique already
       proven working in Editorial's .nex-hero. */
    .nex-classic .nex-cover.nex-cover-has-video {
        position: relative;
        overflow: hidden;
        min-height: 240px;
    }

    .nex-classic .nex-cover.nex-cover-has-video::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(20, 20, 20, .45);
        z-index: 1;
    }

    /* .profile-header further below is force-set to position:static (needed
       to neutralize its normal "card below a cover photo" layout here) at
       equal selector specificity and later in the file, so it would win
       over a generic ".nex-cover-has-video > *" attempt to lift this via
       z-index — z-index does nothing on a statically positioned element.
       Overriding it here at higher specificity instead of relying on
       source order. */
    .nex-classic .nex-cover.nex-cover-has-video .profile-header {
        position: relative;
        z-index: 2;
    }

    .nex-classic .nex-cover.nex-cover-has-video .nex-btn-primary {
        position: relative;
        z-index: 2;
    }

    .nex-classic .nex-cover.nex-cover-has-video .profile-header h4.pr-h3,
    .nex-classic .nex-cover.nex-cover-has-video .profile-header .pr-h6-Grey {
        color: #FFFFFF;
    }
}

/* Shared .profile-header is normally its own white "card" designed to sit
   below a 150px-tall cover photo, with its avatar pulled up -50px to overlap
   the cover photo's bottom edge (see arc.css .profile-header / .arc-profile-
   header-photo). Classic has no cover photo — .nex-cover is already the one
   card — so every one of those card/offset properties must be neutralized
   here, otherwise you get a card-inside-a-card and a mispositioned avatar. */
.nex-classic .nex-cover .profile-header {
    position: static;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.nex-classic .nex-cover .profile-header img.arc-profile-header-photo {
    position: static;
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
    background: var(--nex-bg);
    border: none;
    padding: 0;
    box-shadow: none;
}

.nex-classic .nex-cover .profile-header h4.pr-h3 {
    font-family: var(--nex-font-primary);
    font-size: 22px;
    font-weight: 600;
    color: var(--nex-text);
    margin-top: var(--nex-space-md) !important;
    margin-bottom: 0 !important;
}

.nex-classic .nex-cover .profile-header .pr-h6-Grey {
    font-family: var(--nex-font-primary);
    font-size: 14px;
    color: var(--nex-text-secondary);
    margin-top: 4px;
}

/* 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 here. */
.nex-classic .nex-cover .profile-header .row.mt-3 {
    display: none;
}

/* 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-classic .nex-cover .profile-header .row.mt-5 {
    margin-top: 0 !important;
}

.nex-classic .nex-section-header {
    display: flex;
    align-items: center;
    gap: var(--nex-space-sm);
    text-align: left;
    font-size: var(--nex-h3);
    font-weight: 600;
    padding-bottom: var(--nex-space-sm);
    margin-bottom: var(--nex-space-md);
    border-bottom: 1px solid var(--nex-divider);
}

.nex-classic .nex-section-body {
    background: var(--nex-white);
    border: 1px solid var(--nex-divider);
    border-radius: var(--nex-radius-card);
    padding: var(--nex-space-lg);
}

/* Flat vertical timeline — chronological sections only (Academic Qualifications,
   Vocational & Professional Qualification, Experience). Each entry is a flex row:
   a rail column (dot + connector segment down to the next entry) beside flowing
   content with no bordered card box around it. */
.nex-classic .nex-timeline-item {
    display: flex;
    gap: var(--nex-space-md);
}

.nex-classic .nex-timeline-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.nex-classic .nex-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--nex-primary);
    flex-shrink: 0;
    margin-top: 4px;
}

.nex-classic .nex-timeline-connector {
    width: 2px;
    flex: 1;
    background: rgba(14, 127, 128, .15);
    margin-top: 4px;
}

.nex-classic .nex-timeline-content {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--nex-space-lg);
}

.nex-classic .nex-timeline-item:last-child .nex-timeline-content {
    padding-bottom: 0;
}

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

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

.nex-classic .nex-timeline-dates {
    font-size: 13px;
    color: var(--nex-text-muted);
    white-space: nowrap;
}

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

.nex-classic .nex-timeline-group-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
    margin: 16px 0 8px;
}

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

/* Generic uppercase group label — used standalone (Skills categories, Profession
   sub-lists) outside of the timeline. */
.nex-classic .nex-group-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
    margin: 0 0 10px;
}

.nex-classic .nex-group-label:not(:first-child) {
    margin-top: var(--nex-space-lg);
}

/* Icon + group-label pair — Second Languages / Skills categories (same
   per-item illustration icons as the Visual template). */
.nex-classic .nex-group-label-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.nex-classic .nex-group-label-head:not(:first-child) {
    margin-top: var(--nex-space-lg);
}

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

/* InfoPack (Profession) group-label icon — same 22px treatment as Legal's
   .nex-legal .nex-table-icon / Editorial's .nex-editorial .nex-table-icon,
   needed now that ProfileInfoPack.razor renders this icon for Classic too. */
.nex-classic .nex-table-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
}

/* Small status/grade pill shown beside timeline titles */
.nex-classic .nex-badge {
    background: #E1F5EE;
    color: #085041;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Bordered link row for file attachments */
.nex-classic .nex-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--nex-divider);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: var(--nex-small);
    color: var(--nex-primary);
    text-decoration: none;
    margin-bottom: 8px;
}

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

.nex-classic .nex-attachment:hover {
    background: var(--nex-bg);
    color: var(--nex-primary);
    text-decoration: none;
}

/* Document row (NexAttachmentItem) — used for actual file attachments only,
   distinct from the plain .nex-attachment link (used for external links and
   "Join meeting"). File-type badge + title + preview/download actions. */
.nex-classic .nex-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--nex-divider);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

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

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

.nex-classic .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-classic .nex-doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

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

.nex-classic .nex-doc-btn:hover {
    background: var(--nex-bg);
    color: var(--nex-text);
}

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

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

/* Attachment preview modal (Syncfusion PDF Viewer / image), triggered from the
   eye icon above. Plain Bootstrap modal — not scoped to .nex-classic — so it
   keeps the candidate on the same page/tab instead of opening a new browser
   tab, which is a poor experience on mobile Chrome/Safari. */
.nex-doc-preview-body {
    padding: 12px;
}

@media (max-width: 767px) {
    .nex-doc-preview-body {
        padding: 8px 4px;
    }

    /* Bump the attachment row's preview/download buttons up to the same
       44px minimum touch target already used for the popup's close/nav
       buttons (see .nex-popup-btn-icon in experience-engine-tokens.css) —
       32px is too small to reliably tap on a phone. */
    .nex-classic .nex-doc-item {
        gap: 8px;
        padding: 8px 10px;
    }

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

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

/* Plain card — non-chronological sections (Overview, Skills, Languages, Contact,
   Driving, Profession) where entry order doesn't carry timeline meaning. */
.nex-classic .nex-plain-card {
    border: 1px solid var(--nex-divider);
    border-radius: var(--nex-radius-card);
    padding: var(--nex-space-md) 18px;
    margin-bottom: 10px;
}

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

.nex-classic .nex-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--nex-text);
    margin: 0 0 6px;
}

.nex-classic .nex-card-text {
    font-size: var(--nex-small);
    color: var(--nex-text-secondary);
    margin: 0;
}

/* 2-column grid of small grey-bg boxes for structured key/value data */
.nex-classic .nex-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

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

.nex-classic .nex-field {
    background: var(--nex-bg);
    border-radius: 10px;
    padding: 10px 14px;
}

.nex-classic .nex-field-label {
    font-size: 12px;
    color: var(--nex-text-secondary);
    margin: 0 0 2px;
}

.nex-classic .nex-field-value {
    font-size: var(--nex-small);
    color: var(--nex-text);
    margin: 0;
}

/* Native <details>/<summary> accordion — Key Facts / Key Achievements. CSS-only
   chevron rotation via [open], no JS/C# toggle state needed. */
.nex-classic .nex-details-item {
    border: 1px solid var(--nex-divider);
    border-radius: var(--nex-radius-card);
    margin-bottom: 8px;
    overflow: hidden;
}

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

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

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

/* Wrapper for multi-part summary text (e.g. Reference name + "· Relationship"),
   so the whole label counts as a single flex item alongside the chevron —
   prevents justify-content: space-between from spreading name/relationship apart. */
.nex-classic .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-classic .nex-details-item > summary::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--nex-bg);
    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-classic .nex-details-item[open] > summary::after {
    transform: rotate(180deg);
}

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

.nex-classic .nex-details-item[open] > summary {
    border-bottom: 1px solid var(--nex-divider);
    font-weight: 500;
}

.nex-classic .nex-details-desc {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--nex-text-secondary);
    background: var(--nex-bg);
}

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

.nex-classic .nex-icon-field-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nex-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--nex-text-secondary);
}

.nex-classic .nex-icon-field-label {
    font-size: 12px;
    color: var(--nex-text-secondary);
    margin: 0 0 2px;
}

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

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

/* Language proficiency slider — Overview / Second Languages (non-chronological) */
.nex-classic .nex-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--nex-text-muted);
    margin-bottom: 10px;
}

.nex-classic .nex-slider-track {
    position: relative;
    height: 4px;
    background: var(--nex-divider);
    border-radius: 2px;
    margin: 0 0 12px;
}

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

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

/* Reskin the existing SectionCardAccordian cards used by the shared section
   components (ProfileBio, ProfileQualification, etc.) — no markup duplicated.
   The whole list becomes a single rounded card; each section is a divided
   row inside it (same colours/tokens as before, just restyled as a list). */
.nex-classic .nex-sections {
    width: min(860px, calc(100% - (2 * var(--nex-space-md))));
    margin: 0 auto var(--nex-space-lg);
    background: var(--nex-white);
    border: 1px solid var(--nex-divider);
    border-radius: var(--nex-radius-card);
    box-shadow: var(--nex-shadow-light);
    overflow: hidden;
}

.nex-classic .nex-sections > .nex-section {
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

.nex-classic .nex-sections .card.arc-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nex-classic .nex-sections .nex-section:not(:last-child) .card.arc-card {
    border-bottom: 1px solid var(--nex-divider) !important;
}

/* On phones, .nex-scope already adds --nex-margin-mobile (20px) of side
   padding around the whole page (experience-engine-tokens.css). The desktop
   width formula above subtracts another 2 * --nex-space-md (32px) on top of
   that, so .nex-sections renders narrower than .nex-cover — the hero card
   above it, which has no such extra subtraction and simply fills the padded
   width. Dropping the subtraction here makes both cards match. */
@media (max-width: 767px) {
    .nex-classic .nex-sections {
        width: 100%;
    }
}

.nex-classic .nex-section-card:hover {
    background: var(--nex-bg);
}

/* ".nex-section-card" carries tabindex="0" for accessibility, so clicking a
   row to open its popup leaves it focused underneath — the browser's default
   focus ring then reads as an unwanted "expand" effect on that row while the
   popup sits on top. Suppressed only for pointer clicks (:not(:focus-visible))
   so Tab/keyboard navigation still shows the ring as normal. */
.nex-classic .nex-section-card:focus:not(:focus-visible) {
    outline: none;
}

.nex-classic .nex-section-card .accordion-button {
    padding: 14px 20px !important;
}

.nex-classic .nex-section-card .title {
    display: flex;
    align-items: center;
    gap: var(--nex-space-sm);
    font-family: var(--nex-font-primary);
    font-size: var(--nex-small);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--nex-text);
}

/* The leading <i> icon already passed in every section's <Title> becomes a
   square icon chip, like the numbered badge in the reference list design. */
.nex-classic .nex-section-card .title > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0 !important;
    border-radius: 8px;
    background: var(--nex-bg);
    color: var(--nex-primary);
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.nex-classic .nex-section-card:hover .title > i:first-child {
    background: #E1F5EE;
    color: var(--nex-primary);
}

/* Chevron → simple "›" affordance, muted grey at rest, teal on hover. */
.nex-classic .nex-section-card .nex-section-arrow {
    font-size: 0;
    color: var(--nex-text-muted);
    transition: color .2s ease;
}

.nex-classic .nex-section-card .nex-section-arrow::before {
    content: "\203A" !important;
    font-family: var(--nex-font-primary) !important;
    font-size: 20px;
    font-weight: 600;
}

.nex-classic .nex-section-card:hover .nex-section-arrow {
    color: var(--nex-primary);
}

.nex-classic .nex-btn-primary {
    animation: none;
}

.nex-classic .nex-fade-in {
    animation: nexClassicFade 200ms ease-in;
}

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

/* NexPopup — Classic skin: calm, minimal, teal accents, fade+slide 200ms */
.nex-classic .nex-popup-dialog {
    position: relative;
    border: 1px solid var(--nex-divider);
    animation: nexClassicPopupIn 200ms ease-out;
}

.nex-classic .nex-popup-dialog:not(.nex-popup-sm):not(.nex-popup-lg):not(.nex-popup-xl):not(.nex-popup-full) {
    width: min(720px, 92vw);
}

.nex-classic .nex-popup-btn-icon {
    border-radius: 50%;
    border: 1px solid var(--nex-divider);
}

/* Merge the header row's close button into the same visual row as the title
   (reference's single-row modal header with border-bottom) without restructuring
   the shared NexPopup markup — the header row is floated over the title row,
   which now carries the padding + divider. Safe because ShowBack is never used
   by any Presentation Pack popup, so the header only ever contains the close
   button. */
.nex-classic .nex-popup-header {
    position: absolute;
    top: var(--nex-space-lg);
    right: var(--nex-space-lg);
    left: auto;
    padding: 0;
    z-index: 2;
}

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

/* Left-align the icon (instead of the shared centered default), so it sits
   flush with the title row's left edge below it. */
.nex-classic .nex-popup-icon-wrap {
    justify-content: flex-start;
    padding: var(--nex-space-lg) var(--nex-space-lg) 0;
}

/* Left-align the title/subtext block (instead of the shared centered default).
   Padding + border-bottom here approximate the reference's single-row modal
   header (title left, close button right, divider below) since the close
   button is floated up into this row via .nex-popup-header above. */
.nex-classic .nex-popup-title-row {
    justify-content: flex-start;
    padding: var(--nex-space-lg) 56px var(--nex-space-md) var(--nex-space-lg);
    margin: 0;
    border-bottom: 1px solid var(--nex-divider);
}

.nex-classic .nex-popup-title {
    text-align: left;
    font-size: 22px;
    font-weight: 500;
}

.nex-classic .nex-popup-subtext {
    text-align: left;
    padding: 0 56px 0 var(--nex-space-lg);
}

.nex-classic .nex-popup-body {
    margin-top: 0;
    padding-top: var(--nex-space-lg);
    background: var(--nex-white);
    border-bottom-left-radius: var(--nex-radius-card);
    border-bottom-right-radius: var(--nex-radius-card);
}

/* Close button on phones: the shared 44px touch target (experience-engine-
   tokens.css) is large enough to tap but, being just a hairline border on
   white, is easy to miss and sits close to the dialog's rounded corner. A
   filled background makes it read clearly as a button, and pulling the
   offset in a touch keeps it clear of that corner. The title row's right
   padding is widened to match so long section titles (e.g. "Academic &
   Vocational Qualifications") never run under it. */
@media (max-width: 767px) {
    .nex-classic .nex-popup-header {
        top: var(--nex-space-md);
        right: var(--nex-space-md);
    }

    .nex-classic .nex-popup-btn-icon {
        background: var(--nex-bg);
    }

    .nex-classic .nex-popup-title-row {
        padding-right: 68px;
    }

    .nex-classic .nex-popup-subtext {
        padding-right: 68px;
    }
}

/* Category label styling for the shared .section-group > h6 pattern (Bio
   category names, Experience company names, Skills/Language item names, etc). */
.nex-classic .nex-popup-body .section-group > h6 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
}

.nex-classic .nex-popup-body hr {
    display: none;
}

.nex-classic .nex-popup-body .section-group {
    margin-bottom: var(--nex-space-md);
}

.nex-classic .nex-popup-body .section-group:last-child {
    margin-bottom: 0;
}

/* Detail cards — a bordered white card per entry (Qualification, Experience,
   etc.) with a title/subtitle header and a grade badge + date range on the
   right, used instead of the plain .section-group + h6 layout when an entry
   needs to stand out as its own unit inside the popup body. */
.nex-classic .nex-detail-card {
    background: var(--nex-white);
    border: 1px solid var(--nex-divider);
    border-radius: var(--nex-radius-card);
    box-shadow: var(--nex-shadow-light);
    padding: var(--nex-space-lg);
    margin-bottom: var(--nex-space-md);
}

.nex-classic .nex-detail-card:last-child {
    margin-bottom: 0;
}

.nex-classic .nex-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--nex-space-md);
    margin-bottom: var(--nex-space-md);
}

.nex-classic .nex-detail-card-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--nex-text);
    line-height: 1.3;
}

.nex-classic .nex-detail-card-subtitle {
    font-size: var(--nex-small);
    color: var(--nex-text-muted);
    margin-top: 2px;
}

.nex-classic .nex-detail-card-meta {
    text-align: right;
    flex-shrink: 0;
}

.nex-classic .nex-detail-card-daterange {
    font-size: 12px;
    color: var(--nex-text-muted);
    white-space: nowrap;
}

.nex-classic .nex-detail-card-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(14, 127, 128, .12);
    color: var(--nex-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Interests & Hobbies — pill/chip list instead of paragraph text */
.nex-classic .nex-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nex-space-sm);
}

.nex-classic .nex-tag {
    display: inline-flex;
    align-items: center;
    background: var(--nex-white);
    border: 1px solid var(--nex-divider);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--nex-small);
    color: var(--nex-text);
}

/* "View My Contact Card" row (ClassicProfile.razor's "VCard" section) — a
   divided list row matching ".nex-section-card"'s own rhythm, opening the
   same NexPopup as the hero's own "Save My Contact" button. */
.nex-classic .nex-vcard-row {
    text-align: center;
    padding: 14px 20px;
    font-weight: 600;
    color: var(--nex-primary);
    cursor: pointer;
    transition: background .15s ease;
}

.nex-classic .nex-vcard-row:hover {
    background: var(--nex-bg);
}

/* Highlights row (ClassicProfile.razor's "Highlights" section) — deliberately
   mirrors "Personal Licences"/every other row's exact DOM shape (icon nested
   inside the title, arrow as a trailing sibling, row itself flex+space-between
   — see ".nex-section-card .accordion-button"/".title" above) rather than a
   loosely similar layout, so height/alignment/spacing are identical, not just
   close. No separate button, no border/shadow, no title/subtitle split (every
   other row is single-line) — whole row is the click target. */
.nex-classic .nex-highlight-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* 14px/28px, not 14px/20px: every other row's horizontal inset is
       ".accordion-button"'s own 20px PLUS an extra 8px from the
       ".accordion-header.px-2" wrapper around it in NexSectionCard.razor
       (Bootstrap's px-2 utility) — 28px total from ".nex-section-card"'s
       edge. This row has no such extra wrapper, so 20px alone left its
       icon/arrow sitting ~8px further out than every other row's. !important
       to match ".nex-section-card .accordion-button"'s own padding rule
       above, so it can't be silently overridden by anything else. */
    padding: 14px 28px !important;
    box-sizing: border-box;
    border-bottom: 1px solid var(--nex-divider);
    cursor: pointer;
}

.nex-classic .nex-highlight-card:hover {
    background: var(--nex-bg);
}

.nex-classic .nex-highlight-title {
    display: flex;
    align-items: center;
    gap: var(--nex-space-sm);
    font-family: var(--nex-font-primary);
    font-size: var(--nex-small);
    font-weight: 600;
    color: var(--nex-text);
}

/* Same icon-chip look as every other row's leading <i> (see
   ".nex-section-card .title > i:first-child" above) — that rule is scoped
   to a ".nex-section-card .title" ancestor this row doesn't have, so it
   needs its own copy here. */
.nex-classic .nex-highlight-title > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0 !important;
    border-radius: 8px;
    background: var(--nex-bg);
    color: var(--nex-primary);
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.nex-classic .nex-highlight-card:hover .nex-highlight-title > i:first-child {
    background: #E1F5EE;
}

/* Custom Visual Branding icon variant of the chip above — same 32px slot,
   swapped to a circular photo treatment (object-fit: cover) since this one
   renders an uploaded image instead of a FontAwesome glyph. */
.nex-classic .nex-highlight-title > img.nex-highlight-icon-img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    object-fit: cover;
}

/* Same trailing chevron as every other row (see ".nex-section-card
   .nex-section-arrow" above) — that rule is scoped to a ".nex-section-card"
   ancestor this row doesn't have, so it needs its own copy here. */
.nex-classic .nex-highlight-card .nex-section-arrow {
    flex-shrink: 0;
    font-size: 0;
    color: var(--nex-text-muted);
    transition: color .2s ease;
}

.nex-classic .nex-highlight-card .nex-section-arrow::before {
    content: "\203A" !important;
    font-family: var(--nex-font-primary) !important;
    font-size: 20px;
    font-weight: 600;
}

.nex-classic .nex-highlight-card:hover .nex-section-arrow {
    color: var(--nex-primary);
}