@charset "utf-8";

/* =========================
   TG Projects - Shared reset
   ========================= */
.tgg-wrap, .tgps-wrap { box-sizing: border-box; }
.tgg-wrap *, .tgps-wrap * { box-sizing: border-box; }

/* ==========================================================
   FILTERABLE TAG GALLERY (tgg-*)
   ========================================================== */
.tgg-wrap{ padding: 28px 18px; }
.tgg-gallery{ margin-inline:auto; }

.tgg-header{ display:grid; gap:12px; margin-bottom:16px; }
.tgg-heading{ margin:0; font-size:22px; letter-spacing:.2px; }

.tgg-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.tgg-filter{
  /*border:1px solid rgba(0,0,0,.12);*/
	border:none;
border-radius:10px;
  padding:10px 20px;
  cursor:pointer;
  font:inherit;
  line-height:1;
  transition: transform .18s ease, background .18s ease/*, border-color .18s ease*/;
  color:#fff;
  background:#4ca690;
}
.tgg-filter:hover{ /*transform: translateY(-1px);*/ background:#86cbe1; color:#002f6a;}
.tgg-filter.is-active{
  background:#111;
  color:#fff;
  /*border-color:#111;*/
}

.tgg-gallery.is-filtering .tgg-item{ pointer-events:none; --tgg-lift:0px; }
.tgg-gallery.is-filtering .tgg-item.is-locked{ pointer-events:auto; }

.tgg-grid{
  --tgg-gap: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tgg-gap);
  align-content:start;
}
@media (max-width: 760px){
  .tgg-grid{ grid-template-columns: 1fr; }
}

.tgg-item{
  --tgg-overlay: rgba(39,93,151,.80);
  --tgg-text: #fff;
  --tgg-border-inset: 14px;
  --tgg-fade: 300ms;

  position:relative;
  display:block;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  isolation:isolate;
  cursor:pointer;

  --tgg-lift:0px;
  --tgg-scale:1;

  transform: translateY(var(--tgg-lift)) scale(var(--tgg-scale));
  opacity:1;
  transition: opacity var(--tgg-fade) ease, transform var(--tgg-fade) ease;
  will-change: transform, opacity;
}
.tgg-item:hover{ --tgg-lift:-2px; }

.tgg-media{ aspect-ratio: 4 / 3; width:100%; }
.tgg-media img, .tgg-placeholder{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.tgg-placeholder{ background:#eee; }

.tgg-overlay{
  position:absolute; inset:0;
  background: var(--tgg-overlay);
  opacity:0;
  transition: opacity .28s ease;
  z-index:1;
}

.tgg-border{
  display:none; /* Hide border on hover - remove this to show border effect on hover */	
  position:absolute;
  inset: var(--tgg-border-inset);
  opacity:0;
  z-index:2;
  pointer-events:none;
  transition: opacity .18s ease;
}
.tgg-border::before,
.tgg-border::after{
  content:"";
  position:absolute; inset:0;
}
.tgg-border::before{
  background:
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) left top / 0% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) left top / 2px 0% no-repeat;
  transition: background-size .34s ease;
}
.tgg-border::after{
  background:
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) right bottom / 0% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) right bottom / 2px 0% no-repeat;
  transition: background-size .34s ease;
}

.tgg-text{
  position:absolute; inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  text-align:center;
  padding:32px;
  color: var(--tgg-text);
  pointer-events:none;
}
.tgg-title{
  font-size:26px;
  line-height:1.2em;
  text-transform:none;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
  max-width:42ch;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  transition: transform .28s ease;
}
.tgg-desc{
  position:absolute;
  left:32px; right:32px;
  top: calc(50% + 18px);
  transform: translateY(10px);
  opacity:0;
  font-size:18px; /* Was 14px for teh descriptions - switched to 18px for the View Project link instead */
  line-height:1.35;
  max-width:52ch;
  margin-inline:auto;
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow:hidden;
  transition: opacity .28s ease, transform .28s ease;
}

.tgg-item:hover .tgg-media img{ transform: scale(1.08); }
.tgg-item:hover .tgg-overlay{ opacity:1; }
.tgg-item:hover .tgg-border{ opacity:1; }
.tgg-item:hover .tgg-border::before{ background-size:100% 2px, 2px 100%; }
.tgg-item:hover .tgg-border::after{ background-size:100% 2px, 2px 100%; }
.tgg-item:hover .tgg-title{ transform: translateY(-14px); }
.tgg-item:hover .tgg-desc{ opacity:1; transform: translateY(0); }

.tgg-item.is-hiding{ opacity:0; --tgg-scale:.985; pointer-events:none; }
.tgg-item.is-prep-show{ opacity:0; --tgg-scale:.985; pointer-events:none; }
.tgg-item[hidden]{ display:none !important; }
.tgg-empty{ margin:18px 0 0; opacity:.7; }
.tgg-lock-placeholder{ display:block; }

