/* ============================================================
   ai-development.css — AI Hub Page Specific Styles
   iCoderz Solutions 2026
   Covers: tech accordion, FAQ details, blog cards,
           vertical cards with hover image, responsive overrides.
   ============================================================ */

/* ── Tech Item — <details>/<summary> accordion ── */
.tech-item {
  border-bottom: 1.5px solid var(--clr-border);
}
.tech-item[open] .tech-item__arrow {
  transform: rotate(180deg);
}
.tech-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text-2);
  transition: color var(--t-fast);
}
.tech-item__summary::-webkit-details-marker { display: none; }
.tech-item__summary:hover { color: var(--clr-blue); }
.tech-item[open] .tech-item__summary { color: var(--clr-blue); }
.tech-item__title { flex: 1; }
.tech-item__arrow {
  flex-shrink: 0;
  transition: transform var(--t-base);
  color: var(--clr-text-muted);
}
.tech-item__body {
  padding: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--clr-text-3);
  line-height: var(--lh-relaxed);
}

/* ── FAQ Item — <details>/<summary> variant ── */
.faq-item {
  border-bottom: 1.5px solid var(--clr-border);
}
.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
}
.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  transition: color var(--t-fast);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover { color: var(--clr-blue); }
.faq-item[open] .faq-item__summary { color: var(--clr-blue); }
.faq-item__icon {
  flex-shrink: 0;
  transition: transform var(--t-base);
  color: var(--clr-text-muted);
}
.faq-item__body {
  padding: 0 var(--sp-8) var(--sp-5) 0;
  font-size: var(--fs-base);
  color: var(--clr-text-3);
  line-height: var(--lh-relaxed);
}

/* ── Blog Cards ── */
.blog-card {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ── Vertical card — image hover scale ── */
.vertical-card .vertical-card__img-box {
  overflow: hidden;
}
.vertical-card:hover .vertical-card__img-box img {
  transform: scale(1.04);
  transition: transform 0.4s var(--ease-out);
}

/* ── Responsive overrides ── */
@media (max-width: 767px) {
  .tech-accordion-col:last-child {
    display: block;
  }
}
@media (max-width: 991px) {
  #contact > .container > div {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 767px) {
  .section [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}