/*
=============================================================
TRILOGIX INSTITUTE WEBSITE
File: products.css
Purpose: Products page styling.
Maintenance note: Related rules and logic are grouped and documented by feature.
=============================================================
*/

/*
STYLE ORGANIZATION
- Base/component rules define the default desktop presentation.
- State classes such as .active, .show, and :hover control interactions.
- Media queries near the relevant rules adapt the layout for tablet and mobile screens.
*/

/* Products page integrated with the established Trilogix design system */
.products-hero .about-hero-overlay{
  background:linear-gradient(90deg,rgba(3,24,67,.96) 0%,rgba(7,52,129,.84) 49%,rgba(2,29,78,.36) 100%);
}
.product-intro{padding-bottom:5.5rem}
.product-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
  align-items:end;
}
.product-heading .section-subtitle{max-width:760px}
.product-count{
  border:1px solid #d8e5f5;
  border-radius:999px;
  background:#f4f8ff;
  padding:.55rem .9rem;
  color:#0754c5;
  font-size:.76rem;
  font-weight:800;
  white-space:nowrap;
}
.product-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:2rem;
  border-bottom:1px solid #dce6f2;
  padding-bottom:1rem;
}
.product-filter-btn{
  border:1px solid #d8e3f1;
  border-radius:999px;
  background:#fff;
  padding:.62rem .9rem;
  color:#56647b;
  font-size:.72rem;
  font-weight:800;
  transition:.22s ease;
}
.product-filter-btn:hover{
  border-color:#98bce8;
  color:#0754c5;
}
.product-filter-btn.active{
  border-color:transparent;
  background:linear-gradient(135deg,#082e84,#0754c5);
  color:#fff;
  box-shadow:0 10px 22px rgba(7,84,197,.18);
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  margin-top:2rem;
}
.product-card{
  display:flex;
  min-height:100%;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #dbe5f2;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 34px rgba(8,47,112,.07);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.product-card[hidden]{display:none!important}
.product-card:hover{
  transform:translateY(-6px);
  border-color:#9fc4ef;
  box-shadow:0 26px 54px rgba(7,84,197,.16);
}
.product-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#eaf0f7;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease;
}
.product-card:hover .product-media img{transform:scale(1.055)}
.product-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(4,31,82,.48),transparent 58%);
}
.product-category{
  position:absolute;
  z-index:2;
  left:.85rem;
  top:.85rem;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  padding:.36rem .65rem;
  color:#0754c5;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.product-number{
  position:absolute;
  z-index:2;
  right:.9rem;
  top:.9rem;
  color:rgba(255,255,255,.82);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
}
.product-content{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:1.35rem;
}
.product-icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  margin-top:-2.5rem;
  position:relative;
  z-index:3;
  border:4px solid #fff;
  border-radius:12px;
  background:#eaf3ff;
  color:#0754c5;
  box-sizing:content-box;
}
.product-content h3{
  margin:1rem 0 .5rem;
  color:#172641;
  font-size:1rem;
  font-weight:800;
  line-height:1.4;
}
.product-content>p{
  margin:0;
  color:#6b7890;
  font-size:.8rem;
  line-height:1.65;
}
.product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:1rem;
}
.product-meta span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  background:#f1f6fc;
  padding:.28rem .55rem;
  color:#5f6e84;
  font-size:.64rem;
  font-weight:700;
}
.product-actions{
  display:flex;
  gap:.55rem;
  margin-top:auto;
  padding-top:1.2rem;
}
.product-quote-btn{
  display:inline-flex;
  flex:1;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:10px;
  background:#0754c5;
  color:#fff;
  font-size:.74rem;
  font-weight:800;
  box-shadow:0 9px 20px rgba(7,84,197,.18);
  transition:.22s ease;
}
.product-quote-btn:hover{
  transform:translateY(-2px);
  background:#0649ad;
  color:#fff;
}
.product-wa-btn{
  display:grid;
  width:42px;
  height:40px;
  place-items:center;
  border:1px solid #d6e1ee;
  border-radius:10px;
  background:#fff;
  color:#0754c5;
  transition:.22s ease;
}
.product-wa-btn:hover{
  border-color:#8db5e5;
  background:#eff6ff;
  color:#0754c5;
}
.product-support-section{background:#f7faff}
.product-support{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:3rem;
  align-items:start;
}
.product-support>div:first-child p{
  margin:1rem 0 0;
  color:#68768c;
  line-height:1.75;
}
.product-support-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.product-support-list>div{
  display:flex;
  gap:.8rem;
  border:1px solid #dce6f2;
  border-radius:15px;
  background:#fff;
  padding:1rem;
  box-shadow:0 8px 24px rgba(8,47,112,.05);
}
.product-support-list i{
  color:#0754c5;
  font-size:1.05rem;
}
.product-support-list span{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.product-support-list strong{
  color:#172641;
  font-size:.76rem;
}
.product-support-list small{
  color:#6b7890;
  font-size:.68rem;
  line-height:1.5;
}
.products-cta-section{padding-top:1rem}
.products-final-cta{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) auto;
  gap:2rem;
  align-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,#082e84 0%,#0754c5 65%,#0b69d1 100%);
  padding:3.25rem;
  color:#fff;
  box-shadow:0 24px 56px rgba(7,57,143,.22);
}
.products-final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:radial-gradient(circle at 20% 20%,white 1px,transparent 1px);
  background-size:30px 30px;
}
.products-final-cta>*{position:relative;z-index:1}
.products-final-cta h2{
  margin:.45rem 0 0;
  color:#fff;
  font-size:clamp(1.9rem,3vw,2.55rem);
  font-weight:800;
  line-height:1.15;
}
.products-final-cta p{
  max-width:760px;
  margin:.9rem 0 0;
  color:rgba(255,255,255,.78);
  line-height:1.7;
}
.products-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:flex-end;
}
.products-final-cta .btn-primary-premium{
  background:#fff;
  color:#0754c5;
}
.products-final-cta .btn-outline-premium{
  border-color:rgba(255,255,255,.75);
  color:#fff;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1199.98px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-support{grid-template-columns:1fr}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .products-final-cta{grid-template-columns:1fr}
  .products-cta-actions{justify-content:flex-start}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .product-heading{grid-template-columns:1fr}
  .product-count{justify-self:start}
  .product-grid{grid-template-columns:1fr}
  .product-support-list{grid-template-columns:1fr}
  .products-final-cta{padding:2rem}
  .products-cta-actions{flex-direction:column}
  .products-cta-actions a{width:100%}
}
/* Products hero — exact Services spacing, Products visuals only */
.products-hero .about-hero-overlay{
  background:linear-gradient(90deg,rgba(3,24,67,.96) 0%,rgba(7,52,129,.84) 49%,rgba(2,29,78,.36) 100%);
}
.products-hero .hero-badge i{
  font-size:.9rem;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .products-hero .about-hero-content h1 br{
    display:none;
  }
}
.catalog-toolbar{display:grid;gap:1.25rem;margin-top:2rem}
.product-search{position:relative;display:flex;align-items:center;max-width:520px}
.product-search i{position:absolute;left:1rem;color:#7a8799}
.product-search input{width:100%;min-height:48px;border:1px solid #d8e3f1;border-radius:14px;background:#fff;padding:.8rem 1rem .8rem 2.8rem;color:#172641;font-size:.82rem;outline:none;box-shadow:0 8px 22px rgba(8,47,112,.05)}
.product-search input:focus{border-color:#8db7e8;box-shadow:0 0 0 4px rgba(7,84,197,.08)}
.product-category-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.product-category-card{display:flex;align-items:center;gap:.75rem;min-height:84px;border:1px solid #dbe6f3;border-radius:16px;background:#fff;padding:.9rem;text-align:left;box-shadow:0 8px 22px rgba(8,47,112,.05);transition:.22s ease}
.product-category-card>span:first-child{display:grid;width:40px;height:40px;place-items:center;border-radius:11px;background:#eaf3ff;color:#0754c5}
.product-category-card>span:last-child{display:flex;flex-direction:column;gap:.2rem}
.product-category-card strong{color:#172641;font-size:.74rem}
.product-category-card small{color:#8390a3;font-size:.62rem}
.product-category-card:hover{transform:translateY(-3px);border-color:#9ec1ea}
.product-category-card.active{border-color:transparent;background:linear-gradient(135deg,#082e84,#0754c5 68%,#0b6ed7);color:#fff;box-shadow:0 18px 38px rgba(7,84,197,.20)}
.product-category-card.active>span:first-child{background:rgba(255,255,255,.16);color:#fff}
.product-category-card.active strong,.product-category-card.active small{color:#fff}
.product-grid-ecommerce{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-grid-ecommerce .product-content h3{font-size:.92rem}
.product-grid-ecommerce .product-content>p{font-size:.74rem}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1399.98px){.product-category-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1199.98px){.product-grid-ecommerce{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){.product-grid-ecommerce{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){.product-category-cards{grid-template-columns:repeat(2,minmax(0,1fr));}.product-search{max-width:none}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){.product-grid-ecommerce{grid-template-columns:1fr}.product-category-cards{grid-template-columns:1fr}}