/* ============================================================
   HOUSE OSBORNE — GALLERY (v1.4.0)
   Refined re-skin of the artwork archive, the CREATE landing,
   and the shared lightbox. Built for 800+ pieces: photographic
   heroes, paginated card grid, filter bar, quilt collections.
   100% token-driven — inherits the Customizer brand color.
   ============================================================ */

:root { --gal-ink:#05101F; }

/* striped placeholder where a real image is missing */
.ho-art-ph {
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--navy-700), var(--navy-950));
}
.ho-art-ph::after {
  content:attr(data-ph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center; padding:18px;
}

/* ====================================================================
   1 · ARCHIVE HERO  — photographic, bottom-weighted overlay (Treatment A)
   ==================================================================== */
.ho-gallery-hero {
  position:relative; overflow:hidden; min-height:62vh;
  display:flex; align-items:flex-end;
  padding:160px var(--gutter) 70px;
  color:var(--parchment-50);
  background:var(--gal-ink);
}
.ho-gallery-hero__bg { position:absolute; inset:0; z-index:0; }
.ho-gallery-hero__img { width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.ho-gallery-hero__overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(5,16,31,.30) 0%, rgba(5,16,31,.66) 56%, rgba(5,16,31,.94) 100%);
}
.ho-gallery-hero__text {
  position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); z-index:1;
  font-family:var(--font-display); font-weight:var(--fw-bold); line-height:.8;
  font-size:clamp(110px,21vw,360px); letter-spacing:-.02em; text-transform:uppercase;
  color:rgba(214,185,120,.07); pointer-events:none; white-space:nowrap;
}
.ho-gallery-hero__inner { position:relative; z-index:2; max-width:var(--container-wide); margin:0 auto; width:100%; }
.ho-gallery-hero h1 {
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:clamp(3rem,2rem + 5vw,5.6rem); color:var(--parchment-50);
  margin:16px 0 0; line-height:.98; letter-spacing:-.02em; text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.ho-gallery-hero .tagline {
  font-family:var(--font-display); font-style:italic; font-size:var(--fs-h3);
  color:var(--gold-400); margin:12px 0 0; max-width:50ch;
}
.ho-gallery-hero .count {
  font-family:var(--font-sans); font-size:var(--fs-body); letter-spacing:.04em;
  color:rgba(255,255,255,.62); margin-top:18px;
}

/* ====================================================================
   2 · FILTER BAR — sticky, refined
   ==================================================================== */
.ho-gallery-filters {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--navy-900) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(214,185,120,.16);
}
.ho-gallery-filters__form {
  max-width:var(--container-wide); margin:0 auto; padding:14px var(--gutter);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.ho-gallery-filters__select {
  padding:10px 40px 10px 16px; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05); color:var(--parchment-50);
  font-family:var(--font-sans); font-size:var(--fs-body); cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D6B978' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.ho-gallery-filters__select:hover, .ho-gallery-filters__select:focus { border-color:var(--gold-500); background:rgba(201,165,92,.1); outline:none; }
.ho-gallery-filters__select option { background:var(--navy-800); color:var(--parchment-50); }
.ho-gallery-filters__toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.ho-gallery-filters__toggle input { position:absolute; opacity:0; }
.ho-gallery-filters__toggle-track { width:42px; height:24px; background:rgba(255,255,255,.18); border-radius:12px; position:relative; transition:background var(--dur-fast); }
.ho-gallery-filters__toggle-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--parchment-50); border-radius:50%; transition:transform var(--dur-fast); }
.ho-gallery-filters__toggle input:checked + .ho-gallery-filters__toggle-track { background:var(--gold-500); }
.ho-gallery-filters__toggle input:checked + .ho-gallery-filters__toggle-track::after { transform:translateX(18px); }
.ho-gallery-filters__toggle-label { font-family:var(--font-sans); font-size:var(--fs-body); color:var(--parchment-50); }
.ho-gallery-filters__info { margin-left:auto; font-family:var(--font-sans); font-size:var(--fs-caption); color:rgba(255,255,255,.6); }
.ho-gallery-filters__badge { margin-left:8px; padding:4px 10px; background:var(--gold-500); color:var(--navy-900); border-radius:var(--radius-pill); font-size:10px; font-weight:var(--fw-semibold); letter-spacing:.05em; text-transform:uppercase; }

/* ====================================================================
   3 · ART CARD  (grid + rail share this)
   ==================================================================== */
.ho-gallery-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.ho-art-card {
  position:relative; background:var(--surface-card,var(--paper)); border-radius:var(--radius-sm);
  overflow:hidden; box-shadow:var(--shadow-xs); border-top:2px solid var(--gold-500);
  cursor:pointer; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.ho-art-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ho-art-card__media { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--navy-900); }
