/* --- PROJECTS: Masonry (Pinterest style) --- */
/* IMPORTANT: force row to block so multi-columns can work if the theme sets .row {display:flex} */
#projects .row.masonry{
  display: block !important;
  column-count: 3;
  column-gap: 2rem;
}
@media (max-width: 980px){ #projects .row.masonry { column-count: 2; } }
@media (max-width: 736px){ #projects .row.masonry { column-count: 1; } }

/* Flatten column wrappers so each .box is a masonry item */
#projects .row.masonry > [class*="col-"]{ display: contents; }

/* Each card flows in the columns */
#projects .row.masonry .box{
  display: inline-block;       /* critical: NOT flex */
  width: 100%;
  margin: 0 0 2rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Ensure no leftover equal-height rules affect projects */
#projects .box { height: auto !important; }

/* --- VIZ cards: align button at bottom (optional but nice) --- */
.box.viz { display:flex; flex-direction:column; height:100%; }
.box.viz header { margin-top:.5rem; }
.box.viz footer { margin-top:auto; }
.box.viz .image.featured img { width:100%; height:auto; display:block; }

/* --- SKILLS: modern card grid --- */
#skills .skills-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
#skills .skill-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1.25rem; border-radius:10px; background:#5f6a72; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
#skills .skill-card h3{ margin:.5rem 0 .75rem; color:#fff; }
#skills .skill-text{
  color:#fff !important; text-align:center !important; line-height:1.55; margin:0;
}
#skills .skill-icon{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08); margin-bottom:.5rem;
}
#skills .skill-icon .icon{ font-size:1.5rem; color:#fff; }

@media (max-width:736px){
  #skills .skills-grid{ gap:1rem; }
  #skills .skill-card{ padding:1rem; }
}


/* Put the gap on the masonry grid */
#projects .row.masonry {
  margin-top: 2rem;
}


/* Equal-height skill cards + tidy chip list */
#skills .skills-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: stretch;           /* make tracks equal height */
}

#skills .skill-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #5f6a72;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  padding: 1.5rem;
  height: 100%;                   /* stretch to track height */
  min-height: 360px;              /* unify visual height on desktop */
}

#skills .skill-card h3{ margin: .5rem 0 1rem; color: #fff; }

/* CHIP LIST */
#skills .skill-tags{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  justify-content: center;
  max-width: 28rem;               /* keeps lines readable */
}

#skills .skill-tags li{
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;            /* compact chips */
}

@media (max-width: 736px){
  #skills .skill-card{ min-height: auto; padding: 1rem; }
  #skills .skill-tags{ max-width: none; }
}


#banner header h2 { margin-bottom: .5rem; }
#banner header p { font-size: 1.15rem; opacity: .95; }
#banner .cta-group .button { margin: 0 .35rem; }


/* Hero marquee */
.marquee{
  --gap: 2.25rem;
  --speed: 18s;                  /* slower -> larger number, faster -> smaller */
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  padding: .35rem 0;
  user-select: none;
  /* Soft fade at edges */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__content{
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 100%;
  flex-shrink: 0;
  animation: marquee-scroll var(--speed) linear infinite;
}

.marquee__content li{
  list-style: none;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #f3d08a;                /* your banner accent; tweak if desired */
  white-space: nowrap;
  font-weight: 600;
}

/* Pause on hover (nice for desktop) */
.marquee:hover .marquee__content{ animation-play-state: paused; }

@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .marquee__content{ animation-duration: 0.001ms; animation-iteration-count: 1; }
}


/* Keep the whole page from scrolling side-to-side */
#page-wrapper { overflow-x: hidden; }

/* Constrain and center the banner content */
#banner header{
  max-width: 64rem;           /* ~1024px; adjust 56–72rem as you like */
  margin: 0 auto;
  padding: 1rem 1.25rem;      /* keeps chips off the edges */
  box-sizing: border-box;
  text-align: center;
}

/* Marquee: make sure it doesn't force extra width */
#banner .marquee{
  width: 100%;
  margin-top: .75rem;
}

/* Tune chip size so they sit nicely within the banner */
#banner .marquee__content li{
  font-size: .95rem;
  padding: .35rem .7rem;
}