/* =========================================
   Projects & Filters — Polished, Mobile‑First CSS
   ========================================= */

:root{
  /* brand */
  --brand-primary:#7303a7;
  --brand-primary-2:#420177;
  --brand-accent:#011aff;
  --brand-gold:#ffd700;
  --brand-gold-2:#ffed4e;
  /* neutrals */
  --text-900:#202020;
  --text-700:#555;
  --text-600:#666;
  --text-400:#888;
  --white:#ffffff;
  --black:#000000;
  --bg-card:#ffffff;
  --bg-muted:#f8f8f8;
  --overlay:rgba(0,0,0,.9);
  /* effects */
  --shadow-sm:0 .5rem 1rem rgba(0,0,0,.15);
  --shadow-md:0 .5rem 1rem rgba(0,0,0,.3);
  --shadow-lg:0 1rem 3rem rgba(0,0,0,.35);
  --grad-purple:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --grad-brand:linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-primary-2) 100%);
}

/* ========= Base spacing ========= */
section{min-height:100vh;padding:2rem 9%;}
.heading{font-size:3.5rem;color:var(--text-900);font-weight:800;text-align:center}
.heading span{color:var(--brand-primary)}

/* ========= Quote ========= */
.quote{ text-align:center; margin:2rem 0 4rem; padding:2rem; background:var(--grad-purple); border-radius:1rem; box-shadow:var(--shadow-sm) }
.quote span{ font-size:1.8rem; font-style:italic; color:var(--white); font-weight:500; line-height:1.8 }

/* ========= Projects (Work) ========= */
.work{ padding-top:10rem }
.work .heading{ margin-bottom:2rem }

.work .box-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(32rem,1fr)); gap:3rem; margin-top:3rem }

.work .box-container .box{ position:relative; border-radius:1rem; box-shadow:var(--shadow-md); overflow:hidden; height:30rem; background:var(--bg-card); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease }
.work .box-container .box:hover{ transform:translateY(-10px) scale(1.02); box-shadow:var(--shadow-lg) }

.work .box-container .box img{ width:100%; height:100%; object-fit:cover }

.work .box-container .box .content{ position:absolute; inset:0; background:var(--overlay); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2rem; opacity:0; transition:opacity .5s ease }
.work .box-container .box:hover .content{ opacity:1 }

.work .box-container .box .content .tag{ margin-bottom:1.5rem }
.work .box-container .box .content .tag h3{ font-size:2rem; color:var(--white); font-weight:600; text-align:center }

.work .box-container .box .content .desc{ color:var(--white); font-size:1.4rem; text-align:center; line-height:1.8 }
.work .box-container .box .content .desc p{ margin-bottom:2rem }

.work .box-container .box .content .desc .btns{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap }
.work .box-container .box .content .desc .btns .btn{ padding:.8rem 2rem; font-size:1.3rem; border:.2rem solid var(--brand-accent); background:transparent; color:var(--white); border-radius:5rem; cursor:pointer; transition:all .3s ease; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none }
.work .box-container .box .content .desc .btns .btn:hover{ background:var(--brand-accent); color:var(--white); transform:translateY(-3px); box-shadow:0 5px 15px rgba(1,26,255,.4) }

/* Featured Badge */
.featured-badge{ position:absolute; top:10px; right:10px; background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)); color:#333; padding:.5rem 1.5rem; border-radius:5rem; font-size:1.2rem; font-weight:700; box-shadow:0 3px 10px rgba(255,215,0,.5); z-index:10; display:flex; align-items:center; gap:.5rem; animation:pulse 2s infinite }
.featured-badge i{ color:#ff6b00; font-size:1.4rem }
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* More Button */
.morebtn{ text-align:center; margin-top:5rem }
.morebtn .btn{ padding:1rem 3rem; font-size:1.5rem; border:.2rem solid var(--brand-primary); background:transparent; color:var(--brand-primary); border-radius:5rem; cursor:pointer; transition:all .3s ease; display:inline-flex; align-items:center; gap:1rem; text-decoration:none; font-weight:600 }
.morebtn .btn:hover{ background:var(--brand-primary); color:var(--white); transform:translateY(-3px); box-shadow:0 5px 15px rgba(115,3,167,.4) }

/* =========================================
   FILTERS
   ========================================= */
.filter-wrapper{ margin:3rem 0; padding:0 2rem }
.filter-container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:2rem }
.filter-buttons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center }

