/**
 * Lenspo — site-wide lp-* section layout.
 *
 * Section-level layout classes extracted from home-index.css so that every page
 * template (not just the front page) can use the same section architecture:
 * .lp-section / .lp-wrap / .lp-sec-head / .lp-award-grid / .lp-award-card, etc.
 *
 * Enqueued site-wide (see functions.php: lenspo_assets()). Depends on
 * design-system.css for the motif utilities (.lp-eyebrow, .lp-frame, .lp-btn,
 * .lp-badge, .lp-on-dark, .lp-pull, .lp-chip) and CSS custom properties.
 */

/* ==========================================================================
   Section shell
   ========================================================================== */
.lp-section { padding: 64px 0; }
.lp-section-tight { padding: 48px 0; }

.lp-sec-head { max-width: 640px; margin-bottom: 36px; }
.lp-sec-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-top: 12px; }
.lp-sec-head p { margin-top: 12px; color: var(--ink-soft); font-size: 1rem; }
.lp-on-dark .lp-sec-head p { color: rgba(245, 247, 246, 0.75); }
.lp-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-sec-head--center .lp-eyebrow { justify-content: center; }

.lp-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.lp-actions--center { justify-content: center; }
.lp-section-foot { margin-top: 34px; display: flex; justify-content: center; }
.lp-empty { text-align: center; color: var(--ink-soft); }
.lp-on-dark .lp-empty { color: rgba(245, 247, 246, 0.7); }

/* ==========================================================================
   Two-column split (copy + aside) — reused by content pages
   ========================================================================== */
.lp-about-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .lp-about-grid { grid-template-columns: 1.3fr 0.9fr; align-items: start; gap: 48px; } }
.lp-about-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
.lp-about-copy p { margin-top: 14px; color: var(--ink-soft); line-height: 1.75; }
.lp-about-copy p:first-of-type { margin-top: 18px; }

/* ==========================================================================
   Grid cards — awards, news, events, members, generic listings
   ========================================================================== */
.lp-award-grid { display: grid; gap: 20px; }
@media (min-width: 600px) { .lp-award-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lp-award-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-award-card {
    background: var(--paper);
    padding: 22px;
    display: flex;
    flex-direction: column;
}
.lp-award-media {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 16px;
}
.lp-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lp-award-year { font-size: 0.78rem; color: var(--teal); font-weight: 600; }
.lp-award-card h3 { font-size: 1.2rem; }
.lp-award-card .lp-who { margin-top: 8px; font-size: 0.86rem; color: var(--ink-soft); }
.lp-award-card p.lp-desc { margin-top: 12px; font-size: 0.92rem; color: var(--ink-soft); }
.lp-award-date { font-size: 0.78rem; color: var(--ink-soft); margin-left: auto; }
.lp-award-card .lp-btn { margin-top: 16px; align-self: flex-start; }
.lp-award-card--center { text-align: center; align-items: center; }
.lp-award-card--center .lp-badge-row { justify-content: center; }
.lp-card-link:hover h3 { color: var(--teal); }

/* Text-only card (no media) for feature/pillar grids. */
.lp-feature-card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.lp-feature-card .lp-feature-icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--paper-dim);
    color: var(--teal);
    font-size: 1.2rem;
    margin-bottom: 16px;
}
.lp-feature-card .lp-feature-icon img { max-width: 28px; height: auto; }
.lp-feature-media { margin: -26px -24px 16px; overflow: hidden; }
.lp-feature-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.lp-feature-card h4, .lp-feature-card h5 { font-size: 1.12rem; color: var(--ink); }
.lp-feature-card p { margin-top: 10px; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.7; }
.lp-feature-card .lp-link-arrow { margin-top: auto; }

/* Inline "read more" arrow link, reused across content/listing cards. */
.lp-link-arrow {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--teal);
    align-self: flex-start;
}
.lp-link-arrow i { transition: transform 0.25s ease; }
.lp-link-arrow:hover i { transform: translateX(4px); }

/* ==========================================================================
   Welfare / stat highlight band
   ========================================================================== */
