/* =============================================================================
   SUN STACK — UI V3 "Living Portal" layer
   -----------------------------------------------------------------------------
   Presentation-only companion stylesheet. It never touches markup contracts the
   backend relies on: it only adds classes / effects, equalises grids and drives
   auto-rotation. No PHP, DB, route or form-name is changed here.

   Table of contents
     01  Motion tokens & keyframes
     02  Employer registration shell (logo header, no top gap)
     03  Hero "Find a Perfect Job" rotating card
     04  Browse Categories — richer cards + auto rotation
     05  Featured Jobs — equal boxes, gapless grid
     06  Latest Jobs — auto rotation
     07  Global micro-motion (reveal + hover life) for public + panels
   ============================================================================= */

/* ---------------------------------------------------------------------------
   01  MOTION TOKENS & KEYFRAMES
--------------------------------------------------------------------------- */
:root {
    --ssx-rotate: 2600ms;            /* default auto-rotation cadence */
    --ssx-ease: cubic-bezier(.22, .61, .36, 1);
    --ssx-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --ssx-shadow-lift: 0 22px 48px rgba(15, 23, 42, .14);
    --ssx-grad-a: linear-gradient(135deg, #2f5fdc 0%, #3b6ef6 100%);
    --ssx-grad-b: #d62828;
}

@keyframes ssx-swap-in {
    0%   { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(3px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ssx-swap-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-14px) scale(.97); filter: blur(3px); }
}
@keyframes ssx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@keyframes ssx-sheen {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(220%); }
}
@keyframes ssx-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@keyframes ssx-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    :root { --ssx-rotate: 999999ms; }
    .ssx-anim-swap, .ssx-float, .ssx-rot-panel .is-active {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   02  EMPLOYER REGISTRATION SHELL
   The registration form renders in the public "guest" layout, which paints a
   tall centred column with a very large top padding and no brand/logo above
   the form. We (a) drop the dead space, (b) surface a proper logo header so the
   page reads like the rest of the product, and (c) frame the form as a card.
--------------------------------------------------------------------------- */
body.public-body:not(.portal-body) .portal-shell-guest {
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr) !important;
}

/* Kill the top gap: pull the form column up and clamp the padding tight. */
body.public-body:not(.portal-body) .auth-formside {
    padding: clamp(1rem, 2.2vw, 2.4rem) clamp(1.1rem, 3vw, 3rem) !important;
    align-content: start !important;
}

