/* ==========================================================

   SCIENOTECH GALLERY — section-only redesign

   Palette: maroon / black / white. Does not style the hero,

   header, navigation or footer.

   ========================================================== */

.gallery-showcase {

  --g-maroon: #85172f;

  --g-maroon-dark: #5d1022;

  --g-black: #171719;

  --g-ink: #28282c;

  --g-muted: #77777e;

  --g-paper: #f7f6f5;

  --g-white: #fff;

  --g-line: rgba(23,23,25,.14);

  position: relative;

  overflow: hidden;

  padding: clamp(56px, 7vw, 104px) 0 clamp(60px, 7vw, 100px);

  background: var(--g-paper);

  color: var(--g-ink);

}

.gallery-showcase * { box-sizing: border-box; }

.gallery-showcase .container { position: relative; }

.gallery-editorial-head {

  position: relative;

  display: grid;

  grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr);

  align-items: end;

  gap: 40px;

  padding-bottom: clamp(34px,5vw,64px);

}

.gallery-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin: 0 0 18px;

  color: var(--g-maroon);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .2em;

  line-height: 1.5;

  text-transform: uppercase;

}

.gallery-eyebrow-line { width: 26px; height: 2px; background: var(--g-maroon); }

.gallery-heading-copy h2 {

  margin: 0;

  color: var(--g-black);

  font-size: clamp(42px, 7vw, 88px);

  font-weight: 750;

  letter-spacing: -.075em;

  line-height: .91;

}

.gallery-heading-copy h2 em { color: var(--g-maroon); font-family: Georgia,serif; font-weight: 400; }

.gallery-heading-aside { max-width: 370px; padding: 0 0 5px 22px; border-left: 1px solid var(--g-line); }

.gallery-heading-aside p { margin: 0 0 22px; color: #66666c; font-size: 14px; line-height: 1.9; }

.gallery-explore-link { display: inline-flex; align-items: center; gap: 12px; color: var(--g-black); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

.gallery-explore-link i { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--g-maroon); color: white; transition: transform .2s; }

.gallery-explore-link:hover { color: var(--g-maroon); }

.gallery-explore-link:hover i { transform: translate(3px,3px); }

.gallery-head-mark { position:absolute; top:-25px; right:3%; z-index:0; color:rgba(133,23,47,.045); font-size:clamp(80px,13vw,170px); font-weight:900; letter-spacing:-.1em; line-height:1; pointer-events:none; }

.gallery-head-mark span { color:rgba(23,23,25,.06); }

/* Featured, interactive image panel */

.gallery-feature-panel { display:grid; grid-template-columns:minmax(0,1fr) 245px; min-height:390px; margin-bottom:clamp(60px,8vw,100px); background:var(--g-black); color:white; box-shadow:0 18px 55px rgba(20,14,16,.11); }

.gallery-feature-image { position:relative; min-width:0; min-height:390px; overflow:hidden; background:#333; }

.gallery-feature-image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s,transform .7s; }

.gallery-feature-image.is-changing > img { opacity:.25; transform:scale(1.025); }

.gallery-feature-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,12,14,.68),rgba(12,12,14,.08) 78%),linear-gradient(0deg,rgba(12,12,14,.55),transparent 65%); pointer-events:none; }

.gallery-feature-topline { position:absolute; top:22px; right:24px; left:24px; display:flex; justify-content:space-between; gap:15px; color:rgba(255,255,255,.85); font-size:9px; font-weight:800; letter-spacing:.17em; }

.gallery-feature-topline span:first-child { display:flex; align-items:center; gap:9px; }

