/* This CSS code is developed for the @KDR Team and Khogendra Rupini. 
It is exclusively owned and maintained by him.
If anyone wishes to use this stylesheet, they must first contact Khogendra Rupini 
through his official website https://khogendrarupini.com 
Or his GitHub profile https://github.com/khogendrarupini/
This code is protected and requires a valid license, 
as it falls under the @KDR License by Khogendra Rupini. */

.tp-section {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 0
}

.tp-header {
  text-align: center;
  margin-bottom: 36px
}

.tp-header-icon {
  margin-bottom: 12px
}

.tp-header-icon svg {
  color: #4ade80
}

.tp-header h1 {
  font-size: 30px;
  font-weight: 700;
  color: #e5e9f0;
  margin-bottom: 10px;
  letter-spacing: -0.3px
}

.tp-header p {
  font-size: 16px;
  color: #9aaebf;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7
}

.tp-count {
  display: inline-block;
  background: #1e3a5f;
  color: #60a5fa;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  margin-top: 12px
}

.tp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.tp-card {
  background: #11161c;
  border: 1px solid #2a343c;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s
}

.tp-card:hover {
  border-color: rgb(48 61 89);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3)
}

.tp-logo-link {
  display: block;
  text-align: center;
  margin-bottom: 20px
}

.tp-logo {
  display: block;
  width: 300px;
  height: auto;
  object-fit: contain;
  background: #1a1f26;
  border-radius: 12px;
  transition: border-color 0.25s
}

.tp-card:hover .tp-logo {
  border-color: #4ade80
}

.tp-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%
}

.tp-badge {
  display: inline-block;
  background: #1e3a5f;
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 12px
}

.tp-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
  text-align: left;
  width: 100%
}

.tp-name a {
  color: #e5e9f0;
  text-decoration: none;
  transition: color 0.2s
}

.tp-name a:hover {
  color: #4ade80
}

.tp-desc {
  font-size: 14px;
  color: #9aaebf;
  line-height: 1.65;
  margin-bottom: 20px;
  text-align: left;
  min-height: 66px;
  width: 100%
}

.tp-desc-full {
  display: none
}

.tp-desc-full.active {
  display: inline
}

.tp-read-more {
  background: none;
  border: none;
  color: #60a5fa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  font-family: Inter, sans-serif;
  margin-left: 4px;
  transition: color 0.2s
}

.tp-read-more:hover {
  color: #93c5fd
}

.tp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6a95ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding-top: 16px;
  border-top: 1px solid #2a343c;
  width: 100%;
  transition: color 0.2s, gap 0.2s
}

.tp-link:hover {
  color: #6a95ff;
  gap: 10px
}

.tp-link svg {
  flex-shrink: 0;
  transition: transform 0.2s
}

.tp-link:hover svg {
  transform: translateX(2px)
}

.tp-empty {
  grid-column: span 2;
  text-align: center;
  padding: 60px 20px;
  background: #11161c;
  border: 1px dashed #3a4852;
  border-radius: 14px
}

.tp-empty svg {
  color: #9aaebf;
  margin-bottom: 16px
}

.tp-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: #e5e9f0;
  margin-bottom: 8px
}

.tp-empty p {
  font-size: 15px;
  color: #9aaebf;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6
}

@media (max-width: 900px) {
  .tp-card {
    padding: 20px
  }

  .tp-logo {
    width: 250px
  }

  .tp-name {
    font-size: 18px
  }
}

@media (max-width: 640px) {
  .tp-grid {
    grid-template-columns: 1fr
  }

  .tp-empty {
    grid-column: span 1
  }

  .tp-header h1 {
    font-size: 24px
  }

  .tp-section {
    padding: 0 0;
    margin: 20px auto
  }

  .tp-logo {
    width: 100%;
    max-width: 300px
  }
}