/* ===============================
   CTSFW Scholarships – Styles
   =============================== */

/* Shell */
.ctsfw-scholarships {
    --navy: #001846;
    --maroon: #7b1824;
    --eggshell: #f6f4ee;
    --ink: #111827;
    --ring: rgba(0, 0, 0, .12);
    --maxw: 1100px;
    --card-pad: 1.25rem;
    background: transparent !important;
    /* grid area always transparent */
    color: var(--ink);
    font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Ensure rows match width and are centered */
.ctsfw-scholarships .ctsfw-sch-row,
.ctsfw-scholarships .ctsfw-scholarships__grid {
    /* width: min(100%, var(--maxw)); */
    /* margin-inline: auto; */
}

/* Themes */
.ctsfw-scholarships.theme-dark {
    color: var(--eggshell);
}

.ctsfw-scholarships.theme-light {
    color: var(--ink);
}

/* Buttons row (ALWAYS one line; text scales to fit) */
.ctsfw-scholarships .ctsfw-sch-buttons {
    display: flex;
        gap: .75rem;
        margin: .5rem auto 0 auto;
        flex-direction: column;
        align-items: stretch;
}

.ctsfw-scholarships .ctsfw-sch-button {
    /* adopt only sizing/shape here (keeps theme’s .btn/.link-animation transitions) */
    /* border: 1px solid var(--navy); */
    color: var(--navy);
    background: transparent;
    padding: 1rem;
    font-weight: 600;
    white-space: nowrap;
    font-size: clamp(.78rem, 1.25vw, .95rem);
    line-height: 1;
    cursor: pointer;
}

.ctsfw-scholarships .ctsfw-sch-button[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
}

.ctsfw-scholarships .ctsfw-sch-button:focus-visible {
    outline: 2px solid var(--maroon);
    outline-offset: 2px;
}

/* Controls (search + count share same width as buttons + cards) */
.ctsfw-scholarships .ctsfw-sch-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    margin: .75rem auto 0 auto;
}

.ctsfw-scholarships .ctsfw-sch-search {
    width: 50%;
    padding: 1rem;
    border: 2px solid var(--ring);
    border-radius: 0px !important;
    border-color: #001846;
    background: transparent;
    color: #001846;
}

.ctsfw-scholarships.theme-dark .ctsfw-sch-sch-search {
    border-color: rgba(255, 255, 255, .25);
}

.ctsfw-scholarships .ctsfw-sch-search::placeholder {
    opacity: .7;
    color: #001846;
}

.ctsfw-scholarships .ctsfw-sch-count {
    font-weight: 600;
    color: #001846;
    opacity: .9;
}

