/* =============================================================================
   ClassNews module — Module.css
   Class Recruitment brand pass.
   ---------------------------------------------------------------------------
   All selectors scoped to .classnews. Shared class names left intact so no
   .ascx needs to change.

   Palette:
     Brand purple drives the accent throughout — page identity, primary CTAs,
     focus rings, dates, editor chrome — to stay consistent with the site theme:
       purple bright  #c77dd8
       purple         #7b1fa2
       purple deep    #6b1494
       purple tint    #faf5fb
     Neutrals:
       ink            #110a1f
       muted          #5a4f66
       line           #ece8f0
     Status:
       success        #059669 / #ecfdf5 / #a7f3d0
       error          #dc2626 / #fef2f2 / #fecaca

   Typography:
     Plus Jakarta Sans (display) — headings, buttons, labels, dates
     Inter (body) — form values, article body, table cells
   ============================================================================= */


/* =============================================================================
   Base wrapper
   ============================================================================= */

.classnews {
    padding: 8px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #110a1f;
    box-sizing: border-box;
}

.classnews *,
.classnews *::before,
.classnews *::after {
    box-sizing: border-box;
}


/* =============================================================================
   Shared utilities
   ============================================================================= */

.cn-success {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.cn-error {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.cn-warn {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.cn-muted {
    color: #8a8294;
}


/* =============================================================================
   Shared form controls — inputs, selects, buttons, links
   ============================================================================= */

.cn-input,
.cn-select {
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1.5px solid #ece8f0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: #110a1f;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    line-height: 1.5;
}

.cn-input::placeholder,
.cn-select::placeholder {
    color: #8a8294;
}

.cn-input:focus,
.cn-select:focus {
    outline: none;
    border-color: #7b1fa2;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.12);
}

/* Native select — brand-purple SVG chevron replaces the OS default */
select.cn-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b1fa2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 14px center;
    background-repeat: no-repeat;
    padding-right: 40px;
    cursor: pointer;
}

/* Primary button — brand purple pill */
.cn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid #7b1fa2;
    background: #7b1fa2;
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.cn-btn:hover,
.cn-btn:focus {
    background: #6b1494;
    border-color: #6b1494;
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* Secondary button — ghost purple */
.cn-btn--secondary {
    background: transparent;
    color: #7b1fa2;
    border-color: rgba(123, 31, 162, 0.28);
    font-weight: 600;
}

.cn-btn--secondary:hover,
.cn-btn--secondary:focus {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    color: #7b1fa2;
}

/* Discard button — error red, built on the secondary ghost pill */
.cn-btn--discard {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.28);
}

.cn-btn--discard:hover,
.cn-btn--discard:focus {
    background: rgba(220, 38, 38, 0.06);
    border-color: #dc2626;
    color: #dc2626;
}

/* Preview button — sky-blue accent, distinct from the primary purple CTA */
.cn-btn--preview {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}

.cn-btn--preview:hover,
.cn-btn--preview:focus {
    background: #0369a1;
    border-color: #0369a1;
    color: #fff;
}

/* Small button — same shape, tighter */
.cn-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    background: transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #7b1fa2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.cn-btn-sm:hover,
.cn-btn-sm:focus {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

/* --- Anchor-rendered buttons: pin the rest colour ---------------------------
   asp:HyperLink and asp:LinkButton both render as <a>, and DNN core's default.css
   sets `a:link, a:visited { color: … }` at specificity (0,1,1). Every rest colour
   above is a single class at (0,1,0): the class count ties at 1, the type-selector
   count breaks it, and the link colour wins. So an <a class="cn-btn"> painted its
   label link-purple on the purple fill at rest, and only snapped to white on hover —
   where `.cn-btn:hover` at (0,2,0) beats `a:hover` again. That's the "+ New Article"
   button on News Admin, and the same trap catches the LinkButtons on NewsEdit.

   Restating each rest colour at :link/:visited lifts it to (0,2,0), so the <a> and
   <input type="submit"> forms of the same button always match. Keep these in the same
   order as the blocks above — base first, variants after — since they all tie at
   (0,2,0) and source order is what separates them. */
.cn-btn:link,
.cn-btn:visited { color: #fff; }

.cn-btn--secondary:link,
.cn-btn--secondary:visited { color: #7b1fa2; }

.cn-btn--discard:link,
.cn-btn--discard:visited { color: #dc2626; }

.cn-btn--preview:link,
.cn-btn--preview:visited { color: #fff; }

.cn-btn-sm:link,
.cn-btn-sm:visited { color: #7b1fa2; }

/* Link-style button — text-only action */
.cn-link {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #7b1fa2;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(123, 31, 162, 0.28);
    cursor: pointer;
    transition: border-color 180ms ease;
}

.cn-link:hover,
.cn-link:focus {
    color: #7b1fa2;
    border-bottom-color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

/* Mini button — inline "+ Add" action inside labels */
.cn-mini-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #7b1fa2;
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.cn-mini-btn:hover,
.cn-mini-btn:focus {
    background: rgba(123, 31, 162, 0.08);
    color: #6b1494;
    text-decoration: none;
    outline: none;
}

/* Input + inline button — used in the editor for the "Browse" file picker */
.cn-input-with-btn {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.cn-input-with-btn .cn-input {
    flex: 1 1 auto;
    min-width: 0;
}


/* =============================================================================
   Shared: filter bar (public NewsSummary uses grid; admin NewsList overrides)
   ============================================================================= */

.cn-filters {
    padding: 20px 24px;
    margin-bottom: 24px;
    border-radius: 16px;
    border: 1.5px solid rgba(123, 31, 162, 0.18);
    background: #faf5fb;
}

.cn-filterrow {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.cn-filteractions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (min-width: 600px) {
    .cn-filterrow {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* =============================================================================
   Shared: tag + category pills
   ============================================================================= */

.cn-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1.5px solid #ece8f0;
    background: #faf8fc;
    color: #5a4f66;
    margin-right: 4px;
    margin-bottom: 4px;
}

.cn-category {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    background: #faf5fb;
    color: #7b1fa2;
    margin-right: 6px;
    margin-bottom: 4px;
}


/* =============================================================================
   Public: Featured News section head (FeaturedNews.ascx)
   ============================================================================= */

.cn-section-head {
    margin-bottom: 12px;
}

.cn-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #111;
}


/* =============================================================================
   Public: article list (NewsSummary) + Featured News (FeaturedNews)
   ============================================================================= */

.classnews-summary {
    padding: 8px 0;
}

.cn-empty {
    padding: 32px 28px;
    border-radius: 16px;
    border: 1.5px solid #ece8f0;
    background: #faf8fc;
    color: #5a4f66;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
}

.cn-empty p {
    margin: 0;
}

/* Notice shown when a legacy/removed article URL redirects to the list */
.cn-notice {
    padding: 14px 20px;
    border-radius: 12px;
    border: 1.5px solid #f0e4d4;
    background: #fdf8f1;
    color: #7a5c3a;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
}

.cn-notice p {
    margin: 0;
}

/* Card grid — 1 column mobile, 2 tablet, 3 desktop */
.cn-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

@media (min-width: 640px) {
    .cn-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .cn-cards {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Card wrapper — holds the anchor + admin inline edit shortcut */
.cn-card-wrap {
    position: relative;
}

/* Card — the article link */
.cn-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    border: 1.5px solid #ece8f0;
    background: #fff;
    overflow: hidden;
    height: 100%;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.cn-card:hover,
.cn-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(123, 31, 162, 0.12);
    border-color: rgba(123, 31, 162, 0.35);
    text-decoration: none;
    color: inherit;
    outline: none;
}

/* Hero image — same 1000:715 shape the crop editor selects in (NewsEdit.ascx ASPECT_W/H) and
   the article detail hero uses, so the area the author chose is the area the card shows.
   The editor fits every upload to that shape, so `cover` normally scales without trimming
   anything; it is here as the safety net for articles imported before the editor existed, which
   fill the frame rather than letterboxing and leaving cards visually uneven. */
.cn-card__hero {
    width: 100%;
    aspect-ratio: 1000 / 715;
    overflow: hidden;
    background: #faf5fb;
    flex-shrink: 0;
    position: relative;
}

.cn-card__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-card:hover .cn-card__hero img,
.cn-card:focus .cn-card__hero img {
    transform: scale(1.03);
}

/* Card body */
.cn-card__body {
    flex: 1 1 auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Date badge — big day, small month, sits at the top of card body */
.cn-card__date {
    text-align: center;
    line-height: 1;
    margin-bottom: 4px;
}

.cn-date-day {
    display: block;
    text-align: center;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #7b1fa2;
    line-height: 1;
}

.cn-date-month {
    display: block;
    text-align: center;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a4f66;
    margin-top: 3px;
}

/* Title */
.cn-card__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #110a1f;
    line-height: 1.3;
    transition: color 180ms ease;
}

.cn-card:hover .cn-card__title,
.cn-card:focus .cn-card__title {
    color: #7b1fa2;
}

/* Summary */
.cn-card__summary {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #5a4f66;
    line-height: 1.55;
    flex: 1 1 auto;
    margin: 4px 0 0;
}

/* Author byline */
.cn-card__author {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #8a8294;
    margin-top: 2px;
}

/* Tags row */
.cn-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 6px;
}

/* CTA row — "Read more →" at the bottom of the card */
.cn-card__cta {
    padding: 14px 22px;
    border-top: 1px solid #ece8f0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #7b1fa2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 180ms ease;
}

.cn-card__cta::after {
    content: "→";
    font-size: 16px;
    line-height: 1;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-card:hover .cn-card__cta,
.cn-card:focus .cn-card__cta {
    background: #faf5fb;
    color: #4338ca;
}

.cn-card:hover .cn-card__cta::after,
.cn-card:focus .cn-card__cta::after {
    transform: translateX(4px);
}

/* Admin inline edit shortcut — floats over the card top-right */
.cn-card-edit {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: #fff;
    color: #7b1fa2;
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(31, 21, 48, 0.08);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cn-card-edit:hover,
.cn-card-edit:focus {
    background: #7b1fa2;
    color: #fff;
    border-color: #7b1fa2;
    text-decoration: none;
    outline: none;
}


/* =============================================================================
   Public: article detail (NewsDetails)
   ============================================================================= */

.classnews-detail {
    padding: 0;
}

/* Shown only when the article is viewed via the admin "Preview" button */
.cn-preview-banner {
    padding: 12px 16px;
    margin: 8px;
    border-radius: 12px;
    border: 1.5px solid rgba(2, 132, 199, 0.28);
    background: #f0f9ff;
    color: #0c4a6e;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    text-align: center;
}

/* Hero image — landscape banner above the article.
   Fixed 1000:715 shape (matching the crop editor's ASPECT_W/ASPECT_H in NewsEdit.ascx and
   .cn-card__hero above — keep the three in step). Capped a little inside .cn-article's 820px so
   the taller shape doesn't dominate the first screen, and kept at 90% below that so it stays
   inset on narrow screens.
   `cover` for the same reason as the cards: the editor fits every upload to this shape, so it
   normally scales without trimming, and pre-editor imports fill the frame instead of barring. */
.cn-detail-hero {
    width: 90%;
    max-width: 738px;   /* 820 × 0.9 → renders 738 × 528 */
    margin: 0 auto;
    aspect-ratio: 1000 / 715;
    overflow: hidden;
    background: #faf5fb;
    margin-bottom: 0;
    border-radius: 20px 20px 0 0;
}

.cn-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Article wrapper */
.cn-article {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 32px;
}

/* Article header */
.cn-article__header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 3px solid #7b1fa2;
}

.cn-detail__categories {
    margin-bottom: 12px;
}

.cn-article__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #110a1f;
    margin: 0 0 12px;
}

@media (max-width: 640px) {
    .cn-article {
        padding: 28px 20px;
    }
    .cn-article__title {
        font-size: 26px;
    }
}

.cn-article__meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #5a4f66;
}

/* Article body — rich HTML from the CKEditor */
.cn-article__body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #3a3345;
    margin-bottom: 32px;
    word-break: break-word;
}

.cn-article__body h1,
.cn-article__body h2,
.cn-article__body h3,
.cn-article__body h4,
.cn-article__body h5,
.cn-article__body h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #110a1f;
    margin-top: 32px;
    margin-bottom: 12px;
}

.cn-article__body h1 { font-size: 30px; }
.cn-article__body h2 { font-size: 26px; }
.cn-article__body h3 { font-size: 22px; }
.cn-article__body h4 { font-size: 19px; }
.cn-article__body h5 { font-size: 17px; }
.cn-article__body h6 { font-size: 16px; }

.cn-article__body p {
    margin: 0 0 18px;
}

.cn-article__body ul,
.cn-article__body ol {
    padding-left: 24px;
    margin: 0 0 18px;
}

.cn-article__body li {
    margin-bottom: 8px;
}

.cn-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 8px 0;
}

.cn-article__body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 18px;
    font-size: 15px;
}

.cn-article__body th,
.cn-article__body td {
    padding: 12px 16px;
    border-bottom: 1px solid #ece8f0;
    text-align: left;
    vertical-align: top;
}

.cn-article__body tr:last-child th,
.cn-article__body tr:last-child td {
    border-bottom: 0;
}

.cn-article__body th {
    background: #faf5fb;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #7b1fa2;
}

.cn-article__body blockquote {
    border-left: 4px solid #7b1fa2;
    padding: 16px 20px;
    margin: 24px 0;
    background: #faf5fb;
    border-radius: 0 12px 12px 0;
    color: #3a3345;
    font-style: italic;
    font-size: 18px;
    line-height: 1.7;
}

.cn-article__body blockquote p {
    margin: 0;
}

.cn-article__body pre {
    background: #faf8fc;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    padding: 16px 20px;
    overflow-x: auto;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
}

.cn-article__body code {
    background: #faf8fc;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}

.cn-article__body pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.cn-article__body a {
    color: #7b1fa2;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(123, 31, 162, 0.35);
    transition: border-color 180ms ease, color 180ms ease;
}

.cn-article__body a:hover,
.cn-article__body a:focus {
    color: #4338ca;
    border-bottom-color: #7b1fa2;
    outline: none;
}

/* Tags at bottom of article */
.cn-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 1px solid #ece8f0;
}


/* =============================================================================
   Public: social share row
   ============================================================================= */

.cn-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    border-top: 1px solid #ece8f0;
    margin-top: 16px;
}

.cn-share__label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5a4f66;
    margin-right: 8px;
}

/* Base share button — pill shape */
.cn-share__btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid #ece8f0;
    background: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #110a1f;
    cursor: pointer;
    line-height: 1.4;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.cn-share__btn:hover,
.cn-share__btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 21, 48, 0.12);
    text-decoration: none;
    color: inherit;
    outline: none;
}

/* Platform-specific colours — kept as brand-recognisable */
.cn-share__btn--whatsapp  { background: #25d366; color: #fff; border-color: #25d366; }
.cn-share__btn--facebook  { background: #1877f2; color: #fff; border-color: #1877f2; }
.cn-share__btn--linkedin  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.cn-share__btn--x         { background: #111;    color: #fff; border-color: #111; }
.cn-share__btn--email     { background: #fff;    color: #110a1f; border-color: #ece8f0; }
.cn-share__btn--copy      { background: #fff;    color: #110a1f; border-color: #ece8f0; }
.cn-share__btn--native    { background: #7b1fa2; color: #fff; border-color: #7b1fa2; }

.cn-share__btn--whatsapp:hover,
.cn-share__btn--facebook:hover,
.cn-share__btn--linkedin:hover,
.cn-share__btn--x:hover,
.cn-share__btn--email:hover,
.cn-share__btn--copy:hover,
.cn-share__btn--native:hover { color: inherit; }
.cn-share__btn--whatsapp:hover { color: #fff; }
.cn-share__btn--facebook:hover { color: #fff; }
.cn-share__btn--linkedin:hover { color: #fff; }
.cn-share__btn--x:hover        { color: #fff; }
.cn-share__btn--native:hover   { color: #fff; }

/* Copy-link toast */
.cn-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 999px;
    background: #110a1f;
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 32px rgba(31, 21, 48, 0.3);
    pointer-events: none;
    white-space: nowrap;
}

/* 404 not-found */
.cn-notfound {
    max-width: 560px;
    margin: 48px auto;
    padding: 32px 36px;
    border-radius: 16px;
    border: 1.5px solid #ece8f0;
    background: #faf8fc;
    text-align: center;
}

.cn-notfound h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #110a1f;
    margin: 0 0 12px;
}

.cn-notfound p {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: #5a4f66;
}

.cn-notfound a {
    color: #7b1fa2;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(123, 31, 162, 0.35);
    transition: border-color 180ms ease;
}

.cn-notfound a:hover { border-bottom-color: #7b1fa2; }


/* =============================================================================
   ADMIN BANNER — shared block. Accent colours passed via inline CSS custom
   properties on the wrapper (--acc-bright, --acc-deep).
   ============================================================================= */
.class-admin-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 24px 32px 32px;
    margin: 0 0 28px;
    background: linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
    color: #fff;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    box-sizing: border-box;
}
.class-admin-banner__body { min-width: 0; }
.class-admin-banner__eyebrow {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acc-bright, #c77dd8);
    margin-bottom: 10px;
}
.class-admin-banner__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    line-height: 1.15;
}
.class-admin-banner__sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 8px 0 0;
    max-width: 640px;
}
.class-admin-banner__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.24);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 180ms ease, border-color 180ms ease;
}
.class-admin-banner__back:hover,
.class-admin-banner__back:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    outline: none;
}
/*
   Text colour is pinned separately from the rule above, and heavily.

   The banner is a dark purple gradient, so this link has to be white. It always
   said `color: #fff` and still rendered purple on the live site. Nothing in this
   stylesheet, in the theme's skin.css or in Portals/0/portal.css targets
   .class-admin-banner__back a second time, so whatever wins the cascade is not
   visible from the repo — which means the safe fix is one that does not need to
   know what it is:

     · `.class-admin-banner a.class-admin-banner__back` is (0,2,1), above any
       single-class or bare-element anchor rule that could plausibly reach it.
     · Every link state is listed, so the colour cannot change with the visitor's
       history or with the mouse button held down.
     · !important as the backstop. This is the same belt-and-braces approach the
       portal stylesheet already uses on the floating action button, and for the
       same reason.

   Same idiom as `.ra-table th a` in RegistrationForm/css/Module.css. If the real
   overriding rule is ever identified, the !important can be dropped.

   Keep this block byte-identical across all five module stylesheets that ship the
   admin banner (JobAdmin, FAQ, ClassNews, CompanyReviews, RegistrationForm) —
   plus DesktopModules/ClassContactForm_V1/css/Module.css on the server, which has
   no source in this repo.
*/
.class-admin-banner a.class-admin-banner__back,
.class-admin-banner a.class-admin-banner__back:link,
.class-admin-banner a.class-admin-banner__back:visited,
.class-admin-banner a.class-admin-banner__back:hover,
.class-admin-banner a.class-admin-banner__back:focus,
.class-admin-banner a.class-admin-banner__back:active {
    color: #fff !important;
    text-decoration: none;
}
.class-admin-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--acc-deep, #7b1fa2);
    z-index: 1;
}
@media (max-width: 640px) {
    .class-admin-banner {
        grid-template-columns: 1fr;
        padding: 20px 20px 24px;
        margin-bottom: 20px;
    }
    .class-admin-banner__back { justify-self: start; }
}


/* =============================================================================
   Admin: list page (NewsList)
   ============================================================================= */

.classnews-adminlist {
    padding: 8px 0;
}

/* Admin filter bar — sky-blue tint to match other admin modules */
.classnews-adminlist .cn-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: #f0f9ff;
    border: 1.5px solid rgba(2, 132, 199, 0.18);
    border-radius: 12px;
}

.classnews-adminlist .cn-filters .cn-input,
.classnews-adminlist .cn-filters .cn-select {
    width: auto;
    flex: 1 1 200px;
    min-width: 0;
    padding: 9px 14px;
    font-size: 14px;
    border-color: rgba(2, 132, 199, 0.22);
}

.classnews-adminlist .cn-filters .cn-input:focus,
.classnews-adminlist .cn-filters .cn-select:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.classnews-adminlist .cn-filters .cn-btn {
    flex: 0 0 auto;
    padding: 9px 20px;
}

/* Status dropdown — narrower, frees up room for the date-range group */
.classnews-adminlist .cn-filters .cn-select--status {
    flex: 0 1 160px;
    min-width: 140px;
}

/* Date range filter — From/To pair of native date pickers, always inline */
.classnews-adminlist .cn-daterange-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.classnews-adminlist .cn-daterange-group .cn-date {
    width: auto;
    flex: 0 0 auto;
    max-width: 160px;
}

.classnews-adminlist .cn-daterange-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #5a4f66;
    white-space: nowrap;
}

/* Actions bar — sits below filter bar */
.classnews-adminlist .cn-admin-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.classnews-adminlist .cn-admin-actions .cn-select {
    width: auto !important;
    flex: none !important;
    min-width: 140px;
    max-width: 220px;
    padding: 9px 36px 9px 14px;
    font-size: 14px;
}

/* Bulk-action group */
.cn-bulk-group {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    border-radius: 12px;
}

/* Page-size group — pushed right */
.cn-pagesize-group {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cn-pagesize-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a4f66;
    white-space: nowrap;
}

/* Data grid table */
.cn-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}

.cn-grid th {
    text-align: left;
    padding: 12px 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a4f66;
    border-bottom: 1.5px solid #ece8f0;
    background: #faf5fb;
    white-space: nowrap;
}

.cn-grid td {
    padding: 12px 16px;
    border-bottom: 1px solid #ece8f0;
    vertical-align: middle;
    color: #110a1f;
    background: #fff;
}

.cn-grid tr:last-child td { border-bottom: 0; }

.cn-grid tbody tr {
    transition: background 120ms ease;
}
.cn-grid tbody tr:hover td { background: #faf5fb; }

.cn-grid a {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #7b1fa2;
    text-decoration: none;
    transition: color 180ms ease;
}

.cn-grid a:hover {
    color: #6b1494;
    text-decoration: underline;
}

.cn-grid input[type="checkbox"] {
    accent-color: #7b1fa2;
    width: 17px;
    height: 17px;
    cursor: pointer;
    vertical-align: middle;
}

/* Title cell — two-line article title + date */
.cn-articletitle {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #110a1f;
    line-height: 1.3;
}

.cn-articledate {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: #5a4f66;
    margin-top: 4px;
}

/* Status badge */
.cn-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid transparent;
}

.cn-status--active {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.cn-status--inactive {
    background: #faf5fb;
    border-color: #ece8f0;
    color: #5a4f66;
}

.cn-status--deleted {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Bulk-select column */
.cn-th-chk,
.cn-td-chk {
    width: 44px;
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
}

.cn-chk-all,
.cn-chk-row {
    cursor: pointer;
    width: 17px;
    height: 17px;
    accent-color: #7b1fa2;
    vertical-align: middle;
}

.cn-selectall-label {
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a8294;
    white-space: nowrap;
    margin-bottom: 4px;
}

/* Selection summary text above the grid */
.cn-selection-summary {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
    margin-bottom: 12px;
}

.cn-sel-count {
    font-weight: 700;
    color: #110a1f;
}

/* Custom pager — shared by the admin list (NewsList) and the public list (NewsSummary) */
.classnews-adminlist .cn-admin-pager,
.classnews-summary .cn-admin-pager {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 24px 0;
}

.classnews-adminlist .cn-pgr-btn,
.classnews-summary .cn-pgr-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px !important;
    border-radius: 10px;
    border: 1.5px solid #ece8f0 !important;
    background: #fff !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #5a4f66 !important;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1;
    box-sizing: border-box;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.classnews-adminlist .cn-pgr-btn:hover,
.classnews-summary .cn-pgr-btn:hover {
    background: rgba(123, 31, 162, 0.06) !important;
    color: #7b1fa2 !important;
    border-color: rgba(123, 31, 162, 0.28) !important;
    text-decoration: none !important;
}

.classnews-adminlist .cn-pgr-btn--active,
.classnews-summary .cn-pgr-btn--active {
    background: #7b1fa2 !important;
    color: #fff !important;
    border-color: #7b1fa2 !important;
    font-weight: 700;
}

.classnews-adminlist .cn-pgr-btn--active:hover,
.classnews-summary .cn-pgr-btn--active:hover {
    background: #6b1494 !important;
    color: #fff !important;
    border-color: #6b1494 !important;
}

.classnews-adminlist .cn-pgr-btn--disabled,
.classnews-summary .cn-pgr-btn--disabled {
    background: #faf5fb !important;
    color: #a29aab !important;
    border-color: #ece8f0 !important;
    cursor: default;
}

/* Horizontal scroll on narrow screens */
@media (max-width: 900px) {
    .classnews-adminlist {
        overflow-x: auto;
    }
    .cn-grid {
        min-width: 820px;
    }
}


/* =============================================================================
   Admin: editor (NewsEdit)
   ============================================================================= */

.classnews-editor {
    border: 1.5px solid #ece8f0;
    border-radius: 16px;
    background: #fff;
    margin-top: 16px;
    overflow: hidden;
}

.cn-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1.5px solid #ece8f0;
    background: #faf5fb;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.cn-editor-close {
    background: transparent;
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #7b1fa2;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cn-editor-close:hover,
.cn-editor-close:focus {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.cn-editor-body {
    padding: 24px;
}

.cn-editor-empty {
    border: 1.5px solid #ece8f0;
    border-radius: 16px;
    background: #fff;
    margin-top: 16px;
}

.cn-editor-emptycard {
    padding: 40px 32px;
    color: #5a4f66;
    text-align: center;
}

.cn-editor-emptycard h3 {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.cn-editor-emptycard p {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: #5a4f66;
}

/* Audit info bar */
.cn-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #ece8f0;
    background: #faf8fc;
    margin-bottom: 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
}

.cn-audit strong {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    color: #110a1f;
    margin-right: 4px;
}

/* Form layout */
.cn-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cn-required-note {
    margin: 0;
    padding: 10px 14px;
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    border-radius: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
}

.cn-required-asterisk {
    color: #dc2626;
    font-weight: 700;
}

.cn-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cn-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #110a1f;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.cn-label--required::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}

.cn-optional {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    color: #5a4f66;
    margin-left: 4px;
}

.cn-hint {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
    line-height: 1.5;
}

.cn-hint--note {
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1.5px solid rgba(2, 132, 199, 0.18);
    border-radius: 10px;
    color: #0c4a6e;
    font-size: 13px;
    line-height: 1.5;
}

.cn-hint--note strong {
    color: #0284c7;
}

/* Body rich text editor — keep its drag-resize handle within the page width */
.cn-richtext-wrap {
    max-width: 100%;
}

.cn-richtext-wrap .cke,
.cn-richtext-wrap .cke_chrome {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.cn-richtext-wrap .cke_resizer {
    cursor: ns-resize !important;
}

/* Hero image preview (admin editor) — shows the original with the selected crop area bright and
   the rest dimmed, drawn on a canvas. The canvas' backing store is fixed at the hero's 1000:715
   shape (PREVIEW_W/PREVIEW_H in NewsEdit.ascx) with the original fitted inside it, so `height:
   auto` below always resolves to the same box whatever was uploaded — portrait, panorama or
   already-perfect images all give an editor that looks identical. */
.cn-hero-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cn-hero-preview-box {
    border-radius: 10px;
    border: 1.5px solid #ece8f0;
    overflow: hidden;
    line-height: 0;
    background: #f6f4f9;
}

.cn-hero-preview-canvas {
    display: block;
    width: 240px;
    height: auto;
    max-width: 100%;
}

.cn-hero-preview-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    /* Enough room for the alt-text input beside the 240px preview canvas, but still able to
       wrap underneath it on a narrow screen. */
    flex: 1 1 260px;
    min-width: 0;
}

.cn-hero-editbtn {
    cursor: pointer;
}

.cn-hero-filename {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
    cursor: default;
    word-break: break-all;
}

/* Alt-text field sitting next to the hero preview. .cn-input is already width:100%, so the
   wrapper is what bounds it. */
.cn-hero-alt-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    max-width: 420px;
}

/* Hidden trigger button used by the crop editor to post the baked image back. */
.cn-crop-apply-btn {
    display: none !important;
}

/* Hero crop / rotate modal — the card hugs the image and never exceeds the viewport
   (the canvas itself is sized to fit the viewport in JS), so any image fits inside. */
/* Two-class selector so these win over the base .cn-modal-card (which is defined later in the
   file and would otherwise cap the width at 560px). The card grows to fit the image up to 96vw
   and only ever scrolls vertically if a very tall image exceeds the viewport height. */
.cn-modal-card.cn-crop-card {
    width: fit-content;
    max-width: 96vw;
    max-height: 92vh;
    overflow-x: hidden;   /* never scroll sideways — the canvas is sized to fit the card */
    overflow-y: auto;
}

.cn-crop-stage {
    position: relative;
    /* Sized in JS to the (fitted) image; the card grows to hold it, so the image is never
       cropped. Bottom margin keeps the rotate/cancel/save buttons off the image. */
    margin: 0 auto 18px auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    background: #1e1b2e;
    border-radius: 8px;
    overflow: hidden;
}

/* Keep the hint from stretching the fit-content card wider than the image needs. */
.cn-crop-card .cn-mgr-hint {
    max-width: 560px;
}

.cn-crop-canvas {
    display: block;
}

.cn-crop-rect {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
}

.cn-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #7b1fa2;
    border-radius: 50%;
    box-sizing: border-box;
}

.cn-crop-handle--nw { top: -8px;    left: -8px;    cursor: nwse-resize; }
.cn-crop-handle--ne { top: -8px;    right: -8px;   cursor: nesw-resize; }
.cn-crop-handle--sw { bottom: -8px; left: -8px;    cursor: nesw-resize; }
.cn-crop-handle--se { bottom: -8px; right: -8px;   cursor: nwse-resize; }

.cn-crop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cn-crop-actions__spacer {
    flex: 1 1 auto;
}

/* Date input — narrower */
.cn-date {
    max-width: 200px;
}

/* Flags row — checkboxes side by side */
.cn-formrow--flags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 14px 18px;
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    border-radius: 12px;
}

.cn-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #110a1f;
    cursor: pointer;
}

.cn-flag input[type="checkbox"] {
    accent-color: #7b1fa2;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* Label + action button row (e.g. "Categories" + "+ Add category") */
.cn-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* CheckBoxList — used for Categories */
.cn-checkboxlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}

.cn-checkboxlist input[type="checkbox"] {
    accent-color: #7b1fa2;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.cn-checkboxlist label {
    cursor: pointer;
    color: #110a1f;
}

/* Inline add-category / add-tag form */
.cn-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    margin-top: 8px;
}