.lp-welfare-band {
    background: var(--paper-dim);
    padding: 36px 24px;
    display: grid;
    gap: 24px;
}
@media (min-width: 820px) { .lp-welfare-band { grid-template-columns: repeat(3, 1fr); padding: 40px; } }
.lp-welfare-item b { display: block; font-family: var(--headings-font); font-size: 1.6rem; color: var(--magenta); }
.lp-welfare-item span { font-size: 0.85rem; color: var(--ink-soft); }

/* ==========================================================================
   Steps + why (numbered process / feature pairs)
   ========================================================================== */
.lp-steps { display: grid; gap: 20px; }
@media (min-width: 820px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { position: relative; padding-top: 44px; }
.lp-step .lp-num {
    font-family: var(--headings-font);
    font-size: 2.1rem;
    font-weight: 300;
    color: var(--magenta);
    position: absolute;
    top: 0;
    left: 0;
}
.lp-step h4 { font-size: 1.05rem; }
.lp-step p { margin-top: 8px; color: var(--ink-soft); font-size: 0.92rem; }
.lp-on-dark .lp-step h4 { color: var(--paper); }
.lp-on-dark .lp-step p { color: rgba(245, 247, 246, 0.75); }

.lp-why-grid { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 720px) { .lp-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .lp-why-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.lp-why-card { padding: 22px; border: 1px solid var(--line); }
.lp-why-card h4 { font-size: 1.05rem; }
.lp-why-card p { margin-top: 8px; color: var(--ink-soft); font-size: 0.92rem; }
.lp-on-dark .lp-why-card { border-color: var(--line-on-dark); }
.lp-on-dark .lp-why-card h4 { color: var(--paper); }
.lp-on-dark .lp-why-card p { color: rgba(245, 247, 246, 0.75); }

/* ==========================================================================
   Story body + photo grid (shared by galleries / photo stories)
   ========================================================================== */
.lp-story-credit { margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); }
.lp-story-body { margin-top: 14px; }
.lp-story-body p { color: var(--ink-soft); }
.lp-story-body p + p { margin-top: 12px; }
.lp-story-body strong { color: var(--ink); }

/* Masonry-style photo story gallery — photos keep their natural aspect ratio
   (documentary work is a mix of portrait / landscape) instead of hard 1:1 crops. */
.lp-photo-grid {
    columns: 2;
    column-gap: 14px;
    margin-top: 40px;
}
@media (min-width: 640px) { .lp-photo-grid { columns: 3; } }
@media (min-width: 1100px) { .lp-photo-grid { columns: 4; } }
.lp-photo-grid a {
    position: relative;
    display: block;
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    break-inside: avoid;
    background: var(--paper-dim);
}
.lp-photo-grid img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.lp-photo-grid a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 31, 30, 0.55));
    opacity: 0;
    transition: opacity 0.35s ease;
}
.lp-photo-grid a::before {
    content: "\002B"; /* + expand hint */
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--teal-deep);
    background: var(--magenta);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.lp-photo-grid a:hover img { transform: scale(1.05); }
.lp-photo-grid a:hover::after { opacity: 1; }
.lp-photo-grid a:hover::before,
.lp-photo-grid a:focus-visible::before { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Listing shell — page body wrapper for inner (non-home) pages
   ========================================================================== */
.lp-page { background: var(--paper); color: var(--ink); }
.lp-page a { color: inherit; text-decoration: none; }
.lp-page img { display: block; max-width: 100%; }

/* Sidebar listing layout (news / archives with a filter rail). */
.lp-listing-split { display: grid; gap: 32px; }
@media (min-width: 992px) { .lp-listing-split { grid-template-columns: 1fr 300px; align-items: start; gap: 40px; } }

/* Member / person grids reuse the award grid but allow 4-up on wide screens. */
.lp-people-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lp-people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lp-people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .lp-people-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   About page — editorial layout on the lp-* / viewfinder system
   ========================================================================== */

/* Centered feature-card variant (pillars, benefits). */
.lp-feature-card--center { text-align: center; align-items: center; }
.lp-feature-card--center .lp-feature-icon { margin-left: auto; margin-right: auto; }

/* Lead: intro copy beside stacked identity cards. */
.lp-about-lead { display: grid; gap: 32px; }
@media (min-width: 900px) {
    .lp-about-lead { grid-template-columns: 1.25fr 0.9fr; gap: 56px; align-items: start; }
}
.lp-about-lead__copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-top: 12px; }
.lp-about-lead__copy p { margin-top: 16px; color: var(--ink-soft); line-height: 1.8; font-size: 1.02rem; }
.lp-about-lead__aside { display: grid; gap: 16px; }

