/* ============================================================
   "I CAN DEVELOP" — static 2-column project grid
============================================================ */

.develop {
  width: 100%;
  padding: 4vh 0 5vh;
  background: transparent;
  border-top: 2px solid rgba(8, 38, 110, 0.32);
}

.develop-title {
  font-weight: 900;
  color: #0a1628;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(16px, 3vh, 40px);
}

.develop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 10px;
}

.develop-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ── Hidden extras ── */
.develop-grid .develop-extra {
  display: none;
}
.develop.expanded .develop-grid .develop-extra {
  display: block;
}

/* ── Toggle button ── */
.develop-toggle {
  display: block;
  margin: 22px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 22, 40, 0.45);
  padding: 8px 0;
  transition: color 0.2s;
}
.develop-toggle:hover { color: rgba(10, 22, 40, 0.85); }

/* show/hide the two label spans */
.dt-less { display: none; }
.develop.expanded .dt-more { display: none; }
.develop.expanded .dt-less { display: inline; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .develop       { padding: 4vh 0 4vh; }
  .develop-title { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }

  .develop-grid {
    gap: 8px;
    padding: 0 8px;
  }
}