.cn-inline-form .cn-input {
    flex: 1 1 200px;
    min-width: 0;
    width: auto;
    padding: 9px 14px;
    font-size: 14px;
}

/* Advanced section toggle */
.cn-advanced-toggle {
    margin: 8px 0;
}

.cn-advanced-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    color: #7b1fa2;
    transition: background 180ms ease;
}

.cn-advanced-link:hover,
.cn-advanced-link:focus {
    background: rgba(123, 31, 162, 0.08);
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.cn-hr {
    border: 0;
    border-top: 1.5px solid #ece8f0;
    margin: 12px 0 20px;
}

/* Save button row — sticky-ish at the bottom of the form */
.cn-formactions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1.5px solid #ece8f0;
}


/* =============================================================================
   Public: tag checkbox dropdown (NewsSummary filter bar)
   ============================================================================= */

.cn-tag-dropdown__toggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    color: #110a1f;
    font-family: 'Inter', system-ui, sans-serif;
}

.cn-tag-dropdown__lbl {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cn-tag-dropdown__arrow {
    flex-shrink: 0;
    font-size: 10px;
    color: #7b1fa2;
    transition: transform 200ms ease;
}

.cn-tag-dropdown__toggle[aria-expanded="true"] .cn-tag-dropdown__arrow {
    transform: rotate(180deg);
}

.cn-tag-dropdown__group {
    padding: 0 6px 6px;
}

.cn-tag-dropdown__group + .cn-tag-dropdown__group {
    border-top: 1px solid #ece8f0;
    margin-top: 6px;
    padding-top: 6px;
}

.cn-tag-dropdown__group-label {
    padding: 8px 12px 4px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7b1fa2;
}

.cn-tag-dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #110a1f;
    user-select: none;
    transition: background 120ms ease;
}