/* Brand / logo lockup injected at the top of the form column. */
.ssx-reg-brandbar {
    position: relative;
    z-index: 2;
    width: min(100%, 960px);
    margin: 0 auto 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ssx-reg-brandbar__logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: #17201e;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.12rem;
}
.ssx-reg-brandbar__logo::before {
    content: 'S';
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50% 50% 50% 14%;
    background: var(--ssx-grad-b);
    color: #fff;
    font-size: .92rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(212, 42, 31, .32);
}
.ssx-reg-brandbar__logo span { color: var(--jp-red, #d42a1f); }
.ssx-reg-brandbar__back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .84rem;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid #d9dee7;
    background: rgba(255, 255, 255, .75);
    transition: transform .2s var(--ssx-ease), border-color .2s var(--ssx-ease), color .2s var(--ssx-ease);
}
.ssx-reg-brandbar__back:hover { transform: translateX(-3px); color: var(--jp-red, #d42a1f); border-color: var(--jp-red, #d42a1f); }

/* Frame the wide employer form as a real card so it no longer floats. */
body.public-body:not(.portal-body) .auth-formside .portal-auth-card.is-wide {
    background: #ffffff !important;
    border: 1px solid #e7e3da !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .10) !important;
    padding: clamp(1.25rem, 3vw, 2.6rem) !important;
}
body.public-body:not(.portal-body) .auth-formside .portal-auth-card .brand { margin-bottom: .35rem !important; }

/* Left showcase rail for registration reads as a product marketing panel. */
body.public-body:not(.portal-body) .auth-showcase { padding-top: clamp(2.2rem, 4vw, 3.4rem) !important; }

@media (max-width: 1000px) {
    .ssx-reg-brandbar { margin-bottom: 1rem; }
    body.public-body:not(.portal-body) .auth-formside { padding: 1rem .9rem 2rem !important; }
}

/* ---------------------------------------------------------------------------
   03  HERO — "Find a Perfect Job" rotating card
--------------------------------------------------------------------------- */
.ssx-live-card { position: relative; overflow: hidden; }
.ssx-live-card .ssx-live-card__stack { position: relative; min-height: 64px; }

.ssx-live-card .card-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.ssx-live-card .card-label::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: ssx-pulse-dot 1.8s ease-out infinite;
}

/* Rotating job title + meta lines. */
.ssx-live-card .ssx-rot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}
.ssx-live-card .ssx-rot.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    animation: ssx-swap-in .5s var(--ssx-ease) both;
}
.ssx-live-card .ssx-rot.is-leaving { animation: ssx-swap-out .34s var(--ssx-ease) both; }
.ssx-live-card .ssx-rot__title {
    font-size: .95rem;
    font-weight: 800;
    color: #17201e;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
}
.ssx-live-card .ssx-rot__meta {
    font-size: .78rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

/* Rotating stat number under the employer card. */
.ssx-count-swap { display: inline-block; animation: ssx-swap-in .5s var(--ssx-ease) both; }

/* Gentle float so the two floating hero cards feel alive. */
@supports (animation: ssx-float 1s) {
    .hero-visual .hero-card-top { animation: ssx-float 5.5s ease-in-out infinite; }
    .hero-visual .hero-card-bottom { animation: ssx-float 5.5s ease-in-out infinite .6s; }
}

/* ---------------------------------------------------------------------------
   03b HERO MOCKUP TICKER — the mock "job names" list scrolls continuously so
       the right-hand hero preview moves. Rows are duplicated in JS (2x), so a
       -50% translate loops seamlessly. Fast but eased for a smooth glide.
--------------------------------------------------------------------------- */
.hero-mockup .hero-mockup__cards {
    position: relative;
    height: 208px;
    overflow: hidden;
    margin-top: auto;
    /* soft fade at the top/bottom so rows dissolve in and out */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.hero-mockup .hero-mockup__cards-track {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-mockup .hero-mockup__cards-track.is-ticking {
    animation: ssx-hero-ticker 9s linear infinite;
    will-change: transform;
}
/* pause the scroll while the visitor hovers the preview */
.hero-mockup:hover .hero-mockup__cards-track.is-ticking { animation-play-state: paused; }
@keyframes ssx-hero-ticker {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-mockup .hero-mockup__cards-track.is-ticking { animation: none; }
    .hero-mockup .hero-mockup__cards { height: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------------------
   04  BROWSE CATEGORIES — richer media cards + auto rotation
--------------------------------------------------------------------------- */
.ssx-cat-carousel {
    position: relative;
    padding: 0 clamp(0px, 4vw, 56px);
}
.ssx-cat-track {
    display: grid;
    grid-auto-flow: column;
    /* Fixed, comfortable card width so cards never stretch the photo. */
    grid-auto-columns: clamp(230px, 24vw, 292px);
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    scrollbar-width: none;
    align-items: stretch;
}
.ssx-cat-track::-webkit-scrollbar { display: none; }
.ssx-cat-track > * { scroll-snap-align: start; }

/* Category card enhancements (extends the template .category-card). */
.ssx-cat-track .category-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    text-decoration: none;
    height: 100%;
    min-width: 0;
    transition: transform .32s var(--ssx-ease), box-shadow .32s var(--ssx-ease), border-color .32s var(--ssx-ease);
}
.ssx-cat-track .category-card:hover {
    transform: translateY(-6px);
    border-color: var(--jp-red, #d42a1f);
    box-shadow: var(--ssx-shadow-lift);
}
.category-card { position: relative; overflow: hidden; }

/* Media panel: a fixed, proportionate ratio so the photo is never stretched.
   Re-asserted here (with a capped height) to override any flex stretch. */
.category-card .category-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 190px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #eef2f7;
    flex: 0 0 auto;
}
.category-card .category-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.category-card .category-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(15, 23, 42, .42) 100%);
    pointer-events: none;
}
.category-card .category-media img { transition: transform .55s var(--ssx-ease); }
.category-card:hover .category-media img { transform: scale(1.08) rotate(.6deg); }
.category-card .category-media__tag { z-index: 2; }
.category-card .category-count i { transition: transform .25s var(--ssx-ease); }
.category-card:hover .category-count i { transform: translateX(5px); }

/* Shine sweep on hover for a premium feel. */
.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 3;
}
.category-card:hover::before { animation: ssx-sheen .9s var(--ssx-ease); }

/* Arrow controls over the carousel. */
.ssx-cat-nav {
    position: absolute;
    top: 42%;
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .96);
    color: #17201e;
    font-size: 1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    transition: transform .2s var(--ssx-ease), background .2s var(--ssx-ease), color .2s var(--ssx-ease);
}
.ssx-cat-nav:hover { background: var(--jp-red, #d42a1f); color: #fff; transform: scale(1.08); }
.ssx-cat-nav--prev { left: 0; }
.ssx-cat-nav--next { right: 0; }
@media (max-width: 767.98px) {
    .ssx-cat-nav { display: none; }
    .ssx-cat-track { grid-auto-columns: minmax(210px, 74%); }
    .category-card .category-media { max-height: 165px; }
}

/* ---------------------------------------------------------------------------
   05  FEATURED JOBS — see section 11 for the full card-grid definition.
   Featured Jobs now renders `.ssx-fjob` cards inside `.ssx-job-grid`; the
   authoritative grid + responsive columns live in section 11 below.
--------------------------------------------------------------------------- */
.ssx-job-grid > * { display: flex; min-width: 0; }

/* Kill the template's leftover column gutters so the boxes are perfectly even. */
.ssx-job-grid.row,
.row.ssx-job-grid { --bs-gutter-x: 0; --bs-gutter-y: 0; }

/* ---------------------------------------------------------------------------
   06  LATEST JOBS — auto rotation (three at a time)
--------------------------------------------------------------------------- */
.ssx-rot-panel { position: relative; }
.ssx-rot-panel .ssx-rot-panel__page { display: none; }
.ssx-rot-panel .ssx-rot-panel__page.is-active {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    animation: ssx-swap-in .55s var(--ssx-ease) both;
}
.ssx-rot-panel .ssx-rot-panel__page > * { display: flex; min-width: 0; }
.ssx-rot-panel .job-card-tpl { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ssx-rot-panel .ssx-rot-panel__cell { width: 100%; min-width: 0; }
/* Featured Jobs cards rotate inside the same panel — make each card fill its cell. */
.ssx-rot-panel .ssx-rot-panel__cell > .ssx-fjob { width: 100%; height: 100%; }
/* Top Employers cards rotate in the same panel too. */
.ssx-rot-panel .ssx-rot-panel__cell > .company-card { width: 100%; height: 100%; }

/* Latest Jobs card — same image-header card look as Popular Industries and
   Featured Jobs, so the three sections read as one system. */
.ssx-ljob {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: transform .32s var(--ssx-ease), box-shadow .32s var(--ssx-ease), border-color .32s var(--ssx-ease);
}
.ssx-ljob:hover {
    transform: translateY(-6px);
    border-color: var(--jp-red, #d42a1f);
    box-shadow: var(--ssx-shadow-lift);
}
.ssx-ljob__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eef2f7;
}
.ssx-ljob__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s var(--ssx-ease);
}
.ssx-ljob:hover .ssx-ljob__media img { transform: scale(1.06); }
.ssx-ljob__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .05) 0%, rgba(15, 23, 42, .55) 100%);
    pointer-events: none;
}
.ssx-ljob__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #2f5fdc;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
}
.ssx-ljob__cat {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(23, 32, 30, .72);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(3px);
}
.ssx-ljob__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}
.ssx-ljob__body .job-logo {
    width: 48px;
    height: 48px;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}
