:root {
    --grace-navy: rgba(0, 86, 140);
    --grace-orange: rgba(224, 88, 41);
    --grace-ink: #333;
    --grace-muted: #777;
    --grace-line: rgba(0, 86, 140, 0.35);
}

.grace-day-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.grace-day-row::before,
.grace-day-row::after { display: none; }

.grace-filter-sheet {
    position: sticky;
    top: 20px;
}

.grace-filter-fab,
.grace-filter-close,
.grace-filter-done,
.grace-filter-backdrop { display: none; }

@media (max-width: 991px) {
    .grace-filter-fab {
        position: fixed;
        right: 50px;
        bottom: calc(54px + env(safe-area-inset-bottom));
        z-index: 1020;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        padding: 0;
        font-size: 20px;
        border: 0;
        border-radius: 50%;
        background: var(--grace-navy);
        color: #fff;
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .grace-filter-fab:focus-visible { outline: 2px solid var(--grace-orange); outline-offset: 3px; }

    .grace-filter-fab.is-offscreen {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }

    .grace-filter-fab-count {
        position: absolute;
        top: -4px;
        right: -4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 60px;
        background: var(--grace-orange);
        font-size: 12px;
        font-weight: 700;
    }
    .grace-filter-fab-count[hidden] { display: none; }

    .grace-filter-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 1045;

        max-height: 85vh;
        max-height: 85svh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        border-radius: 20px 20px 0 0;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .grace-filter-sheet.is-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.25s ease, visibility 0s;
    }
    .grace-filter-sheet .grace-filter {
        position: relative;
        margin: 0;
        padding: 0 54px calc(58px + env(safe-area-inset-bottom));
        border-radius: 0;
        box-shadow: none;
    }

    .grace-filter-sheet .grace-filter-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 -54px 20px;
        padding: 30px 30px 14px 54px;
        background: #fff;
        box-shadow: 0 1px 0 #eee;
    }
    .grace-filter-sheet .grace-filter-title { margin: 0; }
    .grace-filter-sheet .grace-filter-group { margin-bottom: 22px; }
    .grace-filter-sheet .grace-chips { gap: 8px; }
    .grace-filter-close {
        flex: 0 0 auto;
        display: block;
        padding: 4px 10px;
        border: 0;
        background: transparent;
        color: var(--grace-navy);
        font-size: 28px;
        line-height: 1;
    }
    .grace-filter-done {
        display: block;
        margin-top: 8px;
    }

    .grace-filter-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.45);
        touch-action: none;
    }
    .grace-filter-backdrop.is-open { display: block; }

    body.grace-filter-locked {
        position: fixed;
        left: 0;
        right: 0;
        overflow: hidden;
    }
}

.grace-day-col {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 10px;
    margin-bottom: 20px;
}
@media (max-width: 1399px) {
    .grace-day-col { flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 1199px) {
    .grace-day-col { flex-basis: 33.333%; max-width: 33.333%; }
}
@media (max-width: 767px) {
    .grace-day-col { flex-basis: 50%; max-width: 50%; }
}
@media (max-width: 479px) {
    .grace-day-col { flex-basis: 100%; max-width: 100%; }
}

.grace-day-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;                              /* matches the home page cards */
    background: #fff;
    border: 1px solid rgba(0, 86, 140, .08);
    box-shadow: 0 3px 10px rgba(0, 86, 140, .14);    /* soft navy shadow, same as event / message cards */
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}
.grace-day-card:hover,
.grace-day-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0, 86, 140, .22);
    outline: none;
}

