/* ==========================================================================
   Triple Bow Studios / shared components, buttons, hover and motion
   ========================================================================== */

/* ------------------------------------------------------------- labels --- */
.tbs-label,
.tbs-label p{
  font-family:var(--f-body);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.17em;line-height:1.6;
  color:var(--c-ink-muted);margin:0;
}
.tbs-on-dark .tbs-label,
.tbs-on-dark .tbs-label p{color:var(--c-on-dark-muted);}
.tbs-lead p{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.85;color:var(--c-ink-muted);}
.tbs-on-dark,.tbs-on-dark p,.tbs-on-dark h1,.tbs-on-dark h2,.tbs-on-dark h3,.tbs-on-dark h4{color:var(--c-on-dark);}
.tbs-on-dark .tbs-lead p{color:var(--c-on-dark-muted);}

/* ------------------------------------------------------------ buttons --- */
body .tbs-btn .elementor-button,
body .tbs-btn-ghost .elementor-button,
body .tbs-btn-walnut .elementor-button{
  position:relative;
  font-family:var(--f-body);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;line-height:1;
  padding:19px 34px;border-radius:0;border:0;
  transition:background-color .32s var(--ease),color .32s var(--ease),
             box-shadow .32s var(--ease),transform .32s var(--ease);
}
/* solid ink, the concept's default */
body .tbs-btn .elementor-button{background-color:var(--c-dark);color:var(--c-cream);}
body .tbs-btn .elementor-button:hover,
body .tbs-btn .elementor-button:focus{background-color:var(--c-walnut);color:var(--c-cream);}
/* solid walnut, used on interior headers and the form */
body .tbs-btn-walnut .elementor-button{background-color:var(--c-walnut);color:var(--c-cream);}
body .tbs-btn-walnut .elementor-button:hover,
body .tbs-btn-walnut .elementor-button:focus{background-color:var(--c-walnut-deep);color:var(--c-cream);}
/* bare label with an underline that extends from the left */
body .tbs-btn-ghost .elementor-button{
  background:transparent;color:var(--c-ink);padding-left:0;padding-right:0;
}
body .tbs-btn-ghost .elementor-button::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:left;
  transition:transform .42s var(--ease);
}
body .tbs-btn-ghost .elementor-button:hover::after{transform:scaleX(0);transform-origin:right;}
body .tbs-on-dark .tbs-btn-ghost .elementor-button{color:var(--c-on-dark);}
body .elementor-button:active{transform:translateY(1px);}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,.elementor-button:focus-visible{
  outline:2px solid var(--c-walnut);outline-offset:3px;
}

/* --------------------------------------------------------- image hover -- */
/* Frames never move; only the image inside scales. */
.tbs-zoom .elementor-widget-image,
.tbs-tile .elementor-widget-image{overflow:hidden;display:block;background:var(--c-panel);}
.tbs-zoom .elementor-widget-image img,
.tbs-tile .elementor-widget-image img{
  width:100%;display:block;
  transition:transform .85s var(--ease),filter .5s var(--ease);
}
.tbs-zoom:hover .elementor-widget-image img,
.tbs-tile:hover .elementor-widget-image img{transform:scale(1.045);}

/* ------------------------------------------------------- category tile -- */
/* Image tile with the caption laid inside the lower left, as in the concept. */
.tbs-tile{position:relative;overflow:hidden;}
.tbs-tile .elementor-widget-image img{aspect-ratio:47/52;object-fit:cover;height:100%;}
.tbs-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(26,26,24,0) 42%,rgba(26,26,24,.72) 100%);
  transition:opacity .5s var(--ease);
}
.tbs-tile:hover::after{opacity:.86;}
.tbs-tile .tbs-tile__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 20px 22px;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.tbs-tile .tbs-tile__cap .elementor-widget{width:auto !important;}
.tbs-tile .tbs-tile__cap .elementor-heading-title{
  font-family:var(--f-body);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.35;
  color:var(--c-on-dark);margin:0;
}
/* the arrow that slides on hover */
.tbs-tile .tbs-tile__arrow .elementor-heading-title{
  font-family:var(--f-body);font-size:19px;font-weight:400;color:var(--c-on-dark);
  letter-spacing:0;margin:0;line-height:1;
  transition:transform .42s var(--ease);
}
.tbs-tile:hover .tbs-tile__arrow .elementor-heading-title{transform:translateX(8px);}
/* the whole tile is one link */
.tbs-tile > a.elementor-element-overlay,
.tbs-tile .tbs-tile__link{position:absolute;inset:0;z-index:3;}

/* ------------------------------------------------------------ filters --- */
.tbs-filters{display:flex;flex-wrap:wrap;gap:10px;}
.tbs-filters .elementor-widget{width:auto !important;}
.tbs-filters .elementor-button{
  background:transparent;color:var(--c-ink-muted);
  border:1px solid var(--c-hair);padding:11px 20px;
  font-size:11.5px;letter-spacing:.15em;
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease);
}
.tbs-filters .elementor-button:hover{border-color:var(--c-walnut);color:var(--c-walnut);}
.tbs-filters .tbs-filter-on .elementor-button{
  background:var(--c-ink);border-color:var(--c-ink);color:var(--c-cream);
}

/* ------------------------------------------------------------ reveals --- */
.tbs-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.tbs-reveal.is-in{opacity:1;transform:none;}
.no-js .tbs-reveal{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .tbs-reveal{opacity:1 !important;transform:none !important;}
  .tbs-zoom:hover .elementor-widget-image img,
  .tbs-tile:hover .elementor-widget-image img{transform:none;}
}

/* ------------------------------------------------------------- a11y ----- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}