.ssx-ljob__title { margin: 0; font-size: 1.04rem; font-weight: 800; line-height: 1.3; }
.ssx-ljob__title a { color: #17201e; text-decoration: none; transition: color .25s var(--ssx-ease); }
.ssx-ljob__title a:hover { color: var(--jp-red, #d42a1f); }
.ssx-ljob__company { font-size: .86rem; color: #64748b; font-weight: 600; }
.ssx-ljob__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .8rem; color: #6b7686; }
.ssx-ljob__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ssx-ljob__meta i { color: #94a3b8; }
.ssx-ljob__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.ssx-ljob__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--jp-red, #d42a1f);
    color: var(--jp-red, #d42a1f);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s var(--ssx-ease), color .25s var(--ssx-ease);
}
.ssx-ljob__btn i { transition: transform .25s var(--ssx-ease); }
.ssx-ljob__btn:hover { background: var(--jp-red, #d42a1f); color: #ffffff; }
.ssx-ljob__btn:hover i { transform: translateX(4px); }
@media (max-width: 991.98px) {
    .ssx-rot-panel .ssx-rot-panel__page.is-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ssx-rot-panel .ssx-rot-panel__page.is-active { grid-template-columns: 1fr; gap: 16px; }
}

/* Progress pips for the rotating panels. */
.ssx-pips {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}
.ssx-pips button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d5dbe6;
    cursor: pointer;
    transition: width .3s var(--ssx-ease), background .3s var(--ssx-ease);
}
.ssx-pips button.is-active { width: 26px; background: var(--jp-red, #d42a1f); }

/* ---------------------------------------------------------------------------
   07  GLOBAL MICRO-MOTION
   Layered on top of existing reveal classes. Kept restrained: fade+rise for
   sections/cards, consistent lift on interactive tiles.
--------------------------------------------------------------------------- */
.ssx-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ssx-ease), transform .7s var(--ssx-ease);
    will-change: opacity, transform;
}
.ssx-reveal.is-in { opacity: 1; transform: none; }

/* Stagger helper. */
.ssx-reveal.d1 { transition-delay: .06s; }
.ssx-reveal.d2 { transition-delay: .12s; }
.ssx-reveal.d3 { transition-delay: .18s; }
.ssx-reveal.d4 { transition-delay: .24s; }
.ssx-reveal.d5 { transition-delay: .30s; }
.ssx-reveal.d6 { transition-delay: .36s; }

/* Animated gradient section headings for a livelier page. */
.titleTop h3 span {
    background-size: 200% auto;
    animation: ssx-text-shift 6s linear infinite;
}
@keyframes ssx-text-shift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Company + how-to + job cards: consistent lift. */
.company-card, .howit-card, .job-card-tpl, .industry-pill, .cta-duo__card {
    transition: transform .32s var(--ssx-ease), box-shadow .32s var(--ssx-ease), border-color .32s var(--ssx-ease);
}
.company-card:hover, .howit-card:hover { box-shadow: var(--ssx-shadow-lift); }

/* CTA duo cards get an animated aurora highlight. */
.cta-duo__card::after {
    content: '';
    position: absolute;
    inset: -40% -10% auto;
    height: 180%;
    background: radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.35), transparent 60%);
    opacity: 0;
    transition: opacity .4s var(--ssx-ease);
    pointer-events: none;
}
.cta-duo__card:hover::after { opacity: 1; }

/* Respect reduced motion globally for the new layer. */
@media (prefers-reduced-motion: reduce) {
    .ssx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .titleTop h3 span { animation: none !important; }
    .hero-visual .hero-card-top { animation: none !important; }
    .hero-visual .hero-card-bottom { animation: none !important; }
}/* ---------------------------------------------------------------------------
   08  PANEL MOTION (candidate / employer / admin)
   Applied by class, so every existing dashboard gains life without touching
   the individual view files. Safe: purely opacity/transform.
--------------------------------------------------------------------------- */
@keyframes ssx-panel-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Cards, stat tiles and list rows ease in with a gentle stagger. */
.portal-card,
.portal-stat-card,
.portal-welcome,
.portal-pipeline a,
.portal-job-card,
.admin-card,
.admin-stat-card,
.admin-panel {
    animation: ssx-panel-in .55s var(--ssx-ease) both;
}
.portal-stats .portal-stat-card:nth-child(1) { animation-delay: .02s; }
.portal-stats .portal-stat-card:nth-child(2) { animation-delay: .08s; }
.portal-stats .portal-stat-card:nth-child(3) { animation-delay: .14s; }
.portal-stats .portal-stat-card:nth-child(4) { animation-delay: .20s; }
.portal-dash-main .portal-card:nth-child(1) { animation-delay: .05s; }
.portal-dash-main .portal-card:nth-child(2) { animation-delay: .12s; }
.portal-dash-side .portal-card:nth-child(1) { animation-delay: .10s; }
.portal-dash-side .portal-card:nth-child(2) { animation-delay: .16s; }

/* Interactive tiles lift consistently. */
.portal-stat-card,
.portal-card,
.admin-stat-card,
.dashboard-card,
.metric-card {
    transition: transform .3s var(--ssx-ease), box-shadow .3s var(--ssx-ease), border-color .3s var(--ssx-ease);
}
.portal-stat-card:hover,
.admin-stat-card:hover,
.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ssx-shadow-lift);
}

/* Living pipeline bars / progress rings breathe subtly. */
.portal-pipeline a strong { transition: color .25s var(--ssx-ease); }
.portal-pipeline a:hover strong { color: var(--ss-primary, #d42a1f); }

/* Panel page titles get the animated accent underline on hover-free load. */
.portal-page-title { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .portal-card,
    .portal-stat-card,
    .portal-welcome,
    .portal-pipeline a,
    .portal-job-card,
    .admin-card,
    .admin-stat-card,
    .admin-panel {
        animation: none !important;
    }
}/* ===========================================================================
   09  BROWSE CATEGORIES — sector spotlight rotator
   Cleanly partitioned two-column slide: LEFT a light-weight JPG photo, RIGHT
   the descriptive copy (eyebrow, title, lead, popular roles, actions). Slides
   auto-rotate every 2.5s (driven by sunstack-ui-v3.js). Presentation only.
   (Replaces the earlier oversized-GIF carousel.)
=========================================================================== */
.ssx-sector {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* --- Tabs: one pill per sector, with a progress bar on the active tab --- */
.ssx-sector__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.ssx-sector__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 14px;
    border: 1px solid #e4e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: color .3s var(--ssx-ease), border-color .3s var(--ssx-ease), box-shadow .3s var(--ssx-ease), transform .3s var(--ssx-ease);
}
.ssx-sector__tab i { color: var(--jp-red, #d42a1f); font-size: .95rem; }
.ssx-sector__tab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 23, 42, .10); }
.ssx-sector__tab.is-active {
    color: #ffffff;
    border-color: transparent;
    background: var(--ssx-grad-a);
    box-shadow: 0 14px 30px rgba(47, 95, 220, .28);
}
.ssx-sector__tab.is-active i { color: #ffffff; }

/* Traveling progress bar that fills for the slide duration (2.5s). */
.ssx-sector__tab-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: rgba(255, 255, 255, .85);
    border-radius: 999px;
    pointer-events: none;
}
.ssx-sector__tab.is-active .ssx-sector__tab-bar {
    animation: ssx-tab-fill var(--ssx-sector-interval, 1800ms) linear forwards;
}
@keyframes ssx-tab-fill {
    from { width: 0; }
    to   { width: 100%; }
}

/* --- Stage: the slide deck, one visible at a time --- */
.ssx-sector__stage {
    position: relative !important;
    display: block !important;
    min-height: clamp(400px, 46vw, 500px);
}
.ssx-sector__slide {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 0;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .55s var(--ssx-ease), transform .55s var(--ssx-ease), visibility .55s;
}
.ssx-sector__slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
    pointer-events: auto;
    z-index: 2;
}
.ssx-sector__slide:not(.is-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- LEFT: image panel (fixed ratio, no stretch) --- */
.ssx-sector__media {
    position: relative !important;
    min-height: clamp(320px, 44vw, 500px);
    height: 100%;
    background: #eef2f7;
    overflow: hidden;
}
/* `contain` keeps the whole poster visible — the title text baked into these
   sector images is never cropped off at the edges. The panel behind it is a
   soft gradient so the letterboxing reads as intentional. */
.ssx-sector__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform .8s var(--ssx-ease);
}
.ssx-sector__slide.is-active .ssx-sector__media img { transform: scale(1.015); }
.ssx-sector__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 23, 42, .10) 0%, rgba(15, 23, 42, .42) 100%);
    pointer-events: none;
}
.ssx-sector__badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #17201e;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .20);
    backdrop-filter: blur(4px);
}
.ssx-sector__badge i { color: var(--jp-red, #d42a1f); }

/* --- RIGHT: descriptive copy panel --- */
.ssx-sector__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: clamp(24px, 3.4vw, 46px);
}
.ssx-sector__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(47, 95, 220, .10);
    color: #2f5fdc;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ssx-sector__eyebrow i { font-size: .85rem; }
.ssx-sector__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    font-weight: 800;
    color: #17201e;
    letter-spacing: -.02em;
    line-height: 1.12;
}
.ssx-sector__lead {
    margin: 0;
    color: #55606b;
    font-size: clamp(.95rem, 1.15vw, 1.04rem);
    line-height: 1.65;
}
.ssx-sector__roles-label {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-top: 4px;
}
.ssx-sector__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ssx-sector__roles li { margin: 0; }
.ssx-sector__roles a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #e4e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .25s var(--ssx-ease), border-color .25s var(--ssx-ease), background .25s var(--ssx-ease), transform .25s var(--ssx-ease);
}
.ssx-sector__roles a i { color: #22c55e; font-size: .8rem; }
.ssx-sector__roles a:hover {
    color: var(--jp-red, #d42a1f);
    border-color: var(--jp-red, #d42a1f);
    background: #fff5f3;
    transform: translateY(-2px);
}
.ssx-sector__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 6px;
}
.ssx-sector__actions .btn { display: inline-flex; align-items: center; gap: 9px; }
.ssx-sector__link {
    color: #2f5fdc;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .25s var(--ssx-ease), color .25s var(--ssx-ease);
}
.ssx-sector__link:hover { color: var(--jp-red, #d42a1f); border-bottom-color: var(--jp-red, #d42a1f); }

@media (max-width: 991.98px) {
    .ssx-sector__stage { min-height: clamp(560px, 130vw, 700px); }
    .ssx-sector__slide { grid-template-columns: 1fr !important; grid-template-rows: 280px auto; }
    .ssx-sector__media { min-height: 280px; }
}
@media (max-width: 575.98px) {
    .ssx-sector__stage { min-height: 700px; }
    .ssx-sector__tab { padding: 10px 15px 12px; font-size: .84rem; }
    .ssx-sector__roles { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .ssx-sector__slide { transition: none !important; }
    .ssx-sector__tab.is-active .ssx-sector__tab-bar { animation: none !important; width: 100%; }
}

/* ===========================================================================
   10  POPULAR INDUSTRIES — job-style card grid with image icons
   Each tile is a card: a real industry photo on top, the industry name and an
   open-jobs count below. Cards flow side-by-side in an auto-fitting grid.
=========================================================================== */
.ssx-ind-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px;
    margin-top: 8px;
}
.ssx-ind-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
    transition: transform .3s var(--ssx-ease), box-shadow .3s var(--ssx-ease), border-color .3s var(--ssx-ease);
}
.ssx-ind-card:hover {
    transform: translateY(-5px);
    border-color: var(--jp-red, #d42a1f);
    box-shadow: var(--ssx-shadow-lift);
}
.ssx-ind-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f7;
}
.ssx-ind-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s var(--ssx-ease);
}
.ssx-ind-card:hover .ssx-ind-card__media img { transform: scale(1.07); }
.ssx-ind-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .45) 100%);
    pointer-events: none;
}
.ssx-ind-card__badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #17201e;
    font-size: .74rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
    backdrop-filter: blur(4px);
}
.ssx-ind-card__foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px 16px 17px;
}
.ssx-ind-card__name {
    font-size: .97rem;
    font-weight: 800;
    color: #17201e;
    line-height: 1.3;
}
.ssx-ind-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    color: #2f5fdc;
    transition: color .25s var(--ssx-ease);
}
.ssx-ind-card__cta i { transition: transform .25s var(--ssx-ease); }
.ssx-ind-card:hover .ssx-ind-card__cta { color: var(--jp-red, #d42a1f); }
.ssx-ind-card:hover .ssx-ind-card__cta i { transform: translateX(4px); }

@media (max-width: 1199.98px) {
    .ssx-ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767.98px) {
    .ssx-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; }
}
@media (max-width: 479.98px) {
    .ssx-ind-grid { grid-template-columns: 1fr !important; }
}

/* ===========================================================================
   11  FEATURED JOBS — real card grid (side-by-side, evenly spaced)
=========================================================================== */
.ssx-job-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px;
    align-items: stretch;
}
.ssx-fjob {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: 0;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: transform .32s var(--ssx-ease), box-shadow .32s var(--ssx-ease), border-color .32s var(--ssx-ease);
}
.ssx-fjob:hover {
    transform: translateY(-6px);
    border-color: var(--jp-red, #d42a1f);
    box-shadow: var(--ssx-shadow-lift);
}
/* Card image header — same media treatment as the Popular Industries cards. */
.ssx-fjob__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eef2f7;
}
.ssx-fjob__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s var(--ssx-ease);
}
.ssx-fjob:hover .ssx-fjob__media img { transform: scale(1.06); }
.ssx-fjob__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .05) 0%, rgba(15, 23, 42, .55) 100%);
    pointer-events: none;
}
.ssx-fjob__cat {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(23, 32, 30, .72);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(3px);
}
.ssx-fjob__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}
.ssx-fjob__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ssx-fjob__logo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 3px solid #ffffff;
    border-radius: 13px;
    background: #f4f6fb;
    overflow: hidden;
    font-weight: 800;
    color: #2f5fdc;
    font-size: 1.05rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}
