/* ============================================================================
   FINOVAI · Content grids (Phase 4b). Blog · Portfolio · Gallery. Token-driven.
   ============================================================================ */

/* ---- Blog ---------------------------------------------------------------- */
.fv-blog { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1.4rem; }
.fv-post { display: flex; flex-direction: column; border: 1px solid var(--fv-border); border-radius: var(--fv-radius); overflow: hidden; background: var(--fv-surface); transition: transform var(--fv-dur) var(--fv-ease), border-color var(--fv-dur); }
.fv-post:hover { transform: translateY(-5px); border-color: var(--fv-accent); }
.fv-post__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fv-navy); }
.fv-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--fv-ease); }
.fv-post:hover .fv-post__thumb img { transform: scale(1.05); }
.fv-post__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; flex: 1; }
.fv-post__cat { font-family: var(--fv-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fv-accent); }
.fv-post__title { font-family: var(--fv-font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; }
.fv-post__title a { transition: color var(--fv-dur-fast); }
.fv-post__title a:hover { color: var(--fv-accent); }
.fv-post__excerpt { color: var(--fv-fg-soft); font-size: .92rem; flex: 1; }
.fv-post__meta { font-family: var(--fv-font-mono); font-size: .72rem; color: var(--fv-fg-soft); margin-top: .2rem; }
.fv-post__more { display: inline-flex; align-items: center; gap: .4rem; color: var(--fv-accent); font-family: var(--fv-font-display); font-weight: 600; font-size: .85rem; }
.fv-post__more svg { width: 14px; height: 14px; transition: transform var(--fv-dur-fast); }
.fv-post__more:hover svg { transform: translateX(4px); }
@media (max-width: 900px) { .fv-blog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fv-blog { grid-template-columns: 1fr; } }

/* ---- Portfolio (filterable) --------------------------------------------- */
.fv-pf__filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem; }
.fv-pf__btn { font-family: var(--fv-font-display); font-weight: 600; font-size: .85rem; color: var(--fv-fg-soft); background: none; border: 1px solid var(--fv-border); padding: .55rem 1.1rem; border-radius: var(--fv-radius-pill); cursor: pointer; transition: color .25s, background .25s, border-color .25s; }
.fv-pf__btn:hover { color: var(--fv-fg); }
.fv-pf__btn.is-active { color: var(--fv-bg); background: var(--fv-fg); border-color: var(--fv-fg); }
.fv-pf__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1rem; }
.fv-pf__item { position: relative; overflow: hidden; border-radius: var(--fv-radius); aspect-ratio: 4 / 3; background: var(--fv-navy); }
.fv-pf__item.is-hidden { display: none; }
.fv-pf__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--fv-ease); }
.fv-pf__item:hover img { transform: scale(1.06); }
.fv-pf__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.3rem; background: linear-gradient(180deg, transparent 40%, rgba(5,7,15,.88)); opacity: 0; transition: opacity var(--fv-dur); }
.fv-pf__item:hover .fv-pf__overlay { opacity: 1; }
.fv-pf__cat { font-family: var(--fv-font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fv-gold); margin-bottom: .3rem; }
.fv-pf__title { font-family: var(--fv-font-display); font-weight: 700; color: #fff; font-size: 1.1rem; transform: translateY(8px); transition: transform var(--fv-dur) var(--fv-ease); }
.fv-pf__item:hover .fv-pf__title { transform: none; }
@media (max-width: 900px) { .fv-pf__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fv-pf__grid { grid-template-columns: 1fr; } }

/* ---- Gallery (masonry) --------------------------------------------------- */
.fv-gallery { column-count: var(--cols, 3); column-gap: 1rem; }
.fv-gallery__item { break-inside: avoid; margin-bottom: 1rem; border-radius: var(--fv-radius); overflow: hidden; cursor: zoom-in; position: relative; }
.fv-gallery__item img { width: 100%; display: block; transition: transform .5s var(--fv-ease); }
.fv-gallery__item:hover img { transform: scale(1.05); }
.fv-gallery__item::after { content: ""; position: absolute; inset: 0; background: rgba(11,31,58,.0); transition: background var(--fv-dur); }
.fv-gallery__item:hover::after { background: rgba(11,31,58,.25); }
@media (max-width: 900px) { .fv-gallery { column-count: 2; } }
@media (max-width: 480px) { .fv-gallery { column-count: 1; } }

/* ---- Lightbox (gallery) -------------------------------------------------- */
.fv-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 2rem; }
.fv-lightbox.is-open { display: flex; }
.fv-lightbox__bg { position: absolute; inset: 0; background: rgba(5,7,15,.86); backdrop-filter: blur(6px); }
.fv-lightbox img { position: relative; z-index: 1; max-width: 92vw; max-height: 86vh; border-radius: var(--fv-radius); }
.fv-lightbox__btn { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); color: #fff; cursor: pointer; font-size: 22px; }
.fv-lightbox__prev { left: 2%; } .fv-lightbox__next { right: 2%; }
.fv-lightbox__close { position: absolute; z-index: 2; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 26px; cursor: pointer; }

.fv-empty { color: var(--fv-fg-soft); font-style: italic; padding: 1rem 0; }

/* ---- Cards Carousel (infinite, draggable) -------------------------------- */
.fv-cards { position: relative; }
.fv-cards__viewport { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .5rem .2rem 1rem; cursor: grab; }
.fv-cards__viewport::-webkit-scrollbar { display: none; }
.fv-cards__viewport.is-drag { cursor: grabbing; scroll-snap-type: none; }
.fv-cards__viewport > * { scroll-snap-align: start; flex: 0 0 clamp(260px, calc(100% / var(--cc-cols, 3) - 1.4rem), 380px); }
.fv-card { position: relative; border: 1px solid var(--fv-border); border-radius: var(--fv-radius); background: var(--fv-surface); padding: 2rem 1.8rem; transition: transform .4s var(--fv-ease), border-color .3s, box-shadow .4s; will-change: transform; }
.fv-card:hover { transform: scale(1.035) translateY(-4px); border-color: var(--fv-accent); box-shadow: 0 24px 50px -28px rgba(11,31,58,.45); }
.fv-card__n { font-family: var(--fv-font-mono); font-size: .8rem; letter-spacing: .14em; color: var(--fv-accent); margin-bottom: .9rem; }
.fv-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--fv-accent); background: color-mix(in srgb, var(--fv-accent) 10%, transparent); margin-bottom: 1.1rem; font-size: 22px; }
.fv-card__icon svg { width: 24px; height: 24px; fill: currentColor; }
.fv-card__t { font-family: var(--fv-font-display); font-weight: 700; font-size: 1.2rem; color: var(--fv-fg); line-height: 1.25; margin-bottom: .7rem; }
.fv-card__x { color: var(--fv-fg-soft); font-size: .93rem; line-height: 1.6; }
.fv-cards__nav { display: flex; gap: .5rem; position: absolute; top: -4rem; right: 0; }
.fv-cards__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fv-border); background: var(--fv-bg); color: var(--fv-fg); cursor: pointer; display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s, opacity .25s; }
.fv-cards__btn:hover { background: var(--fv-accent); color: #fff; border-color: var(--fv-accent); }
.fv-cards__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 600px) { .fv-cards__nav { position: static; justify-content: flex-end; margin-bottom: 1rem; } }