@media (prefers-reduced-motion: reduce){
  .tgg-filter,
  .tgg-item,
  .tgg-media img,
  .tgg-overlay,
  .tgg-border,
  .tgg-border::before,
  .tgg-border::after,
  .tgg-title,
  .tgg-desc{
    transition:none !important;
  }
}

/* ==========================================================
   EDGE-TO-EDGE SLIDER (tgps-*)
   Production: centered zoom + border matches gallery + Swiper overflow fix
   ========================================================== */

.tgps-wrap{
  --tgps-pad: 18px;
  --tgps-gap: 22px;
  --tgps-minh: 440px;

  width:100%;
  padding:0;
  margin:0;
}

.tgps{
  --tgps-ease: cubic-bezier(.2,.8,.2,1);
  --tgps-ease-soft: cubic-bezier(.22,.61,.36,1);
  --tgps-dur: 520ms;
  --tgps-dur-fast: 260ms;

  --tgps-overlay: rgba(39,93,151,.8);
  --tgps-inset: 14px;
}

.tgps__header{ display:none; }
.tgps__swiper .swiper-wrapper{ align-items:stretch; }
.tgps__swiper .swiper-slide{ height:auto; }

@media (min-width: 1024px){
  .tgps__swiper .swiper-slide{
    width: clamp(340px, 26vw, 520px);
  }
}

/* Card */
.tgps-card{
  position:relative;
  display:block;
  text-decoration:none;
  border:0;
  border-radius:0;
  background:#0f1216;
  overflow:hidden;
  isolation:isolate;

  transform: translate3d(0,0,0);
  transition:
    transform var(--tgps-dur) var(--tgps-ease),
    box-shadow var(--tgps-dur) var(--tgps-ease);
}

@media (hover:hover){
  .tgps-card:hover{
    transform: translate3d(0,-8px,0);
    box-shadow: 0 18px 34px rgba(0,0,0,.22);
  }
}

/* Media (clip mask) */
.tgps-card__media{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 2;
  overflow:hidden;
  background:#0f1216;
  line-height:0;
}

.tgps-card__zoom{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  transform: scale(1.035);
  will-change: transform;
  transition: transform calc(var(--tgps-dur) + 140ms) var(--tgps-ease);
}

.tgps-card__zoom > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  transform:none !important;
  translate:none !important;
  margin:0 !important;
  filter: saturate(1.03) contrast(1.02);
  transition: filter calc(var(--tgps-dur) + 140ms) var(--tgps-ease);
}

@media (hover:hover){
  .tgps-card:hover .tgps-card__zoom{ transform: scale(1.065); }
  .tgps-card:hover .tgps-card__zoom > img{
    filter: brightness(.92) contrast(1.05) saturate(1.06);
  }
}

.tgps-card__scrim{
  position:absolute;
  inset:0;
  z-index:2;
  background: var(--tgps-overlay);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--tgps-dur-fast) var(--tgps-ease-soft);
}
@media (hover:hover){
  .tgps-card:hover .tgps-card__scrim{ opacity:1; }
}

/* Border (gallery style) */
.tgps-card__media::after{
  display:none; /* Hide border on hover - remove this to show border effect on hover */
  content:"";
  position:absolute;
  inset: var(--tgps-inset);
  z-index:3;
  pointer-events:none;
  opacity:0;

  background:
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) left top / 0% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) left top / 2px 0% no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) right bottom / 0% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) right bottom / 2px 0% no-repeat;

  transition:
    opacity var(--tgps-dur-fast) var(--tgps-ease-soft),
    background-size var(--tgps-dur-fast) var(--tgps-ease-soft);

  mix-blend-mode: normal;
  filter:none;
}

@media (hover:hover){
  .tgps-card:hover .tgps-card__media::after{
    opacity:1;
    background-size:
      100% 2px, 2px 100%,
      100% 2px, 2px 100%;
  }
}

/* Content */
.tgps-card__content{
  position:absolute;
  inset: var(--tgps-inset);
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px;
}

.tgps-card__panel{ position:relative; }