/* Identity cards (English / Bengali name) inside a viewfinder frame. */
.lp-info-card { background: var(--paper-dim); }
.lp-info-card__label {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--teal); text-transform: uppercase;
    margin-bottom: 8px;
}
.lp-info-card__value { margin: 0; font-family: var(--headings-font); font-size: 1.05rem; color: var(--ink); line-height: 1.5; }
.lp-info-card__value.bn { font-family: var(--bn-font); }

/* Motto pull-quote centered. */
.lp-about-motto { margin-top: 40px; text-align: center; border-left: 0; border-top: 3px solid var(--magenta); }
.lp-about-motto cite { display: block; }

/* Two-up framed pair (mission/vision, do/don't). */
.lp-split-pair { display: grid; gap: 20px; margin-bottom: 40px; }
@media (min-width: 820px) { .lp-split-pair { grid-template-columns: 1fr 1fr; } }

/* Mission / Vision cards. */
.lp-mv-card { background: #fff; }
.lp-mv-card__tag {
    display: inline-block;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--magenta-deep);
    margin-bottom: 12px;
}
.lp-mv-card p { margin: 0; color: var(--ink-soft); line-height: 1.8; }

/* Dark membership CTA band (full-bleed section). */
.lp-join-panel__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.lp-join-panel h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.lp-join-panel p { margin-top: 14px; }
.lp-join-panel .lp-actions { justify-content: center; margin-top: 26px; }

/* Logo do / don't guideline columns. */
.lp-guide { border: 1px solid var(--line); padding: 26px 24px; background: #fff; }
.lp-guide__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.05rem; font-weight: 600;
    padding-bottom: 14px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.lp-guide--do .lp-guide__title { color: var(--teal); }
.lp-guide--do .lp-guide__title i { color: var(--teal); }
.lp-guide--dont .lp-guide__title { color: var(--magenta-deep); }
.lp-guide--dont .lp-guide__title i { color: var(--magenta-deep); }
.lp-guide__item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.lp-guide__item:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-guide__item h6 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.lp-guide__item p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }

/* Logo download cards. */
.lp-downloads { text-align: center; }
.lp-downloads__head { font-size: 1.15rem; margin-bottom: 24px; }
.lp-download-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-download-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-download-card {
    border: 1px solid var(--line);
    background: #fff;
    padding: 30px 22px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.lp-download-card:hover {
    border-color: var(--teal);
    box-shadow: 0 10px 30px rgba(10, 31, 30, 0.08);
    transform: translateY(-3px);
}
.lp-download-card > i {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: var(--teal);
    background: var(--paper-dim);
    margin-bottom: 16px;
}
.lp-download-card h6 { font-size: 0.98rem; font-weight: 600; margin-bottom: 18px; color: var(--ink); }

/* Download button — brand-teal solid with icon, sits at card foot. */
.lp-btn-download {
    margin-top: auto;
    background: var(--teal);
    color: var(--paper);
    border-color: var(--teal);
    transition: background 0.25s ease, border-color 0.25s ease;
}
.lp-btn-download:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }
.lp-btn-download i { font-size: 0.9rem; }

/* ==========================================================================
   Core fallback templates — page.php / single.php / index.php / search.php /
   comments.php. Library reference: search bar, event card, pagination,
   not-found state (gsvmc-component-library.html).
   ========================================================================== */