.ssx-fjob__logo img { width: 100%; height: 100%; object-fit: contain; }
.ssx-fjob__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--jp-red, #d42a1f);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
}
.ssx-fjob__title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.3;
}
.ssx-fjob__title a { color: #17201e; text-decoration: none; transition: color .25s var(--ssx-ease); }
.ssx-fjob__title a:hover { color: var(--jp-red, #d42a1f); }
.ssx-fjob__company { font-size: .88rem; color: #64748b; font-weight: 600; }
.ssx-fjob__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: #6b7686;
}
.ssx-fjob__meta li { display: inline-flex; align-items: center; gap: 7px; }
.ssx-fjob__meta i { color: #94a3b8; }
.ssx-fjob__tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f4f6fb;
    color: #475569;
    font-size: .74rem;
    font-weight: 700;
}
.ssx-fjob__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.ssx-fjob__salary { font-size: .86rem; font-weight: 800; color: #17201e; }
.ssx-fjob__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid #3b6ef6;
    border-radius: 999px;
    background: #ffffff;
    background-image: none;
    color: #3b6ef6;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: none;
    transition: background .25s var(--ssx-ease), color .25s var(--ssx-ease), border-color .25s var(--ssx-ease);
}
.ssx-fjob__btn i { font-size: .72rem; transition: transform .25s var(--ssx-ease); }
.ssx-fjob__btn:hover,
.ssx-fjob__btn:focus-visible {
    background: #f4f7ff;
    color: #2f5fdc;
    border-color: #2f5fdc;
    filter: none;
    box-shadow: none;
}
.ssx-fjob__btn:hover i,
.ssx-fjob__btn:focus-visible i { transform: translateX(3px); }

/* Homepage section titles keep the coral accent from the landing design.
   Buttons and the page theme stay blue. */
body.portal-body:has(.hero-section) .titleTop h3 span,
body.portal-body:has(.hero-section) .titleTop .subtitle {
    color: #d42a1f !important;
}

@media (max-width: 1023.98px) {
    .ssx-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 639.98px) {
    .ssx-job-grid { grid-template-columns: 1fr !important; gap: 16px; }
}

/* ===========================================================================
   12  NAVIGATION BRAND — "SunStack" text lockup (replaces template logo PNG)
=========================================================================== */
.tpl-header .navbar-brand.ssx-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: .6rem;
    padding: 0 !important;
    margin-right: 0;
    text-decoration: none;
}
.ssx-brand__mark {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    /* Keep the mark solid red; the wordmark carries the red/blue split. */
    background: #d62828 !important;
    background-color: #d62828 !important;
    background-image: none !important;
    color: #ffffff;
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: -.02em;
    box-shadow: 0 10px 22px rgba(212, 42, 31, .30);
}
.ssx-brand__mark svg { display: block; width: 62%; height: 62%; }
.ssx-brand__text {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #d62828;
    -webkit-text-fill-color: #d62828;
    line-height: 1;
}
.ssx-brand__text span {
    color: #2563eb;
    -webkit-text-fill-color: #2563eb;
}
.ssx-brand:hover .ssx-brand__mark { transform: rotate(-4deg); transition: transform .25s var(--ssx-ease); }
@media (max-width: 575.98px) {
    .ssx-brand__text { font-size: 1.2rem; }
    .ssx-brand__mark { width: 2.1rem; height: 2.1rem; font-size: .78rem; }
}/* ===========================================================================
   13  HEADER LAYOUT — wider menu bar, lit surface, tighter top space
   The top bar is stretched a little wider than the default Bootstrap container,
   given a soft "lit from above" highlight, and trimmed vertically so the page
   starts closer to the top. The inner content container is left as-is so page
   sections stay aligned.
=========================================================================== */
.tpl-header .main-navbar .container {
    max-width: 1400px;
    width: 100%;
    padding-left: clamp(16px, 3vw, 34px);
    padding-right: clamp(16px, 3vw, 34px);
}
.tpl-header .main-navbar {
    padding-top: 6px;
    padding-bottom: 6px;
}
@media (min-width: 992px) {
    .tpl-header .main-navbar { padding-top: 5px; padding-bottom: 5px; }
}
/* Lit-up header surface: a bright wash from the top edge plus a soft glow, so the
   top menu reads as lit rather than flat white. */
.tpl-header,
.tpl-header .main-navbar {
    background:
        radial-gradient(120% 160% at 50% -40%, rgba(59, 110, 246, 0.10) 0%, rgba(59, 110, 246, 0) 62%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}
.tpl-header {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    position: relative;
}
/* The bright highlight along the header's top edge — the "lit up" cue. */
.tpl-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--jp-red), #ff8e76, var(--jp-red), transparent);
    opacity: 0.9;
    pointer-events: none;
    z-index: 3;
}
/* Trim the homepage's oversized top gap under the header (menu sits higher). */
.hero-section { padding-top: 24px !important; }
@media (max-width: 767.98px) {
    .hero-section { padding-top: 16px !important; }
}/* ===========================================================================
   14  FOOTER BRAND — reuse the header SunStack lockup on the white footer
=========================================================================== */
.footerWrap .ft-logo { margin-bottom: 14px; }
.footerWrap .ssx-brand--footer { gap: .55rem; text-decoration: none; }
.footerWrap .ssx-brand--footer .ssx-brand__text {
    font-size: 1.35rem;
    color: #d62828;
    -webkit-text-fill-color: #d62828;
}
.footerWrap .ssx-brand--footer .ssx-brand__text span {
    color: #2563eb;
    -webkit-text-fill-color: #2563eb;
}
.footerWrap .ssx-brand--footer:hover .ssx-brand__mark { transform: rotate(-4deg); transition: transform .25s var(--ssx-ease); }