/* Template galleries on the format pages (PDF, Word, Excel, Google Docs, Google Sheets, blank).
   Same shape as the studio galleries: four columns, a compact filter bar with menus instead of a
   wall of chips, and cards whose name, tags and download buttons sit under the design instead of
   on top of it, visible without hovering. Loaded after it-editor-v1.css. */

/* ---------- grid ---------- */
.itp-sec .ie-masonry{columns:4 210px;column-gap:18px}
@media (max-width:1023px){.itp-sec .ie-masonry{columns:3 200px}}
@media (max-width:760px){.itp-sec .ie-masonry{columns:2 150px;column-gap:12px}}

/* ---------- card ---------- */
.itp-sec .ie-tile{display:flex;flex-direction:column;border-radius:16px;border:1px solid #E7E2D8;background:#fff;
  box-shadow:0 1px 2px rgba(24,21,16,.05),0 8px 20px -16px rgba(24,21,16,.28);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
.itp-sec .ie-tile:hover{transform:translateY(-4px);border-color:#D6CFC2;
  box-shadow:0 2px 4px rgba(24,21,16,.05),0 24px 44px -26px rgba(24,21,16,.45)}
.itp-sec .ie-tile:focus-visible{outline:3px solid #F26207;outline-offset:3px}
.tg2-shot{position:relative;display:block;overflow:hidden;background:#F4F1EA;border-bottom:1px solid #EEE9DF}
.tg2-shot img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.itp-sec .ie-tile:hover .tg2-shot img{transform:scale(1.025)}
/* a quiet "open" cue over the design on pointer devices */
.tg2-peek{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:rgba(20,18,15,.88);
  color:#fff;font:700 12.5px/1 Inter,system-ui,sans-serif;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.tg2-peek svg{width:15px;height:15px}
@media (hover:hover){.itp-sec .ie-tile:hover .tg2-peek{opacity:1;transform:translate(-50%,-50%)}}

/* the old hover overlay becomes a footer that is always there */
.itp-sec .ie-tile .ie-ov{position:static;inset:auto;opacity:1!important;background:#fff!important;
  display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;justify-content:flex-start}
.tg2-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2px}
.itp-sec .ie-tile .tg2-tags .ie-tag{position:static;box-shadow:none;pointer-events:none}
.itp-sec .ie-tile .ie-ovn{color:#14120F;font-size:15px;font-weight:750;letter-spacing:-.01em;line-height:1.3}
.itp-sec .ie-tile .ie-ovt{color:#655E56;font-size:13px;line-height:1.45;margin:0 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* actions: look from .ui-btn, layout here */
.itp-sec .ie-tile .ie-ovr{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.itp-sec .ie-tile .ie-ovb.ui-btn{flex:1 1 auto;border-radius:10px;font-size:13px}
.itp-sec .ie-tile .ie-ovb.ui-btn--dark{flex-basis:100%}
/* flex-basis 0 with the default auto min-width: a format button never shrinks narrower than its
   own label ("Word", "Excel"), so a row that cannot fit all of them wraps onto a second line
   instead of squeezing each button below its text and spilling it past the button edge. */
.itp-sec .ie-tile .ie-ovr.tg2-multi .ie-ovb.ui-btn--secondary{flex:1 1 0;padding:0 4px;gap:4px;font-size:12.5px}
@media (max-width:760px){
  .itp-sec .ie-tile .ie-ov{padding:10px 10px 12px;gap:5px}
  .itp-sec .ie-tile .ie-ovn{font-size:13.5px}
  .itp-sec .ie-tile .ie-ovt{display:none}
  .itp-sec .ie-tile .ie-ovb.ui-btn{font-size:12.5px;padding:0 8px}
  .tg2-tags .ie-tag.right{display:none}
  /* three format buttons (PDF/Word/Excel) in one row at this width: the decorative download icon
     (already aria-hidden, the accessible name lives on the link) is the first thing to give up
     its space, so "Word" and "Excel" still read in full instead of the row wrapping to two lines. */
  .itp-sec .ie-tile .ie-ovr.tg2-multi .ie-ovb.ui-btn--secondary{gap:0;padding:0 2px}
  .itp-sec .ie-tile .ie-ovr.tg2-multi .ie-ovb.ui-btn--secondary .ui-ic{display:none}
  /* a single download button (the Word/Google Docs template pages) shows "Download .docx": at
     narrow widths the card is too narrow for that in one line, so let it shrink and ellipsize
     rather than push past the card's edge. The icon stays full size next to it. */
  .itp-sec .ie-tile .ie-ovr:not(.tg2-multi) .ie-ovb.ghost.ui-btn--secondary{min-width:0;gap:6px;padding:0 6px}
  .itp-sec .ie-tile .ie-ovr:not(.tg2-multi) .ie-ovb.ghost.ui-btn--secondary [data-copy-label]{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}

/* ---------- filter bar (menus come from it-ui-v1) ---------- */
.itp-bar.tg2-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;border-radius:18px}
.itp-bar.tg2-bar > label{flex:1 1 240px;min-width:0;margin:0}
.itp-bar.tg2-bar .itp-count{margin-left:auto;padding:0 6px;white-space:nowrap}
@media (max-width:760px){
  .itp-bar.tg2-bar{gap:8px;padding:8px}
  .itp-bar.tg2-bar .ui-menu{flex:1 1 calc(33% - 8px);min-width:0}
  .itp-bar.tg2-bar .ui-menu__btn{width:100%;justify-content:space-between;padding:0 10px 0 12px;gap:4px}
  .itp-bar.tg2-bar .ui-menu__btn:not([data-all]) .ui-menu__key{display:none}
  .itp-bar.tg2-bar .ui-menu__btn[data-all] .ui-menu__val{display:none}
  .itp-bar.tg2-bar .ui-menu__val{max-width:none;font-size:13.5px}
  .itp-bar.tg2-bar .ui-menu__list{min-width:210px}
  .itp-bar.tg2-bar > label{flex-basis:100%}
  .itp-bar.tg2-bar .itp-count{margin:0 auto 0 4px}
}
@media (prefers-reduced-motion:reduce){
  .itp-sec .ie-tile,.tg2-shot img,.tg2-peek{transition:none}
  .itp-sec .ie-tile:hover,.itp-sec .ie-tile:hover .tg2-shot img{transform:none}
}

/* components inside the older .ie-* rules, which carry more specificity */
.itp-sec .ie-tile .tg2-tags .ie-tag.ui-tag{background:#F1EDE5;color:#4A443C}
.itp-sec .ie-tile .tg2-tags .ie-tag.ui-tag--accent{background:#FDEBDD;color:#9A3F05}
.itp-sec .ie-tile .ie-ovb.ui-btn--secondary{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line-2);box-shadow:var(--ui-shadow-1)}
.itp-sec .ie-tile .ie-ovb.ui-btn--secondary:hover{background:var(--ui-cta-tint);border-color:var(--ui-cta);color:var(--ui-cta)}
.itp-sec .ie-tile .ie-ovb.ui-btn--dark{background:var(--ui-ink);color:#fff;border:1px solid var(--ui-ink)}
.itp-sec .ie-tile .ie-ovb.ui-btn--dark:hover{background:var(--ui-ink-2)}
.tg2-peek{white-space:nowrap}

/* 18 Oct 2026: the cards now carry a live .ige-mini preview instead of an <img>, so cards() in
   it-tpl-gallery-v2.js returns before it adds the .ui-btn classes. Without them the footer's
   download link kept the old dark-overlay look (white text on a white footer, invisible) and its
   focus ring was white too. Give the un-enhanced buttons a legible look on the white footer. */
.itp-sec .ie-tile .ie-ovb:not(.ui-btn){background:#fff;color:#14120F;border:1px solid #D9D4CB;box-shadow:0 1px 2px rgba(24,21,16,.08)}
.itp-sec .ie-tile .ie-ovb:not(.ui-btn):hover{background:#FDEBDD;border-color:#C04E06;color:#9A3F05}
.itp-sec .ie-tile .ie-ovb:not(.ui-btn):focus-visible{outline:3px solid #F26207;outline-offset:2px}
/* the trade tag wraps to two lines over the preview on narrow cards; the enhanced footer hides it
   at this width (see .tg2-tags .ie-tag.right above), so hide the un-enhanced one the same way */
@media (max-width:760px){.itp-sec .ie-tile > .ie-tag.right{display:none}}