.cn-tag-dropdown__item:hover {
    background: #faf5fb;
}

.cn-tag-dropdown__item input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #7b1fa2;
}


/* =============================================================================
   Admin: per-category tag grid (NewsEdit tag picker)
   ============================================================================= */

.cn-tag-grid-group {
    width: 100%;
    box-sizing: border-box;
    background: #faf8fc;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    padding: 14px 18px 16px;
    margin-bottom: 10px;
}

.cn-tag-grid-group:last-child {
    margin-bottom: 0;
}

.cn-tag-grid-heading {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7b1fa2;
    margin-bottom: 10px;
}

/* Tag table — 5 equal columns spanning full width */
.cn-tag-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.cn-tag-table td {
    padding: 4px 10px 4px 0;
    vertical-align: middle;
}

.cn-tag-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #110a1f;
}

.cn-tag-check input[type="checkbox"] {
    accent-color: #7b1fa2;
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Heading row of a tag-category card: name on the left, actions on the right */
.cn-tag-grid-headingrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cn-tag-grid-headingrow .cn-tag-grid-heading {
    margin-bottom: 0;
}

.cn-tag-grid-headactions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.cn-tag-empty {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.5);
}


/* =============================================================================
   Admin: lookup-manager modal popup (NewsEdit tag / tag-category management)
   Mirrors the JobAdmin .ja-modal / .ja-mgr pattern, in ClassNews purple tokens.
   ============================================================================= */

