/* ============================================
   YEV - work-samples page styles (externalized v6.01)
   ============================================ */

.featured-sample {
            background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
            color: white;
            padding: 44px 40px;
            border-radius: 22px;
            margin-bottom: 40px;
            text-align: center;
        }
        .featured-sample h2 { font-size: 1.625rem; margin-bottom: 14px; color: white; }
        .featured-sample p { font-size: 1rem; line-height: 1.7; opacity: 0.95; margin-bottom: 22px; max-width: 620px; margin-left: auto; margin-right: auto; }
        .featured-sample .btn-primary { margin-top: 0; }
        .types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-top: 28px;
        }
        .type-item {
            background: white;
            padding: 26px 22px;
            border-radius: 14px;
            border: 1px solid rgba(33,37,107,0.08);
        }
        .type-item h3 { font-size: 1.0625rem; color: var(--indigo); margin-bottom: 8px; font-weight: 700; }
        .type-item p { font-size: 0.875rem; color: #555; line-height: 1.6; }
        .coming-soon {
            background: linear-gradient(135deg, rgba(254,212,42,0.08) 0%, rgba(224,187,37,0.05) 100%);
            border: 1px dashed var(--gold-warm);
            padding: 30px;
            border-radius: 18px;
            text-align: center;
        }
        .coming-soon h2 { color: var(--indigo); font-size: 1.375rem; margin-bottom: 12px; }
        .coming-soon p { color: #555; font-size: 1rem; line-height: 1.7; max-width: 580px; margin: 0 auto; }

/* ===== v6.04.1 work-sample built-out template (swappable) ===== */
.ws-discover {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 12px; font-size: 0.875rem; font-weight: 700;
    color: var(--yev-royal); text-decoration: none;
}
.ws-discover:hover { text-decoration: underline; }

/* Hidden-but-staged category filter (infrastructure for future build) */
.ws-filter { display: none; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 32px; }
.ws-filter button {
    padding: 8px 18px; border-radius: 50px; border: 1.5px solid var(--yev-royal);
    background: #fff; color: var(--yev-royal); font-weight: 600; font-size: 0.875rem;
    font-family: inherit; cursor: pointer; transition: all 0.2s ease;
}
.ws-filter button.active, .ws-filter button:hover { background: var(--yev-royal); color: #fff; }

.ws-category { margin-top: 48px; scroll-margin-top: 88px; }
.ws-category-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.ws-category-head h2 { color: var(--yev-navy); font-size: 1.5rem; margin: 0; min-width: 0; }
.ws-category-head .yev-ico-inline { color: var(--yev-royal); flex-shrink: 0; margin-top: 0.16em; }
.ws-category > p { color: #555; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 20px; max-width: 680px; }
.ws-sample-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.ws-sample {
    background: #fff; border: 1px solid rgba(33,37,107,0.1); border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column;
}
/* Swap the src on .ws-thumb img to drop in a real sample image */
.ws-thumb {
    aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e9eef7 0%, #d7e0f0 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--yev-royal); position: relative;
}
.ws-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-thumb .ws-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.7; font-size: 0.8125rem; font-weight: 600; }
.ws-sample-body { padding: 16px 18px; }
.ws-sample-body h3 { font-size: 1rem; color: var(--yev-navy); margin-bottom: 4px; }
.ws-sample-body p { font-size: 0.8125rem; color: #666; line-height: 1.5; }
.ws-sample-tag { display: inline-block; font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase; color: var(--yev-royal); font-weight: 700; margin-bottom: 6px; }

/* v6.09.1: the Voice Portfolio icon inherited the base .yev-ico navy colour,
   which is invisible on the dark featured-sample card. Make it gold so it
   shows and reads as intentional (and stops the title looking off-center). */
.featured-sample h2 .yev-ico-inline { color: var(--yev-gold); }