/* Shared reading experience for public recruitment and learning posts.
   Loaded after module styles so Jobs, Admissions and post-shell modules share
   the same comfortable, dependable content treatment. */

:root {
    --post-page-ink: #16243a;
    --post-page-muted: #607087;
    --post-page-line: #dfe7f0;
    --post-page-surface: #ffffff;
    --post-page-soft: #f5f8fc;
    --post-page-brand: #1d4ed8;
    --post-page-navy: #102a5c;
    --post-page-accent: #f59e0b;
}

.recruitment-experience,
.learning-experience {
    background: #f4f7fb;
}

.post-shell__main {
    width: min(100%, 920px);
    margin-inline: auto;
}

/* Use the available desktop canvas for cards, facts and resource panels;
   individual paragraphs remain comfortably readable below. */
@media (min-width: 992px) {
    .post-shell__main {
        width: 100%;
        max-width: none;
    }

    .post-shell__main > .post-section-card .post-rich-content > :where(p, ul, ol, blockquote),
    .post-shell__main > .post-action-panel > :where(p, small) {
        max-width: 78ch;
    }
}

/* A familiar education-platform reading rhythm: an unmistakable hero,
   scannable facts, then one calm, focused reading column. */
.post-shell .post-hero,
.job-detail-hero,
.admission-hero {
    border: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(251, 191, 36, .34), transparent 22rem),
        radial-gradient(circle at 4% 110%, rgba(56, 189, 248, .22), transparent 25rem),
        linear-gradient(128deg, #102a5c 0%, #1d4ed8 58%, #155e75 100%);
}

.post-shell .post-hero::before {
    opacity: .1;
    background-size: 28px 28px;
}

.post-shell .post-hero__badge {
    color: #fff7d6;
    background: rgba(15, 23, 42, .22);
    backdrop-filter: blur(8px);
}

.post-hero__content,
.job-detail-brand__copy,
.admission-brand__copy {
    min-width: 0;
}

.post-hero h1,
.job-detail-brand__copy h1,
.admission-brand__copy h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.post-shell .post-btn--primary {
    color: #172033;
    background: #fbbf24;
    box-shadow: 0 10px 22px rgba(146, 64, 14, .26);
}

.post-shell .post-btn--secondary {
    background: #ffffff;
    color: #1746a2;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .16);
}

.post-shell .post-btn--ghost {
    border-color: rgba(255, 255, 255, .48);
}

/* Keep short action labels such as “Download PDF” as a single, obvious tap
   target instead of splitting one word per line on narrow screens. */
.post-shell .post-btn,
.post-mobile-cta a,
.module-download-card,
.dynamic-sections :where(.btn, .section-button, .section-button-group a) {
    white-space: nowrap;
}

.post-shell .post-btn {
    min-width: max-content;
}

/* Results receive a clear success-led identity while retaining the same
   shared post structure as other modules. */
.post-shell.module-detail--result .post-hero {
    background:
        radial-gradient(circle at 91% 8%, rgba(250, 204, 21, .32), transparent 22rem),
        radial-gradient(circle at 6% 105%, rgba(74, 222, 128, .25), transparent 24rem),
        linear-gradient(128deg, #0c3b2e 0%, #087f5b 52%, #155e75 100%);
}

.result-content-nav {
    position: sticky;
    top: calc(var(--gnu-sticky-offset, 76px) + .75rem);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1.15rem;
    padding: .7rem .8rem;
    border: 1px solid #cce5db;
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .075);
    backdrop-filter: blur(14px);
}

.result-content-nav__label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    color: #14532d;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.result-content-nav__label i { color: #16a34a; font-size: 1rem; }

.result-content-nav__links {
    display: flex;
    min-width: 0;
    gap: .45rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.result-content-nav__links a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 34px;
    padding: .42rem .7rem;
    border-radius: 999px;
    color: #35614f;
    background: #f0fdf4;
    font-size: .77rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.result-content-nav__links a:hover,
.result-content-nav__links a:focus-visible {
    color: #fff;
    background: #15803d;
    outline: none;
    transform: translateY(-1px);
}

.module-detail--result .post-section-card,
.module-detail--result .post-faq {
    scroll-margin-top: calc(var(--gnu-sticky-offset, 76px) + 5rem);
}

.post-shell .post-fact-card,
.job-fact-card,
.admission-fact-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce7f7;
}

.post-shell .post-fact-card::before,
.job-fact-card::before,
.admission-fact-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #22c55e);
}

.post-section-card,
.job-content-card,
.admission-content-card {
    background: var(--post-page-surface);
}

.post-section-card__header h2,
.job-content-card__header h2,
.admission-content-card__header h2 {
    letter-spacing: -.015em;
}

.post-rich-content a,
.module-reading-content a,
.job-rich-copy a,
.admission-rich-copy a,
.dynamic-section a {
    color: #1d4ed8;
    font-weight: 750;
    text-decoration-color: rgba(29, 78, 216, .35);
    text-underline-offset: .16em;
}