/* --- WYSIWYG entry content ------------------------------------------------ */
.lp-entry-shell { max-width: 780px; margin: 0 auto; }
.lp-entry { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.8; }
.lp-entry > *:first-child { margin-top: 0; }
.lp-entry > *:last-child { margin-bottom: 0; }
.lp-entry p { margin: 0 0 1.25em; }
.lp-entry h1,
.lp-entry h2,
.lp-entry h3,
.lp-entry h4,
.lp-entry h5,
.lp-entry h6 {
    font-family: var(--headings-font);
    color: var(--ink);
    line-height: 1.2;
    margin: 2em 0 0.6em;
}
.lp-entry h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
.lp-entry h3 { font-size: clamp(1.2rem, 2.4vw, 1.4rem); }
.lp-entry h4 { font-size: 1.15rem; }
.lp-entry a { color: var(--teal); border-bottom: 1px solid var(--teal); }
.lp-entry a:hover { color: var(--magenta-deep); border-color: var(--magenta-deep); }
.lp-entry ul,
.lp-entry ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.lp-entry ul { list-style: disc; }
.lp-entry ol { list-style: decimal; }
.lp-entry li { margin-bottom: 0.5em; }
.lp-entry img,
.lp-entry iframe,
.lp-entry video {
    max-width: 100%;
    height: auto;
    border-radius: var(--lp-radius);
}
.lp-entry figure { margin: 1.75em 0; }
.lp-entry figcaption {
    margin-top: 0.6em;
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-align: center;
}
.lp-entry blockquote {
    margin: 1.75em 0;
    padding: 0.4em 0 0.4em 1.25em;
    border-left: 3px solid var(--magenta);
    background: var(--paper-dim);
    font-family: var(--headings-font);
    font-size: 1.1rem;
    color: var(--ink);
}
.lp-entry blockquote p:last-child { margin-bottom: 0; }
.lp-entry code,
.lp-entry kbd {
    background: var(--paper-dim);
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}
.lp-entry pre {
    background: var(--teal-deep);
    color: var(--paper);
    padding: 1.1em 1.25em;
    overflow-x: auto;
    border-radius: var(--lp-radius);
    margin: 0 0 1.5em;
}
.lp-entry pre code { background: none; color: inherit; padding: 0; }
.lp-entry hr { border: 0; border-top: 1px solid var(--line); margin: 2.25em 0; }
.lp-entry table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
@media (min-width: 720px) { .lp-entry table { display: table; overflow-x: visible; } }
.lp-entry th,
.lp-entry td { border: 1px solid var(--line); padding: 0.7em 0.9em; text-align: left; }
.lp-entry th { background: var(--paper-dim); color: var(--ink); font-weight: 600; }

/* --- Paginated post navigation ------------------------------------------- */
.lp-link-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 0.85rem;
    font-weight: 600;
}
.lp-link-pages > span,
.lp-link-pages a { padding: 6px 12px; border: 1px solid var(--line); color: var(--ink-soft); }
.lp-link-pages a:hover { border-color: var(--teal); color: var(--teal); }
.lp-link-pages > span:first-child { border: 0; padding-left: 0; color: var(--ink); }

/* --- Search bar (library: .search-bar) ------------------------------------ */
.lp-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 6px 6px 6px 16px;
    max-width: 520px;
    margin: 0 auto 40px;
}
/* A global input[type="search"] rule in the form layer carries !important, so
   the reset inside the search shell must too — otherwise the field draws its
   own border inside the wrapper and you get a double box. */
.lp-search-bar input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none;
    font-family: var(--body-font);
    font-size: 0.92rem;
    color: var(--ink);
    padding: 8px 0;
}
.lp-search-bar input::placeholder { color: var(--ink-soft); }
.lp-search-bar button {
    background: var(--teal);
    color: var(--paper);
    border: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease;
}
.lp-search-bar button:hover { background: var(--teal-deep); }

/* --- Generic result card (library: .event-card) --------------------------- */
.lp-search-card { display: flex; flex-direction: column; }
.lp-search-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.lp-search-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-dim);
}
.lp-search-card__media img { width: 100%; height: 100%; object-fit: cover; }
.lp-search-card .lp-card-body { display: flex; flex-direction: column; flex: 1; }
.lp-search-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.lp-search-card .lp-card-text { margin-bottom: 18px; }
.lp-search-card .read-more { margin-top: auto; align-self: flex-start; }