/* Grid (light spacing; no background) */
.ctsfw-scholarships__grid {
    list-style: none;
    margin: 1rem auto 0 auto;
    padding: 0;
    display: grid;
    gap: 1.125rem;
    background: transparent !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ctsfw-scholarships--cols-1 .ctsfw-scholarships__grid {
    grid-template-columns: 1fr;
}

.ctsfw-scholarships--cols-3 .ctsfw-scholarships__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Card */
.ctsfw-sch-card {
    position: relative;
    overflow: hidden;
    padding: var(--card-pad);
    background: #fff;
    color: var(--ink);
    border: 2px solid transparent;
    /* default; themed below */
}

.ctsfw-scholarships.theme-light .ctsfw-sch-card {
    border-color: var(--navy);
    /* 2px #001846 in light theme */
}

.ctsfw-scholarships.theme-dark .ctsfw-sch-card {
    background: #0b1e44;
    color: var(--eggshell);
    border-color: rgba(255, 255, 255, .15);
}

/* Ribbon: red on both themes; 90% width; flush left; floating with top gap; inverted slant along bottom */
.ctsfw-sch-card__ribbon {
    --ribbon-bg: var(--maroon);
    --ribbon-fg: #fff;

    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;

    color: var(--ribbon-fg);
    background: var(--ribbon-bg);

    margin: .5rem 0 1rem 0;

    left: calc(-1 * var(--card-pad));
    width: calc(90% + var(--card-pad));
    padding: .6rem .9rem;

    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;

    box-sizing: border-box;
    /* Target visual height; adjust as needed */
    --h: 2.4rem;
    block-size: var(--h);

    /* 76.5° full-height slant: run = h / tan(76.5°) ≈ 0.24008 * h */
    --dx-full: calc(var(--h) * 0.24008);

    /* Full-height slant on the right; no vertical segment */
    clip-path: polygon(0 0,
            100% 0,
            calc(100% - var(--dx-full)) 100%,
            0 100%);

    white-space: nowrap;
    /* keep height stable to preserve angle */
}

.ribbon__item {
    white-space: nowrap;
}

.ribbon__sep {
    opacity: .8;
}

/* Title (fixed 1.5rem regardless of theme scale) */
.ctsfw-sch-card__title {
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: .25rem 0 .5rem 0;
}

.ctsfw-scholarships.theme-dark .ctsfw-sch-card__title {
    color: #c9d8f6;
}

/* Excerpt + “…more” link color rules */
.ctsfw-sch-card__excerpt {
    margin: 0;
    opacity: .95;
    font-size: clamp(.95rem, .3vw + .85rem, 1.05rem);
}

.ctsfw-sch-card__excerpt .ctsfw-ellipsis {
    text-decoration: none;
}

.ctsfw-scholarships.theme-dark .ctsfw-ellipsis {
    color: inherit;
    /* same as title (light blue via inherit) */
}

.ctsfw-scholarships.theme-light .ctsfw-ellipsis {
    color: var(--maroon);
    /* red in light theme */
}

/* Actions row */
.ctsfw-scholarships__actions {
    width: min(100%, var(--maxw));
    margin: 1rem auto 0 auto;
    text-align: center;
}

.ctsfw-btn {
    display: inline-block;
    padding: 1rem;
    border: 2px solid currentColor;
    background: transparent;
    color: #001846;
    cursor: pointer;
}

/* Empty state */
.ctsfw-scholarships__empty {
    margin: 0;
    padding: .75rem 0;
    opacity: .9;
}

/* ===============================
   Responsive tweaks
   =============================== */

/* Tablet & down: stack buttons & controls; full-width actions */
@media (max-width: 900px) {

    /* Buttons: vertical + full width */
    .ctsfw-scholarships .ctsfw-sch-buttons {
        flex-direction: column;
        align-items: stretch;
        /* children fill width */
        justify-content: flex-start;
        /* no space-between */
        gap: .5rem;
        width: min(100%, var(--maxw));
        margin-inline: auto;
    }

    .ctsfw-scholarships .ctsfw-sch-button {
        width: 100%;
        text-align: center;
        padding: .9rem 1rem;
        /* friendlier tap target */
        font-size: clamp(.9rem, 2.2vw, 1rem);
        cursor: pointer;
    }

    /* Controls: stack search + count */
    .ctsfw-scholarships .ctsfw-sch-controls {
        grid-template-columns: 1fr;
        /* single column */
        gap: .75rem;
        width: min(100%, var(--maxw));
        margin-inline: auto;
    }

    .ctsfw-scholarships .ctsfw-sch-search {
        width: 100%;
    }

    .ctsfw-scholarships .ctsfw-sch-count {
        justify-self: start;
    }

    /* Actions: full-width "Show more" */
    .ctsfw-scholarships__actions {
        width: min(100%, var(--maxw));
        margin-inline: auto;
    }

    .ctsfw-scholarships__actions .ctsfw-btn--more {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Small screens: allow each control row to breathe while keeping one-line buttons */
@media (max-width: 560px) {
    .ctsfw-scholarships .ctsfw-sch-buttons {
        gap: .5rem;
    }

    .ctsfw-scholarships .ctsfw-sch-button {
        padding: .5rem .6rem;
    }

    /* Mobile only: keep only the deadline on the ribbon */
    .ctsfw-sch-card__ribbon .ribbon__item--amount,
    .ctsfw-sch-card__ribbon .ribbon__item--district,
    .ctsfw-sch-card__ribbon .ribbon__sep--amount,
    .ctsfw-sch-card__ribbon .ribbon__sep--district {
        display: none !important;
    }
}
/* Label swap defaults: show full, hide short */
.ctsfw-scholarships .ctsfw-sch-button .btn-label--full {
    display: inline;
}

.ctsfw-scholarships .ctsfw-sch-button .btn-label--short {
    display: none;
}

/* Tablet & down: show short labels for Pastoral/Deaconess only */
@media (max-width: 900px) {

    .ctsfw-scholarships .ctsfw-sch-button[data-filter="pastoral"] .btn-label--full,
    .ctsfw-scholarships .ctsfw-sch-button[data-filter="deaconess"] .btn-label--full {
        display: none;
    }

    .ctsfw-scholarships .ctsfw-sch-button[data-filter="pastoral"] .btn-label--short,
    .ctsfw-scholarships .ctsfw-sch-button[data-filter="deaconess"] .btn-label--short {
        display: inline;
    }
}
/* ============================================
   Link underline "draw" — inherits color,
   1–2px thick, only under actual text width
   ============================================ */

/* Apply to all anchors inside the component EXCEPT buttons */
.ctsfw-scholarships a:not(.btn):not(.ctsfw-sch-button):not(.ctsfw-btn) {
    position: relative;
    display: inline-block;
    /* shrink-wrap to text width */
    text-decoration: none;
    /* we draw our own line */
    color: inherit;
    /* keep the title/link color exactly */
}

.ctsfw-scholarships a:not(.btn):not(.ctsfw-sch-button):not(.ctsfw-btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.08em;
    /* slight offset below text */
    width: 100%;
    /* exactly the text width */
    height: 1px;
    /* 1–2px per request */
    background: currentColor;
    /* inherit the link’s color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.ctsfw-scholarships a:not(.btn):not(.ctsfw-sch-button):not(.ctsfw-btn):hover::after,
.ctsfw-scholarships a:not(.btn):not(.ctsfw-sch-button):not(.ctsfw-btn):focus-visible::after {
    transform: scaleX(1);
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ctsfw-scholarships a:not(.btn):not(.ctsfw-sch-button):not(.ctsfw-btn)::after {
        transition: none;
    }
}
/* Light theme: titles should be dark blue; “…more” already maroon */
.ctsfw-scholarships.theme-light .ctsfw-sch-card__title {
    color: var(--navy);
    /* #001846 */
}

/* Dark theme: titles AND other inline links should be light blue */
.ctsfw-scholarships.theme-dark .ctsfw-sch-card__title {
    color: #c9d8f6;
}

.ctsfw-scholarships.theme-dark a:not(.btn):not(.ctsfw-sch-button):not(.ctsfw-btn) {
    color: #c9d8f6;
    /* underline will match via currentColor */
}