/* == Uplifts Page ========================================== */

/* ── Layout ──────────────────────────────────────────────── */
.page-template-template-uplifts .uplifts-page .container { max-width: 100%; padding: 0; }
.page-template-template-uplifts :is(.page-hero-content,.uplifts-controls,.uplifts-grid-wrapper) { padding-left: 2rem; padding-right: 2rem; }
@media only screen and (min-width: 1000px) {
.page-template-template-uplifts :is(.page-hero-content,.uplifts-controls,.uplifts-grid-wrapper) { padding-left: 40px; padding-right: 40px; /*<-- match to Salient settings*/ }
}

/* ── Hero ────────────────────────────────────────────────── */
/* Shared with Reviews — included here for template self-containment */
.hero-banner { padding-top: var(--s-lg); }
.hero-banner h5 { color: var(--c-blue-400) !important; font-size: var(--fs-2xl) !important; text-transform: uppercase; margin-bottom: 1rem; }
.hero-banner h1 { font-size: var(--fs-4xl); font-weight: var(--fw-b); max-width: 19ch; margin-bottom: 2rem; }
.hero-banner h1 strong { color: var(--c-blue-400); }
.hero-banner p { font-size: var(--fs-xl); line-height: 1.5; text-align: center; max-width: 48ch; margin-bottom: 2rem; }
.hero-banner .wp-block-buttons { font-size: var(--fs-sm); margin-bottom: 1rem;}
.hero-banner .wp-block-buttons .wp-block-button.is-style-outline a { border-width: 1.5px; border-color: var(--c-blue-500); color: var(--c-blue-500); transition: color .2s;}
.hero-banner .wp-block-buttons .wp-block-button.is-style-outline a:hover {  background-color: var(--c-blue-500); color: #fff; }

/* ── Controls ────────────────────────────────────────────── */
.uplifts-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.uplifts-controls .controls-left { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; flex: 1; justify-content: space-between; }

/* ── Category Filters ────────────────────────────────────── */
.uplifts-page .category-filters { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 1.4667rem + 0.5333vw, 2rem); }
.uplifts-page .filter-btn { padding: 0; border: none; background: none; cursor: pointer; font-size: 16px; font-weight: 500; color: #666; position: relative; padding-bottom: 8px; transition: color 0.2s ease; }
.uplifts-page .filter-btn:hover { color: #333; }
.uplifts-page .filter-btn.active { color: #333; }
.uplifts-page .filter-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--c-blue-400); }

/* ── Search ──────────────────────────────────────────────── */
.uplifts-page .search-wrapper { position: relative; min-width: 200px; max-width: 250px; margin-left: auto; }
#uplift-search { width: 100%; padding: 0.6rem 2.2rem 0.6rem 0.9rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
#uplift-search:focus { outline: none; border-color: var(--c-blue-400); box-shadow: 0 0 0 1px var(--c-blue-400); }
.uplifts-page .search-clear { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; display: none; font-size: 0.85rem; line-height: 1; }
.uplifts-page .search-clear:hover { color: #333; }
.uplifts-controls .results-info { color: #666; font-size: 14px; white-space: nowrap; }

/* ── Reset Button ────────────────────────────────────────── */
.uplifts-page .search-reset-btn { padding: 12px 20px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; }
.uplifts-page .search-reset-btn:hover:not(:disabled) { border-color: #333; background: #f5f5f5; }
.uplifts-page .search-reset-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Grid ────────────────────────────────────────────────── */
.uplifts-grid-wrapper { background-color: var(--c-blue-25); }
.uplifts-grid { padding: 2rem 0; }
.uplift-card { box-sizing: border-box; float: left; /* Masonry expects floated or inline-block children */ }

/* Columns Handling */
/*
4   calc(25% - 18px)
3   calc(33.333% - 16px)
2   calc(50% - 12px)
1   100%

Uplift cards carry a name heading + story body so they read better at fewer,
wider columns than review quote cards. Range starts at 4 rather than 6.
*/
.uplift-card, .grid-sizer { width: calc(25% - 18px); /* 4 cols */ }
@media (max-width: 1150px) {
    .uplift-card, .grid-sizer { width: calc(33.333% - 16px); /* 3 cols */ }
}
@media (max-width: 900px) {
    .uplift-card, .grid-sizer { width: calc(50% - 12px); /* 2 cols */ }
}
@media (max-width: 560px) {
    .uplift-card, .grid-sizer { width: 100%; /* 1 col */ }
}

/* ── Card ────────────────────────────────────────────────── */
.uplift-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 1.5rem; margin: 0 0 24px 0; /*<-- match gutter set in uplifts.js*/ position: relative; transition: box-shadow 0.2s ease; scroll-margin-top: 120px; /* match headerOffset in JS */ }
.uplift-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.uplift-card--featured { border-color: var(--c-blue-300); }

/* ── Card Header ─────────────────────────────────────────── */
.uplift-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid #d6d6d6; }
.uplift-identity { display: flex; flex-direction: column; gap: 0.1rem; flex-basis: 100%; text-align: center; }
.uplift-name { margin: 0; font-size: calc(var(--fs-lg)  * 1.15); font-weight: 700; line-height: 1.2; color: #1a1a1a; }
.uplift-details { margin: 0; padding: 0; font-size: 0.85rem; color: #777; }

/* ── Story Heading ───────────────────────────────────────── */
.uplift-heading { padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid #d6d6d6; text-align: center;}
.uplift-heading h4 { font-size: var(--fs-md);line-height: 1.5;color: var(--c-blue-500);font-style: italic;font-weight: 600;text-wrap: balance; max-width: 40ch; margin: 0 auto; }

/* ── Card Body ───────────────────────────────────────────── */
.uplift-body { font-size: var(--fs-sm); line-height: 1.5; color: #1a1a1a; padding: .75rem 1rem; }
.uplift-body p { margin-block-end: 0.875em; padding: 0; }
.uplift-body p:last-child { margin-bottom: 0; padding-bottom: 0; }
.uplift-body strong { font-weight: 700; }
.uplift-body a { color: var(--c-link); text-underline-offset: 2px; }
.uplift-body a:hover { color: var(--c-link-hover); }
/* WYSIWYG images — constrain within card */
.uplift-body img { max-width: 100%; height: auto; border-radius: 4px; }

/* ── Permalink Icon ──────────────────────────────────────── */
.uplift-permalink { opacity: 0; transition: opacity 0.15s ease; font-size: 1rem; text-decoration: none; color: #aaa; flex-shrink: 0; }
.uplift-card:hover .uplift-permalink,
.uplift-card:focus-within .uplift-permalink { opacity: 1; }
.uplift-permalink:hover { color: #555; }

/* ── Hash Highlight Animation ────────────────────────────── */
@keyframes uplift-flash { 0% { background-color: #fff; } 20% { background-color: #fff9c4; } 100% { background-color: #fff; } }
.uplift-highlight { animation: uplift-flash 1.6s ease forwards; }

/* ── Misc ────────────────────────────────────────────────── */
.uplifts-controls .results-info { display: none; } /* hidden — matches Reviews; remove display:none to restore */
.uplifts-page .no-results { text-align: center; padding: 3rem 1rem; color: #999; font-size: 1rem; }