/* style.css — top page, cards, layout */
.hero {
  padding: 4rem 0 2rem 0;
}

.hero-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
}

/* Works grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  padding: 2rem 0 4rem 0;
}

/* responsive */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .grid {
    grid-template-columns: 1fr;
    padding: 1.2rem 0;
  }

  .hero {
    padding: 2.2rem 0 1.2rem 0;
  }
}

/* Card */
.skills .card {
  box-shadow: none;
  background: none;
  border: 1px solid #1f4e7a;
}
.skills .card:hover {
  transform: none;
  box-shadow: none;
}

.card {
  background: linear-gradient(180deg, #14273e 0%, #0f2435 100%);
  /* slightly lighter navy */
  border-radius: 14px;
  overflow: hidden;
  transform-origin: center;
  transition: transform .36s cubic-bezier(.2, .9, .2, 1), box-shadow .28s, background .28s;
  will-change: transform;
  opacity: 0;
  transform: translateY(16px) scale(.995);
  box-shadow: 0 10px 30px rgba(3, 8, 18, 0.45);
}

.card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all .6s cubic-bezier(.2, .9, .2, 1);
}

.card-link {
  display: block;
  color: inherit;
}

/* thumbnail */
.thumb {
  position: relative;
  overflow: hidden;
  height: 220px;
  margin: 0;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .9, .2, 1);
  transform-origin: center;
}

.card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 22px 60px rgba(3, 8, 18, 0.58);
}

.card:hover .thumb img {
  transform: scale(1.07);
}

/* body */
.card-body {
  padding: 1rem 1rem 1.3rem 1rem;
}

.work-title {
  font-size: 1.02rem;
  color: #ffffff;
  margin-bottom: .6rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* focus */
.card-link:focus {
  outline: 3px solid rgba(99, 102, 241, 0.12);
  border-radius: 8px;
}

/* about */
.about {
  padding: 1.6rem 0 3rem 0;
  color: #cfd8e3;
}

/* button (global glowing gradient) */
.glow-btn {
  background: linear-gradient(90deg, #4299e1 0%, #63b3ed 100%);
  color: #04202a;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(66, 153, 225, 0.18);
}

.glow-btn:disabled {
  opacity: .5;
  cursor: default;
}

.glow-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(66, 153, 225, 0.22);
  transition: all .18s;
}

/* small utilities */
.back-link {
  color: #cfe6ff;
  font-size: .95rem;
  margin-right: .6rem;
  display: inline-block;
}