/* ==========================================================================
   UNIVERSITY OF SUNDERLAND — EMPLOYABILITY AND ENTERPRISE HUB
   Student home pane — Custom Style
   Everything pane-specific is scoped beneath .tc-student-home-pane
   ========================================================================== */

/* This @import must sit at the very top of the Custom Style field. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. PANE SHELL AND BRAND TOKENS
   -------------------------------------------------------------------------- */
.tc-student-home-pane {
    --uos-blue: #0069fa;
    --uos-lime: #cfff75;
    --uos-ink: #17191C;
    --uos-pink: #f73363;
    --uos-sky: #42abe8;
    --uos-orange: #ff7533;
    --uos-purple: #7b2cbf;
    --uos-yellow: #ffb814;
    --uos-line: #e4e8ef;
    --uos-muted: #5a6473;
    --uos-tint: #f2f7ff;
    --uos-accent: #0069fa;

    font-family: 'Poppins', sans-serif;
    color: var(--uos-ink);
    /* 1040px is deliberate, not arbitrary: four 250px columns plus gaps need
       1048px, so this ceiling makes a ragged four-across row impossible. Six
       cards then always divide evenly — 1, 2 or 3 columns, never an orphan. */
    max-width: 1040px;
    margin: 0 auto;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

/* Accent modifiers — set the card keyline colour only. Body copy and CTAs
   always stay blue or charcoal so colour contrast never depends on the accent. */
.tc-student-home-pane .uos-accent-blue   { --uos-accent: #0069fa; }
.tc-student-home-pane .uos-accent-lime   { --uos-accent: #cfff75; }
.tc-student-home-pane .uos-accent-pink   { --uos-accent: #f73363; }
.tc-student-home-pane .uos-accent-sky    { --uos-accent: #42abe8; }
.tc-student-home-pane .uos-accent-purple { --uos-accent: #7b2cbf; }
.tc-student-home-pane .uos-accent-orange { --uos-accent: #ff7533; }
.tc-student-home-pane .uos-accent-yellow { --uos-accent: #ffb814; }
.tc-student-home-pane .uos-accent-ink    { --uos-accent: #17191C; }

.tc-student-home-pane .uos-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Visible keyboard focus everywhere in the pane. */
.tc-student-home-pane a:focus-visible,
.tc-student-home-pane button:focus-visible,
.tc-student-home-pane summary:focus-visible {
    outline: 3px solid #17191C;
    outline-offset: 2px;
    border-radius: 6px;
}
.tc-student-home-pane .uos-hero a:focus-visible,
.tc-student-home-pane .uos-hero button:focus-visible,
.tc-student-home-pane .uos-hero summary:focus-visible {
    outline-color: #ffffff;
}

/* --------------------------------------------------------------------------
   2. LAYOUT GRID
   Deliberately NOT Bootstrap's .row / .col-*. Those breakpoints measure the
   viewport, but this pane sits in a dashboard column that is far narrower than
   the viewport, so col-lg-4 would force three ~160px columns into a ~520px
   pane. auto-fit + minmax measures the pane itself and picks the column count
   that actually fits, so the same markup works in a narrow or a full-width pane.

   IMPORTANT: use ONE grid for all six items, never one grid per visual row.
   Separate three-item grids leave an orphan card whenever the pane resolves to
   two columns, which reads as a broken layout. A single grid reflows the items
   continuously and keeps every row full.
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

/* Caps the grid at two columns however wide the pane gets, by making each
   column at least half the available width. Used where the item count divides
   by 2 but not by 3, so a third column would leave a ragged row. */
.tc-student-home-pane .uos-grid-duo {
    grid-template-columns: repeat(auto-fit, minmax(max(250px, (100% - 16px) / 2), 1fr));
}

/* A card that spans the full width of the grid, whatever the column count. */
.tc-student-home-pane .uos-card-wide { grid-column: 1 / -1; }

.tc-student-home-pane .uos-mobile-set > * { margin-bottom: 16px; }
.tc-student-home-pane .uos-mobile-set > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. RESPONSIVE CONTENT SETS (mobile-first)
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-desktop-set { display: none; }
.tc-student-home-pane .uos-mobile-set  { display: block; }

@media (min-width: 768px) {
    .tc-student-home-pane .uos-desktop-set { display: block; }
    .tc-student-home-pane .uos-mobile-set  { display: none; }
}

/* --------------------------------------------------------------------------
   4. HERO
   The sparks graphic is applied as a background-image (never an <img>) and is
   layered under a brand gradient so the text always keeps its contrast.
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-hero {
    /* Stacking context so the open "My Stuff" panel sits above the cards
       below, which lift on hover and would otherwise paint over it. */
    position: relative;
    z-index: 10;
    border-radius: 16px;
    padding: 24px 22px;
    margin-bottom: 20px;
    color: #ffffff;
    background-color: #0069fa !important;
    background-image:
        linear-gradient(150deg, rgba(0,105,250,.98) 0%, rgba(0,105,250,.94) 58%, rgba(0,105,250,.62) 100%),
        url('https://cdn.groupgti.com/unlayer/ul8009g9t9i94007muadib91/1773744597981-Corner-Sparks-green.png') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, right bottom !important;
    background-size: cover, auto 44% !important;
    box-shadow: 0 10px 30px rgba(0,105,250,.18);
}

.tc-student-home-pane .uos-hero-startup {
    background-color: #17191C !important;
    background-image:
        linear-gradient(150deg, rgba(23,25,28,.98) 0%, rgba(23,25,28,.94) 58%, rgba(23,25,28,.62) 100%),
        url('https://cdn.groupgti.com/unlayer/ul8009g9t9i94007muadib91/1773744597981-Corner-Sparks-green.png') !important;
    box-shadow: 0 10px 30px rgba(23,25,28,.22);
}

.tc-student-home-pane .uos-hero-inner { max-width: 640px; }

/* --- "My Stuff" menu ---
   A native <details>/<summary>, so it opens, closes and takes keyboard focus
   with no JavaScript at all. The script only adds outside-click and Escape
   closing on top; strip the script and this still works.
   It shares the heading's row rather than being absolutely positioned, so it
   can never overlap a hero heading that wraps to two lines. */
/* No flex-wrap here on purpose. Flex breaks lines from each item's basis
   BEFORE it shrinks anything, so allowing wrap drops the button onto a row of
   its own the moment the heading is wide — which is the dead space we removed.
   Kept on one line, the heading shrinks and wraps its own text instead, and
   the button stays put on the right. */
.tc-student-home-pane .uos-hero-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tc-student-home-pane .uos-hero-head .uos-hero-title {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-student-home-pane .uos-mystuff {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    /* Nudges the pill down so it sits optically level with the cap height of
       the heading beside it, rather than with its taller line box. */
    margin-top: 4px;
}

.tc-student-home-pane .uos-mystuff-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 8px 16px;
    /* Matches the hero buttons: white on blue, scrim on charcoal (below). */
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    color: #0069fa;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Remove the default disclosure triangle in every engine. */
.tc-student-home-pane .uos-mystuff-toggle::-webkit-details-marker { display: none; }
.tc-student-home-pane .uos-mystuff-toggle::marker { content: ''; }

.tc-student-home-pane .uos-mystuff-toggle:hover {
    background: #cfff75;
    color: #17191C;
    border-color: #cfff75;
}

/* Charcoal hero: scrim, matching its buttons. */
.tc-student-home-pane .uos-hero-startup .uos-mystuff-toggle {
    background: rgba(23,25,28,.65);
    color: #ffffff;
    border-color: rgba(255,255,255,.85);
}
.tc-student-home-pane .uos-hero-startup .uos-mystuff-toggle:hover {
    background: #ffffff;
    color: #17191C;
    border-color: #ffffff;
}

.tc-student-home-pane .uos-mystuff-chevron {
    font-size: .65rem;
    transition: transform .2s ease;
}
.tc-student-home-pane .uos-mystuff[open] .uos-mystuff-chevron { transform: rotate(180deg); }

.tc-student-home-pane .uos-mystuff-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 232px;
    max-width: min(280px, 78vw);
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--uos-line);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(23,25,28,.22);
}

/* Flex so the count pill can sit hard right. The label is a bare text node,
   which becomes an anonymous flex item — no markup change needed to add it. */
.tc-student-home-pane .uos-mystuff-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.35;
    color: #17191C !important;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.tc-student-home-pane .uos-mystuff-link:hover,
.tc-student-home-pane .uos-mystuff-link:focus {
    background: var(--uos-tint);
    color: #0069fa !important;
}

/* Count pill, injected by the pane script from the platform's own roundel
   counts. Solid brand blue rather than alert red: these are totals of open
   items, not warnings. White on #0069fa measures 4.77:1, clear of the 4.5:1
   needed at this size. Carrying its own background means the row's hover tint
   cannot change its contrast. */
.tc-student-home-pane .uos-mystuff-count {
    flex-shrink: 0 !important;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #0069fa;
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.tc-student-home-pane .uos-hero-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(1.6rem, 5vw, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
}

.tc-student-home-pane .uos-mark {
    background: #cfff75;
    color: #17191C !important;
    padding: 0 10px;
    border-radius: 6px;
    display: inline-block;
}

.tc-student-home-pane .uos-hero-text {
    font-size: .95rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.92) !important;
    margin: 0 0 18px 0 !important;
    max-width: 50ch;
}

.tc-student-home-pane .uos-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tc-student-home-pane .uos-hero-actions .uos-btn {
    flex: 0 1 auto;
    min-width: 0;
}

@media (min-width: 768px) {
    .tc-student-home-pane .uos-hero {
        padding: 32px 34px;
        border-radius: 20px;
        margin-bottom: 24px;
        background-image:
            linear-gradient(100deg, rgba(0,105,250,.98) 0%, rgba(0,105,250,.94) 52%, rgba(0,105,250,.35) 100%),
            url('https://cdn.groupgti.com/unlayer/ul8009g9t9i94007muadib91/1773744597981-Corner-Sparks-green.png') !important;
        background-size: cover, auto 46% !important;
    }
    .tc-student-home-pane .uos-hero-startup {
        background-image:
            linear-gradient(100deg, rgba(23,25,28,.98) 0%, rgba(23,25,28,.94) 52%, rgba(23,25,28,.35) 100%),
            url('https://cdn.groupgti.com/unlayer/ul8009g9t9i94007muadib91/1773744597981-Corner-Sparks-green.png') !important;
    }
    .tc-student-home-pane .uos-hero-text { font-size: 1rem !important; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS AND LINK CALLS TO ACTION
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-family: 'Poppins', sans-serif !important;
    font-size: .875rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 2px solid transparent;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.tc-student-home-pane .uos-btn:hover { transform: translateY(-2px); }

.tc-student-home-pane .uos-btn-primary { background: #0069fa; color: #ffffff !important; }
.tc-student-home-pane .uos-btn-primary:hover { background: #0053c7; }

.tc-student-home-pane .uos-btn-ink { background: #17191C; color: #ffffff !important; }
.tc-student-home-pane .uos-btn-ink:hover { background: #000000; }

.tc-student-home-pane .uos-btn-outline {
    background: transparent;
    color: #0069fa !important;
    border-color: #0069fa;
}
.tc-student-home-pane .uos-btn-outline:hover { background: #0069fa; color: #ffffff !important; }

/* Every hero action shares this class so each hero can style them uniformly —
   there is no primary/secondary split.

   BLUE HERO: solid white pills. Being opaque, the label can never be affected
   by whatever sits behind it, which is the failure the old transparent ghost
   buttons had (1.86:1 over the sparks graphic). Blue on white is 4.77:1. */
.tc-student-home-pane .uos-btn-ghost {
    background: #ffffff;
    color: #0069fa !important;
    border-color: #ffffff;
}
.tc-student-home-pane .uos-btn-ghost:hover {
    background: #cfff75;
    color: #17191C !important;
    border-color: #cfff75;
}

/* CHARCOAL HERO: the same actions take a dark scrim, which reads as a clean
   outline against the charcoal and measures 8.87:1 label / 3.63:1 edge even
   where a button crosses the sparks graphic. */
.tc-student-home-pane .uos-hero-startup .uos-btn-ghost {
    background: rgba(23,25,28,.65);
    color: #ffffff !important;
    border-color: rgba(255,255,255,.85);
}
.tc-student-home-pane .uos-hero-startup .uos-btn-ghost:hover {
    background: #ffffff;
    color: #17191C !important;
    border-color: #ffffff;
}

.tc-student-home-pane .uos-btn-block { width: 100%; }
.tc-student-home-pane .uos-btn-sm { font-size: .78rem !important; padding: 9px 12px !important; }

.tc-student-home-pane .uos-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
.tc-student-home-pane .uos-btn-row .uos-btn { flex: 1 1 120px; }

/* Quiet arrow-link call to action used on most cards. */
.tc-student-home-pane .uos-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 800;
    color: #0069fa !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color .2s ease;
}
.tc-student-home-pane .uos-link:hover,
.tc-student-home-pane .uos-link:focus { border-bottom-color: #0069fa; }
.tc-student-home-pane .uos-arrow { flex-shrink: 0 !important; transition: transform .2s ease; }
.tc-student-home-pane .uos-link:hover .uos-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. CARDS
   No coloured banner blocks — a single 4px keyline carries the colour coding.
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--uos-line);
    border-top: 4px solid var(--uos-accent);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23,25,28,.04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tc-student-home-pane .uos-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(23,25,28,.10);
    border-color: var(--uos-accent);
}
.tc-student-home-pane .uos-card:focus-within {
    border-color: var(--uos-accent);
    box-shadow: 0 14px 30px rgba(23,25,28,.10);
}

.tc-student-home-pane .uos-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px;
}

.tc-student-home-pane .uos-kicker {
    display: block;
    flex-shrink: 0 !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uos-muted) !important;
    margin: 0 0 8px 0 !important;
}

.tc-student-home-pane .uos-card-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    color: #17191C !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.tc-student-home-pane .uos-card-text {
    font-size: .875rem !important;
    line-height: 1.5 !important;
    color: var(--uos-muted) !important;
    margin: 0 0 16px 0 !important;
}

.tc-student-home-pane .uos-card-cta { margin-top: auto; }

/* Slightly roomier once the pane itself has space for wide columns. */
@media (min-width: 1200px) {
    .tc-student-home-pane .uos-card-body { padding: 22px; }
    .tc-student-home-pane .uos-card-title { font-size: 1.12rem !important; }
    .tc-student-home-pane .uos-card-text { font-size: .92rem !important; }
}

/* --- "Up Next" live event feed --- */
.tc-student-home-pane .uos-feed {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.tc-student-home-pane .uos-date {
    display: block;
    flex-shrink: 0 !important;
    background: #cfff75;
    color: #17191C !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 5px 12px !important;
    border-radius: 10px;
    margin: 0 0 16px 0 !important;
}
.tc-student-home-pane .uos-feed-msg {
    font-size: .875rem !important;
    color: var(--uos-muted) !important;
    font-style: italic;
    margin: 0 !important;
}

/* --- Founder spotlight (wide Showcase Reel card) ---
   A port of the standalone banner page into the pane's own design system, so
   it needs no iframe, no second copy of Poppins and no second stylesheet.
   The founder photo is set as a background-image from script, never an <img>,
   so targetconnect cannot hijack its dimensions. */
.tc-student-home-pane .uos-spotlight-layout {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}

.tc-student-home-pane .uos-spotlight-intro {
    display: flex;
    flex-direction: column;
    flex: 1 1 240px;
}

.tc-student-home-pane .uos-spotlight {
    position: relative;
    display: flex;
    flex: 1 1 320px;
}

.tc-student-home-pane .uos-spotlight-link {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    padding: 14px 46px 14px 16px;
    background: #ffffff;
    border: 1px solid var(--uos-line);
    border-left: 4px solid var(--uos-accent);
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tc-student-home-pane .uos-spotlight-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23,25,28,.08);
    border-color: var(--uos-accent);
}

.tc-student-home-pane .uos-spotlight-photo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px !important;
    border-radius: 50%;
    border: 2px solid var(--uos-line);
    background-color: #f2f5f9 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.tc-student-home-pane .uos-spotlight-body {
    min-width: 0;
    transition: opacity .4s ease;
}

.tc-student-home-pane .uos-spotlight-name {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    color: #0069fa;
    line-height: 1.3;
}
.tc-student-home-pane .uos-spotlight-org {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #17191C;
    line-height: 1.3;
}
.tc-student-home-pane .uos-spotlight-quote {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: .8rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--uos-muted);
}

/* Pause control. Required because the spotlight auto-advances: WCAG 2.2.2
   asks for a way to stop content that updates on its own. */
.tc-student-home-pane .uos-spotlight-pause {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--uos-line);
    background: #ffffff;
    color: var(--uos-muted);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.tc-student-home-pane .uos-spotlight-pause:hover {
    background: #17191C;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. QUICK ACCESS TOOLS
   Tool icons are background-images, so targetconnect cannot resize them.
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-tools {
    background: #ffffff;
    border: 1px solid var(--uos-line);
    border-radius: 14px;
    padding: 12px;
}

.tc-student-home-pane .uos-section-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uos-muted) !important;
    margin: 6px 6px 10px 6px !important;
    padding: 0 !important;
}

.tc-student-home-pane .uos-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: background-color .2s ease;
}
.tc-student-home-pane .uos-tool:hover { background: var(--uos-tint); }
.tc-student-home-pane .uos-tool + .uos-tool { margin-top: 2px; }

.tc-student-home-pane .uos-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px !important;
    border-radius: 11px;
    font-size: 1.15rem;
    background-color: #f2f5f9 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
}
.tc-student-home-pane .uos-icon-pathways {
    background-image: url('https://cdn.groupgti.com/targetconnect/hertfordshire/career-set-icon.png') !important;
}
.tc-student-home-pane .uos-icon-shortlist {
    background-image: url('https://cdn.groupgti.com/targetconnect/hertfordshire/shortlist-me-icon.png') !important;
}
.tc-student-home-pane .uos-icon-jobsites {
    background-image: url('https://cdn.groupgti.com/targetconnect/hertfordshire/list-of-job-sites-icon.png') !important;
}

.tc-student-home-pane .uos-tool-text { min-width: 0; }
.tc-student-home-pane .uos-tool-name {
    display: block;
    font-size: .9rem;
    font-weight: 800;
    color: #17191C;
    line-height: 1.3;
}
.tc-student-home-pane .uos-tool-sub {
    display: block;
    font-size: .78rem;
    color: var(--uos-muted);
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   8. MODALS
   -------------------------------------------------------------------------- */
.tc-student-home-pane .uos-modal {
    display: none;
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    padding: 18px;
    overflow-y: auto;
    background-color: rgba(23,25,28,.62);
    backdrop-filter: blur(3px);
}
.tc-student-home-pane .uos-modal.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.tc-student-home-pane .uos-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: auto;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(23,25,28,.35);
}
.tc-student-home-pane .uos-modal-dialog.is-small { max-width: 560px; }

/* Modal cover image, applied as a background so the platform cannot stretch it. */
.tc-student-home-pane .uos-modal-media {
    height: 180px;
    flex-shrink: 0 !important;
    background-color: #17191C !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}
.tc-student-home-pane .uos-media-startup {
    background-image: url('https://cdn.groupgti.com/unlayer/ul8009g9t9i94007muadib91/1789144306638-incubator.jpg') !important;
}

.tc-student-home-pane .uos-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 24px 0 24px;
}
.tc-student-home-pane .uos-modal-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #17191C !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tc-student-home-pane .uos-modal-close {
    margin-left: auto;
    flex: 0 0 40px !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--uos-line);
    background: #ffffff;
    color: var(--uos-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tc-student-home-pane .uos-modal-close:hover {
    background: #17191C;
    color: #ffffff;
    border-color: #17191C;
}

.tc-student-home-pane .uos-modal-body { padding: 16px 24px 24px 24px; }
.tc-student-home-pane .uos-modal-foot { padding: 0 24px 24px 24px; }

.tc-student-home-pane .uos-modal-p {
    font-size: .97rem !important;
    line-height: 1.6 !important;
    color: var(--uos-muted) !important;
    margin: 0 0 14px 0 !important;
}
.tc-student-home-pane .uos-modal-h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #17191C !important;
    margin: 24px 0 10px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid var(--uos-line);
}
.tc-student-home-pane .uos-modal-list {
    font-size: .97rem;
    line-height: 1.6;
    color: var(--uos-muted);
    margin: 0 0 16px 0;
    padding-left: 20px;
}
.tc-student-home-pane .uos-modal-list li { margin-bottom: 8px; }

.tc-student-home-pane .uos-modal-p a,
.tc-student-home-pane .uos-modal-list a {
    color: #0069fa;
    font-weight: 700;
}

.tc-student-home-pane .uos-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tc-student-home-pane .uos-feature-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--uos-line);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--uos-muted);
}
.tc-student-home-pane .uos-feature-list li:last-child { border-bottom: 0; }
.tc-student-home-pane .uos-feature-list strong {
    display: block;
    color: #17191C;
    font-weight: 800;
}