.tgps-card__pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.tgps-card__pill{
 display:none;  /* Hide tag categories on hover */
  /*display:inline-flex;*/
  align-items:center;
  gap:8px;
  font-size:.78rem;
  line-height:1;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.tgps-card__pill::before{
  content:"";
  width:7px; height:7px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  opacity:.9;
}

.tgps-card__h{
  margin:0;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  font-weight:700;
  color:#fff;
  max-width: 32ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition: transform var(--tgps-dur-fast) var(--tgps-ease-soft);
}

.tgps-card__cta{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:650;
  font-size:.98rem;
  color:#fff;
  width: fit-content;
  opacity:0;
  transform: translateY(10px);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition:
    opacity var(--tgps-dur-fast) var(--tgps-ease-soft),
    transform var(--tgps-dur-fast) var(--tgps-ease-soft),
    color var(--tgps-dur-fast) var(--tgps-ease-soft);
  transition-delay: 70ms;
}
.tgps-card__chev{
  display:inline-block;
  transition: transform var(--tgps-dur-fast) var(--tgps-ease-soft);
}

@media (hover:hover){
  .tgps-card:hover .tgps-card__h{ transform: translateY(-4px); }
  .tgps-card:hover .tgps-card__cta{ opacity:1; transform: translateY(0); }
  .tgps-card:hover .tgps-card__cta:hover{ color:#dff2f8; }
  .tgps-card:hover .tgps-card__cta:hover .tgps-card__chev{ transform: translateX(3px); }
}

/* Controls */
.tgps__controls{
  /*Hide controls for now*/
  display:none; /*display:grid;*/
  grid-template-columns: 50px 1fr 50px;
  align-items:center;
  gap:14px;
  padding: 0 var(--tgps-pad);
  margin-top:14px;
}
.tgps__controls .swiper-pagination{ display:none !important; }

.tgps__btn{
  width:50px; height:50px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0);
  background: rgba(255,255,255,0);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.tgps__btn svg{ width:18px; height:18px; color: rgba(255,255,255,0); }

@media (max-width:639px){
  .tgps__controls{ padding:0 14px; }
  .tgps-card__content{ padding:24px; }
}

@media (prefers-reduced-motion: reduce){
  .tgps-card,
  .tgps-card__zoom,
  .tgps-card__zoom > img,
  .tgps-card__scrim,
  .tgps-card__media::after,
  .tgps-card__h,
  .tgps-card__cta,
  .tgps-card__chev{
    transition:none !important;
  }
}

/* ==========================================================
   CRITICAL FIX: Swiper overflow must be visible so the hover
   border + lift don't get clipped.
   ========================================================== */
.tgps__swiper,
.tgps__swiper .swiper-wrapper,
.tgps__swiper .swiper-slide{
  overflow: visible !important;
}
/* Only disable clicks on the link while dragging — do NOT block the swiper */
.tgps-wrap.is-dragging .tgps-card{
  cursor: grabbing;
}
.tgps-wrap.is-dragging .tgps-card *{
  pointer-events: none;
}

/* =========================================
   TG Project Nav – Avada-proof left/right
   REPLACE all tg-project-nav CSS with this
   ========================================= */

/* Apply layout to nav itself (covers cases where __inner is missing) */
.tg-project-nav{
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between ;
  align-items: center;
  gap: 20px;
}

/* If __inner exists, it also becomes the flex row (safe either way) */
.tg-project-nav__inner{
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Make links behave as flex items */
.tg-project-nav__prev,
.tg-project-nav__next{
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

/* Hard push to edges even if Avada injects wrappers */
.tg-project-nav__prev{ margin-right: auto; }
.tg-project-nav__next{ margin-left: auto; }

/* Kill common Avada “content formatting” that can interfere */
.tg-project-nav p,
.tg-project-nav span{
  margin: 0;
  padding: 0;
}

/* Hover polish */
.tg-project-nav__prev:hover,
.tg-project-nav__next:hover{
  opacity: 0.7;
}

/* Mobile stack */
@media (max-width: 768px){
  .tg-project-nav,
  .tg-project-nav__inner{
    flex-direction: column;
    align-items: stretch;
  }
  .tg-project-nav__prev,
  .tg-project-nav__next{
    margin: 0;
    justify-content: flex-start;
  }
}

/* ==========================================================
   MOBILE: show hover visuals by default (reliable)
   Works even if device reports hover:hover
   ========================================================== */
@media (max-width: 900px){

  /* ---------- SLIDER (tgps) ---------- */

  /* show blue overlay */
  .tgps .tgps-card__scrim{
    opacity: 1 !important;
  }

  /* show border (your “final fixed” border is typically on the media pseudo) */
  .tgps .tgps-card__media::after{
    opacity: 1 !important;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100% !important;
  }

  /* show CTA */
  .tgps .tgps-card__cta{
    opacity: 1 !important;
    transform: none !important;
  }

  /* optional: keep title slightly lifted like hover */
  .tgps .tgps-card__h{
    transform: translateY(-4px) !important;
  }


  /* ---------- GALLERY (tgg) ---------- */

  .tgg-item .tgg-overlay{
    opacity: 1 !important;
  }

  .tgg-item .tgg-border{
    opacity: 1 !important;
  }

  .tgg-item .tgg-border::before,
  .tgg-item .tgg-border::after{
    background-size: 100% 2px, 2px 100% !important;
  }

  /* if you want the “View project” line visible by default */
  .tgg-item .tgg-desc{
    opacity: 1 !important;
    transform: none !important;
  }

  /* optional: match desktop hover positioning */
  .tgg-item .tgg-title{
    transform: translateY(-14px) !important;
  }
}
/*
@media (max-width: 900px){
  body::before{
    content:"MOBILE CSS ACTIVE";
    position: fixed;
    top: 0; left: 0;
    z-index: 999999;
    background: #000;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
  }
}
*/