/* IC Gallery Studio — gallery grid (SEO pages: tiny filter script only, no editor JS). */
.icgs-filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.icgs-filter{border:1px solid #d5dde3;background:#fff;color:#343963;font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;font-family:inherit;transition:background .12s ease,border-color .12s ease}
.icgs-filter:hover{border-color:#4b2ce0;color:#4b2ce0}
.icgs-filter.on{background:#4b2ce0;border-color:#4b2ce0;color:#fff}
/* Styled as a white pill (like the filter chips) so it stays legible on the
 * dark gallery background — plain brand-purple text disappears there. */
.icgs-scratch{margin-left:auto;align-self:center;font-size:13.5px;font-weight:600;color:#4b2ce0;text-decoration:none;background:#fff;border:1px solid #d5dde3;padding:7px 16px;border-radius:999px;transition:background .12s ease,border-color .12s ease}
.icgs-scratch:hover{border-color:#4b2ce0;text-decoration:none;background:#f1edfd}
.icgs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;margin:14px 0 30px}
/* The whole tile is ONE link into the designer: elevated white card. */
.icgs-tile{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:16px 16px 18px;box-shadow:0 2px 12px rgba(22,54,94,.10);text-decoration:none;transition:box-shadow .15s ease,transform .15s ease}
.icgs-tile:hover{box-shadow:0 10px 28px rgba(22,54,94,.18);transform:translateY(-2px);text-decoration:none}
.icgs-tile.hide{display:none}
.icgs-tile h3{margin:14px 2px 4px;font-size:16.5px;font-weight:700;color:#343963;line-height:1.3}
.icgs-tile p{margin:0 2px 14px;font-size:13.5px;color:#656989;line-height:1.5;flex:1}
.icgs-btn{display:block;text-align:center;background:#4b2ce0;color:#fff;font-size:15px;font-weight:700;padding:12px 14px;border-radius:10px;transition:background .12s ease}
.icgs-tile:hover .icgs-btn{background:#3a21b8}
/* Uniform grey well; the thumbnail webp bakes its own card shadow inside a
 * transparent margin — never add CSS shadow/radius to the img (ghost border). */
.icgs-thumb{position:relative;display:flex;align-items:center;justify-content:center;background:#f1f3f5;border-radius:12px;height:290px;padding:16px}
/* Plain placeholder only — the :not() matters: this selector outranks
 * .icgs-thumb-filled, and its width/height:auto silently overrode the
 * overlay's 100% sizing (overlay then hugged top-left, misaligned). */
.icgs-thumb img:not(.icgs-thumb-filled){max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Filled "make it yours" example, layered over the plain thumbnail. It fills
 * the well's content box (inset by the same 16px padding) with
 * object-fit:contain, so — the plain thumb now being rendered by the SAME
 * renderer — it lines up pixel-for-pixel underneath.
 *
 * Reveal is a soft-edged DIAGONAL WIPE: an alpha mask (opaque→transparent
 * band) that's oversized and slides across, so the filled version wipes in
 * with a blurred leading edge rather than a flat crossfade. A short opacity
 * fade rides along to soften the very start/end. gallery-anim.js just toggles
 * .icgs-show-filled; the mask does the rest. */
.icgs-thumb-filled{
  position:absolute;inset:0;width:100%;height:100%;
  /* inherit the well's own padding (16px portrait, 4px sides landscape, whatever
   * the picker uses) so object-fit:contain sizes the image into the SAME content
   * box as the plain thumb — hardcoded insets drifted on non-16px wells. */
  padding:inherit;box-sizing:border-box;
  object-fit:contain;pointer-events:none;opacity:0;
  /* Mask geometry: the 105deg gradient line runs diagonally, so its % stops
   * must cover the element's far corner PROJECTED onto that line. At 300%
   * width, opaque-to-45% covers the bottom-right corner in the shown state
   * (42%/230% fell short — the corner never finished wiping) while 58%+
   * keeps the start state fully hidden. */
  -webkit-mask-image:linear-gradient(105deg,#000 45%,rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(105deg,#000 45%,rgba(0,0,0,0) 58%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  /* This (base) transition runs on HIDE: same wipe, sweeping back out. The
   * opacity nudge is delayed to the tail so the wipe — not a fade — is what
   * you see; on SHOW the .icgs-show-filled transition overrides with no delay. */
  transition:mask-position 2.6s linear,-webkit-mask-position 2.6s linear,opacity .3s ease 2.3s;
}
.icgs-thumb.icgs-show-filled .icgs-thumb-filled{
  opacity:1;-webkit-mask-position:0% 0;mask-position:0% 0;
  transition:mask-position 2.6s linear,-webkit-mask-position 2.6s linear,opacity .3s ease;
}
@media (prefers-reduced-motion: reduce){.icgs-thumb-filled{display:none}}
/* Landscape cards are width-constrained in the well — slimmer side padding
 * lets them render closer in size to the portrait cards. (The webp bakes its
 * own transparent margin, so near-edge is safe.) Portrait keeps 16px. */
.icgs-thumb.landscape{padding-left:4px;padding-right:4px}
@media (prefers-reduced-motion: reduce){.icgs-tile,.icgs-tile:hover{transform:none;transition:none}}