.ho-art-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.ho-art-card:hover .ho-art-card__media img { transform:scale(1.04); }
.ho-art-card__placeholder, .ho-art-card__media .ho-art-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ho-art-card__overlay {
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-end; padding:14px;
  opacity:0; transition:opacity var(--dur-base); pointer-events:none;
}
.ho-art-card:hover .ho-art-card__overlay { opacity:1; }
.ho-art-card__zoom {
  width:38px; height:38px; border-radius:50%; background:rgba(5,16,31,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2);
  transform:scale(.85); transition:transform var(--dur-base) var(--ease-out);
}
.ho-art-card:hover .ho-art-card__zoom { transform:scale(1); }
.ho-art-card__zoom svg { width:16px; height:16px; stroke:#fff; }
.ho-art-badge {
  position:absolute; top:12px; left:12px; z-index:3; padding:6px 11px; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-size:10px; font-weight:var(--fw-semibold);
  letter-spacing:.08em; text-transform:uppercase;
}
.ho-art-badge--sale { background:var(--gold-500); color:var(--navy-900); }
.ho-art-badge--exhibition { background:rgba(5,16,31,.62); color:var(--parchment-100); backdrop-filter:blur(4px); }
.ho-art-card__body { padding:14px 15px 17px; }
.ho-art-card__title { font-family:var(--font-display); font-size:1.14rem; font-weight:var(--fw-medium); color:var(--navy-800); margin:0; line-height:1.25; }
.ho-art-card__meta { display:flex; gap:10px; align-items:baseline; margin-top:7px; font-family:var(--font-sans); font-size:var(--fs-caption); color:var(--text-muted); }
.ho-art-card__collection { color:var(--gold-600); }
.ho-art-card__edition { margin-left:auto; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; }
.ho-art-card__price { margin-top:9px; font-family:var(--font-display); font-size:var(--fs-body-lg); font-weight:var(--fw-semibold); color:var(--gold-600); }

/* ====================================================================
   4 · PAGINATION — gold, generous targets
   ==================================================================== */
.ho-gallery-pagination ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:0; margin:56px 0 0; }
.ho-gallery-pagination a, .ho-gallery-pagination span {
  display:inline-flex; align-items:center; gap:8px; min-width:44px; height:44px; padding:0 14px; justify-content:center;
  border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:var(--fs-body); text-decoration:none;
  transition:background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.ho-gallery-pagination a { background:var(--surface-card,var(--paper)); color:var(--navy-800); box-shadow:var(--shadow-xs); }
.ho-gallery-pagination a:hover { background:var(--gold-500); color:var(--navy-900); box-shadow:var(--shadow-sm); }
.ho-gallery-pagination .current { background:var(--navy-800); color:var(--parchment-50); }
.ho-gallery-pagination svg { width:18px; height:18px; }
.ho-gallery-pagination .dots { background:none; box-shadow:none; color:var(--text-muted); }
.ho-gallery-pagination__info { text-align:center; margin-top:14px; font-family:var(--font-sans); font-size:var(--fs-caption); color:var(--text-muted); }
.ho-gallery-empty { text-align:center; padding:80px 0; }
.ho-gallery-empty p { font-family:var(--font-display); font-size:var(--fs-h4); color:var(--text-muted); margin-bottom:20px; }

/* ====================================================================
   5 · COLLECTIONS — quilt
   ==================================================================== */
.ho-collections-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:18px; }
.ho-collection { position:relative; overflow:hidden; border-radius:var(--radius-sm); background:var(--navy-900); text-decoration:none; }
.ho-collection__image { position:absolute; inset:0; }
.ho-collection__image img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.ho-collection__placeholder { position:absolute; inset:0; background:linear-gradient(160deg, var(--navy-700), var(--navy-950)); }
.ho-collection:hover .ho-collection__image img { transform:scale(1.05); }
.ho-collection::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(5,16,31,.85) 0%, rgba(5,16,31,.12) 48%, transparent 72%); opacity:.74; transition:opacity var(--dur-base); }
.ho-collection:hover::before { opacity:.92; }
.ho-collection__overlay { position:absolute; left:0; bottom:0; z-index:2; padding:20px 22px; }
.ho-collection__overlay h3 { font-family:var(--font-display); font-weight:var(--fw-medium); color:#fff; margin:0; font-size:1.3rem; line-height:1.1; }
.ho-collection__overlay .count { font-family:var(--font-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin-top:7px; display:inline-block; }
.ho-collection--large { grid-column:span 2; grid-row:span 2; }

/* ====================================================================
   6 · COMMISSION / CTA band  (works on navy or parchment section)
   ==================================================================== */
.ho-gallery-cta__bg-text, .ho-create-commission__bg-text {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:var(--fw-bold); line-height:.8;
  font-size:clamp(110px,22vw,400px); letter-spacing:-.02em; text-transform:uppercase;
  color:rgba(10,34,64,.045); pointer-events:none; white-space:nowrap; z-index:0;
}

/* ====================================================================
   7 · CREATE LANDING  — framed-hero portfolio
   ==================================================================== */
.ho-create-hero {
  position:relative; overflow:hidden; color:var(--parchment-50);
  padding:168px var(--gutter) 84px;
  background:radial-gradient(80% 60% at 72% 38%, #122844 0%, var(--gal-ink) 62%, #03080F 100%);
}
.ho-create-hero__bg-text {
  position:absolute; top:90px; left:50%; transform:translateX(-50%); z-index:0;
  font-family:var(--font-display); font-weight:var(--fw-bold); line-height:.8;
  font-size:clamp(120px,23vw,420px); letter-spacing:-.04em; text-transform:uppercase;
  color:rgba(214,185,120,.06); pointer-events:none; white-space:nowrap;
}
.ho-create-hero__inner {
  position:relative; z-index:2; max-width:var(--container-wide); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,88px); align-items:center; min-height:60vh;
}
.ho-create-hero h1 { font-family:var(--font-display); font-size:clamp(3.4rem,2rem + 6vw,6.2rem); color:var(--parchment-50); margin:16px 0 0; line-height:.98; letter-spacing:-.03em; }
.ho-create-hero .tagline { font-family:var(--font-display); font-style:italic; font-size:var(--fs-h3); color:var(--gold-400); margin:14px 0 0; }
.ho-create-hero .lede { font-family:var(--font-sans); font-size:var(--fs-body-lg); color:var(--navy-200); max-width:46ch; margin-top:22px; line-height:1.6; }
.ho-create-hero .actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.ho-create-hero__art { position:relative; z-index:2; justify-self:center; width:min(100%,500px); }
.ho-create-frame { position:relative; padding:14px; background:linear-gradient(150deg,#0E1F38,#070F1C); border:1px solid rgba(214,185,120,.34); border-radius:3px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85); }
.ho-create-frame::before { content:""; position:absolute; inset:-40% -30%; z-index:-1; background:radial-gradient(closest-side, rgba(201,165,92,.22), transparent 70%); }
.ho-create-frame img { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:1px; }
.ho-create-plate { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:14px; }
.ho-create-plate .t { font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--parchment-50); }
.ho-create-plate .m { font-family:var(--font-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); white-space:nowrap; }

/* featured horizontal rail */
.ho-art-rail__head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.ho-art-rail__hint { font-family:var(--font-sans); font-size:var(--fs-caption); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:10px; }
.ho-art-rail__hint svg { width:34px; height:8px; }
.ho-art-rail { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 20px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ho-art-rail::-webkit-scrollbar { display:none; }
.ho-art-rail .ho-art-card { flex:0 0 auto; width:340px; scroll-snap-align:start; }

/* prints rail (woo products) */
.ho-prints-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ho-print-card { background:var(--paper); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-xs); border-top:2px solid var(--gold-500); text-decoration:none; transition:transform var(--dur-base), box-shadow var(--dur-base); display:block; }
.ho-print-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ho-print-card__image { position:relative; aspect-ratio:1; overflow:hidden; background:var(--navy-900); }
.ho-print-card__image img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.ho-print-card:hover .ho-print-card__image img { transform:scale(1.05); }
.ho-print-card__placeholder { position:absolute; inset:0; background:linear-gradient(160deg, var(--navy-700), var(--navy-950)); }
.ho-print-card__info { padding:14px 15px 17px; }
.ho-print-card__info h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:var(--fw-medium); color:var(--navy-800); margin:0 0 8px; }
.ho-print-card__info .price { font-family:var(--font-display); font-size:var(--fs-body-lg); color:var(--gold-600); }
.ho-prints-cta, .ho-prints-coming { text-align:center; margin-top:36px; }
.ho-prints-coming { font-family:var(--font-sans); color:var(--text-muted); }
.ho-print-card--placeholder .ph-title { height:14px; width:65%; background:var(--parchment-300); border-radius:3px; margin-bottom:9px; }
.ho-print-card--placeholder .ph-price { height:14px; width:32%; background:var(--parchment-300); border-radius:3px; }

/* ====================================================================
   8 · SINGLE ARTWORK
   ==================================================================== */
.ho-art-single { padding:140px var(--gutter) var(--section-y-sm); background:var(--surface-base); }
.ho-art-single__inner { max-width:var(--container-wide); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.ho-art-single__media { position:relative; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--navy-900); }
.ho-art-single__media img { width:100%; display:block; }
.ho-art-single__body { position:sticky; top:96px; }
.ho-art-single__back { font-family:var(--font-sans); font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-600); text-decoration:none; }
.ho-art-single__body h1 { font-family:var(--font-display); font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem); color:var(--navy-800); margin:18px 0 0; line-height:1.05; }
.ho-art-single__spec { margin:24px 0; border-top:1px solid var(--border-hairline); }
.ho-art-single__spec dl { display:grid; grid-template-columns:auto 1fr; gap:0; margin:0; }
.ho-art-single__spec dt { font-family:var(--font-sans); font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding:13px 0; border-bottom:1px solid var(--border-hairline); }
.ho-art-single__spec dd { font-family:var(--font-sans); font-size:var(--fs-body); color:var(--navy-800); text-align:right; margin:0; padding:13px 0; border-bottom:1px solid var(--border-hairline); }
.ho-art-single__price { font-family:var(--font-display); font-size:var(--fs-h3); color:var(--gold-600); margin:8px 0 20px; }
.ho-art-single__actions { display:flex; flex-direction:column; gap:12px; }
.ho-art-single__related { max-width:var(--container-wide); margin:var(--section-y-sm) auto 0; padding:0 var(--gutter); }