/* --- Comments ------------------------------------------------------------- */
.lp-comments { max-width: 780px; margin: 64px auto 0; padding-top: 40px; border-top: 1px solid var(--line); }
.lp-comments__head { margin-bottom: 28px; }
.lp-comments__closed { color: var(--ink-soft); font-size: 0.9rem; }
.lp-comment-list, .lp-comment-list .children { list-style: none; margin: 0; padding: 0; }
.lp-comment-list .children { margin-left: 24px; padding-left: 20px; border-left: 1px solid var(--line); }
.lp-comment-list li.comment { margin-bottom: 26px; }
.lp-comment-list .comment-body { border: 1px solid var(--line); background: var(--paper); padding: 20px; }
.lp-comment-list .comment-author img { border-radius: 50%; margin-right: 10px; }
.lp-comment-list .comment-author .fn { font-family: var(--headings-font); color: var(--ink); font-style: normal; font-weight: 600; }
.lp-comment-list .comment-metadata { font-size: 0.78rem; color: var(--ink-soft); margin: 4px 0 12px; }
.lp-comment-list .reply a { font-size: 0.82rem; font-weight: 600; color: var(--teal); border-bottom: 1px solid var(--teal); }
.lp-comment-list .reply a:hover { color: var(--magenta-deep); border-color: var(--magenta-deep); }
.lp-comment-form__title { font-family: var(--headings-font); font-size: 1.3rem; margin: 40px 0 18px; }
.lp-comment-form input[type="text"],
.lp-comment-form input[type="email"],
.lp-comment-form input[type="url"],
.lp-comment-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 12px 14px;
    font-family: var(--body-font);
    font-size: 0.95rem;
    color: var(--ink);
    border-radius: var(--lp-radius);
}
.lp-comment-form input:focus,
.lp-comment-form textarea:focus { outline: none; border-color: var(--teal); }
.lp-comment-form p { margin-bottom: 16px; }
.lp-comment-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.lp-comment-pagination { margin-top: 28px; }

/* ==========================================================================
   Shared filter bar — library spec #filters / #search.
   One component for Awards, Notices and Contests.
   ========================================================================== */
.lp-filter-wrap { margin-bottom: 40px; }

/* Chip row (link mode) */
.lp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.lp-filter-chip {
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    border-radius: var(--lp-radius);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lp-filter-chip:hover { border-color: var(--teal); color: var(--teal); }
.lp-filter-chip.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--paper);
}

/* Form mode: search bar + select row */
.lp-filter-form { display: flex; flex-direction: column; gap: 14px; }
.lp-filter-search { margin: 0; max-width: 520px; }

.lp-filter-bar-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.lp-filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 34px 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--lp-radius);
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%234A5957' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 10px 6px;
    font-family: var(--body-font);
    font-size: 0.82rem;
    color: var(--ink);
    line-height: 1.3;
    cursor: pointer;
    max-width: 100%;
}
.lp-filter-select:focus { outline: none; border-color: var(--teal); }

.lp-filter-submit { padding: 10px 20px; font-size: 0.82rem; }
.lp-filter-submit i { font-size: 0.8rem; }

.lp-filter-reset {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
}
.lp-filter-reset:hover { color: var(--magenta-deep); border-color: var(--magenta-deep); }

/* Mobile: chips scroll horizontally, selects stack two-up */
@media (max-width: 719px) {
    .lp-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .lp-filter-bar::-webkit-scrollbar { display: none; }
    .lp-filter-chip { flex-shrink: 0; }

    .lp-filter-bar-select { display: grid; grid-template-columns: 1fr 1fr; }
    .lp-filter-select { width: 100%; }
    .lp-filter-submit { grid-column: 1 / -1; justify-content: center; }
    .lp-filter-reset { grid-column: 1 / -1; text-align: center; }
}

/* ==========================================================================
   Sidebar widgets — library spec #sidebar.
   ========================================================================== */
