/* Figma 2190:9047 / 2190:9052. A layered illustration, not an interactive card. */
.gc-document-folder {
    --gc-folder-accent: var(--tint-link-bright);
    --gc-folder-paper: var(--tint-tinted-link);
    --gc-folder-radius: calc(var(--radius-16) * 3);
    --gc-folder-sheet-radius: calc(var(--radius-20) + var(--space-1));
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    min-height: 438px;
    display: flex;
    align-items: stretch;
    padding: var(--space-8);
    border-radius: var(--gc-folder-radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--fill-emphasis) 95%, var(--fill-emphasis-inverse)) 14.428%, var(--fill-emphasis) 116.42%);
    box-shadow: inset 0 2px 8px color-mix(in srgb, var(--fill-emphasis-inverse) 25%, transparent);
}

.gc-document-folder--blue {
    --gc-folder-accent: var(--tint-blue-bright);
    --gc-folder-paper: var(--tint-tinted-blue);
}

.gc-document-folder--green {
    --gc-folder-accent: var(--tint-green-bright);
    --gc-folder-paper: var(--tint-tinted-green);
}

.gc-document-folder__pocket::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url('../assets/folder-grain.svg');
    background-size: 256px 256px;
    mix-blend-mode: soft-light;
    opacity: 0.5;
    pointer-events: none;
}

.gc-document-folder__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    width: 100%;
    padding-top: calc(var(--space-16) + var(--space-4));
    justify-content: space-between;
}

.gc-document-folder__copy {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-2) + var(--space-1) / 2);
    width: 100%;
}

.gc-document-folder__description {
    white-space: pre-line;
    margin: 0;
    font-size: var(--font-size-15);
    line-height: 22px;
    color: var(--text-on-solid);
}

.gc-document-folder__statuses {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.gc-document-folder__status {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-15);
    font-weight: 500;
    line-height: var(--line-height-body);
    color: var(--text-on-solid);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fill-emphasis-inverse) 20%, transparent);
}

.gc-document-folder__status--optional {
    background: color-mix(in srgb, var(--fill-emphasis-inverse) 20%, transparent);
}

.gc-document-folder__status--exam {
    background: var(--accent-link);
}

.gc-document-folder__title {
    margin: 0;
    font-family: Unbounded, var(--font-family-heading);
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: var(--font-size-32);
    color: var(--text-on-solid);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

@media (max-width: 991.98px) {
    .gc-document-folder {
        padding: var(--space-8) var(--space-4);
        min-height: 380px;
    }

    .gc-document-folder__title {
        font-size: clamp(var(--font-size-18), 4.6vw, var(--font-size-20));
        line-height: 1.4;
        white-space: normal;
    }
    .gc-document-folder__copy { gap: var(--space-4); }
    .gc-document-folder__content { gap: var(--space-8); }
    .gc-document-folder__description { line-height: 1.6; white-space: normal; }
}

.gc-document-folder__sheets {
    position: absolute;
    inset: var(--space-8);
    padding-top: var(--space-6);
    border-radius: var(--gc-folder-sheet-radius);
    background: var(--gc-folder-accent);
}

.gc-document-folder__sheet {
    width: calc(100% + var(--space-4));
    height: 100%;
    margin-inline: calc(-1 * var(--space-2));
    border-radius: var(--gc-folder-sheet-radius) var(--gc-folder-sheet-radius) 0 0;
    background: var(--gc-folder-paper);
}

.gc-document-folder__pocket {
    position: absolute;
    inset: calc(var(--space-16) + var(--space-4)) 0 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--fill-emphasis) 60%, transparent) 3.85%,
        color-mix(in srgb, var(--fill-emphasis) 94%, transparent) 100%);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    box-shadow: inset 0 2px 8px color-mix(in srgb, var(--fill-emphasis-inverse) 25%, transparent);
}

@media (max-width: 991.98px) {
    .gc-document-folder {
        --gc-folder-radius: var(--radius-20);
    }
}

.gc-document-folder--section {
    --gc-folder-radius: calc(var(--radius-16) * 4);
    --gc-folder-sheet-radius: calc(var(--radius-16) * 2);
    --gc-folder-accent: var(--tint-blue-bright);
    --gc-folder-paper: var(--tint-tinted-blue);
    overflow: visible;
}

@media (max-width: 991.98px) {
    .gc-document-folder--section {
        --gc-folder-radius: var(--radius-20);
        --gc-folder-sheet-radius: var(--radius-16);
    }
}

.gc-document-folder__light {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle 240px at var(--gc-folder-light-x, 50%) var(--gc-folder-light-y, 0%), color-mix(in srgb, var(--gray-0) 18%, transparent), transparent 100%);
    transition: opacity 150ms ease-out;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .gc-document-folder--section:hover > .gc-document-folder__light { opacity: 1; }
}

.gc-document-folder--section .gc-document-folder__sheet {
    width: calc(100% + var(--space-4));
    margin-inline: calc(-1 * var(--space-2));
}

.gc-document-folder--section .gc-document-folder__pocket {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gray-700) 60%, transparent) 3.85%,
        color-mix(in srgb, var(--fill-emphasis) 60%, transparent) 76.233%);
}