/* ====================================================================
   9 · LIGHTBOX  — blur backdrop
   ==================================================================== */
.ho-lightbox {
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:5vh 6vw; background:rgba(4,10,20,.82); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transition:opacity var(--dur-base), visibility var(--dur-base);
}
.ho-lightbox[aria-hidden="false"] { opacity:1; visibility:visible; }
.ho-lightbox__content { max-width:90vw; max-height:80vh; display:flex; align-items:center; justify-content:center; }
.ho-lightbox__img { max-width:90vw; max-height:78vh; object-fit:contain; border-radius:2px; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.ho-lightbox__caption { position:absolute; left:0; right:0; bottom:0; padding:24px; text-align:center; background:linear-gradient(to top, rgba(5,16,31,.9), transparent); }
.ho-lightbox__counter { display:block; margin-bottom:8px; font-family:var(--font-sans); font-size:var(--fs-caption); letter-spacing:.16em; color:var(--gold-400); }
.ho-lightbox__title { font-family:var(--font-display); font-style:italic; font-size:var(--fs-h4); color:var(--parchment-50); margin:0; }
.ho-lightbox__meta { font-family:var(--font-sans); font-size:var(--fs-body); color:rgba(255,255,255,.6); margin:8px 0 0; }
.ho-lightbox__close, .ho-lightbox__nav {
  position:absolute; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast), transform var(--dur-fast); z-index:10;
}
.ho-lightbox__close { top:24px; right:28px; width:46px; height:46px; }
.ho-lightbox__nav { top:50%; transform:translateY(-50%); width:54px; height:54px; }
.ho-lightbox__close:hover, .ho-lightbox__nav:hover { background:rgba(255,255,255,.16); }
.ho-lightbox__nav--prev { left:3vw; } .ho-lightbox__nav--next { right:3vw; }
.ho-lightbox__close svg, .ho-lightbox__nav svg { width:22px; height:22px; stroke:#fff; fill:none; }
body.lightbox-open { overflow:hidden; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:1080px){
  .ho-gallery-grid, .ho-prints-grid { grid-template-columns:repeat(2,1fr); }
  .ho-collections-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .ho-create-hero__inner { grid-template-columns:1fr; min-height:0; gap:42px; }
  .ho-create-hero__art { order:-1; width:min(100%,420px); }
  .ho-art-single__inner { grid-template-columns:1fr; }
  .ho-art-single__body { position:static; }
}
@media (max-width:640px){
  .ho-gallery-grid, .ho-prints-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .ho-collections-grid { grid-template-columns:1fr 1fr; grid-auto-rows:140px; gap:12px; }
  .ho-collection--large { grid-column:span 2; grid-row:span 2; }
  .ho-art-rail .ho-art-card { width:78vw; }
  .ho-gallery-filters__info { width:100%; margin-left:0; }
  .ho-lightbox__nav { width:44px; height:44px; }
  .ho-lightbox__nav--prev { left:2vw; } .ho-lightbox__nav--next { right:2vw; }
}
@media (prefers-reduced-motion:reduce){ * { scroll-behavior:auto; } }