.lp-sidebar-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 18px;
    border-radius: var(--lp-radius);
}
.lp-sidebar-widget + .lp-sidebar-widget { margin-top: 16px; }
.lp-sidebar-widget h5 {
    font-family: var(--headings-font);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 0 0 14px;
}
.lp-sidebar-search { max-width: none; margin: 0; }

/* Recent posts */
.lp-sidebar-post {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
}
.lp-sidebar-post:last-child { border-bottom: none; }
.lp-sidebar-post__thumb {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(150deg, #12867B, var(--teal-deep));
}
.lp-sidebar-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-sidebar-post__txt h6 {
    font-family: var(--body-font);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    transition: color 0.25s ease;
}
.lp-sidebar-post__txt span { font-size: 0.7rem; color: var(--ink-soft); }
.lp-sidebar-post:hover .lp-sidebar-post__txt h6 { color: var(--teal); }

/* Category list */
.lp-sidebar-cats { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.lp-sidebar-cats li { border-bottom: 1px solid var(--line); }
.lp-sidebar-cats li:last-child { border-bottom: none; }
.lp-sidebar-cats a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    padding: 8px 0;
    color: var(--ink);
    transition: color 0.25s ease;
}
.lp-sidebar-cats a:hover { color: var(--teal); }
.lp-sidebar-cats__count { color: var(--ink-soft); }
.lp-sidebar-cats li.is-active > a { color: var(--teal); font-weight: 600; }

/* Chip cloud inside a widget */
.lp-sidebar-chips { margin-bottom: 0; flex-wrap: wrap; overflow: visible; }
.lp-sidebar-chips .lp-filter-chip { padding: 6px 12px; font-size: 0.78rem; }
.lp-sidebar-chips__count { color: var(--ink-soft); margin-left: 5px; }

/* ==========================================================================
   Winners strip — library spec #winners.
   ========================================================================== */
.lp-winners-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
    .lp-winners-strip { justify-content: center; flex-wrap: wrap; overflow-x: visible; gap: 24px; }
}
.lp-winner-chip {
    flex: 0 0 auto;
    width: 160px;
    text-align: center;
    color: inherit;
}
.lp-winner-chip__ring {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 10px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--magenta), var(--magenta-deep));
    border: 2px solid var(--magenta-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-deep);
    font-family: var(--headings-font);
    font-weight: 600;
    font-size: 1.2rem;
    transition: transform 0.28s var(--lp-ease);
}
.lp-winner-chip__ring img { width: 100%; height: 100%; object-fit: cover; }
.lp-winner-chip:hover .lp-winner-chip__ring { transform: translateY(-4px); }
.lp-winner-chip__badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--teal-deep);
    background: var(--lp-teal-soft);
    padding: 2px 8px;
    margin-bottom: 6px;
}
.lp-winner-chip h6 {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink);
    margin: 0;
    transition: color 0.25s ease;
}
.lp-winner-chip:hover h6 { color: var(--teal); }
.lp-winner-chip p { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
.lp-winner-chip__caption {
    font-family: var(--headings-font);
    font-style: italic;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Empty / not-found state — library spec #empty-state.
   ========================================================================== */
.lp-empty-state {
    text-align: center;
    padding: 50px 20px;
    border: 1px dashed var(--line);
    max-width: 480px;
    margin: 0 auto;
}
.lp-empty-state__mark {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 2px solid var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--magenta-deep);
}
.lp-empty-state__eyebrow { justify-content: center; margin-bottom: 8px; }
.lp-empty-state h4 {
    font-family: var(--headings-font);
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0;
}
.lp-empty-state p { margin-top: 8px; color: var(--ink-soft); font-size: 0.88rem; }
.lp-empty-state__actions { margin-top: 18px; }

/* ==========================================================================
   Page-scoped live search (template-parts/search/search-bar.php).
   Neutralises the legacy .winner-search-input chrome from contests-style.css /
   members-style.css / cards-filters.css so the input sits inside the library's
   search-bar shell instead of carrying its own border.
   ========================================================================== */
.lp-search-shell { margin-left: auto; margin-right: auto; max-width: 520px; }
.lp-search-shell .lp-search-bar { margin: 0; max-width: none; }

.lp-ux-modern .lp-search-shell .lp-search-bar .winner-search-input,
.lp-search-shell .lp-search-bar .winner-search-input {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    border-radius: 0;
    padding: 8px 0;
    font-family: var(--body-font);
    font-size: 0.92rem;
    color: var(--ink);
    text-align: left;
}
.lp-search-shell .lp-search-bar .winner-search-input:focus {
    border: none;
    box-shadow: none;
    outline: none;
}
.lp-search-shell .lenspo-search-noresults { margin-top: 18px; }
.lp-sidebar-widget p { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }
.lp-sidebar-widget__cta { display: flex; justify-content: center; width: 100%; margin-top: 14px; }
.lp-sidebar-widget .lenspo-cats-toggle { display: inline-block; margin-top: 12px; font-size: 0.8rem; }

/* ==========================================================================
   Global responsive guards.
   Horizontal scroll on phones almost always comes from one of four things:
   an unbreakable string, a wide embed, a wide table, or a flex child that
   refuses to shrink. Handle all four once, here.
   ========================================================================== */
.lp-page img,
.lp-page video,
.lp-page iframe,
.lp-page embed,
.lp-page object { max-width: 100%; }

.lp-page iframe { width: 100%; }

.lp-sec-head h1,
.lp-sec-head h2,
.lp-sec-head h3,
.lp-card-title,
.lp-entry h1,
.lp-entry h2,
.lp-entry h3 { overflow-wrap: anywhere; }

.lp-entry a,
.lp-entry code,
.lp-entry pre { overflow-wrap: anywhere; }

.lp-actions { flex-wrap: wrap; }
.lp-actions > * { max-width: 100%; }

/* Phone: tighten section rhythm and let CTAs go full width. */
@media (max-width: 575.98px) {
    .lp-section { padding: 40px 0; }
    .lp-section-tight { padding: 32px 0; }

    .lp-entry { font-size: 1rem; }
    .lp-entry-shell { max-width: none; }

    .lp-actions { gap: 10px; }
    .lp-actions > .lp-btn { width: 100%; justify-content: center; }

    .lp-empty-state { padding: 36px 16px; }

    .lp-search-bar { padding-left: 12px; }
    .lp-search-bar input { font-size: 16px; } /* 16px stops iOS zoom-on-focus */

    .lp-comments { margin-top: 44px; padding-top: 28px; }
    .lp-comment-list .children { margin-left: 10px; padding-left: 12px; }
}

/* ==========================================================================
   Back-to-top: the theme shipped TWO controls stacked in the same corner —
   the ConvertSite `.progress-wrap` ring (footer.php, gated by the back_to_top
   option) and a `.scroll-to-top` button injected by theme-main.js. They
   overlapped, so a faint ring drew around the button. The JS button is the
   visible, working control; hide the vestigial ring behind it.
   ========================================================================== */
.progress-wrap { display: none !important; }

/* Brand hover for the JS-injected button (its base styles are inline). */
.scroll-to-top:hover {
    background: var(--teal-deep) !important;
    box-shadow: 0 10px 24px rgba(10, 31, 30, 0.3) !important;
}

/* ==========================================================================
   Form submission notice (Contact / Join Club).
   ========================================================================== */
.lp-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    background: var(--paper);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink);
}
.lp-form-notice i { margin-top: 2px; font-size: 0.95rem; }
.lp-form-notice--ok { border-left-color: var(--teal); background: var(--paper-dim); }
.lp-form-notice--ok i { color: var(--teal); }
.lp-form-notice--bad { border-left-color: var(--magenta-deep); background: var(--lp-teal-soft); }
.lp-form-notice--bad i { color: var(--magenta-deep); }
.lp-form-notice:focus { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* ==========================================================================
   Stretched link — makes a whole card clickable from a single real <a>.
   Keeps one link in the accessibility tree and keeps keyboard focus working,
   unlike wrapping the card in an anchor or attaching a click handler.
   Put it on the card's primary link; the card itself must be positioned.
   ========================================================================== */
.lp-stretch-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* no background — purely a hit area */
}

