/* =========================================================
   project-article.css
   Styles for the project article content blocks.
   Designed to be pasted into the OpenCart admin HTML editor
   alongside project-article.html.
   Bootstrap 3 base, container max-width: 1400px.
   All colors use CSS variables from sn.css.
   ========================================================= */

/* ---- Block spacing ---- */
.pa-section {
  padding: 48px 0;
  /*border-bottom: 1px solid var(--lightblue);*/
}
.pa-section:last-child {
  border-bottom: none;
}

/* ---- Block 1: Stats bar ---- */
.pa-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0;
  padding: 32px 0;
  /*border-top: 1px solid var(--lightblue);
  border-bottom: 1px solid var(--lightblue);*/
}
.pa-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  gap: 12px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
  padding: 0 32px 0 0;
}
.pa-stat:first-child {
  padding-left: 0;
}
.pa-stat + .pa-stat {
  padding-left: 32px;
  border-left: 1px solid var(--lightblue);
}
.pa-stat-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.pa-stat-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--blue);
}
.pa-stat-label {
  font-family: var(--inter);
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
  line-height: 1;
}
.pa-stat-value {
  font-family: var(--inter);
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
}

/* ---- Block 2: Task + Solution ---- */
.pa-two-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 48px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.pa-two-col-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 340px;
  flex: 1 1 340px;
}
.pa-block-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.pa-block-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.pa-block-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--blue);
}
.pa-block-title {
  font-family: var(--rubik);
  font-size: 22px;
  font-weight: 500;
  color: var(--black);
  margin: 0;
}
.pa-block-text {
  font-family: var(--inter);
  font-size: 16px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* ---- Block 3: Equipment list ---- */
.pa-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pa-checklist li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--inter);
  font-size: 16px;
  color: var(--black);
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid var(--lightgray);
}
.pa-checklist li:last-child {
  border-bottom: none;
}
.pa-checklist li svg {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--blue);
  width: 20px;
  height: 20px;
}

/* ---- Block 4: Product cards ---- */
.pa-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}
.pa-product-card {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
  max-width: calc(25% - 15px);
  border: 1.5px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: border-color .2s, -webkit-box-shadow .2s;
  transition: border-color .2s, box-shadow .2s;
}
.pa-product-card:hover {
  border-color: var(--blue);
  -webkit-box-shadow: 0 6px 24px rgba(0,131,254,.1);
  box-shadow: 0 6px 24px rgba(0,131,254,.1);
}
.pa-product-card img {
  padding: 12px 24px;
}
.pa-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  background: var(--lightgray);
}
.pa-product-body {
  padding: 16px 18px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.pa-product-desc {
  font-family: var(--inter);
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
  line-height: 1.4;
}
.pa-product-name {
  font-family: var(--inter);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 auto;
  line-height: 1.35;
}
.pa-product-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  -webkit-transition: gap .2s, color .2s;
  transition: gap .2s, color .2s;
}
.pa-product-link:hover {
  color: var(--orange);
  gap: 8px;
  text-decoration: none;
}
.pa-product-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .pa-stat + .pa-stat {
    border-left: none;
    padding-left: 0;
  }
  .pa-stat {
    -ms-flex: 1 1 140px;
    flex: 1 1 140px;
    padding-right: 16px;
  }
  .pa-product-card {
    max-width: calc(50% - 10px);
    -ms-flex: 1 1 calc(50% - 10px);
    flex: 1 1 calc(50% - 10px);
  }
}
@media (max-width: 767px) {
  .pa-two-col {
    gap: 36px;
  }
  .pa-stats {
    gap: 20px;
  }
  .pa-stat {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    padding: 0;
    border-left: none !important;
  }
  .pa-product-card {
    max-width: 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}


/*** Related projects cards ***/

.pc-card-col { display: flex; margin-bottom: 24px; padding-left: 12px; padding-right: 12px; }
.pc-related-grid { margin-left: -12px; margin-right: -12px; }
.pc-card {
  background: #fff; border: 1.5px solid #D9D9D9; border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; width: 100%;
  transition: border-color .25s, box-shadow .25s;
}
.pc-card:hover { border-color: #0083FE; box-shadow: 0 6px 28px rgba(0,131,254,.1); }
.pc-card-img-wrap {
  position: relative; overflow: hidden; aspect-ratio: 16/10;
  border-radius: 12px 12px 0 0;
}
.pc-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.pc-card:hover .pc-card-img { transform: scale(1.04); }
.pc-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pc-card-title { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 500; color: #272727; margin: 0 0 16px; line-height: 1.3; }
.pc-card-title a { color: inherit; text-decoration: none; transition: color .2s; }
.pc-card-title a:hover { color: #0083FE; }
.pc-card-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: auto;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  color: var(--blue)!important; text-decoration: none; transition: gap .2s, color .2s;
}
.pc-card-link:hover { color: var(--orange)!important; gap: 9px; text-decoration: none; }
@media (max-width: 767px) { .pc-card-col { display: block; } }

/*** / Related projects cards ***/