.grace-day-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px 8px;
    background: linear-gradient(160deg, var(--grace-navy) 15%, var(--grace-orange) 100%);
    border-radius: 0 0 40px 0;
    color: #fff;
    text-align: center;
    line-height: 1.1;
}
.grace-day-dow   { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.grace-day-num   { font-size: 40px; font-weight: 700; margin: 4px 0; }
.grace-day-month { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

.grace-day-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 14px 16px 12px;
}
.grace-day-events {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}
.grace-day-events li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.grace-day-events li:last-child { border-bottom: 0; }
.grace-day-events a {
    display: block;
    overflow: hidden;
    color: var(--grace-navy);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.grace-day-events a:hover { color: var(--grace-orange); }
.grace-day-time {
    display: block;
    color: #777;
    font-size: 13px;
}
.grace-day-more { margin-top: 10px; }
.grace-day-extra {
    display: block;
    margin-bottom: 6px;
    color: var(--grace-orange);
    font-size: 13px;
    font-weight: 700;
}
/* Calendar buttons: navy pill, slightly brighter blue + navy glow on hover (no orange), same as View All Events */
.grace-day-viewmore,
.grace-day-viewmore:hover,
.grace-filter-actions .grace-family-theme-primary-solid,
.grace-filter-actions .grace-family-theme-primary-solid:hover {
    border-radius: 60px !important;      /* the theme's button class forces square corners, so this needs !important */
    background: var(--grace-navy) !important;
    border-color: var(--grace-navy) !important;
    color: #fff !important;
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.grace-day-card:hover .grace-day-viewmore { background: #0a6aa8 !important; border-color: #0a6aa8 !important; }
/* The theme gives buttons a 48px height, and the calendar page has an inline `.btn-sm { margin-bottom: 20px !important }`
   that loads after grace.css; inside the card that left a big gap under View More. The extra classes in this
   selector make it more specific than `.btn-sm`, so it wins even though it loads first. */
.grace-day-more .btn.grace-day-viewmore {
    margin: 0 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
}
@media (hover: hover) {
    .grace-filter-actions .grace-family-theme-primary-solid:hover,
    .grace-filter-actions .grace-family-theme-primary-solid:focus-visible {
        background: #0a6aa8 !important;
        border-color: #0a6aa8 !important;
        box-shadow: 0 10px 24px rgba(1, 45, 80, .35);
        transform: translateY(-2px);
    }
}

.modal-scrollable > .modal.grace-event-modal {
    width: min(640px, 92vw);
    margin-left: calc(min(640px, 92vw) / -2);
    background: transparent;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
}
.modal-scrollable > .modal.grace-event-modal .modal-dialog {
    width: auto;
    max-width: 640px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .grace-event-modal .modal-dialog { width: 640px; }
}

.grace-event-modal .modal-dialog {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.grace-event-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #e6e9ec;
    background-clip: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.grace-event-modal .grace-modal-head {
    flex: 0 0 auto;
    display: flex;
    padding: 0;
    border-bottom: 0;
    color: #fff;
}
.grace-event-modal .grace-modal-head::before,
.grace-event-modal .grace-modal-head::after { display: none; }
.grace-modal-date {
    flex: 0 0 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    background: var(--grace-orange);
    line-height: 1;
    text-align: center;
}
.grace-modal-month { font-size: 30px; font-weight: 500; }
.grace-modal-daynum { font-size: 30px; font-weight: 800; }
.grace-modal-dayname {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 18px 24px;
    background: var(--grace-navy);
}
.grace-event-modal .grace-modal-dayname .modal-title {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}
.grace-modal-dayname .fa-calendar-alt { font-size: 52px; }
.grace-event-modal .grace-modal-dayname .modal-title { min-width: 0; }

.grace-modal-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    transition: background 0.2s ease;
}
.grace-modal-x:hover,
.grace-modal-x:focus { background: var(--grace-orange); color: #fff; outline: 0; }
.grace-modal-x:focus-visible { box-shadow: 0 0 0 2px #fff; }

.grace-event-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 16px 6px;
}
.grace-modal-empty { margin: 10px 0 14px; color: #555; }

.grace-modal-events {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .grace-modal-events { grid-template-columns: 1fr 1fr; }
}
.grace-modal-event {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 12px;
    background: #fff;
    border-radius: 8px;
}
.grace-modal-event h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.grace-modal-event h4 a { color: var(--grace-navy); }
.grace-modal-event h4 a:hover { color: var(--grace-orange); text-decoration: none; }
.grace-modal-meta { color: #555; font-size: 11px; margin-bottom: 8px; }
.grace-modal-btn {
    margin-top: auto;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 60px;
    background: var(--grace-navy);
    color: #fff;
}
.grace-modal-btn { transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.grace-modal-btn:hover,
.grace-modal-btn:focus { background: #0a6aa8; color: #fff; box-shadow: 0 6px 14px rgba(1, 45, 80, .3); }
.grace-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.grace-modal-actions .grace-modal-btn { margin-top: 0; }
.grace-modal-actions .grace-ics-btn {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.grace-event-modal .modal-footer {
    flex: 0 0 auto;
    padding: 16px;
    border-top: 0;
    background: transparent;
}
.grace-modal-close {
    padding: 10px 42px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 60px;
    background: var(--grace-navy);
    color: #fff;
}
.grace-modal-close { transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.grace-modal-close:hover,
.grace-modal-close:focus { background: #0a6aa8; color: #fff; box-shadow: 0 10px 24px rgba(1, 45, 80, .35); transform: translateY(-2px); }

@media (max-width: 480px) {
    .grace-modal-month,
    .grace-modal-daynum { font-size: 24px; }
    .grace-event-modal .grace-modal-dayname .modal-title { font-size: 20px; }
    .grace-modal-dayname { padding: 12px; gap: 10px; }
    .grace-modal-dayname .fa-calendar-alt { font-size: 30px; }
    .grace-modal-x { width: 32px; height: 32px; font-size: 16px; }
    .grace-event-modal .modal-footer { padding: 12px 16px; }
}

.grace-filter {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.grace-filter-title {
    margin: 0 0 14px;
    color: var(--grace-navy);
}
.grace-filter .form-control { border-radius: 8px; }

.grace-filter-fields {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
}

.grace-filter-group {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
.grace-filter-group .form-group { margin-bottom: 8px; }

.grace-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.grace-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}
.grace-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.grace-chip span {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--grace-line);
    border-radius: 60px;
    color: var(--grace-navy);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.grace-chip:hover span { border-color: var(--grace-navy); }
.grace-chip input:checked + span {
    border-color: var(--grace-navy);
    background: var(--grace-navy);
    color: #fff;
}
.grace-chip input:focus-visible + span {
    outline: 2px solid var(--grace-orange);
    outline-offset: 2px;
}

.grace-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 10px;
}
.grace-dates[hidden] { display: none; }
.grace-chips + .grace-dates { margin-top: 14px; }
.grace-dates input[type=date] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

@supports (-webkit-touch-callout: none) {
    .grace-dates input[type=date] {
        -webkit-appearance: none;
        appearance: none;
        min-height: 34px;
        line-height: 20px;
        background-color: #fff;
    }
    .grace-dates input[type=date]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
    }
}

.grace-filter-hint {
    margin: -4px 0 12px;
    color: #888;
    font-size: 12px;
}

.grace-filter-actions .grace-family-theme-primary-solid {
    padding: 8px 22px;
    border-radius: 60px;
}
@media (min-width: 480px) and (max-width: 991px) {
    .grace-filter-actions .btn { width: auto; }
}

.grace-pager { text-align: center; }
.grace-pager .pagination > li > a,
.grace-pager .pagination > li > span {
    margin: 0 3px;
    border: 0;
    border-radius: 60px !important;
    color: var(--grace-navy);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    line-height: 1;
    text-align: center;
}
.grace-pager .pagination > li > a:hover {
    background: rgba(0, 86, 140, 0.1);
    color: var(--grace-navy);
}
.grace-pager .pagination > .active > span,
.grace-pager .pagination > .active > span:hover {
    background: var(--grace-navy);
    color: #fff;
}
.grace-pager .pagination > .disabled > span { color: #bbb; background: transparent; }

.grace-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1030;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    background: var(--grace-navy);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.grace-loader::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--grace-orange);
    border-right-color: var(--grace-orange);
    animation: graceLoaderSpin 0.9s linear infinite;
}
.grace-loader svg { width: 60px; height: 60px; overflow: visible; }
.grace-loader path { fill: #fff; transform-box: fill-box; }
.grace-loader .grace-loader-sun {
    transform-origin: 50% 100%;
    animation: graceLoaderSun 1.6s ease-in-out infinite;
}

.grace-loader .grace-loader-wave { animation: graceLoaderWave 1.6s ease-in-out infinite; }
.grace-loader .grace-loader-wave-2 { animation-delay: 0.12s; }
.grace-loader .grace-loader-wave-3 { animation-delay: 0.24s; }
.grace-loader .grace-loader-wave-4 { animation-delay: 0.36s; }

@keyframes graceLoaderSpin { to { transform: rotate(360deg); } }
@keyframes graceLoaderSun {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes graceLoaderWave {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .grace-loader::before,
    .grace-loader path { animation: none; }
}

/* Responsive helpers. Breakpoints: 479 / 599 / 767 / 991 / 1199 (see shared/responsive-guidelines.md) */
.grace-measure { max-width: 68ch; }
.grace-narrow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.grace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.grace-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grace-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) {
    .grace-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .grace-grid,
    .grace-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .grace-grid,
    .grace-grid-2,
    .grace-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.grace-tap {
    min-width: 44px;
    min-height: 44px;
}

.grace-fit-height {
    max-height: 85vh;
    max-height: 85svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.grace-visible-xxs,
.grace-visible-xs-wide { display: none !important; }
@media (max-width: 479px) {
    .grace-hidden-xxs { display: none !important; }
    .grace-visible-xxs { display: block !important; }
}
@media (max-width: 599px) {
    .grace-hidden-phone { display: none !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
    .grace-hidden-xs-wide { display: none !important; }
    .grace-visible-xs-wide { display: block !important; }
}

/* Hover effects: lift + shadow, never borders.
   .grace-hover-feature  big image card (put on the div inside the <a>)
   .grace-hover-card     card with an image on top (.card-header background or <img class="card-img">)
                         and a title (.card-title or .card-title-lg) that turns orange on hover
   .grace-hover-btn      on the <a>; animates its inner .btn-hover
   .grace-hover-arrow    on the Font Awesome arrow <i> inside any of the above
   Hover only runs on mouse devices 600px+ so phone taps don't stick. */
.grace-hover-feature,
.grace-hover-card,
.grace-hover-btn .btn-hover {
    transition: transform .3s ease, box-shadow .3s ease;
}
.grace-hover-card .card-header,
.grace-hover-card .card-img { transition: filter .3s ease; }
.grace-hover-card .card-title,
.grace-hover-card .card-title-lg { transition: color .3s ease; }
.grace-hover-arrow { transition: transform .3s ease; }

@media (hover: hover) and (min-width: 600px) {
    .grace-hover-feature:hover,
    a:focus-visible > .grace-hover-feature {
        transform: translateY(-4px);
        box-shadow: 0 6px 14px rgba(0, 86, 140, 0.28);
    }
    .grace-hover-feature:hover .grace-hover-arrow,
    a:focus-visible > .grace-hover-feature .grace-hover-arrow {
        transform: translateX(10px);
    }

    .grace-hover-card:hover,
    a:focus-visible > .grace-hover-card {
        transform: translateY(-4px);
        box-shadow: 0 6px 14px rgba(0, 86, 140, 0.22);
    }
    .grace-hover-card:hover .card-header,
    .grace-hover-card:hover .card-img,
    a:focus-visible > .grace-hover-card .card-header,
    a:focus-visible > .grace-hover-card .card-img {
        filter: brightness(1.08) saturate(1.15);
    }
    .grace-hover-card:hover .card-title,
    .grace-hover-card:hover .card-title-lg,
    a:focus-visible > .grace-hover-card .card-title,
    a:focus-visible > .grace-hover-card .card-title-lg {
        color: var(--grace-orange) !important;
    }

    .grace-hover-btn:hover .btn-hover,
    .grace-hover-btn:focus-visible .btn-hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(224, 88, 41, 0.45);
    }
    .grace-hover-btn:hover .grace-hover-arrow,
    .grace-hover-btn:focus-visible .grace-hover-arrow {
        transform: translateX(6px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .grace-hover-feature,
    .grace-hover-card,
    .grace-hover-btn .btn-hover,
    .grace-hover-arrow {
        transform: none !important;
    }
}

/* Section title: icon circle + heading + divider line that fills the rest of the row.
   The circle is its own <span> so Font Awesome's sizing/display rules on the <i> can't squish it.
   Plain:
   <div class="grace-section-title">
       <span class="grace-section-icon" aria-hidden="true"><i class="fa-solid fa-people-group"></i></span>
       <h2 class="heading-text-gotham gfc-blue">Title</h2>
   </div>
   Arch + icon, no line (used on My Communities):
   <div class="grace-section-title grace-section-title--no-line">
       <span class="grace-section-shapes" aria-hidden="true">
           <span class="grace-shape-arch"></span>
           <span class="grace-section-icon"><i class="fa-solid fa-people-group"></i></span>
       </span>
       <h2 class="heading-text-gotham gfc-blue">Title</h2>
   </div>
   Full brand shapes (triangle + J curve lead into the icon; the line ends in triangle + arch + square).
   Add grace-section-icon--navy to the circle for a navy icon:
   <div class="grace-section-title">
       <span class="grace-section-shapes" aria-hidden="true">
           <span class="grace-shape-tri"></span><span class="grace-shape-j"></span>
           <span class="grace-section-icon"><i class="fa-solid fa-people-group"></i></span>
       </span>
       <h2 class="heading-text-gotham gfc-blue">Title</h2>
       <span class="grace-section-end" aria-hidden="true">
           <span class="grace-shape-tri grace-shape-tri--flip"></span><span class="grace-shape-arch"></span><span class="grace-shape-square"></span>
       </span>
   </div> */
.grace-section-title {
    --grace-shape-size: 48px;
    --grace-shape-blue: #A8BAD4;   /* periwinkle from the GFC brand shapes */
    display: flex;
    align-items: center;
    gap: 14px;
}
.grace-section-title h2 {
    margin: 0;
    min-width: 0;          /* long titles wrap instead of pushing the circle */
}
.grace-section-icon {
    flex: 0 0 var(--grace-shape-size);
    width: var(--grace-shape-size);
    min-width: var(--grace-shape-size);
    height: var(--grace-shape-size);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--grace-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.grace-section-icon i {
    font-size: calc(var(--grace-shape-size) * 0.5);
    line-height: 1;
    width: auto;
    margin: 0;
}
/* divider line (sits between the heading and the optional end shapes) */
.grace-section-title::after {
    content: "";
    order: 1;
    flex: 1 1 24px;
    min-width: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--grace-line), rgba(0, 86, 140, 0));
}

/* ----- brand shapes ----- */
.grace-section-shapes,
.grace-section-end {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}
.grace-section-end { order: 2; }
.grace-section-icon--navy { background: var(--grace-navy); }
.grace-section-title--no-line::after { display: none; }
/* with the end shapes, the line is solid periwinkle and runs straight into them */
.grace-section-title:has(.grace-section-end)::after {
    height: 3px;
    background: var(--grace-shape-blue);
    /* close the flex gap and slide under the triangle so the line meets its slanted edge */
    margin-right: calc(-14px - var(--grace-shape-size) / 2);
}
.grace-shape-tri,
.grace-shape-j,
.grace-shape-arch {
    flex: 0 0 var(--grace-shape-size);
    width: var(--grace-shape-size);
    height: var(--grace-shape-size);
    box-sizing: border-box;
}
.grace-shape-tri {
    background: var(--grace-orange);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.grace-shape-tri--flip { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.grace-shape-j {
    border-right: calc(var(--grace-shape-size) * 0.2) solid var(--grace-shape-blue);
    border-bottom: calc(var(--grace-shape-size) * 0.2) solid var(--grace-shape-blue);
    border-bottom-right-radius: calc(var(--grace-shape-size) * 0.6);   /* straight bar, then curve, then straight base */
}
.grace-shape-arch {
    background: var(--grace-shape-blue);
    border-top-right-radius: 60%;
}
.grace-shape-square {
    flex: 0 0 calc(var(--grace-shape-size) * 0.22);
    width: calc(var(--grace-shape-size) * 0.22);
    height: calc(var(--grace-shape-size) * 0.22);
    background: var(--grace-navy);
}

@media (max-width: 599px) {
    .grace-section-title { --grace-shape-size: 34px; gap: 10px; }
    .grace-section-end { display: none; }   /* give the title room on phones */
    .grace-section-title:has(.grace-section-end)::after { display: none; }
}

/* Horizontal scroll row: cards stay on one line and scroll left/right instead of wrapping.
   3 per view on desktop (992+), 2 on tablet (600-991), 1 + a peek of the next on phones.
   Padding gives room for the hover lift/shadow so it isn't clipped by the scroll area.
   <div class="grace-scroll-row">
       <div class="grace-scroll-item"><a href="#"><div class="grace-hover-feature grace-tall-card">…</div></a></div>
   </div> */
.grace-scroll-row {
    --grace-scroll-gap: 24px;
    display: flex;
    gap: var(--grace-scroll-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 12px 15px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--grace-line) transparent;
}
.grace-scroll-row::-webkit-scrollbar { height: 6px; }
.grace-scroll-row::-webkit-scrollbar-thumb { background: var(--grace-line); border-radius: 3px; }
.grace-scroll-row::-webkit-scrollbar-track { background: transparent; }
.grace-scroll-item {
    flex: 0 0 calc((100% - 2 * var(--grace-scroll-gap)) / 3);
    min-width: 0;
    scroll-snap-align: start;
}
.grace-scroll-item > a { display: block; height: 100%; }
/* Inside a scroll row the overflow clips anything outside it, so cards get a smaller lift and a
   tighter shadow that fits in the row's padding (12px top / 24px bottom). */
@media (hover: hover) and (min-width: 600px) {
    .grace-scroll-row .grace-hover-feature:hover,
    .grace-scroll-row a:focus-visible > .grace-hover-feature {
        transform: translateY(-4px);
        box-shadow: 0 6px 14px rgba(0, 86, 140, 0.28);
    }
}
.grace-scroll-item--auto {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.grace-tall-card { height: 440px; }
@media (max-width: 991px) {
    .grace-scroll-item { flex-basis: calc((100% - var(--grace-scroll-gap)) / 2); }
    .grace-tall-card { height: 400px; }
}
@media (max-width: 599px) {
    .grace-scroll-row { --grace-scroll-gap: 16px; }
    .grace-scroll-item { flex-basis: 80%; }
    .grace-tall-card { height: 360px; }
}

/* Liquid glass panel in GFC navy.
   Frosted navy gradient, soft light-blue / orange glows inside, glossy top-left sheen, thin bright rim.
   Put content inside; it sits above the glows. Blurs whatever is behind it where backdrop-filter is supported.
     <div class="grace-glass"> … </div> */
.grace-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(115deg, rgba(0, 86, 140, .94) 0%, rgba(0, 86, 140, .82) 45%, rgba(74, 124, 178, .78) 100%);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        0 18px 40px rgba(0, 86, 140, .22),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(255, 255, 255, .12),
        inset 0 0 40px rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
            backdrop-filter: blur(20px) saturate(160%);
}
.grace-glass::before {          /* glows under the glass */
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(35% 45% at 20% 20%, rgba(197, 216, 244, .35), transparent 70%),
        radial-gradient(30% 40% at 85% 85%, rgba(224, 88, 41, .18), transparent 70%),
        radial-gradient(40% 50% at 70% 10%, rgba(168, 186, 212, .25), transparent 70%);
    filter: blur(30px);
}
.grace-glass::after {           /* glossy sheen */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 28%, rgba(255, 255, 255, 0) 55%);
}

/* Frosted see-through white glass, for text panels and pills that sit on top of a photo.
   White text; a faint text-shadow keeps it readable on light photos.
     <div class="grace-glass-frost"> … </div> */
.grace-glass-frost {
    position: relative;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 100%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -1px 0 rgba(255, 255, 255, .15),
        0 4px 14px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
            backdrop-filter: blur(14px) saturate(170%);
}

/* Grey liquid glass (Grace grey #E8EBEE): add to .grace-glass. Dark navy text instead of white.
     <div class="grace-glass grace-glass--grey"> … </div> */
.grace-glass--grey {
    color: var(--grace-navy);
    background: linear-gradient(115deg, rgba(232, 235, 238, .95) 0%, rgba(232, 235, 238, .82) 50%, rgba(214, 221, 230, .78) 100%);
    border-color: rgba(255, 255, 255, .8);
    box-shadow:
        0 12px 30px rgba(0, 86, 140, .10),
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(255, 255, 255, .4),
        inset 0 0 30px rgba(255, 255, 255, .25);
}
.grace-glass--grey::before {
    background:
        radial-gradient(35% 45% at 20% 20%, rgba(255, 255, 255, .6), transparent 70%),
        radial-gradient(30% 40% at 85% 85%, rgba(197, 216, 244, .35), transparent 70%);
}
.grace-glass--grey::after {
    background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 55%);
}

/* Light blue liquid glass (GFC light blue #C5D8F4): add to .grace-glass. Dark navy text instead of white.
     <div class="grace-glass grace-glass--light-blue"> … </div> */
.grace-glass--light-blue {
    color: var(--grace-navy);
    background: linear-gradient(115deg, rgba(197, 216, 244, .92) 0%, rgba(197, 216, 244, .78) 50%, rgba(168, 186, 212, .72) 100%);
    border-color: rgba(255, 255, 255, .75);
    box-shadow:
        0 12px 30px rgba(0, 86, 140, .14),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(255, 255, 255, .35),
        inset 0 0 30px rgba(255, 255, 255, .2);
}
.grace-glass--light-blue::before {
    background:
        radial-gradient(35% 45% at 20% 20%, rgba(255, 255, 255, .55), transparent 70%),
        radial-gradient(30% 40% at 85% 85%, rgba(0, 86, 140, .12), transparent 70%);
}
.grace-glass--light-blue::after {
    background: linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, 0) 55%);
}

/* Card links in scroll rows never underline on hover/focus (the whole card is the link) */
.grace-scroll-row a,
.grace-scroll-row a:hover,
.grace-scroll-row a:focus { text-decoration: none; }

/* Whiter frosted glass: add to .grace-glass-frost. Mostly-white milky glass with navy/dark text.
     <div class="grace-glass-frost grace-glass-frost--white"> … </div> */
.grace-glass-frost--white {
    color: #333;
    text-shadow: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .66) 100%);
    border-color: rgba(255, 255, 255, .9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(255, 255, 255, .4),
        0 4px 14px rgba(0, 86, 140, .16);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
            backdrop-filter: blur(18px) saturate(180%);
}

/* Animated brand shapes after a section title. Shapes: tri, tri2, tri3, circle, dot, arch, ring, j —
   use a different mix per section. They pop in one after another when the page loads, then take turns
   doing a small move every few seconds. CSS only, no script. Hidden from screen readers.
     <div class="grace-section-title grace-section-title--no-line">
         <span class="grace-section-icon" aria-hidden="true"><i class="fa-solid fa-calendar-days"></i></span>
         <h2 class="heading-text-gotham gfc-blue">Featured Events</h2>
         <span class="grace-title-shapes" aria-hidden="true">
             <span class="grace-ts grace-ts--tri"></span><span class="grace-ts grace-ts--circle"></span><span class="grace-ts grace-ts--arch"></span><span class="grace-ts grace-ts--ring"></span><span class="grace-ts grace-ts--tri2"></span>
         </span>
     </div> */
.grace-title-shapes {
    --grace-ts-size: var(--grace-shape-size, 48px);   /* same size as the icon circle (48px, 34px on phones) */
    --grace-ts-olive: #4E5945;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    flex: 0 0 auto;
    margin-left: 4px;
    align-self: center;
}
.grace-ts {
    display: block;
    width: var(--grace-ts-size);
    height: var(--grace-ts-size);
    box-sizing: border-box;
    transform-origin: 50% 50%;
    animation:
        grace-ts-in .6s cubic-bezier(.34, 1.56, .64, 1) both,
        var(--grace-ts-move) 7s ease-in-out infinite;
}
/* Shapes (mix and match per title; colours from the GFC brand strip) */
.grace-ts--tri    { background: var(--grace-orange, #E05829); clip-path: polygon(0 0, 100% 0, 0 100%);   --grace-ts-move: grace-ts-spin; }
.grace-ts--tri3   { background: var(--grace-orange, #E05829); clip-path: polygon(0 0, 100% 0, 100% 100%); --grace-ts-move: grace-ts-spin; }
.grace-ts--tri2   { background: var(--grace-navy, #00568C); clip-path: polygon(0 100%, 100% 0, 100% 100%); --grace-ts-move: grace-ts-hop; }
.grace-ts--circle { background: var(--grace-navy, #00568C); border-radius: 50%;                          --grace-ts-move: grace-ts-hop; }
.grace-ts--dot    { background: var(--grace-ts-olive); border-radius: 50%;                                 --grace-ts-move: grace-ts-hop; }
.grace-ts--arch   { background: var(--grace-shape-blue, #A8BAD4); border-top-right-radius: 55%;           --grace-ts-move: grace-ts-flip; }
.grace-ts--ring   { border-top: calc(var(--grace-ts-size) * .32) solid var(--grace-ts-olive);
                    border-right: calc(var(--grace-ts-size) * .32) solid var(--grace-ts-olive);
                    border-top-right-radius: 100%;                                                         --grace-ts-move: grace-ts-roll; }
.grace-ts--j      { border-right: calc(var(--grace-ts-size) * .3) solid var(--grace-shape-blue, #A8BAD4);
                    border-bottom: calc(var(--grace-ts-size) * .3) solid var(--grace-shape-blue, #A8BAD4);
                    border-bottom-right-radius: 55%;                                                       --grace-ts-move: grace-ts-flip; }
/* pop-in and idle moves go left to right by position, whatever shapes are used */
.grace-ts:nth-child(1) { animation-delay: .1s, 1.2s; }
.grace-ts:nth-child(2) { animation-delay: .2s, 2.2s; }
.grace-ts:nth-child(3) { animation-delay: .3s, 3.2s; }
.grace-ts:nth-child(4) { animation-delay: .4s, 4.2s; }
.grace-ts:nth-child(5) { animation-delay: .5s, 5.2s; }

/* entrance: grow in with a little overshoot */
@keyframes grace-ts-in {
    from { transform: scale(0) rotate(-90deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}
/* idle moves: each shape does its move once per 7s loop, then rests */
@keyframes grace-ts-spin {
    0%, 12%, 100% { transform: rotate(0); }
    6%            { transform: rotate(90deg); }
}
@keyframes grace-ts-hop {
    0%, 12%, 100% { transform: translateY(0) scale(1); }
    5%            { transform: translateY(-7px) scale(1.08); }
    9%            { transform: translateY(0) scale(.95, 1.05); }
}
@keyframes grace-ts-flip {
    0%, 12%, 100% { transform: rotate(0); }
    6%            { transform: rotate(-90deg); }
}
@keyframes grace-ts-roll {
    0%, 14%, 100% { transform: rotate(0); }
    7%            { transform: rotate(180deg); }
}
@media (max-width: 599px) {
    .grace-title-shapes { gap: 2px; }
}
@media (max-width: 379px) {
    .grace-title-shapes:not(.grace-title-shapes--lead) .grace-ts:nth-child(n+4) { display: none; }   /* very narrow phones: keep the first three shapes */
}
@media (prefers-reduced-motion: reduce) {
    .grace-ts { animation: none; }
}

/* Lead-in version (used on the home page): three shapes flow into the icon circle, then the title.
   The icon pops in and hops with the shapes, as the last shape in the row.
     <div class="grace-section-title grace-section-title--no-line">
         <span class="grace-title-shapes grace-title-shapes--lead" aria-hidden="true">
             <span class="grace-ts grace-ts--tri"></span><span class="grace-ts grace-ts--arch"></span><span class="grace-ts grace-ts--ring"></span>
             <span class="grace-section-icon grace-ts-icon"><i class="fa-solid fa-calendar-days"></i></span>
         </span>
         <h2 class="heading-text-gotham gfc-blue">Featured Events</h2>
     </div> */
.grace-title-shapes--lead {
    margin-left: 0;
    align-items: center;
}
.grace-title-shapes--lead .grace-section-icon { margin-left: 2px; }
.grace-ts-icon {
    animation:
        grace-ts-in .6s cubic-bezier(.34, 1.56, .64, 1) .4s both,
        grace-ts-hop 7s ease-in-out 4.2s infinite;
}
@media (max-width: 599px) {
    /* phones: drop the first shape, keep the two next to the icon */
    .grace-title-shapes--lead .grace-ts:nth-child(1) { display: none; }
    .grace-section-title:has(.grace-title-shapes--lead) { --grace-shape-size: 30px; gap: 8px; }   /* icon + shapes a touch smaller so the title fits on one line */
}
@media (prefers-reduced-motion: reduce) {
    .grace-ts-icon { animation: none; }
}

/* Tinted liquid glass: see-through glass in one colour, glossy top edge, bright rim, soft blur of what's behind.
   White text with a soft shadow. Put it over a photo or a coloured area.
   Any colour: set --grace-tile-color (falls back to navy). Ready-made: --orange.
     <div class="grace-glass-tint grace-glass-tint--orange"> … </div>
     <div class="grace-glass-tint" style="--grace-tile-color: #56698A;"> … </div> */
.grace-glass-tint {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--grace-tile-color, #00568C) 85%, transparent) 0%,
            color-mix(in srgb, var(--grace-tile-color, #00568C) 65%, transparent) 100%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(255, 255, 255, .15),
        0 4px 14px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
            backdrop-filter: blur(14px) saturate(170%);
}
.grace-glass-tint--orange { --grace-tile-color: #E05829; }
.grace-glass-tint--navy   { --grace-tile-color: #00568C; }