.tc-student-home-pane .uos-modal-quote {
    background: #f7f9fc;
    border-left: 4px solid #cfff75;
    border-radius: 0 10px 10px 0;
    padding: 18px 20px;
    margin: 22px 0;
    font-style: italic;
    font-weight: 600;
    color: #17191C;
}
.tc-student-home-pane .uos-modal-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: 700;
    font-size: .85rem;
    color: #0069fa;
}

.tc-student-home-pane .uos-pill {
    display: inline-block;
    background: #cfff75;
    color: #17191C;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .tc-student-home-pane .uos-modal { padding: 40px 20px; }
    .tc-student-home-pane .uos-modal-media { height: 210px; }
    .tc-student-home-pane .uos-modal-head { padding: 30px 30px 0 30px; }
    .tc-student-home-pane .uos-modal-body { padding: 18px 30px 30px 30px; }
    .tc-student-home-pane .uos-modal-foot { padding: 0 30px 30px 30px; }
    .tc-student-home-pane .uos-modal-title { font-size: 1.7rem !important; }
}

/* Locks background scrolling while a modal is open (set by the pane script). */
body.tc-modal-open { overflow: hidden !important; }

/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tc-student-home-pane .uos-card,
    .tc-student-home-pane .uos-btn,
    .tc-student-home-pane .uos-tool,
    .tc-student-home-pane .uos-arrow,
    .tc-student-home-pane .uos-spotlight-link,
    .tc-student-home-pane .uos-spotlight-body,
    .tc-student-home-pane .uos-mystuff-chevron,
    .tc-student-home-pane .uos-mystuff-link {
        transition: none !important;
    }
    .tc-student-home-pane .uos-card:hover,
    .tc-student-home-pane .uos-btn:hover,
    .tc-student-home-pane .uos-spotlight-link:hover { transform: none !important; }
}