/* Desktop hover only; touch and compact layouts remain static. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .gc-document-folder--section > .gc-document-folder__sheets,
    .gc-document-folder--section > .gc-document-folder__sheets > .gc-document-folder__sheet,
    .gc-document-folder--section > .gc-document-folder__pocket {
        transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
    }
    .gc-document-folder--section > .gc-document-folder__pocket {
        transform-origin: center bottom;
    }
    .gc-document-folder--section:hover > .gc-document-folder__sheets {
        transform: translateY(calc(-1 * var(--space-1)));
    }
    .gc-document-folder--section:hover > .gc-document-folder__sheets > .gc-document-folder__sheet {
        transform: translateY(calc(-1 * var(--space-1) / 2));
    }
    .gc-document-folder--section:hover > .gc-document-folder__pocket {
        transform: perspective(2400px) rotateX(-3deg);
    }
}
.gc-document-folder__section-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    padding-top: calc(var(--space-16) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.gc-document-folder__section-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.gc-document-folder--section:not(.gc-document-folder--cover) .gc-document-folder__section-meta + .gc-document-folder__section-title {
    margin-top: calc(-1 * var(--space-2));
}

.gc-document-folder--cover { min-height: 400px; }
.gc-document-folder--cover .gc-document-folder__section-content { gap: var(--space-6); }
.gc-document-folder__cover-note {
    margin: auto 0 0;
    padding-top: var(--space-8);
    color: var(--text-on-solid);
    font-size: var(--font-size-15);
    line-height: var(--line-height-body);
}
@media (max-width: 991.98px) {
    .gc-document-folder--cover { min-height: 320px; }
}

.gc-document-folder__section-meta p {
    margin: 0;
    color: var(--text-on-solid);
    font-size: var(--font-size-15);
    line-height: var(--line-height-body);
}

.gc-document-folder__section-title {
    margin: 0;
    max-width: 572px;
    color: var(--text-on-solid);
    font-family: Unbounded, var(--font-family-heading);
    font-size: var(--font-size-48);
    font-weight: 700;
    line-height: calc(56 / 48);
}

.gc-document-folder__section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.gc-document-folder__section-grid .gc-document-folder__copy { gap: var(--space-4); }

.gc-document-folder__section-note {
    margin: calc(-1 * (var(--space-4) + var(--space-1))) 0 0;
    padding: var(--space-6);
    border-radius: calc(var(--radius-16) * 3);
    background: color-mix(in srgb, var(--gray-0) 15%, transparent);
    color: var(--text-on-solid);
    font-size: var(--font-size-15);
    line-height: var(--line-height-body);
    text-align: start;
}

.gc-document-folder__section-note p { margin: 0; }
.gc-document-folder__section-note p + p { margin-top: var(--space-4); }
.gc-document-folder__section-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.gc-document-folder__card-title {
    margin: 0;
    white-space: normal;
    overflow-wrap: normal;
    font-family: Unbounded, var(--font-family-heading);
    font-size: var(--font-size-24);
    line-height: var(--font-size-32);
    font-weight: 700;
    color: var(--text-primary);
}

.gc-document-folder__card-description {
    margin: 0;
    font-size: var(--font-size-15);
    line-height: var(--line-height-body);
    color: var(--text-primary);
    white-space: normal;
}

.gc-document-folder__card-eyebrow {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-family-base);
    font-size: var(--font-size-15);
    font-weight: 600;
    line-height: var(--line-height-body);
    color: var(--text-primary);
}

.gc-document-folder__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
}

@container (max-width: 1099.98px) {
    .gc-document-folder__section-title { font-size: clamp(var(--font-size-24), 4cqw, var(--font-size-48)); }
    .gc-document-folder__section-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 991.98px) {
    .gc-document-folder__section-meta { flex-direction: column; align-items: flex-start; }
    .gc-document-folder__section-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .gc-document-folder__section-title { font-size: var(--font-size-24); }
    .gc-document-folder__card-title { font-size: var(--font-size-18); line-height: 1.4; white-space: normal; }
    .gc-document-folder__card-description { line-height: 1.6; }
    .gc-document-folder__section-note { border-radius: var(--radius-20); margin-top: 0; padding: var(--space-4); }
}

@media (max-width: 359.98px) {
    .gc-document-folder__card-title { font-size: var(--font-size-16); }
    .gc-document-folder__title {
        font-size: var(--font-size-16);
    }
}

.gc-document-folder__caption { margin: 0; color: var(--text-on-solid); text-align: center; font-size: var(--font-size-15); line-height: var(--line-height-body); }

/* A document handoff pocket, using the same layered folder. */
.gc-document-folder--message { --gc-folder-accent: var(--tint-neutral-warm-bright); --gc-folder-paper: var(--tint-tinted-neutral-warm); min-height: 427px; background: linear-gradient(180deg, var(--gray-900), var(--gray-1000)); }
.gc-document-folder--message .gc-document-folder__content { justify-content: center; padding-top: var(--space-16); }
.gc-document-folder--message .gc-document-folder__title { text-align: center; color: var(--gray-0); overflow-wrap: normal; }
.gc-document-folder--message .gc-document-folder__pocket { background: linear-gradient(180deg, color-mix(in srgb, var(--gray-700) 60%, transparent), color-mix(in srgb, var(--gray-1000) 94%, transparent)); }
@media (max-width: 991.98px) { .gc-document-folder--message { min-height: 280px; } }

@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-italic.ttf') format('truetype'); }
.gc-document-folder__sticker {
 position: absolute; z-index: 2; top: calc(var(--space-16) + var(--space-8) + var(--space-3)); right: var(--space-8);
 width: 217px; max-width: calc(100% - var(--space-16)); padding: calc(var(--space-3) / 2);
 border-radius: calc(var(--radius-12) / 2); background: url('../uploads/assets/guides-folder-sticker.png') center / cover;
 color: color-mix(in srgb, var(--tint-blue-deep) 74%, var(--gray-1000));
 font-family: 'Source Serif 4', Georgia, serif; font-size: var(--font-size-13); font-weight: 400; font-style: italic; line-height: 18px;
 transform: rotate(3.57deg);
}
@media (max-width: 991.98px) {
 .gc-document-folder--message:has(.gc-document-folder__sticker) { min-height: 340px; }
 .gc-document-folder__sticker { right: var(--space-6); }
}