/* Any element holding a stretched link becomes the positioning context. */
.lp-activity-item,
.lp-card,
.lp-person-card,
.lp-search-card { position: relative; }

/* Activity rows: whole row is the hit area, with a clear hover affordance. */
.lp-activity-item { transition: background 0.22s ease; }
.lp-activity-item:has(.lp-stretch-link):hover { background: rgba(245, 247, 246, 0.05); }
.lp-activity-item:has(.lp-stretch-link) { cursor: pointer; }
.lp-activity-item:hover .lp-act-link h4 { color: var(--magenta-light); }
.lp-activity-item:focus-within { outline: 2px solid var(--magenta); outline-offset: 2px; }
.lp-act-link h4 { transition: color 0.22s ease; }

/* The tag chip sits above the overlay so it stays visually distinct. */
.lp-act-tag { position: relative; z-index: 2; }

/* ==========================================================================
   Primary CTAs on dark sections.
   The design's .btn-primary is gold everywhere; the theme's .lp-btn-primary is
   teal, which is right on paper but disappears against a teal-deep band. Match
   the design by switching primary buttons to gold inside .lp-on-dark.
   !important is needed to beat the global `.lp-btn { background: ... !important }`.
   ========================================================================== */
.lp-on-dark .lp-btn-primary,
.lp-section.lp-on-dark .lp-btn-primary {
    background: var(--magenta) !important;
    border-color: var(--magenta) !important;
    color: var(--teal-deep) !important;
}
.lp-on-dark .lp-btn-primary:hover,
.lp-section.lp-on-dark .lp-btn-primary:hover {
    background: var(--magenta-deep) !important;
    border-color: var(--magenta-deep) !important;
    color: var(--teal-deep) !important;
}

