/* 
==============================================================
|   Tred-Mark Communications | Developed by Javorsky Studio  |
|  Viewing File: ~/public-site/assets/css/pages/partners.css |
| --- Styling/CSS for `~/public-site/partners/index.html --- |
==============================================================
*/

.page-partners{
  min-height:100vh;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(5,8,14,.9), rgba(7,10,18,.96)),
    radial-gradient(circle at top left, rgba(76,183,255,.16), transparent 38%),
    radial-gradient(circle at top right, rgba(47,227,194,.10), transparent 42%),
    url("/assets/media/partners/page-bg.webp") center/cover fixed no-repeat;
}

.partners-hero{
  padding:clamp(7rem, 12vw, 11rem) var(--space-5) clamp(4rem, 8vw, 7rem);
}

.partners-hero-inner{
  max-width:980px;
}

.eyebrow{
  margin:0 0 .9rem;
  color:rgba(125,227,255,.88);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.partners-hero h1{
  margin:0;
  max-width:980px;
  font-size:clamp(2.7rem, 7vw, 6.6rem);
  line-height:.9;
  letter-spacing:-.07em;
  text-transform:uppercase;
}

.partners-hero h1 span{
  display:block;
  background:linear-gradient(135deg, #7de3ff, #4cb7ff 38%, #2fe3c2 72%, #8a5cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.partners-hero-copy{
  max-width:720px;
  margin:1.4rem 0 0;
  color:rgba(232,241,255,.78);
  font-size:clamp(1rem, 1.6vw, 1.18rem);
  line-height:1.7;
}

.partners-section{
  padding:clamp(3.5rem, 7vw, 6rem) var(--space-5);
}

.partners-section-alt{
  background:rgba(255,255,255,.025);
  border-block:1px solid rgba(255,255,255,.08);
}

.section-head{
  max-width:760px;
  margin-bottom:2rem;
}

.section-head h2,
.partners-split h2,
.partners-cta-card h2{
  margin:0;
  font-size:clamp(2rem, 4.5vw, 4rem);
  line-height:.95;
  letter-spacing:-.045em;
}

.section-head p,
.partners-split p,
.partners-cta-card p{
  color:rgba(232,241,255,.72);
  line-height:1.7;
}

.mfg-logo-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.mfg-card{
  min-height:140px;
  display:grid;
  place-items:center;
  padding:1.25rem;
  border-radius:22px;
  position:relative;

  background:
    radial-gradient(
      circle,
      rgba(76,183,255,.10) 0%,
      rgba(76,183,255,.04) 40%,
      transparent 75%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter:blur(14px);

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.mfg-card:hover{
  transform:translateY(-4px);
  border-color:rgba(125,227,255,.36);
  background:
    linear-gradient(135deg, rgba(76,183,255,.14), rgba(47,227,194,.07));
}

.mfg-logo{
  max-width:180px;
  max-height:70px;

  object-fit:contain;

  opacity:.9;

  transition:
    transform .18s ease,
    opacity .18s ease,
    filter .18s ease;
}

.mfg-card:hover .mfg-logo{
  transform:scale(1.05);
  opacity:1;
}

.partners-split{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
}

.vendor-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.vendor-card{
  min-height:140px;
  display:grid;
  place-items:center;
  padding:1.25rem;
  border-radius:22px;
  position:relative;

  background:
    radial-gradient(
      ellipse,
      rgba(76,183,255,.10) 0%,
      rgba(76,183,255,.04) 40%,
      transparent 75%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );

  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16);

  backdrop-filter:blur(14px);

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.vendor-card:hover{
  transform:translateY(-4px);
  border-color:rgba(125,227,255,.36);
  background:
    linear-gradient(135deg, rgba(76,183,255,.14), rgba(47,227,194,.07));
}

.vendor-logo{
  max-width:180px;
  max-height:70px;

  object-fit:contain;

  opacity:.9;

  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.089));

  transition:
    transform .18s ease,
    opacity .18s ease,
    filter .18s ease;
}

.vendor-card:hover .vendor-logo{
  transform:scale(1.05);
  opacity:1;

  filter:
    drop-shadow(0 0 12px rgba(125,227,255,.25));
}

.industry-grid article{
  padding:1.2rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.86);
  font-weight:800;
  text-align:center;
}

.training-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.training-grid article{
  padding:1.35rem;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(7,10,18,.58);
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}

.training-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(125,227,255,.24), rgba(47,227,194,.13));
  color:#7de3ff;
  font-weight:900;
}

.training-grid h3{
  margin:0 0 .5rem;
  font-size:1.15rem;
}

.training-grid p{
  margin:0;
  color:rgba(232,241,255,.68);
  line-height:1.65;
}

.industry-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.partners-cta{
  padding:clamp(3.5rem, 7vw, 6rem) var(--space-5) clamp(5rem, 9vw, 8rem);
}

.partners-cta-card{
  padding:clamp(2rem, 5vw, 4rem);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at top left, rgba(76,183,255,.18), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow:0 24px 80px rgba(0,0,0,.34);
  text-align:center;
}

.partners-cta-card p{
  max-width:720px;
  margin:1rem auto 0;
}

.partners-cta-actions{
  display:flex;
  justify-content:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
}

@media (max-width:900px){
  .mfg-logo-grid,
  .industry-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .partners-split,
  .training-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .mfg-logo-grid,
  .vendor-grid,
  .industry-grid{
    grid-template-columns:1fr;
  }

  .partners-hero h1{
    font-size:clamp(2.35rem, 16vw, 4rem);
  }
}