.cn-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;             /* sit above DNN chrome */
    display: block;
}

.cn-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 10, 31, 0.55);
    pointer-events: auto;
}

.cn-modal-card {
    position: relative;
    max-width: 560px;
    width: calc(100% - 32px);
    margin: 8vh auto 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(17, 10, 31, 0.35);
    z-index: 1;                 /* above backdrop */
}

.cn-modal-card--scrollable {
    display: flex;
    flex-direction: column;
    max-height: 84vh;
}

.cn-modal-card--scrollable .cn-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.cn-modal-card--scrollable .cn-modal-footer {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(17, 10, 31, 0.08);
}

.cn-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #110a1f;
}

.cn-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(17, 10, 31, 0.15);
    color: #110a1f;
    background: transparent;
    cursor: pointer;
}

.cn-modal-close:hover,
.cn-modal-close:focus {
    background: rgba(17, 10, 31, 0.06);
    text-decoration: none;
    outline: none;
}

/* Manager list rows (tags inside a category) */
.cn-mgr-hint {
    margin: 0 0 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.6);
}

.cn-mgr-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.cn-mgr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(123, 31, 162, 0.14);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
}

.cn-mgr-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #110a1f;
}

.cn-mgr-inactive {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(17, 10, 31, 0.45);
    border: 1px solid rgba(17, 10, 31, 0.15);
    border-radius: 6px;
    padding: 1px 6px;
}