/* ==========================================================================
   10. TARGETCONNECT SYSTEM OVERRIDES (carried over unchanged)
   These must sit outside the pane scope to reach platform markup.
   ========================================================================== */

/* Hides the default Custom Pane title. */
.romeo .dashboard-content .dashboard-custom .card h1.dash-card-header {
    display: none !important;
}

/* Hides the top header bar and the circular nav buttons. */
.dashboard-header,
.dash-cta-deck,
.dash-cta-deck .dash-cta-link {
    display: none !important;
}

/* Dashboard spacing. */
.dashboard-custom { margin-top: 1rem !important; }
.dashboard-feed   { margin-top: 0rem !important; }

/* Lets the student pane grow naturally, protects the employer pane. */
.flex-dash-row .dash-card-custom .card-body {
    max-height: none !important;
    overflow: visible !important;
}

@media (min-width: 992px) {
    .dashboard-content .employer .container .flex-dash-row .dash-card-custom .card-body {
        max-height: 750px !important;
        overflow-y: auto !important;
    }
}

/* ==========================================================================
   11. CARRIED OVER FROM THE PREVIOUS CUSTOM STYLE
   The only rules kept from the old stylesheet: ANG @ GTI's fixes. Everything
   else in that file (login theming, dhx appointment-calendar colours, the
   commented-out blocks) was deliberately dropped.
   NOTE: these must stay BELOW the @import at the top of this file — an
   @import is ignored by the browser if any rule precedes it.
   ========================================================================== */

