/* ===== Projects (wrapping main grid + horizontal modal gallery + contact) ===== */

/* Tunables */
:root{
  --card-w: clamp(200px, 24vw, 300px);
  --rail-gap: 20px;
  --sheet-radius: 30px;
  --tile-radius: 16px;
  --muted: #6b7280;
  --soft: rgba(0,0,0,.06);
  --gallery-h: clamp(140px, 32vh, 280px);  /* gallery frame height */
}

/* No horizontal scroll anywhere on the main page */
html, body { overflow-x: hidden; }

/* ==== Projects section (WRAPS; no horizontal rail) ==== */
.projects{ margin: 20px 0 48px; position: relative; }
.projects-rail{ padding: 6px 8px 4px; overflow: visible; }
.rail-spacer{ display:none; }
.rail-track{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--rail-gap);
}

/* Smaller cards */
.project-card{
  flex:0 0 var(--card-w); width:var(--card-w);
  height:400px; min-height:340px;
  background:#dedede; color:inherit; border-radius:22px;
  display:grid; place-items:center; text-align:center;
  padding:20px; user-select:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.project-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.project-card:focus-visible{ outline:3px solid var(--accent, #111); outline-offset:3px; }
.project-card .icon{ font-size:36px; line-height:1; margin-bottom:10px; }
.project-card .title{ font-family:"Canela Text",serif; font-size:clamp(1.2rem,2vw,1.6rem); }
.project-card .subtitle{ margin-top:6px; color:var(--muted); }

/* ===== Modal sheet ===== */
.project-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:14px; z-index:60;
}
.project-overlay[aria-hidden="false"]{ display:flex; }
.project-sheet{
  width:min(1120px,96vw);
  background:linear-gradient(180deg,#eaf1ff,#e7efff);
  border-radius:var(--sheet-radius);
  position:relative; padding:18px 18px 22px;
}
.sheet-close{
  position:absolute; left:12px; top:10px; width:48px; height:48px; border-radius:50%;
  background:#fff; border:none; cursor:pointer; display:grid; place-items:center; font-size:30px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.sheet-header{ text-align:center; margin:0 40px 12px; }
.sheet-title{ font-family:"Canela Text",serif; font-size:clamp(2rem,5vw,3.6rem); margin:0; }
.sheet-roles{ margin:4px 0 0; font-size:clamp(0.95rem,2vw,1.25rem); }

/* Two-column modal layout */
.sheet-layout{
  display:grid; gap:14px;
  grid-template-columns: minmax(220px, 300px) 1fr;
  align-items:start;
}
@media (max-width: 820px){ .sheet-layout{ grid-template-columns:1fr; } }

.side-col{ display:grid; gap:12px; }
.card{
  background:#fff; border-radius:14px; padding:12px; box-shadow:inset 0 0 0 1px var(--soft);
}
.card h4{ margin:0 0 6px; font-size:1rem; }
.card p{ margin:0; color:var(--muted); line-height:1.5; }

/* Links box (scrolls inside) */
.links-scroll{
  margin-top:6px; max-height: clamp(110px, 26vh, 220px);
  overflow:auto; padding:6px; background:#f6f7ff; border-radius:12px;
  box-shadow: inset 0 0 0 1px var(--soft);
  overscroll-behavior:contain;
}
.links-scroll::-webkit-scrollbar{ width:10px; }
.links-scroll::-webkit-scrollbar-track{ background:#eef1ff; border-radius:999px; }
.links-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#cfd8ff,#b6c4ff);
  border-radius:999px; border:2px solid #eef1ff;
}
@supports (scrollbar-width: thin){ .links-scroll{ scrollbar-width:thin; scrollbar-color:#b6c4ff #eef1ff; } }
.link-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.link-item a{
  display:block; padding:9px 10px; border-radius:10px;
  background:#eef2ff; box-shadow: inset 0 0 0 1px var(--soft);
  text-decoration: underline; color:inherit;
}

/* ===== Modal Gallery (HORIZONTAL SCROLL) ===== */
.gallery-wrap{ overflow:hidden; }
.gallery-rail{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:8px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; overscroll-behavior-inline:contain;
}
.gallery-rail::-webkit-scrollbar{ height:10px; }
.gallery-rail::-webkit-scrollbar-track{ background:#ecf0ff; border-radius:999px; }
.gallery-rail::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#c8d3ff,#aebcff); border-radius:999px; border:3px solid #ecf0ff;
}
@supports (scrollbar-width: thin){ .gallery-rail{ scrollbar-width:thin; scrollbar-color:#aebcff #ecf0ff; } }

.media-card{
  flex:0 0 auto; scroll-snap-align:start;
  width: calc(var(--gallery-h) * var(--ratio, 1.777)); /* width follows image ratio */
  background:#fff; border-radius:16px; padding:8px;
  box-shadow: inset 0 0 0 1px var(--soft);
}
.media-frame{
  height: var(--gallery-h); width: 100%;
  background:#f4f6fb; border-radius:12px; overflow:hidden; display:grid; place-items:center;
}
.media-frame > img{ width:100%; height:100%; object-fit:contain; display:block; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(6px); transition:opacity .28s ease, transform .28s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal, .reveal.in{ opacity:1; transform:none; transition:none; } }





/* ===== Contact Hero (clean + centered, no gradient) ===== */
#contact-hero{
  margin: clamp(70px, 10vw, 140px) auto;
  padding: clamp(56px, 8vw, 120px) 20px;
  width: min(1000px, 92vw);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  box-shadow:0 8px 30px rgba(0,0,0,.04);
  text-align:center;
}

.contact-eyebrow{
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  font-size:.8rem;
  color:var(--muted);
}

.contact-title{
  font-family:"Canela Text", serif;
  font-size:clamp(2rem, 6vw, 4rem);
  line-height:1.05;
  margin:0 0 8px;
}

.contact-sub{
  margin:0 auto;
  max-width:56ch;
  color:var(--muted);
  font-size:clamp(1rem, 2.2vw, 1.15rem);
}

.contact-cta{
  margin-top:clamp(22px, 3vw, 32px);
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

.btn{ /* you already have a .btn, keeping again here for clarity */
  --bg:#111; --fg:#fff;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px;
  background:var(--bg); color:var(--fg);
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none; cursor:pointer;
}
.btn-ghost{ --bg:#fff; --fg:#111; background:var(--bg); }
.btn-ghost{ border:1px solid rgba(0,0,0,.12); }

.copy-ok{ color:#0a7a27; font-weight:600; margin-left:6px; }

.contact-divider{
  width:100%; height:1px; background:rgba(0,0,0,.06);
  margin: clamp(26px, 4vw, 46px) 0;
}

.social-row{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

.social-chip{
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  text-decoration:none; color:inherit;
  transition:transform .12s ease;
}
.social-chip:hover{ transform:translateY(-1px); }

.small-print{
  margin-top:12px; color:var(--muted); font-size:.92rem;
}

/* If your old #contact styles exist, this neutralizes them */
#contact{ display:none; }


/* --- Project cards: slightly punchier reveal --- */
.card-reveal { 
  opacity: 0;
  transform: translateY(10px) scale(.98);
  filter: blur(3px);
  transition: opacity .38s ease, transform .38s ease, filter .38s ease;
}
.card-reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- Tech stack reveal (gentle; we control hide timing in JS) --- */
.tech-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.tech-reveal.in { opacity: 1; transform: none; }

/* --- Copy tooltip above the button --- */
.btn-wrap { position: relative; display: inline-block; }
.copied-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) scale(.96);
  opacity: 0;
  pointer-events: none;
  background: #111;
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transition: opacity .18s ease, transform .18s ease;
}
.copied-pop::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #111;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.copied-pop.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}


/* Tech Stack: smoother, later fade-out */
.tech-reveal{
  opacity: 0;
  transform: translateY(10px) scale(.98);
  filter: blur(2px);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  will-change: opacity, transform, filter;
}
.tech-reveal.in{
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce){
  .tech-reveal,
  .tech-reveal.in{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}