.cn-mgr-rowactions {
    margin-left: auto;
    display: inline-flex;
    gap: 14px;
    white-space: nowrap;
}

.cn-mgr-listactions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cn-mgr-empty {
    margin: 0 0 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: rgba(17, 10, 31, 0.55);
}

/* Edit-form rows inside the modal */
.cn-form-row {
    margin-bottom: 12px;
}

.cn-form-row > label {
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #110a1f;
    margin-bottom: 4px;
}

.cn-form-row--check {
    margin-top: 4px;
}

.cn-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Danger link — inline Delete actions */
.cn-link--danger {
    color: #dc2626;
    border-bottom-color: rgba(220, 38, 38, 0.28);
}

.cn-link--danger:hover,
.cn-link--danger:focus {
    color: #dc2626;
    border-bottom-color: #dc2626;
}

/* Disabled primary button (the gated "Delete" in the delete-category popup) */
.cn-btn:disabled,
.cn-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* =============================================================================
   Mobile — narrower breakpoint tweaks
   ============================================================================= */

@media (max-width: 640px) {
    .cn-filters {
        padding: 16px 18px;
    }
    .classnews-adminlist .cn-filters .cn-input,
    .classnews-adminlist .cn-filters .cn-select {
        flex: 1 1 100%;
    }
    .classnews-adminlist .cn-admin-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cn-pagesize-group {
        margin-left: 0;
        justify-content: flex-end;
    }
    .cn-bulk-group,
    .cn-pagesize-group {
        width: 100%;
        justify-content: space-between;
    }
    .cn-editor-header {
        padding: 14px 18px;
        font-size: 16px;
        flex-wrap: wrap;
    }
    .cn-editor-body {
        padding: 18px;
    }
    .cn-audit {
        gap: 8px;
    }
    .cn-formrow--flags,
    .cn-inline-form {
        padding: 12px 14px;
    }
    .cn-formactions {
        flex-direction: column;
        align-items: stretch;
    }
    .cn-formactions .cn-btn {
        width: 100%;
    }
    .cn-card__body {
        padding: 16px 18px;
    }
    .cn-card__cta {
        padding: 12px 18px;
    }
}