.gallery-feature-topline span:first-child:before { content:""; width:17px; height:2px; background:#d58b9b; }

.gallery-feature-caption { position:absolute; right:30px; bottom:30px; left:clamp(24px,4vw,52px); max-width:620px; }

.gallery-feature-category { display:block; margin-bottom:12px; color:#f1bac7; font-size:9px; font-weight:800; letter-spacing:.18em; }

.gallery-feature-caption h3 { margin:0 0 12px; color:#fff; font-size:clamp(29px,4.3vw,56px); font-weight:750; letter-spacing:-.055em; line-height:.99; }

.gallery-feature-caption p { margin:0 0 20px; color:rgba(255,255,255,.8); font-size:13px; }

.gallery-feature-open { display:inline-flex; align-items:center; gap:20px; padding:11px 14px; border:1px solid rgba(255,255,255,.55); background:transparent; color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:background .2s,border-color .2s; }

.gallery-feature-open:hover { border-color:var(--g-maroon); background:var(--g-maroon); color:white; }

.gallery-feature-side { display:flex; flex-direction:column; padding:28px 24px 23px; }

.gallery-side-label { padding-bottom:23px; border-bottom:1px solid rgba(255,255,255,.18); color:#d7a1ad; font-size:9px; font-weight:800; letter-spacing:.18em; }

.gallery-side-stat { display:flex; align-items:center; gap:13px; padding:24px 0 19px; }

.gallery-side-stat strong { color:white; font-size:58px; font-weight:700; letter-spacing:-.07em; line-height:1; }

.gallery-side-stat span { color:rgba(255,255,255,.65); font-size:11px; line-height:1.5; text-transform:uppercase; }

.gallery-feature-side > p { margin:0; color:rgba(255,255,255,.65); font-size:12px; line-height:1.8; }

.gallery-feature-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:25px; }

.gallery-feature-controls button { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:transparent; color:#fff; transition:background .2s,border .2s; }

.gallery-feature-controls button:hover { border-color:var(--g-maroon); background:var(--g-maroon); }

.gallery-feature-controls > span { color:rgba(255,255,255,.6); font-size:10px; letter-spacing:.08em; }

.gallery-feature-controls > span strong { color:white; }

.gallery-feature-controls > span i { margin:0 4px; color:#bd7d8c; font-style:normal; }

.gallery-feature-progress { height:2px; margin-top:16px; background:rgba(255,255,255,.17); }

.gallery-feature-progress span { display:block; width:11.11%; height:100%; background:#d58b9b; transition:width .25s; }

/* Collection controls */

.gallery-collection-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:28px; }

.gallery-collection-heading .gallery-eyebrow { margin-bottom:10px; }

.gallery-collection-heading h3 { margin:0; color:var(--g-black); font-size:clamp(30px,4vw,48px); font-weight:750; letter-spacing:-.06em; line-height:1.05; }

.gallery-collection-heading h3 em { color:var(--g-maroon); font-family:Georgia,serif; font-weight:400; }

.gallery-search { display:flex; width:min(100%,300px); align-items:center; gap:10px; padding:0 12px; border:1px solid var(--g-line); background:rgba(255,255,255,.65); color:#77777e; }

.gallery-search input { width:100%; min-width:0; height:42px; border:0; outline:0; background:transparent; color:var(--g-black); font:inherit; font-size:12px; }

.gallery-search input::placeholder { color:#88888e; }

.gallery-search kbd { display:inline-flex; min-width:19px; height:20px; align-items:center; justify-content:center; border:1px solid #d7d4d3; border-radius:3px; background:white; color:#777; font-size:11px; }

.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; margin-bottom:23px; border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line); }

.gallery-filter-list { display:flex; flex-wrap:wrap; gap:7px; }

.gallery-showcase .gallery-filter { display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:8px 13px; border:1px solid transparent; border-radius:2px; background:transparent; color:#55555b; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }

.gallery-showcase .gallery-filter:hover { border-color:rgba(133,23,47,.3); color:var(--g-maroon); }

.gallery-showcase .gallery-filter.is-active { border-color:var(--g-maroon); background:var(--g-maroon); color:white; }

.gallery-showcase .gallery-filter [data-filter-count] { color:inherit; font-size:9px; opacity:.8; }

.gallery-results { color:#85858b; font-size:9px; font-weight:800; letter-spacing:.13em; white-space:nowrap; }

.gallery-results strong { margin-right:5px; color:var(--g-black); font-size:17px; letter-spacing:-.04em; }

/* Asymmetric portfolio grid */

.gallery-masonry { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(90px,9vw,128px); gap:13px; align-items:stretch; }

.gallery-card { position:relative; grid-column:span 4; grid-row:span 2; min-width:0; min-height:0; overflow:hidden; background:#ddd; box-shadow:0 3px 12px rgba(25,20,20,.055); animation:galleryReveal .38s both; }

.gallery-card-large { grid-column:span 7; grid-row:span 3; }

.gallery-card-portrait { grid-column:span 5; grid-row:span 3; }

.gallery-card-wide { grid-column:span 7; grid-row:span 2; }

.gallery-card-link { position:absolute; inset:0; display:block; overflow:hidden; color:white; text-decoration:none; }

.gallery-card-link img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .35s; }

.gallery-card-link:hover img { transform:scale(1.055); filter:saturate(.8); }

.gallery-card-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.05) 12%,rgba(8,8,10,.06) 35%,rgba(8,8,10,.84) 100%); transition:background .25s; }

.gallery-card-link:hover .gallery-card-shade { background:linear-gradient(180deg,rgba(8,8,10,.12),rgba(8,8,10,.05) 25%,rgba(8,8,10,.91)); }

.gallery-card-number { position:absolute; top:14px; left:15px; padding:7px 9px; border:1px solid rgba(255,255,255,.45); background:rgba(15,15,17,.28); color:white; font-size:9px; font-weight:800; letter-spacing:.08em; backdrop-filter:blur(6px); }

.gallery-card-number i { color:rgba(255,255,255,.65); font-style:normal; }

.gallery-card-caption { position:absolute; right:18px; bottom:17px; left:18px; display:flex; flex-direction:column; align-items:flex-start; }

.gallery-card-category { margin-bottom:7px; color:#edb7c4; font-size:8px; font-weight:800; letter-spacing:.17em; }

.gallery-card-caption strong { max-width:100%; color:#fff; font-size:clamp(15px,1.5vw,22px); font-weight:750; letter-spacing:-.035em; line-height:1.14; }

.gallery-card-large .gallery-card-caption { right:28px; bottom:27px; left:28px; }

.gallery-card-large .gallery-card-caption strong { font-size:clamp(27px,3.6vw,48px); letter-spacing:-.055em; }

.gallery-card-action { display:flex; align-items:center; gap:9px; max-height:0; margin-top:0; overflow:hidden; color:white; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:0; transition:max-height .25s,margin .25s,opacity .25s; }

.gallery-card-action i { color:#e3a6b5; }

.gallery-card-link:hover .gallery-card-action,.gallery-card-link:focus-visible .gallery-card-action { max-height:24px; margin-top:13px; opacity:1; }

.gallery-card[hidden] { display:none !important; }

.gallery-empty { padding:50px 20px; border:1px dashed var(--g-line); background:white; text-align:center; }

.gallery-empty[hidden] { display:none !important; }

.gallery-empty > i { display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; margin-bottom:10px; border-radius:50%; background:#f4e6e9; color:var(--g-maroon); font-size:21px; }

.gallery-empty h4 { margin:0 0 8px; color:var(--g-black); font-size:22px; }

.gallery-empty p { margin:0 0 15px; color:var(--g-muted); font-size:13px; }

.gallery-empty button { padding:9px 13px; border:0; background:var(--g-maroon); color:white; font-size:11px; font-weight:700; }

.gallery-bottom-line { display:flex; justify-content:space-between; gap:20px; margin-top:36px; padding-top:17px; border-top:1px solid var(--g-line); color:#83838a; font-size:9px; font-weight:800; letter-spacing:.14em; }

.gallery-bottom-line span:last-child { color:var(--g-black); }

.gallery-bottom-line i { margin-left:5px; color:var(--g-maroon); }

.gallery-showcase button:focus-visible,.gallery-showcase a:focus-visible,.gallery-showcase input:focus-visible { outline:2px solid #bd657b; outline-offset:3px; }

@keyframes galleryReveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Dark mode affects this section only */

body.dark-mode .gallery-showcase { --g-black:#f8f8f9; --g-ink:#ececef; --g-muted:#b3b3ba; --g-paper:#19191c; --g-white:#222226; --g-line:rgba(255,255,255,.16); background:var(--g-paper); color:var(--g-ink); }

body.dark-mode .gallery-heading-copy h2,body.dark-mode .gallery-collection-heading h3,body.dark-mode .gallery-explore-link,body.dark-mode .gallery-results strong,body.dark-mode .gallery-bottom-line span:last-child { color:#f8f8f9; }

body.dark-mode .gallery-heading-aside p { color:#b9b9bf; }

body.dark-mode .gallery-search { background:#242428; }

body.dark-mode .gallery-search input { color:#fff; }

body.dark-mode .gallery-search kbd { border-color:#4c4c52; background:#333338; color:#ddd; }

body.dark-mode .gallery-showcase .gallery-filter { color:#d5d5da; }

body.dark-mode .gallery-showcase .gallery-filter.is-active { color:#fff; }

body.dark-mode .gallery-empty { border-color:var(--g-line); background:#242428; }

body.dark-mode .gallery-empty h4 { color:#fff; }

body.dark-mode .gallery-empty p { color:#bbb; }

@media (min-width:1200px) { .gallery-showcase > .container { max-width:1320px; } }

@media (max-width:991px) {

  .gallery-editorial-head { gap:25px; }

  .gallery-feature-panel { grid-template-columns:minmax(0,1fr) 205px; }

  .gallery-feature-side { padding:24px 18px; }

  .gallery-masonry { grid-auto-rows:clamp(90px,11vw,115px); gap:10px; }

  .gallery-card { grid-column:span 6; }

  .gallery-card-large { grid-column:span 7; }

  .gallery-card-portrait { grid-column:span 5; }

  .gallery-card-wide { grid-column:span 7; }

  .gallery-card-caption { right:14px; bottom:14px; left:14px; }

  .gallery-toolbar { align-items:flex-start; flex-direction:column; }

}

@media (max-width:767px) {

  .gallery-showcase { padding:52px 0 58px; }

  .gallery-editorial-head { grid-template-columns:1fr; gap:20px; padding-bottom:32px; }

  .gallery-heading-copy h2 { font-size:clamp(46px,12vw,70px); }

  .gallery-heading-aside { max-width:470px; padding-left:15px; }

  .gallery-heading-aside p { margin-bottom:13px; font-size:13px; }

  .gallery-head-mark { top:0; right:2%; font-size:100px; }

  .gallery-feature-panel { grid-template-columns:1fr; margin-bottom:58px; }

  .gallery-feature-image { min-height:390px; }

  .gallery-feature-side { display:grid; grid-template-columns:1fr auto; gap:10px 20px; padding:18px 20px 16px; }

  .gallery-side-label { grid-column:1/-1; padding-bottom:13px; }

  .gallery-side-stat { padding:5px 0; }

  .gallery-side-stat strong { font-size:44px; }

  .gallery-feature-side > p { align-self:center; max-width:210px; font-size:11px; }

  .gallery-feature-controls { grid-column:1/-1; margin-top:3px; padding-top:8px; }

  .gallery-feature-progress { grid-column:1/-1; margin-top:0; }

  .gallery-collection-heading { align-items:flex-start; flex-direction:column; gap:18px; }

  .gallery-search { width:100%; }

  .gallery-toolbar { gap:12px; margin-bottom:16px; }

  .gallery-filter-list { gap:5px; }

  .gallery-showcase .gallery-filter { min-height:34px; padding:7px 9px; font-size:10px; }

  .gallery-results { align-self:flex-end; }

  .gallery-masonry { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:90px; gap:9px; }

  .gallery-card,.gallery-card-large,.gallery-card-portrait,.gallery-card-wide { grid-column:span 3; grid-row:span 2; }

  .gallery-card-large { grid-column:span 6; grid-row:span 3; }

  .gallery-card-portrait { grid-row:span 3; }

  .gallery-card-caption strong { font-size:15px; }

  .gallery-card-large .gallery-card-caption strong { font-size:clamp(26px,7vw,38px); }

  .gallery-card-large .gallery-card-caption { right:18px; bottom:20px; left:18px; }

  .gallery-card-action { max-height:24px; margin-top:8px; opacity:1; }

  .gallery-bottom-line { flex-direction:column; gap:8px; line-height:1.6; }

}

@media (max-width:420px) {

  .gallery-feature-image { min-height:330px; }

  .gallery-feature-caption { right:18px; bottom:20px; left:18px; }

  .gallery-feature-caption h3 { font-size:32px; }

  .gallery-feature-topline { top:14px; right:14px; left:14px; font-size:8px; }

  .gallery-feature-side { padding:16px; }

  .gallery-masonry { grid-template-columns:1fr; grid-auto-rows:220px; }

  .gallery-card,.gallery-card-large,.gallery-card-portrait,.gallery-card-wide { grid-column:1; grid-row:span 1; }

  .gallery-card-large { grid-row:span 1; }

  .gallery-card-large .gallery-card-caption strong { font-size:27px; }

  .gallery-card-number { top:10px; left:10px; }

}

@media (prefers-reduced-motion:reduce) {

  .gallery-showcase *, .gallery-showcase *::before, .gallery-showcase *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }

}

/* ==========================================================

   FINAL GALLERY GRID — equal card boxes, images crop to fit

   Actual HTML grid selector: .gallery-masonry (#gallery-items)

   ========================================================== */

.gallery-showcase #gallery-items.gallery-masonry {

  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  grid-auto-flow: row !important;

  grid-auto-rows: auto !important;

  align-items: stretch !important;

  justify-content: stretch !important;

  gap: 16px !important;

  width: 100% !important;

  height: auto !important;

  columns: initial !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

  position: relative !important;

  display: block !important;

  float: none !important;

  grid-column: auto !important;

  grid-row: auto !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  aspect-ratio: 4 / 3 !important;

  overflow: hidden !important;

}

/* Do not let the featured image stretch across multiple columns.

   All card boxes have equal dimensions for a balanced grid. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large {

  grid-column: auto !important;

  grid-row: auto !important;

  aspect-ratio: 4 / 3 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card > .gallery-card-link {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  overflow: hidden !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card .gallery-card-link img,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card > a > img {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  object-fit: cover !important;

  object-position: center !important;

}

/* Keep captions anchored within each fixed-size box. */

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-shade {

  position: absolute !important;

  inset: 0 !important;

}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-number {

  position: absolute !important;

  top: 14px !important;

  left: 14px !important;

  z-index: 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {

  position: absolute !important;

  right: 18px !important;

  bottom: 18px !important;

  left: 18px !important;

  z-index: 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {

  max-width: 100% !important;

  font-size: clamp(16px, 1.55vw, 25px) !important;

  line-height: 1.15 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card[hidden] {

  display: none !important;

}

/* Tablet: two equal columns. */

@media (max-width: 900px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 13px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    grid-column: auto !important;

    aspect-ratio: 4 / 3 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {

    right: 14px !important;

    bottom: 14px !important;

    left: 14px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {

    font-size: clamp(15px, 2.2vw, 21px) !important;

  }

}

/* Phones: consistent two-column cards. */

@media (max-width: 560px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    grid-column: auto !important;

    aspect-ratio: 3 / 4 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-number {

    top: 8px !important;

    left: 8px !important;

    padding: 5px 6px !important;

    font-size: 9px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {

    right: 9px !important;

    bottom: 10px !important;

    left: 9px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {

    font-size: clamp(12px, 3.4vw, 16px) !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-category {

    font-size: 8px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-action {

    display: none !important;

  }

}

/* Tiny phones: one column for legibility. */

@media (max-width: 360px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: minmax(0, 1fr) !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    aspect-ratio: 5 / 3 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {

    font-size: 18px !important;

  }

}

/* ==========================================================

   CREATIVE BUT BALANCED MOSAIC

   Outer edges stay aligned; selected cards vary in size.

   Images always crop inside their assigned card boxes.

   ========================================================== */

.gallery-showcase #gallery-items.gallery-masonry {

  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

  grid-auto-flow: row dense !important;

  grid-auto-rows: clamp(78px, 8.4vw, 124px) !important;

  gap: 16px !important;

  align-items: stretch !important;

}

/* Reset all cards to the same grid behavior before assigning variety. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

  grid-column: span 2 !important;

  grid-row: span 2 !important;

  width: 100% !important;

  height: 100% !important;

  min-height: 0 !important;

  aspect-ratio: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

}

/* Card 1: wide lead image. Cards 2 and 3 create visual rhythm. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(1) {

  grid-column: span 3 !important;

  grid-row: span 3 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(2) {

  grid-column: span 3 !important;

  grid-row: span 3 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(3) {

  grid-column: span 2 !important;

  grid-row: span 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(4) {

  grid-column: span 2 !important;

  grid-row: span 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(5) {

  grid-column: span 2 !important;

  grid-row: span 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(6) {

  grid-column: span 2 !important;

  grid-row: span 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(7) {

  grid-column: span 3 !important;

  grid-row: span 3 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(8) {

  grid-column: span 3 !important;

  grid-row: span 2 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(9) {

  grid-column: span 3 !important;

  grid-row: span 2 !important;

}

/* Let image content fill the box; never let image dimensions size the card. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card > .gallery-card-link {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  overflow: hidden !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card .gallery-card-link img,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card > a > img {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  object-fit: cover !important;

  object-position: center !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card[hidden] {

  display: none !important;

}

/* Tablet: 4-column mosaic, still edge-aligned and varied. */

@media (max-width: 900px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    grid-auto-rows: clamp(75px, 12vw, 110px) !important;

    gap: 12px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    grid-column: span 2 !important;

    grid-row: span 2 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(1),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(6),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(9) {

    grid-column: span 4 !important;

    grid-row: span 3 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(2),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(7) {

    grid-column: span 2 !important;

    grid-row: span 3 !important;

  }

}

/* Mobile: simple two-column variation with a few full-width cards. */

@media (max-width: 560px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    grid-auto-rows: auto !important;

    gap: 10px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    grid-column: span 1 !important;

    grid-row: auto !important;

    height: auto !important;

    aspect-ratio: 4 / 5 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(1),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(4),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(7) {

    grid-column: span 2 !important;

    aspect-ratio: 5 / 3 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {

    right: 10px !important;

    bottom: 11px !important;

    left: 10px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {

    font-size: clamp(13px, 3.6vw, 17px) !important;

  }

}

@media (max-width: 360px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: minmax(0, 1fr) !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(n) {

    grid-column: span 1 !important;

    grid-row: auto !important;

    aspect-ratio: 5 / 3 !important;

  }

}

/* ==========================================================

   FLEX-FILL MOSAIC

   Card boxes control layout; images cover their boxes.

   Dense placement backfills available gaps between cards.

   ========================================================== */

.gallery-showcase #gallery-items.gallery-masonry {

  display: grid !important;

  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;

  grid-auto-rows: 22px !important;

  grid-auto-flow: dense !important;

  align-items: stretch !important;

  justify-items: stretch !important;

  gap: 16px !important;

  width: 100% !important;

}

/* Base card: a flexible tile. No image-driven sizing. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

  position: relative !important;

  display: block !important;

  grid-column: span 4 !important;

  grid-row: span 11 !important;

  width: 100% !important;

  height: auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  aspect-ratio: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

}

/* Varied tile proportions; dense placement packs later cards into

   otherwise-unused cells rather than leaving blank holes. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(1) {

  grid-column: span 7 !important;

  grid-row: span 15 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(2) {

  grid-column: span 5 !important;

  grid-row: span 15 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(3) {

  grid-column: span 4 !important;

  grid-row: span 10 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(4) {

  grid-column: span 4 !important;

  grid-row: span 10 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(5) {

  grid-column: span 4 !important;

  grid-row: span 10 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(6) {

  grid-column: span 4 !important;

  grid-row: span 10 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(7) {

  grid-column: span 6 !important;

  grid-row: span 13 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(8) {

  grid-column: span 6 !important;

  grid-row: span 10 !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(9) {

  grid-column: span 6 !important;

  grid-row: span 10 !important;

}

/* Card/link/image fill the allocated box, never the reverse. */

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card > .gallery-card-link {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  overflow: hidden !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card .gallery-card-link img,

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card > a > img {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  object-fit: cover !important;

  object-position: center !important;

}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-shade {

  position: absolute !important;

  inset: 0 !important;

}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-number {

  position: absolute !important;

  z-index: 2 !important;

  top: 14px !important;

  left: 14px !important;

}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {

  position: absolute !important;

  z-index: 2 !important;

  right: 18px !important;

  bottom: 18px !important;

  left: 18px !important;

}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card[hidden] {

  display: none !important;

}

/* Tablet: 8-column grid; dense placement fills open spaces. */

@media (max-width: 900px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;

    grid-auto-rows: 18px !important;

    gap: 12px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    grid-column: span 4 !important;

    grid-row: span 11 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(1),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(7) {

    grid-column: span 8 !important;

    grid-row: span 13 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(2),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(5) {

    grid-column: span 4 !important;

    grid-row: span 10 !important;

  }

}

/* Mobile: two columns with a few full-width featured tiles. */

@media (max-width: 560px) {

  .gallery-showcase #gallery-items.gallery-masonry {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    grid-auto-rows: auto !important;

    gap: 10px !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {

    grid-column: span 1 !important;

    grid-row: auto !important;

    height: auto !important;

    aspect-ratio: 4 / 5 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(1),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(4),

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(7) {

    grid-column: span 2 !important;

    aspect-ratio: 5 / 3 !important;

  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {

    right: 10px !important;

    bottom: 11px !important;

    left: 10px !important;

  }

}

/* SCIENOTECH GALLERY — FLEXIBLE COLLECTION LAYOUT */
.gallery-showcase #gallery-items.gallery-masonry {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: clamp(12px, 1.2vw, 18px) !important;
  width: 100% !important;
  height: auto !important;
  columns: initial !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: initial !important;
}

/* Flexible cards: no fixed aspect ratio or hard-coded grid positions. */
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card,
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {
  position: relative !important;
  display: block !important;
  flex: 1 1 30% !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 300px !important;
  height: clamp(300px, 28vw, 430px) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-area: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

/* Wide cards can take up more of the row, without fixed mosaic positions. */
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {
  flex-grow: 1.6 !important;
  flex-basis: 44% !important;
}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait {
  flex-grow: 0.9 !important;
  flex-basis: 26% !important;
}

/* Prevent old nth-child mosaic assignments from affecting the flex layout. */
.gallery-showcase #gallery-items.gallery-masonry > .gallery-card:nth-child(n) {
  grid-column: auto !important;
  grid-row: auto !important;
  grid-area: auto !important;
}

/* Link fills the card; image covers the area without being stretched. */
.gallery-showcase #gallery-items.gallery-masonry .gallery-card-link {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-link img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .55s ease, filter .3s ease !important;
}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card:hover .gallery-card-link img {
  transform: scale(1.035) !important;
}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-number,
.gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {
  z-index: 2 !important;
}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {
  max-width: calc(100% - 40px) !important;
}

.gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {
  overflow-wrap: anywhere;
}

.gallery-showcase #gallery-items.gallery-masonry > .gallery-card[hidden] {
  display: none !important;
}

/* Tablet: two cards across, with flexible height. */
@media (max-width: 900px) {
  .gallery-showcase #gallery-items.gallery-masonry {
    gap: 12px !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,
  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,
  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,
  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {
    flex: 1 1 calc(50% - 12px) !important;
    height: clamp(280px, 38vw, 370px) !important;
    min-height: 260px !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    max-width: calc(100% - 28px) !important;
  }
}

/* Mobile: one spacious card per row so uploaded images stay legible. */
@media (max-width: 560px) {
  .gallery-showcase #gallery-items.gallery-masonry {
    gap: 14px !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card,
  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-large,
  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-portrait,
  .gallery-showcase #gallery-items.gallery-masonry > .gallery-card-wide {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: clamp(250px, 72vw, 360px) !important;
    min-height: 250px !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-number {
    top: 10px !important;
    left: 10px !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption {
    right: 14px !important;
    bottom: 15px !important;
    left: 14px !important;
    max-width: calc(100% - 28px) !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-caption strong {
    font-size: clamp(17px, 4.8vw, 23px) !important;
    line-height: 1.15 !important;
  }

  .gallery-showcase #gallery-items.gallery-masonry .gallery-card-action {
    display: none !important;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .gallery-showcase #gallery-items.gallery-masonry *,
  .gallery-showcase #gallery-items.gallery-masonry *::before,
  .gallery-showcase #gallery-items.gallery-masonry *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.image-preview {

    display: grid;

    gap: 12px;

    justify-items: start;

    margin-top: 12px;

}

.image-preview img {

    display: block;

    width: 100%;

    max-height: 240px;

    border: 1px solid var(--line);

    border-radius: 10px;

    background: var(--background);

    object-fit: contain;

}