/** ADDED BY ANG @ GTI - fixing the black gti logo on a dark blue footer background **/
.romeo footer .groupgti {
    background: white;
    padding: .5rem;
    border-radius: 3px;
    }

/************************
GTI - OPERATOR UI
*************************/
.page-operator header .page-brand {
    background: #17191C;
    }
.page-operator header .navbar-toggler {
    color:#fff;
    }
.page-operator header .navbar-toggler:hover, .page-operator header .navbar-toggler:active, .page-operator header .navbar-toggler:focus {
    color:#ffffff6b;
    }
@media (max-width: 992px) {
    header .page-header .header-links .user-details>a,
    header .page-header .header-links .user-details>a .fa-user-circle,
    header .page-header .header-links .beamer_button .fa-stack i    {
        color: #fff;
        }
    }
/************************
END - GTI - OPERATOR UI
*************************/


/************************
GTI/ANG - STUDENT UI - with the darker top banner, the default hover (secondary) for links meant they were invisible.  Updated to use tertiary / orange
*************************/
.romeo .main-header .navbar-cta a:hover, .romeo .main-header .navbar-cta a:focus,
.romeo .main-header .navbar-cta a:hover i, .romeo .main-header .navbar-cta a:focus i {
    color: #e71;
    }
/************************
END - GTI/ANG - STUDENT UI
*************************/