/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* =========================
   LAYOUT BASE
========================= */
.tn-container{max-width:1240px;margin:0 auto;padding:0 24px;}
.tn-center{text-align:center;}

.tn-hero{padding:84px 0;background:rgba(67,173,139,.05);}
.tn-pill{display:inline-flex;gap:10px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(67,173,139,.10);color:#43ad8b;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;}
.tn-h1{font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-.03em;margin:0 0 14px;}
.tn-lead{max-width:720px;margin:0 auto 26px;color:rgba(15,23,42,.65);font-size:18px;line-height:1.6;}
.tn-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:16px;font-weight:900;text-decoration:none}
.tn-btn--primary{background:#43ad8b;color:#fff;box-shadow:0 18px 45px rgba(67,173,139,.18);}

/* =========================
   FILTERS
========================= */
.tn-filters{
  position:sticky;
  top:64px;
  z-index:40;
  background:rgba(246,248,247,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(148,163,184,.35);
  padding:14px 0;
}

.tn-filters__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  overflow:visible; /* permite desplegables */
}

.tn-filters__group,
.tn-filters__list{
  display:flex;
  gap:18px;
  flex-wrap:nowrap;
  overflow-x:auto;           /* scroll horizontal solo aquí */
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}

.tn-chip{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  color:#0f172a;
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease, background-color .2s ease, color .2s ease;
}
.tn-chip:hover{border-color:#43ad8b;transform:translateY(-1px)}
.tn-chip.is-active{background:#43ad8b;color:#fff;border-color:#43ad8b;transform:none}

.tn-filters__group{
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  overflow:visible;
  padding-bottom:0;
  column-gap:22px;
  row-gap:12px;
}

.tn-filter-control{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.tn-filter-control--parent{flex:0 1 300px;}
.tn-filter-control--child{flex:0 1 360px;}

.tn-filter-control .tn-dd,
.tn-filter-control .tn-dd__btn{width:100%;}

.tn-filters__sort{
  flex:0 0 280px;
  position:relative;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(15,23,42,.55);
  font-weight:700;
  font-size:13px;
}
.tn-sort__label{white-space:nowrap;}

@media(max-width:980px){
  .tn-filters__inner{
    align-items:stretch;
    flex-direction:column;
  }
  .tn-filters__group{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .tn-filter-control--parent,
  .tn-filter-control--child,
  .tn-filters__sort{
    flex:none;
    width:100%;
  }
  .tn-filters__sort .tn-dd,
  .tn-filters__sort .tn-dd__btn{width:100%;}
}

@media(max-width:640px){
  .tn-filters{top:0;}
  .tn-filters__group{grid-template-columns:1fr;}
  .tn-filter-control,
  .tn-filters__sort{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .tn-sort__label{font-size:12px;}
}

/* =========================
   CUSTOM DROPDOWN (SORT)
========================= */
.tn-sort__select--hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.tn-dd{position:relative;display:inline-flex;z-index:70;min-width:0;}
.tn-dd__btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  font-weight:900;
  font-size:13px;
  color:#0f172a;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  min-width:170px;
  max-width:100%;
}
.tn-dd__btn-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tn-dd__btn:hover{border-color:rgba(67,173,139,.55);transform:translateY(-1px)}
.tn-dd__btn:focus{
  outline:none;
  border-color:rgba(67,173,139,.75);
  box-shadow:0 0 0 3px rgba(67,173,139,.15);
}
.tn-dd__chev{
  color:rgba(15,23,42,.45);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform-origin:center;
  transition:transform .2s ease, color .2s ease;
}
.tn-dd.is-open .tn-dd__chev{
  transform:rotate(180deg);
  color:#43ad8b;
}

.tn-dd__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  width:max-content;
  max-width:min(360px, calc(100vw - 48px));
  max-height:360px;
  overflow:auto;
  padding:10px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 22px 55px rgba(15,23,42,.14);
  display:none;
  z-index:80;
}
.tn-dd--filter .tn-dd__menu{
  left:0;
  right:auto;
  width:100%;
  min-width:260px;
}
.tn-dd.is-open .tn-dd__menu{display:block;}

.tn-dd__opt{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  font-weight:900;
  font-size:13px;
  text-align:left;
  color:rgba(15,23,42,.80);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tn-dd__opt:hover{background:rgba(67,173,139,.10);color:#43ad8b;}
.tn-dd__opt.is-active{background:#43ad8b;color:#fff;}
.tn-dd__opt.is-active::after{content:"✓";font-weight:900;}

.tn-dd__opt[hidden],
.tn-dd__group-label[hidden]{display:none !important;}
.tn-dd__opt--child{padding-left:28px;}
.tn-dd__group-label{
  padding:10px 12px 6px;
  color:rgba(15,23,42,.48);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* =========================
   GRID + CARDS
========================= */
.tn-grid{padding:44px 0}

/* Wrapper solo para loader + inner */
.tn-grid__wrap{display:block !important;}
#portfolio-grid-inner{
  display:grid !important;
  grid-template-columns:repeat(12,1fr) !important;
  gap:22px !important;
}

.tn-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.20);
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tn-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 55px rgba(15,23,42,.14);
  border-color:rgba(67,173,139,.35);
}

/* Link base (tall por defecto) */
.tn-card__link{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:260px 1fr !important;
  grid-template-areas:
    "media"
    "body" !important;
  height:100% !important;
  text-decoration:none;
  color:inherit;
}

.tn-card__media{
  position:relative;
  grid-area:media !important;
  height:100% !important;
  background-size:cover;
  background-position:center;
  transition:transform .45s ease;
}
.tn-card:hover .tn-card__media{transform:scale(1.04);}

.tn-card__body{grid-area:body !important;padding:22px;}
.tn-card__chips{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  flex-wrap:nowrap;
  min-width:0;
  overflow:hidden;
}
.tn-chip2{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-width:0;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(67,173,139,.10);
  color:#43ad8b;
  font-weight:900;
  font-size:10px;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tn-card__attribute{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  max-width:calc(100% - 28px);
  padding:7px 11px;
  border-radius:999px;
  background:#ffcf4a;
  color:#17210f;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  font-size:11px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tn-card__attribute.is-completed{
  background:#166b55;
  color:#fff;
}
.tn-card__attribute.is-progress{
  background:#ffcf4a;
  color:#17210f;
}
.tn-card__attribute.is-default{
  background:#3b82f6;
  color:#fff;
}
.tn-card__title{margin:0 0 10px;font-size:22px;font-weight:900}
.tn-card__text{margin:0;color:rgba(15,23,42,.65);line-height:1.6}
.tn-card__cta{margin-top:16px;display:flex;align-items:center;gap:8px;color:#43ad8b;font-weight:900}
.tn-arrow{transition:transform .2s ease}
.tn-card:hover .tn-arrow{transform:translateX(4px)}

.tn-empty{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:150px;
  padding:30px 34px;
  border-radius:18px;
  border:1px solid rgba(67,173,139,.24);
  background:linear-gradient(135deg, rgba(67,173,139,.10), #fff 58%);
  box-shadow:0 14px 38px rgba(67,173,139,.10);
  text-align:center;
}
.tn-empty__title{
  margin:0 0 8px;
  color:#0f172a;
  font-size:22px;
  font-weight:900;
}
.tn-empty__text{
  max-width:460px;
  margin:0;
  color:rgba(15,23,42,.62);
  font-size:15px;
  line-height:1.6;
}

/* Variantes */
.tn-card--tall{grid-column:span 4;}
.tn-card--wide{grid-column:span 8;}
.tn-card--wide > .tn-card__link{
  grid-template-columns:60% 40% !important;
  grid-template-rows:1fr !important;
  grid-template-areas:"media body" !important;
}
.tn-card--wide .tn-card__media{min-height:320px;}
.tn-card--wide .tn-card__body{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

/* Responsive */
@media(max-width:1024px){
  .tn-card--wide{grid-column:span 12;}
  .tn-card--wide > .tn-card__link{grid-template-columns:55% 45% !important;}
  .tn-card--tall{grid-column:span 6;}
}
@media(max-width:640px){
  #portfolio-grid-inner{grid-template-columns:1fr !important;}
  .tn-card--wide,.tn-card--tall{grid-column:auto;}
  .tn-card--wide > .tn-card__link{
    grid-template-columns:1fr !important;
    grid-template-rows:240px 1fr !important;
    grid-template-areas:
      "media"
      "body" !important;
  }
}

/* =========================
   PAGINATION
========================= */
.tn-pagination{
  margin-top:26px;
  display:flex;
  justify-content:center;
}

.tn-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 14px;
  margin:0 6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  font-weight:900;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  color:#0f172a;
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
.tn-pagination .page-numbers:hover{
  border-color:rgba(67,173,139,.55);
  color:#43ad8b;
  transform:translateY(-1px);
}
.tn-pagination .page-numbers.current{
  background:#43ad8b;
  border-color:#43ad8b;
  color:#fff;
}
.tn-pagination .page-numbers.next,
.tn-pagination .page-numbers.prev{padding:0 18px;}
.tn-pagination .page-numbers.dots{
  border-color:transparent;
  background:transparent;
  min-width:auto;
  padding:0 8px;
  color:rgba(15,23,42,.45);
}
.tn-pagination .page-numbers.dots:hover{transform:none;color:rgba(15,23,42,.45);border-color:transparent;}
@media(max-width:520px){
  .tn-pagination .page-numbers{
    min-width:38px;height:38px;padding:0 12px;margin:0 4px;font-size:13px;
  }
  .tn-pagination .page-numbers.next,
  .tn-pagination .page-numbers.prev{padding:0 14px;}
}

/* =========================
   LOADER OVERLAY (SPINNER)
========================= */
.tn-grid__wrap--loading{position:relative;}
.tn-loader{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  background:rgba(246,248,247,.75);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  border-radius:18px;
}
#portfolio-grid.is-loading .tn-loader{opacity:1;pointer-events:all;}
.tn-spinner{
  width:42px;height:42px;border-radius:999px;
  border:4px solid rgba(148,163,184,.35);
  border-top-color:#43ad8b;
  animation:tnspin .8s linear infinite;
}
.tn-loader__txt{font-weight:900;font-size:13px;color:rgba(15,23,42,.65);}
@keyframes tnspin{to{transform:rotate(360deg);}}

/* =========================
   LOADING STATE
========================= */
#portfolio-grid.is-loading{opacity:.55;pointer-events:none;filter:grayscale(.1);}


/* =========================
   SINGLE FILE
========================= */
.tn-single-portfolio .tn-sp-hero{
  padding: 72px 0 26px;
  background: rgba(67,173,139,.05);
}
.tn-sp-title{
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
}
.tn-sp-cover{
  border-radius: 22px;
  overflow: hidden;
  height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 55px rgba(15,23,42,.14);
  border: 1px solid rgba(148,163,184,.20);
}
@media (max-width: 640px){
  .tn-sp-cover{ height: 260px; }
}
.tn-sp-content{ padding: 34px 0 70px; }
.tn-sp-article{ line-height: 1.8; }
.tn-sp-nav{
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.tn-sp-nav a{
  font-weight: 900;
  color: #43ad8b;
  text-decoration: none;
}
.tn-sp-nav a:hover{ text-decoration: underline; }