.post-rich-content blockquote,
.module-reading-content blockquote,
.job-rich-copy blockquote,
.admission-rich-copy blockquote,
.dynamic-section blockquote {
    margin: 1.25rem 0;
    padding: .8rem 1rem;
    border-left: 4px solid #2563eb;
    border-radius: 0 12px 12px 0;
    background: #eff6ff;
    color: #26415f;
}

.post-shell__main > :last-child,
.job-detail-shell > .row:last-child > .col-lg-12 > :last-child,
.admission-detail-shell > .row:last-child > .col-lg-12 > :last-child {
    margin-bottom: 0;
}

/* Keep long-form writing pleasant to scan and prevent untrusted CMS content
   from escaping its card on either desktop or mobile. */
.post-rich-content,
.module-reading-content,
.job-rich-copy,
.admission-rich-copy,
.dynamic-section,
.post-dynamic-sections,
.job-dynamic-sections {
    color: #3d4c61;
    font-size: clamp(.98rem, .2vw + .94rem, 1.06rem);
    line-height: 1.82;
    overflow-wrap: anywhere;
}

.post-rich-content :where(h2, h3, h4),
.module-reading-content :where(h2, h3, h4),
.job-rich-copy :where(h2, h3, h4),
.admission-rich-copy :where(h2, h3, h4),
.dynamic-section :where(h2, h3, h4) {
    margin-top: 1.8em;
    margin-bottom: .65em;
    color: var(--post-page-ink);
    line-height: 1.26;
    font-weight: 800;
}

.post-rich-content :where(ul, ol),
.module-reading-content :where(ul, ol),
.job-rich-copy :where(ul, ol),
.admission-rich-copy :where(ul, ol),
.dynamic-section :where(ul, ol) {
    padding-left: 1.35rem;
}

.post-rich-content :where(li + li),
.module-reading-content :where(li + li),
.job-rich-copy :where(li + li),
.admission-rich-copy :where(li + li),
.dynamic-section :where(li + li) {
    margin-top: .4rem;
}

.post-rich-content :where(img, video, iframe),
.module-reading-content :where(img, video, iframe),
.job-rich-copy :where(img, video, iframe),
.admission-rich-copy :where(img, video, iframe),
.dynamic-section :where(img, video, iframe) {
    max-width: 100% !important;
    margin-block: 1.25rem;
    border-radius: 14px;
}

.post-rich-content :where(table),
.module-reading-content :where(table),
.job-rich-copy :where(table),
.admission-rich-copy :where(table),
.dynamic-section :where(table) {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin-block: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--post-page-line);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.post-rich-content :where(th, td),
.module-reading-content :where(th, td),
.job-rich-copy :where(th, td),
.admission-rich-copy :where(th, td),
.dynamic-section :where(th, td) {
    min-width: 8.5rem;
    padding: .8rem .9rem;
    vertical-align: top;
}

.post-section-card,
.job-content-card,
.admission-content-card {
    border-color: var(--post-page-line);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
}