/* ==========================================================================
   Filter/search control rhythm — one height for every control in the bar.
   A global `a, button, .btn { min-height: 44px }` tap-target rule sizes the
   submit button and the search button, but NOT <select>, so selects came out
   37px next to a 44px Filter button, and the search shell inflated to 73px.
   Pin everything to the same token so the row reads as one component.
   ========================================================================== */
:root { --lp-control-h: 44px; }

.lp-filter-select,
.lp-filter-submit,
.lp-search-bar button {
    height: var(--lp-control-h) !important;
    min-height: var(--lp-control-h) !important;
    box-sizing: border-box;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
}

.lp-filter-select { padding-top: 0 !important; padding-bottom: 0 !important; }
.lp-filter-submit { padding-top: 0 !important; padding-bottom: 0 !important; }

.lp-search-bar {
    padding: 4px 4px 4px 16px !important;
    min-height: calc(var(--lp-control-h) + 10px);
}
.lp-search-bar button {
    width: var(--lp-control-h) !important;
    min-width: var(--lp-control-h) !important;
    flex: 0 0 var(--lp-control-h);
}
.lp-search-bar input {
    height: var(--lp-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset sits on the same baseline as the controls, not floating above them. */
.lp-filter-reset {
    display: inline-flex;
    align-items: center;
    height: var(--lp-control-h);
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Sidebar "See More / See Less" category toggle
   ========================================================================== */

/* NOTE: the "page jumps when you expand" bug is fixed in the toggle's own
   handler (archive-lenspo_event.php), not here — `overflow-anchor: none` was
   tried first and measurably did NOT stop it, because the property does not
   inherit and the browser is free to pick any node as the scroll anchor.
   The handler now restores scrollY explicitly, which is deterministic. */

/* The toggle is a 13.6px text link, so its real hit area was only 20px tall —
   well under the 44px target every other control on the site uses, and easy
   to miss on a phone. Grow the touch area with an overlay so the underline
   still hugs the text. */
/* ::before, NOT ::after — style.css kills `.read-more::after` outright with
   `content: none !important; display: none !important` (a leftover from the
   old injected-SVG arrows), so an ::after overlay here silently never
   renders. ::before is not covered by that rule. */
.lenspo-cats-toggle { position: relative; }
.lenspo-cats-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    min-width: 44px;
}