/** IMSL Taxonomy Grid — Frontend Styles v1.3.9-r1 */

/* ── Outer wrapper ───────────────────────────────────────────────────────────*/
.imsl-tg-wrap{display:block}

/* ── Grid ────────────────────────────────────────────────────────────────────*/
.imsl-tg-grid{display:grid;gap:var(--imsl-grid-gap,24px);grid-template-columns:repeat(var(--imsl-cols,3),1fr);padding:0;margin:0;list-style:none}
.imsl-tg-grid[style*="--imsl-min-col-width"]{grid-template-columns:repeat(auto-fill,minmax(var(--imsl-min-col-width,200px),1fr))!important}
.imsl-tg-cols-1{--imsl-cols:1}.imsl-tg-cols-2{--imsl-cols:2}.imsl-tg-cols-3{--imsl-cols:3}
.imsl-tg-cols-4{--imsl-cols:4}.imsl-tg-cols-5{--imsl-cols:5}.imsl-tg-cols-6{--imsl-cols:6}

/* ── Card ────────────────────────────────────────────────────────────────────*/
.imsl-tg-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--imsl-card-radius,12px);overflow:hidden;background:var(--imsl-card-bg,#fff);border-width:var(--imsl-card-border-width,1px);border-style:var(--imsl-card-border-style,solid);border-color:var(--imsl-card-border-color,#e8e8e8);box-shadow:var(--imsl-card-shadow,0 2px 8px rgba(0,0,0,.07));transition:transform calc(var(--imsl-transition,220)*1ms) ease,box-shadow calc(var(--imsl-transition,220)*1ms) ease,border-color calc(var(--imsl-transition,220)*1ms) ease,background calc(var(--imsl-transition,220)*1ms) ease}
.imsl-tg-card:hover{transform:translateY(calc(var(--imsl-card-hover-ty,-4)*1px));box-shadow:var(--imsl-card-hover-shadow,0 8px 28px rgba(0,0,0,.13));border-color:var(--imsl-card-hover-border-color,var(--imsl-card-border-color,#e8e8e8));background:var(--imsl-card-hover-bg,var(--imsl-card-bg,#fff));text-decoration:none;color:inherit}
.imsl-tg-card:focus-visible{outline:3px solid var(--imsl-btn-color,#c0392b);outline-offset:3px}

/* ── Image wrap ──────────────────────────────────────────────────────────────*/
/*
   KEY DESIGN:
   - The wrap is position:relative with a defined size via aspect-ratio (or fixed height).
   - The image is position:absolute, filling the wrap 100% in both axes.
   - This guarantees the image always fills the container regardless of FSE theme CSS,
     inline width/height attributes from wp_get_attachment_image, or object-fit mode.
   - The placeholder keeps display:flex for centering its letter initial.
*/
.imsl-tg-card__image-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--imsl-image-bg,#f5f5f5);
  border-radius:var(--imsl-image-radius,0px) var(--imsl-image-radius,0px) 0 0;
  line-height:0;
  font-size:0;
  border-bottom-width:var(--imsl-divider-width,0px);
  border-bottom-style:var(--imsl-divider-style,solid);
  border-bottom-color:var(--imsl-divider-color,#e8e8e8)
}

/* Aspect ratio classes — standard sizes */
.imsl-tg-img--landscape  .imsl-tg-card__image-wrap{aspect-ratio:16/9}
.imsl-tg-img--widescreen .imsl-tg-card__image-wrap{aspect-ratio:21/9}
.imsl-tg-img--square     .imsl-tg-card__image-wrap{aspect-ratio:1/1}
.imsl-tg-img--r3-2       .imsl-tg-card__image-wrap{aspect-ratio:3/2}
.imsl-tg-img--r4-3       .imsl-tg-card__image-wrap{aspect-ratio:4/3}
.imsl-tg-img--portrait   .imsl-tg-card__image-wrap{aspect-ratio:3/4}
.imsl-tg-img--r2-3       .imsl-tg-card__image-wrap{aspect-ratio:2/3}
.imsl-tg-img--tall       .imsl-tg-card__image-wrap{aspect-ratio:9/16}
.imsl-tg-img--auto       .imsl-tg-card__image-wrap{aspect-ratio:auto}
/* Auto mode: img is in-flow so the wrap's height grows naturally with the image */
.imsl-tg-img--auto .imsl-tg-card__image-wrap{min-height:60px}
.imsl-tg-img--auto .imsl-tg-card__image{position:relative;inset:unset;height:auto!important;width:100%;object-fit:initial}
.imsl-tg-img--circle     .imsl-tg-card__image-wrap{aspect-ratio:1/1;border-radius:50%;width:88px;height:88px;margin:1.25rem auto 0;border-bottom:none}
.imsl-tg-card__image-wrap.has-max-height{aspect-ratio:unset!important;height:var(--imsl-image-max-height,120px)}

/*
   IMAGE: absolutely positioned to fill the wrap perfectly.
   - position:absolute + inset:0 means it always touches all 4 edges of the wrap.
   - width:100%;height:100% fills the wrap.
   - object-fit controls how the image content scales within that space.
   - padding is applied via box-sizing:border-box so it shrinks the visible area
     without creating external gaps (used with contain mode to add whitespace around logo).
   - margin:0!important overrides any FSE theme reset that adds vertical margin to <img>.
   - The hover scale is on the img itself, not the wrap, so overflow:hidden on wrap clips it.
*/
.imsl-tg-card__image{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-height:100%;
  object-fit:var(--imsl-image-object-fit,contain);
  padding:var(--imsl-image-padding,16px);
  margin:0!important;
  box-sizing:border-box;
  display:block!important;
  vertical-align:top;
  transition:transform calc(var(--imsl-transition,220)*1ms) ease
}
.imsl-tg-card:hover .imsl-tg-card__image{transform:scale(1.04)}

/* cover and fill: no padding — image must touch all 4 edges */
.imsl-tg-img--cover .imsl-tg-card__image,
.imsl-tg-img--fill  .imsl-tg-card__image{padding:0!important}

/* ── Placeholder ─────────────────────────────────────────────────────────────*/
/* Placeholder is NOT absolutely positioned — it keeps the wrap's height via aspect-ratio */
.imsl-tg-card__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--imsl-placeholder-bg,#f0f0f0)
}
.imsl-tg-card__initial{font-size:var(--imsl-placeholder-font-size,40px);font-weight:700;line-height:1;font-family:Georgia,serif;color:var(--imsl-placeholder-color,#555);opacity:.55;user-select:none}

/* ── Card body ───────────────────────────────────────────────────────────────*/
.imsl-tg-card__body{padding:calc(var(--imsl-card-padding-v,20)*1px) calc(var(--imsl-card-padding-h,20)*1px);display:flex;flex-direction:column;flex:1;gap:calc(var(--imsl-body-gap,6)*1px);align-items:var(--imsl-content-align-items,flex-start);justify-content:var(--imsl-content-justify,flex-start);text-align:var(--imsl-content-text-align,left)}
.imsl-tg-card__name{font-size:var(--imsl-title-size,16px);font-weight:var(--imsl-title-weight,600);line-height:var(--imsl-title-line-height,1.3);text-transform:var(--imsl-title-transform,none);letter-spacing:var(--imsl-title-letter-spacing,0);font-family:var(--imsl-title-font-family,inherit);color:var(--imsl-title-color,#1a1a1a);margin:0 0 var(--imsl-title-margin-bottom,6px)}
.imsl-tg-card__count{font-size:var(--imsl-count-size,12px);font-weight:var(--imsl-count-weight,400);text-transform:var(--imsl-count-transform,none);letter-spacing:var(--imsl-count-letter-spacing,0);font-family:var(--imsl-count-font-family,inherit);color:var(--imsl-count-color,#888);line-height:1.2}
.imsl-tg-card__desc{font-size:var(--imsl-desc-size,14px);line-height:var(--imsl-desc-line-height,1.55);letter-spacing:var(--imsl-desc-letter-spacing,0);text-transform:var(--imsl-desc-transform,none);font-family:var(--imsl-desc-font-family,inherit);color:var(--imsl-desc-color,#555);margin:0;flex:1}
.imsl-tg-card__desc+.imsl-tg-card__btn{margin-top:calc(var(--imsl-desc-btn-gap,12)*1px)}

/* ── Button ──────────────────────────────────────────────────────────────────*/
.imsl-tg-card__btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--imsl-btn-size,12px);font-weight:var(--imsl-btn-weight,600);font-family:var(--imsl-btn-font-family,inherit);text-transform:var(--imsl-btn-transform,uppercase);letter-spacing:var(--imsl-btn-ls,0.04em);border-radius:calc(var(--imsl-btn-radius,6)*1px);padding:calc(var(--imsl-btn-pv,6)*1px) calc(var(--imsl-btn-ph,14)*1px);margin-top:auto;align-self:var(--imsl-btn-self,flex-start);color:var(--imsl-btn-color,#c0392b);background:var(--imsl-btn-bg,transparent);border:1.5px solid var(--imsl-btn-border-color,#c0392b);transition:color calc(var(--imsl-transition,220)*1ms) ease,background calc(var(--imsl-transition,220)*1ms) ease,border-color calc(var(--imsl-transition,220)*1ms) ease,gap calc(var(--imsl-transition,220)*1ms) ease}
.imsl-tg-btn--text{border-color:transparent!important;background:transparent!important;padding-left:0;padding-right:0}
.imsl-tg-btn--filled{background:var(--imsl-btn-bg,var(--imsl-btn-color,#c0392b));color:var(--imsl-btn-color,#fff);border-color:var(--imsl-btn-bg,var(--imsl-btn-color,#c0392b))}
.imsl-tg-card:hover .imsl-tg-card__btn{color:var(--imsl-btn-hover-color,#fff);background:var(--imsl-btn-hover-bg,#c0392b);border-color:var(--imsl-btn-hover-border-color,#c0392b)}
.imsl-tg-card:hover .imsl-tg-btn--text{border-color:transparent!important;background:transparent!important;color:var(--imsl-btn-hover-color,var(--imsl-btn-color,#c0392b))}
.imsl-tg-btn__icon{width:15px;height:15px;flex-shrink:0;transition:transform calc(var(--imsl-transition,220)*1ms) ease;display:inline-flex}
.imsl-tg-card:hover .imsl-tg-btn--outline .imsl-tg-btn__icon,.imsl-tg-card:hover .imsl-tg-btn--text .imsl-tg-btn__icon{transform:translateX(3px)}

/* ── Pagination ──────────────────────────────────────────────────────────────*/
.imsl-tg-wrap .imsl-tg-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--pgn-gap,6px);margin-top:var(--pgn-margin-top,32px);padding:var(--pgn-padding-v,0px) var(--pgn-padding-h,0px);background:var(--pgn-container-bg,transparent);justify-content:var(--imsl-pagination-align,center)}
.imsl-tg-wrap .imsl-tg-pagination__btn{min-width:var(--pgn-btn-min-width,36px);height:var(--pgn-btn-height,36px);padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--pgn-btn-radius,6px);font-size:var(--pgn-btn-font-size,13px);font-weight:var(--pgn-btn-font-weight,500);cursor:pointer;border-width:var(--pgn-btn-border-width,1px);border-style:var(--pgn-btn-border-style,solid);border-color:var(--pgn-btn-border-color,#e0e0e0);background:var(--pgn-btn-bg,#ffffff);color:var(--pgn-btn-color,#444444);transition:background .18s ease,color .18s ease,border-color .18s ease;line-height:1}
.imsl-tg-wrap .imsl-tg-pagination__btn:hover:not(:disabled):not(.is-active){background:var(--pgn-hover-bg,var(--pgn-btn-bg,#ffffff));color:var(--pgn-hover-color,#c0392b);border-color:var(--pgn-hover-border-color,#c0392b)}
.imsl-tg-wrap .imsl-tg-pagination__btn.is-active{background:var(--pgn-active-bg,#c0392b);color:var(--pgn-active-color,#ffffff);border-color:var(--pgn-active-border-color,#c0392b);cursor:default}
.imsl-tg-wrap .imsl-tg-pagination__btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.imsl-tg-wrap .imsl-tg-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--pgn-btn-min-width,36px);height:var(--pgn-btn-height,36px);color:#aaa;font-size:var(--pgn-btn-font-size,13px);user-select:none;pointer-events:none}
.imsl-tg-wrap .imsl-tg-pagination__loading{display:none;opacity:.6;font-size:13px;color:#888}
.imsl-tg-wrap .imsl-tg-pagination--loading .imsl-tg-pagination__loading{display:inline}

/* ── Error / empty ───────────────────────────────────────────────────────────*/
.imsl-tg-error,.imsl-tg-empty{padding:1rem 1.25rem;background:#fff8f8;border:1px solid #f5c6c6;border-radius:6px;font-size:.875rem;color:#c0392b}

/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media(max-width:1024px){.imsl-tg-cols-4,.imsl-tg-cols-5,.imsl-tg-cols-6{--imsl-cols:3}}
@media(max-width:768px){.imsl-tg-cols-3,.imsl-tg-cols-4,.imsl-tg-cols-5,.imsl-tg-cols-6{--imsl-cols:2}}
@media(max-width:480px){.imsl-tg-wrap .imsl-tg-grid{--imsl-cols:1!important;gap:1rem}}