.post-section-card__header,
.job-content-card__header,
.admission-content-card__header {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.post-fact-card,
.job-fact-card,
.admission-fact-card {
    border-color: var(--post-page-line);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.post-utility-bar__actions a,
.post-utility-bar__actions button,
.post-btn,
.job-apply-panel .btn,
.admission-apply-panel .btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .recruitment-experience,
    .learning-experience {
        background: #f7f9fc;
    }

    .post-shell__inner {
        width: min(100% - 20px, 100%);
        padding-top: 12px;
        padding-bottom: 54px;
    }

    .post-shell__main {
        width: 100%;
    }

    .post-hero,
    .job-detail-hero,
    .admission-hero {
        border-radius: 20px;
    }

    .post-hero {
        gap: 18px;
        margin: 10px 0 16px;
        padding: 22px 18px;
    }

    .post-hero h1 {
        margin-block: 12px 8px;
        font-size: clamp(1.7rem, 8vw, 2.2rem);
        line-height: 1.12;
        letter-spacing: -.025em;
        overflow-wrap: anywhere;
    }

    .post-hero__subtitle {
        font-size: 1rem;
        line-height: 1.45;
    }

    .post-hero__description {
        font-size: .92rem;
        line-height: 1.65;
    }

    .post-hero__visual {
        min-height: 112px;
        border-radius: 16px;
    }

    .post-hero__visual img {
        max-height: 112px;
        border-radius: 12px;
    }

    .post-hero__visual-icon {
        width: 68px;
        height: 68px;
        border-radius: 18px;
        font-size: 30px;
    }

    .post-hero__status {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 8px 10px;
        border-radius: 11px;
    }

    .post-hero__status span,
    .post-hero__status strong {
        font-size: .69rem;
    }

    .post-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 18px;
    }

    .post-hero__actions .post-btn {
        width: 100%;
        min-height: 48px;
        min-width: 0;
        padding-inline: 12px;
        font-size: .9rem;
    }

    .post-hero__meta {
        flex-wrap: nowrap;
        margin-right: -2px;
        padding-bottom: 3px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .post-hero__meta span {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-start;
        white-space: nowrap;
    }

    .post-facts-grid,
    .post-facts-grid--2,
    .post-facts-grid--3,
    .post-facts-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .post-fact-card,
    .job-fact-card,
    .admission-fact-card {
        min-height: 116px;
        padding: 14px;
        border-radius: 15px;
    }

    .post-fact-card i {
        margin-bottom: 7px;
        font-size: 17px;
    }

    .post-fact-card span,
    .job-fact-card span,
    .admission-fact-card span {
        font-size: .66rem;
        line-height: 1.25;
    }

    .post-fact-card strong,
    .job-fact-card strong,
    .admission-fact-card strong {
        margin-top: 5px;
        font-size: .88rem;
        line-height: 1.35;
    }

    .post-rich-content,
    .module-reading-content,
    .job-rich-copy,
    .admission-rich-copy,
    .dynamic-section {
        font-size: .98rem;
        line-height: 1.75;
    }

    .post-section-card__header,
    .job-content-card__header,
    .admission-content-card__header {
        padding: 16px;
    }

    .post-section-card__header h2,
    .job-content-card__header h2,
    .admission-content-card__header h2 {
        font-size: 1.22rem;
    }

    .post-rich-content,
    .job-rich-copy,
    .admission-rich-copy {
        padding: 16px;
    }

    .post-section-card,
    .job-content-card,
    .admission-content-card {
        margin-bottom: 16px;
        border-radius: 18px;
    }

    .post-shell .post-section-card {
        box-shadow: 0 7px 20px rgba(15, 23, 42, .05);
    }

    .result-content-nav {
        position: static;
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
        margin-bottom: 1rem;
        padding: .7rem;
        border-radius: 14px;
    }

    .result-content-nav__links { width: 100%; }
    .result-content-nav__links a { min-height: 38px; padding-inline: .8rem; }

    /* Result details must remain easy to act on with one hand. */
    .module-detail--result .post-action-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .module-detail--result .post-action-panel h2 { font-size: 1.22rem; }

    .module-detail--result .post-action-panel__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
    }

    .module-detail--result .post-action-panel__actions .post-btn {
        width: 100%;
        min-height: 50px;
        min-width: 0;
    }

    .module-detail--result .module-step-grid,
    .module-detail--result .module-info-grid,
    .module-detail--result .module-related-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .module-detail--result .module-step-card,
    .module-detail--result .module-info-grid > div {
        min-height: 0;
        padding: 15px 15px 15px 58px;
        border-radius: 14px;
    }

    .module-detail--result .module-info-grid > div { padding: 15px; }

    .module-detail--result .module-step-card span {
        top: 15px;
        left: 15px;
    }

    .module-detail--result .module-check-list li {
        padding: 13px 13px 13px 40px;
        border-radius: 13px;
    }

    .module-detail--result .module-check-list li::before {
        top: 20px;
        left: 16px;
    }

    .module-detail--result .post-faq__item summary,
    .module-detail--result .post-faq__item div { padding: 14px; }

    .post-utility-bar__label {
        padding-left: 3px;
    }

    .post-utility-bar__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-utility-bar__actions a,
    .post-utility-bar__actions button {
        width: 100%;
        min-width: 0;
        padding-inline: 8px;
        font-size: .74rem;
    }

    .job-detail-hero,
    .admission-hero {
        padding: 18px;
    }

    .job-detail-brand,
    .admission-brand {
        gap: 12px;
    }

    .job-detail-brand__logo,
    .admission-brand__logo {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .job-detail-brand__copy h1,
    .admission-brand__copy h1 {
        font-size: clamp(1.55rem, 7.3vw, 2rem);
        line-height: 1.16;
    }

    .job-detail-hero__summary,
    .admission-hero__summary {
        font-size: .94rem;
        line-height: 1.65;
    }

    .job-apply-panel,
    .admission-apply-panel {
        margin-top: 2px;
        padding: 16px;
        border-radius: 17px;
    }

    .post-rich-content :where(th, td),
    .module-reading-content :where(th, td),
    .job-rich-copy :where(th, td),
    .admission-rich-copy :where(th, td),
    .dynamic-section :where(th, td) {
        min-width: 7.25rem;
        padding: .7rem;
    }
}

@media (min-width: 768px) {
    .post-shell__inner {
        padding-top: 32px;
        padding-bottom: 80px;
    }

    .post-shell .post-hero {
        padding: clamp(34px, 5vw, 64px);
    }

    .post-shell .post-fact-card,
    .job-fact-card,
    .admission-fact-card {
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .post-shell .post-fact-card:hover,
    .job-fact-card:hover,
    .admission-fact-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .1);
    }
}

@media (max-width: 380px) {
    .post-utility-bar__actions {
        grid-template-columns: 1fr;
    }

    .post-facts-grid,
    .post-facts-grid--2,
    .post-facts-grid--3,
    .post-facts-grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-shell *,
    .job-detail-shell *,
    .admission-detail-shell * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}