.filter-btn{ padding:1rem 2rem; font-size:1.4rem; font-weight:600; border:2px solid var(--brand-primary); background:transparent; color:var(--brand-primary); border-radius:5rem; cursor:pointer; transition:all .3s ease; display:flex; align-items:center; gap:.5rem; font-family:"Poppins",sans-serif }
.filter-btn:hover{ background:var(--brand-primary); color:var(--white); transform:translateY(-3px); box-shadow:0 5px 15px rgba(115,3,167,.3) }
.filter-btn.active{ background:var(--brand-primary); color:var(--white); box-shadow:0 5px 15px rgba(115,3,167,.4) }
.filter-btn i{ font-size:1.6rem }

.toggle-advanced-filters{ padding:1rem 2rem; font-size:1.3rem; font-weight:500; border:2px solid #555; background:transparent; color:#555; border-radius:5rem; cursor:pointer; transition:all .3s ease; display:flex; align-items:center; gap:.8rem; font-family:"Poppins",sans-serif }
.toggle-advanced-filters:hover{ background:#555; color:var(--white) }
.toggle-advanced-filters i.fa-chevron-down{ transition:transform .3s ease }

/* Advanced Filters */
.advanced-filters{ max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .4s ease; opacity:0; margin:2rem 0 }
.advanced-filters.show{ max-height:500px; opacity:1 }

.filter-group{ background:var(--bg-card); padding:2rem; border-radius:1rem; box-shadow:var(--shadow-sm); margin-bottom:1.5rem }
.filter-group h4{ font-size:1.6rem; color:#333; margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem }
.filter-group h4 i{ color:var(--brand-primary); font-size:1.8rem }

.filter-tags{ display:flex; flex-wrap:wrap; gap:1rem }
.filter-tag{ padding:.8rem 1.8rem; font-size:1.3rem; font-weight:500; border:2px solid #ddd; background:#f9f9f9; color:#555; border-radius:5rem; cursor:pointer; transition:all .3s ease; font-family:"Poppins",sans-serif; display:flex; align-items:center; gap:.5rem }
.filter-tag:hover{ border-color:var(--brand-primary); color:var(--brand-primary); background:#f0e6f6; transform:translateY(-2px) }
.filter-tag.active{ background:var(--brand-primary); color:var(--white); border-color:var(--brand-primary); box-shadow:0 3px 10px rgba(115,3,167,.3) }
.filter-tag i{ font-size:1.4rem }

/* Skill Filter Indicator */
.skill-filter-indicator{ margin:2rem 9%; padding:2rem; background:var(--grad-purple); border-radius:15px; box-shadow:0 10px 30px rgba(102,126,234,.3); animation:slideDown .5s ease }
@keyframes slideDown{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }
.skill-filter-content{ display:flex; align-items:center; justify-content:center; gap:1.5rem; color:#fff; font-size:1.8rem; flex-wrap:wrap }
.skill-filter-content i{ font-size:2rem }
.skill-filter-content strong{ font-weight:700; background:rgba(255,255,255,.2); padding:.5rem 1.5rem; border-radius:10px; backdrop-filter:blur(10px) }
.clear-skill-filter{ background:rgba(255,255,255,.2); color:#fff; padding:.8rem 2rem; border-radius:25px; font-size:1.5rem; font-weight:600; cursor:pointer; transition:.3s ease; border:2px solid rgba(255,255,255,.3); backdrop-filter:blur(10px) }
.clear-skill-filter:hover{ background:rgba(255,255,255,.3); transform:scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,.2) }
.clear-skill-filter i{ margin-right:.5rem }

/* =========================================
   Project Modal
   ========================================= */
.modal{ display:none; position:fixed; z-index:9999; inset:0; overflow:auto; background-color:rgba(0,0,0,.8); backdrop-filter:blur(5px); animation:fadeIn .3s ease }
.modal.show{ display:flex; align-items:center; justify-content:center; padding:2rem }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideIn{ from{ transform:translateY(-50px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.modal-content{ background:var(--bg-card); border-radius:15px; max-width:900px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 10px 50px rgba(115,3,167,.3); animation:slideIn .4s ease }

.modal-close{ position:absolute; top:15px; right:20px; font-size:3.5rem; font-weight:300; color:#666; cursor:pointer; z-index:10; transition:all .3s ease; line-height:1 }
.modal-close:hover{ color:var(--brand-primary); transform:rotate(90deg) }

.modal-header{ padding:3rem 3rem 2rem; border-bottom:2px solid #f0f0f0 }
.modal-title{ font-size:2.8rem; color:#333; font-weight:700; margin:0; padding-right:4rem; line-height:1.3 }
.modal-subtitle{ font-size:1.6rem; color:#666; font-weight:400; margin:1rem 0 0; padding-right:4rem; line-height:1.4; font-style:italic }

.modal-body{ padding:3rem }
.modal-image-container{ width:100%; margin-bottom:3rem; border-radius:10px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,.1) }
.modal-image{ width:100%; height:auto; display:block; object-fit:cover }

.modal-section{ margin-bottom:3rem }
.modal-section h3{ font-size:2rem; color:var(--brand-primary); margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem }
.modal-section h3 i{ font-size:2.2rem }

/* description override (can be dark modal too) */
.modal-description{ font-size:1.6rem; line-height:1.8; color:var(--text-700); text-transform:none }

.modal-technologies{ display:flex; flex-wrap:wrap; gap:1rem }
.modal-tech-tag{ background:var(--grad-brand); color:#fff; padding:.8rem 1.6rem; border-radius:25px; font-size:1.4rem; font-weight:500; box-shadow:0 3px 10px rgba(115,3,167,.3); transition:all .3s ease }
.modal-tech-tag:hover{ transform:translateY(-3px); box-shadow:0 5px 15px rgba(115,3,167,.5) }

.modal-info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin-bottom:3rem }
.modal-info-item{ display:flex; align-items:flex-start; gap:1.5rem; padding:1.5rem; background:var(--bg-muted); border-radius:10px; transition:all .3s ease }
.modal-info-item:hover{ background:#f0f0f0; transform:translateY(-2px) }
.modal-info-item i{ font-size:2.5rem; color:var(--brand-primary); margin-top:.3rem }
.modal-info-item>div{ display:flex; flex-direction:column; gap:.5rem }
.info-label{ font-size:1.3rem; color:var(--text-400); font-weight:500; text-transform:uppercase; letter-spacing:.5px }
.info-value{ font-size:1.6rem; color:#333; font-weight:600 }
.info-value a,.collaborators-list a{ color:var(--brand-primary); text-decoration:none; transition:all .3s ease; position:relative; display:inline-flex; align-items:center; gap:.5rem }
.info-value a:hover,.collaborators-list a:hover{ color:var(--brand-primary-2); text-decoration:underline }
.info-value a i.fa-external-link-alt,.collaborators-list a i.fa-external-link-alt{ font-size:1.2rem; opacity:.7; transition:all .3s ease }
.info-value a:hover i.fa-external-link-alt,.collaborators-list a:hover i.fa-external-link-alt{ opacity:1; transform:translateX(2px) translateY(-2px) }

.modal-team-info{ background:var(--bg-muted); padding:2rem; border-radius:10px; border-left:4px solid var(--brand-primary) }
.team-size-badge{ display:inline-flex; align-items:center; gap:1rem; padding:1rem 2rem; background:var(--grad-brand); color:#fff; border-radius:25px; font-size:1.5rem; font-weight:500; margin-bottom:2rem; box-shadow:0 3px 10px rgba(115,3,167,.3) }
.team-size-badge i{ font-size:1.8rem }
.team-size-badge strong{ font-weight:700; font-size:1.7rem }

.collaborators-container{ margin-top:2rem }
.collaborators-container h4{ font-size:1.6rem; color:var(--brand-primary); margin-bottom:1.5rem; font-weight:600; display:flex; align-items:center; gap:.8rem }
.collaborators-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem }
.collaborators-list li{ display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem; background:var(--white); border-radius:8px; font-size:1.5rem; color:#333; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:all .3s ease }
.collaborators-list li:hover{ transform:translateX(5px); box-shadow:0 3px 12px rgba(115,3,167,.2); border-left:3px solid var(--brand-primary) }
.collaborators-list li i{ font-size:1.8rem; color:var(--brand-primary) }

.modal-reports{ padding:2.5rem; background:linear-gradient(135deg,#f8f4fc 0%,#faf5ff 100%); border-radius:12px; border:2px solid #e9d5f5 }
.modal-report-buttons{ display:flex; flex-wrap:wrap; gap:1.5rem }
.modal-report-btn{ display:inline-flex; align-items:center; gap:1rem; padding:1.2rem 2.5rem; background:var(--grad-brand); color:#fff; font-size:1.5rem; font-weight:600; border-radius:30px; text-decoration:none; box-shadow:0 4px 15px rgba(115,3,167,.3); transition:all .3s ease; text-transform:none }
.modal-report-btn:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(115,3,167,.5); background:linear-gradient(135deg,#8a04c9 0%,#530199 100%) }
.modal-report-btn i{ font-size:1.8rem }

/* Scrollbar for modal */
.modal-content::-webkit-scrollbar{ width:8px }
.modal-content::-webkit-scrollbar-track{ background:#f1f1f1; border-radius:10px }
.modal-content::-webkit-scrollbar-thumb{ background:var(--brand-primary); border-radius:10px }
.modal-content::-webkit-scrollbar-thumb:hover{ background:var(--brand-primary-2) }

/* =========================================
   Responsive
   ========================================= */
@media (max-width:768px){
  .work .box-container{ grid-template-columns:repeat(auto-fit,minmax(25rem,1fr)) }
  .quote span{ font-size:1.5rem }
  .featured-badge{ font-size:1rem; padding:.4rem 1rem }
  .filter-wrapper{ padding:0 1rem }
  .filter-btn{ padding:.8rem 1.5rem; font-size:1.2rem }
  .filter-tag{ padding:.6rem 1.2rem; font-size:1.2rem }
  .filter-group{ padding:1.5rem }
  .filter-group h4{ font-size:1.4rem }

  .modal{ padding:1rem }
  .modal-content{ max-height:95vh; border-radius:10px }
  .modal-header{ padding:2rem 2rem 1.5rem }
  .modal-title{ font-size:2.2rem; padding-right:3rem }
  .modal-close{ font-size:3rem; top:12px; right:15px }
  .modal-body{ padding:2rem }
  .modal-section h3{ font-size:1.8rem }
  .modal-description{ font-size:1.5rem }
  .modal-tech-tag{ font-size:1.3rem; padding:.7rem 1.4rem }
  .modal-info-grid{ grid-template-columns:1fr; gap:1.5rem }
  .modal-info-item{ padding:1.2rem }
  .modal-info-item i{ font-size:2rem }
  .info-value{ font-size:1.5rem }
  .modal-report-btn{ font-size:1.4rem; padding:1rem 2rem; width:100%; justify-content:center }
  .modal-reports{ padding:2rem }
  .team-size-badge{ font-size:1.4rem; padding:.8rem 1.5rem }
  .team-size-badge strong{ font-size:1.6rem }
  .collaborators-list{ grid-template-columns:1fr }
  .collaborators-list li{ font-size:1.4rem }
  .modal-team-info{ padding:1.5rem }
}

@media (max-width:450px){
  .heading{ font-size:2.8rem }
  .modal-title{ font-size:1.9rem }
  .modal-section h3{ font-size:1.6rem }
  .modal-description{ font-size:1.4rem }
  .modal-tech-tag{ font-size:1.2rem; padding:.6rem 1.2rem }
}

/* =========================================
   Preference Queries
   ========================================= */
@media (hover:none) and (pointer:coarse){
  .morebtn .btn, .filter-btn{ padding:1.2rem 2.4rem }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important }
}
@media (prefers-contrast:more){
  .morebtn .btn{ box-shadow:0 0 0 3px rgba(0,0,0,.12) }
}