/* View All page (owner, Oct 14): Mosaic layout over the redwood forest photo.
   The forest stays still behind the page (a deep-green wash keeps the tiles readable); departments are photo tiles in
   mixed sizes with their categories as chips. */
.va{position:relative;isolation:isolate;color:#fff;font-family:'Figtree',system-ui,sans-serif;padding-bottom:70px}
.va::before{content:"";position:absolute;inset:0;z-index:-2;background:url("/assets/frv7/home-v2/trio/forest.jpg") center 30%/cover no-repeat fixed}
.va::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,26,18,.55) 0,rgba(14,26,18,.78) 380px,rgba(14,26,18,.9) 100%)}
.va-wrap{max-width:1280px;margin:0 auto;padding-inline:20px}
.va-hero{padding-block:44px 34px}
.va-crumbs{display:flex;gap:8px;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:26px}
.va-crumbs a{color:inherit;text-decoration:none}.va-crumbs a:hover{color:#fff}
.va-kicker{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:600 12px/1 'Figtree',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#E7A94B}
.va-kicker::before{content:"";width:44px;height:1px;background:currentColor}
.va h1{font:500 clamp(40px,5.4vw,72px)/1 'Cormorant Garamond',Georgia,serif;margin:0 0 14px;color:#fff;border:0;text-wrap:balance}
.va-lead{margin:0;max-width:58ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.82)}

.va-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:250px;grid-auto-flow:dense;gap:16px}
.va-tile{position:relative;border-radius:16px;overflow:hidden;background:#24382B;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.va-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.va-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,12,0) 30%,rgba(10,18,12,.85) 100%);pointer-events:none}
.va-tile:hover img{transform:scale(1.05)}
.va-in{position:relative;z-index:1;padding:20px 22px}
.va-count{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:#A9472A;font:700 10.5px/1 'Figtree',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.va-tile h2{font:500 32px/1 'Cormorant Garamond',Georgia,serif;margin:0 0 12px;color:#fff;border:0}
.va-tile h2 a{color:inherit;text-decoration:none}
.va-tile h2 a::before{content:"";position:absolute;inset:0;z-index:0}
.va-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.va-chips a{display:inline-block;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12.5px;font-weight:500;text-decoration:none;backdrop-filter:blur(2px);transition:background .15s,color .15s}
.va-chips a:hover{background:#E7A94B;border-color:#E7A94B;color:#13231A}
.va-chips .va-more{background:transparent;border-style:dashed}
.va-tile a:focus-visible{outline:3px solid #E7A94B;outline-offset:2px}
.va-big{grid-column:span 2;grid-row:span 2}.va-big h2{font-size:48px}.va-big .va-chips a{font-size:13.5px;padding:6px 13px}
.va-wide{grid-column:span 2}
.va-tall{grid-row:span 2}

@media (max-width:1000px){.va-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px}.va-big h2{font-size:38px}}
@media (max-width:560px){.va-grid{grid-template-columns:1fr;grid-auto-rows:240px}.va-big,.va-wide{grid-column:auto}.va-big,.va-tall{grid-row:span 1}.va::before{background-attachment:scroll}.va-hero{padding-block:30px 24px}}
@media (prefers-reduced-motion:reduce){.va-tile img,.va-chips a{transition:none}}
/* roomier rows, a darker fade under the text so titles never get lost behind the chips */
.va-grid{grid-auto-rows:280px}
.va-tile::after{background:linear-gradient(180deg,rgba(10,18,12,0) 20%,rgba(10,18,12,.55) 55%,rgba(10,18,12,.9) 100%)}
@media (max-width:1000px){.va-grid{grid-auto-rows:260px}}
@media (max-width:560px){.va-grid{grid-auto-rows:auto}.va-tile{min-height:260px}.va-big h2{font-size:34px}}
.va-tile h2{text-shadow:0 2px 14px rgba(0,0,0,.55)}
@media (max-width:560px){.va-big{min-height:400px}}