/* V Care U - Gallery page layer. Loaded after style.css, vcareu-header.css and vcareu-home.css.
   Lightbox is Seniar's bundled fancyBox 3; everything below is page layout only. */

.page-title .page-breadcrumb li a{ color:#fff; }
.page-title .page-breadcrumb li a:hover{ color:#ff9aa1; }

/* ---------- Intro ---------- */
.vcu-gallery{ padding:100px 0 90px; }
.vcu-gallery .sec-title .title{ font-size:clamp(34px,3.8vw,54px); line-height:1.1; color:var(--theme-color2); }
.vcu-gallery-intro{ font-size:18px; line-height:1.8; color:#52637A; margin:20px auto 0; max-width:620px; }

/* ---------- Filters ---------- */
.vcu-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:14px; }
.vcu-filter{ appearance:none; border:1px solid rgba(0,59,142,.22); background:#fff; color:var(--theme-color2); font-family:var(--heading-font-family); font-size:16px; font-weight:500; padding:11px 26px; border-radius:40px; cursor:pointer; transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.vcu-filter:hover{ border-color:var(--theme-color1); color:var(--theme-color1); transform:translateY(-2px); }
.vcu-filter.is-active{ background:#E60012; border-color:#E60012; color:#fff; }
.vcu-filter:focus-visible{ outline:2px solid #E60012; outline-offset:3px; }
.vcu-gallery-note{ min-height:24px; margin:0 0 20px; text-align:center; font-size:14px; letter-spacing:.04em; color:#52637A; }

/* ---------- Mixed-size grid ---------- */
.vcu-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; grid-auto-flow:dense; gap:20px; }
.vcu-item{ position:relative; margin:0; border-radius:20px; overflow:hidden; background:#EDF5FF; transition:opacity .45s ease, transform .45s ease; }
.vcu-item.is-xl{ grid-column:span 2; grid-row:span 2; }
.vcu-item.is-wide{ grid-column:span 2; }
.vcu-item.is-tall{ grid-row:span 2; }
.vcu-item.is-hiding{ opacity:0; transform:scale(.96); }
.vcu-item[hidden]{ display:none; }
.vcu-item-link{ position:absolute; inset:0; display:block; }
.vcu-item-link img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.vcu-item:hover .vcu-item-link img,.vcu-item-link:focus-visible img{ transform:scale(1.06); }
.vcu-item-link::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 rgba(255,255,255,0); border-radius:20px; transition:box-shadow .4s ease; pointer-events:none; }
.vcu-item-link:focus-visible{ outline:3px solid #E60012; outline-offset:-3px; border-radius:20px; }
.vcu-item-cap{ position:absolute; left:14px; bottom:14px; padding:6px 14px; border-radius:30px; background:rgba(255,255,255,.92); color:var(--theme-color2); font-size:14px; font-weight:600; line-height:1.3; opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.vcu-item:hover .vcu-item-cap,.vcu-item-link:focus-visible .vcu-item-cap{ opacity:1; transform:none; }
@media (hover:none){ .vcu-item-cap{ opacity:1; transform:none; font-size:13px; padding:5px 12px; } }

/* a single category: uniform tiles so the grid reflows cleanly */
.vcu-grid.is-filtered{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.vcu-grid.is-filtered .vcu-item{ flex:0 0 calc((100% - 40px)/3); max-width:calc((100% - 40px)/3); aspect-ratio:4/3; }
.vcu-grid.is-filtered .vcu-item.is-tall{ aspect-ratio:4/5; }
.vcu-grid.is-filtered .vcu-item.is-xl{ aspect-ratio:4/3; }

@media (max-width:1199.98px){ .vcu-grid{ grid-auto-rows:210px; gap:16px; } }
@media (max-width:991.98px){
  .vcu-gallery{ padding:76px 0 70px; }
  .vcu-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:230px; }
  .vcu-item.is-xl{ grid-column:span 2; grid-row:span 2; }
  .vcu-grid.is-filtered .vcu-item{ flex-basis:calc((100% - 20px)/2); max-width:calc((100% - 20px)/2); }
}
@media (max-width:575.98px){
  .vcu-gallery{ padding:56px 0 50px; }
  .vcu-filters{ gap:8px; }
  .vcu-filter{ font-size:14.5px; padding:9px 18px; }
  .vcu-grid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:14px; }
  .vcu-item,.vcu-item.is-xl,.vcu-item.is-wide,.vcu-item.is-tall{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; border-radius:16px; }
  .vcu-item.is-tall{ aspect-ratio:4/5; }
  .vcu-grid.is-filtered .vcu-item{ flex-basis:100%; max-width:100%; }
  .vcu-gallery-intro{ font-size:16.5px; }
}

@media (prefers-reduced-motion:reduce){
  .vcu-item,.vcu-item-link img,.vcu-item-cap,.vcu-filter{ transition:none !important; }
  .vcu-item:hover .vcu-item-link img{ transform:none; }
}
.fancybox-button--share,.fancybox-button--play{ display:none; }