/* =====================================================
   MEDIA QUERIES — Ceron Matthew Calsena Portfolio
   ⚠️  DO NOT edit style.css for responsive changes.
       All breakpoints are managed here only.
===================================================== */

/* ─── Breakpoint Reference ───────────────────────
   1024px  — Large tablets / small laptops
    960px  — Certifications grid adjustment
    768px  — Tablets / mobile nav trigger
    600px  — Timeline + cert flip adjustments
    480px  — Small phones
──────────────────────────────────────────────── */


/* ===================================
   1024px — Large Tablet / Small Laptop
=================================== */
@media (max-width: 1024px) {
  .hero-content { gap: 3rem; }
  .about-grid   { gap: 3rem; }
  .profile-ring { width: 220px; height: 220px; }

  /* ── Client Slider: single centered card on tablet/mobile ──
     Viewport clips all overflow — prev/next peek cards are hidden.
     Active card is centered via flexbox; prev & next are invisible.
     Track height still driven by JS --stageH on the active card. */
  .sliderViewport {
    padding:   0;
    overflow:  hidden;
    position:  relative;
    width:     100%;
    scrollbar-width: none;
  }

  .sliderViewport::-webkit-scrollbar {
    display: none;
  }

  .clientSlider--active .sliderTrack,
  .sliderTrack {
    width:    100%;
    height:   auto;
    display:  flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: visible;
  }

  /* Active card: centered, positioned in flow, animation-ready */
  .sliderTrack .project-card.sliderCard--active {
    position: relative;
    top:      0 !important;
    left:     0 !important;
    width:    min(620px, 92vw);
    height:   auto !important;
    opacity:  1;
    z-index:  2;
    margin:   0 auto;
    overflow: hidden;
    scrollbar-width: none;
    will-change: transform, opacity;
  }

  /* Hide webkit scrollbar on active card */
  .sliderTrack .project-card.sliderCard--active::-webkit-scrollbar {
    display: none;
  }

  /* Prev & next: fully hidden — no peek, no bleed */
  .sliderTrack .project-card.sliderCard--prev,
  .sliderTrack .project-card.sliderCard--next {
    position: absolute;
    opacity:  0 !important;
    pointer-events: none;
    visibility: hidden;
  }

  /* All non-active non-classified cards: hidden */
  .sliderTrack .project-card:not(.sliderCard--active):not(.sliderCard--prev):not(.sliderCard--next) {
    opacity:    0 !important;
    visibility: hidden;
    pointer-events: none;
  }

  .sliderArrowPrev { left: 4px; }
  .sliderArrowNext { right: 4px; }
}


/* ===================================
   960px — Certifications Grid
=================================== */
@media (max-width: 960px) {
  .cert-flip-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ===================================
   768px — Tablet / Mobile Nav
=================================== */
@media (max-width: 768px) {

  /* Hide page scrollbar on tablet/mobile */
  ::-webkit-scrollbar { display: none; }
  html, body { scrollbar-width: none; }

  /* Navbar */
  .navbar { padding: 1rem 1.5rem; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 70%; max-width: 320px;
    height: 100vh;
    background: rgba(13,13,13,0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    transition: right var(--transition);
    z-index: 999;
    border-left: 1px solid rgba(255,255,255,0.08);
    padding: 5rem 2rem 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,106,0,0.4) transparent;
  }
  .nav-links::-webkit-scrollbar { width: 3px; }
  .nav-links::-webkit-scrollbar-thumb { background: rgba(255,106,0,0.4); border-radius: 3px; }
  .nav-links.open { right: 0; }
  .nav-links li { width: 100%; }
  .nav-link {
    font-size: .7rem;
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    width: 100%;
  }
  .nav-links li:last-child .nav-link { border-bottom: none; }

  /* Hero — full width centering */
  .hero         { padding: 5rem 1.5rem 4rem; width: 100%; box-sizing: border-box; }
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    gap: 2rem;
  }
  .hero-text    { width: 100%; text-align: center; }
  .hero-cta     { justify-content: center; flex-wrap: wrap; gap: 1rem; }
  .profile-ring { width: 180px; height: 180px; }
  .hero-name    { font-size: 2.2rem; }

  /* AI Flow */
  .ai-principles       { grid-template-columns: 1fr; gap: 0.85rem; }
  .pipeline-track      { flex-direction: column; align-items: stretch; }
  .pipeline-step       { flex-direction: row; align-items: flex-start; max-width: 100%; min-width: unset; gap: 1rem; }
  .pipeline-node       { flex-shrink: 0; }
  .pipeline-step-badge { display: none; }
  .pipeline-arrow      { transform: rotate(90deg); margin: 0 auto; padding: 0.25rem 0; }
  .ai-flow-section     { padding: 2rem 1.25rem; }

  /* About */
  .about-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-cards { grid-template-columns: 1fr 1fr; }

  /* Skills */
  .skills-grid        { grid-template-columns: 1fr; gap: 2.5rem; }
  .hosting-bars       { grid-template-columns: 1fr; gap: 1rem; }
  .skills-grid-single { padding: 1.5rem; }

  /* Projects */
  .projects-grid        { grid-template-columns: 1fr; }
  .project-card-header  { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .project-tags         { flex-wrap: wrap; }
  .projects-trust-note  { padding: 1rem; font-size: 0.8rem; }
  .project-desc         { font-size: 0.88rem; }
  .project-result       { font-size: 0.83rem; }

  /* AI Philosophy + LLM */
  .ai-philosophy,
  .llm-section  { padding: 1.5rem; }
  .llm-cards    { grid-template-columns: 1fr; }

  /* Certifications */
  .cert-grid      { grid-template-columns: 1fr 1fr; }
  .cert-flip-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-education { flex-direction: column; gap: 1rem; padding: 1.5rem; }

  /* Contact */
  .contact-links { grid-template-columns: 1fr; }
  .contact-links .contact-item:last-child { grid-column: 1; max-width: 100%; }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; }

  /* General */
  section { padding: 5rem 0; }
  .hero-scroll-hint { display: none; }

  /* Shrink orbs to prevent horizontal overflow */
  .orb-1 { width: 250px; height: 250px; right: -60px; top: -60px; }
  .orb-2 { width: 180px; height: 180px; }
  .orb-3 { width: 130px; height: 130px; }
}


/* ===================================
   600px — Timeline + Cert Flip
=================================== */
@media (max-width: 600px) {

  /* Timeline */
  .timeline-item       { grid-template-columns: 24px 1fr; gap: 0 1rem; }
  .timeline-card-header { flex-direction: column; gap: 0.6rem; }
  .timeline-right      { align-items: flex-start; }
  .timeline-card       { padding: 1.25rem; margin-bottom: 1.5rem; }

  /* Cert flip cards */
  .cert-flip-grid  { grid-template-columns: 1fr; }
  .cert-flip-wrap  { height: 300px; }
  .cert-education  { flex-direction: column; gap: 1rem; padding: 1.5rem; }
}


/* ===================================
   480px — Small Phones
=================================== */
@media (max-width: 480px) {
  .container      { padding: 0 1.25rem; }
  .hero           { padding: 5rem 1rem 3rem; }
  .hero-content   { max-width: 100%; padding: 0; }
  .hero-name      { font-size: 1.9rem; }
  .hero-tagline   { font-size: 0.88rem; }
  .about-stats    { gap: 1.5rem; }
  .about-cards    { grid-template-columns: 1fr; }
  .about-body     { font-size: 0.92rem; }
  .hero-cta       { flex-direction: column; align-items: center; width: 100%; }
  .btn            { width: 100%; justify-content: center; }
  .cert-grid      { grid-template-columns: 1fr; }
  .cert-flip-grid { grid-template-columns: 1fr; }
  .ai-phil-title  { font-size: 0.97rem; }
  .llm-cards      { gap: 0.85rem; }
  .project-desc   { font-size: 0.85rem; }
  section         { padding: 4rem 0; }

  /* Shrink orbs so they don't push the page wider */
  .orb-1 { width: 200px; height: 200px; right: -50px; top: -50px; }
  .orb-2 { width: 150px; height: 150px; }
  .orb-3 { width: 100px; height: 100px; }
}
/* ===================================
   Form Row — Mobile Stack Fix
=================================== */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* ===================================
   Tool Cards — Mobile
=================================== */
@media (max-width: 768px) {
  .toolCards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .toolCards-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   AI Config & CI/CD — Mobile
=================================== */
@media (max-width: 900px) {
  .aiCfg-compare {
    grid-template-columns: 1fr 1fr;
  }
  .aiCfg-compare-card--preferred {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .aiCfg-compare {
    grid-template-columns: 1fr;
  }
  .cicd-pipeline {
    flex-direction: column;
    gap: 0.75rem;
  }
  .cicd-arrow {
    transform: rotate(90deg);
    align-self: center;
  }
  .cicd-stack-row {
    flex-direction: column;
  }
  .cicd-stack-divider {
    width: 100%; height: 1px;
  }
  .ai-config-section {
    padding: 2rem 1.25rem;
  }
}

/* ===================================
   Resume Section — Responsive
   Breakpoints: 768px → 600px → 480px
   Goal: View + Download buttons always
   fully visible and never cut off.
=================================== */

/* 768px — Tablet: topbar wraps, actions push to second row */
@media (max-width: 768px) {
  .resume-topbar {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
  }

  /* Tab content row: info left, actions right; wraps if too tight */
  .resume-tab-content.active {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Info block: shrinks to give actions room, text clips with ellipsis */
  .resume-topbar-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .resume-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .resume-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Actions: never shrink, always stay on same row unless forced to wrap */
  .resume-actions {
    flex-shrink: 0;
    margin-left: 0;
    gap: 0.5rem;
  }

  /* Tabs: allow wrap so long tab labels don't overflow */
  .resume-tabs {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .resume-tab-btn {
    font-size: 0.82rem;
    padding: 0.7rem 1rem;
  }
}

/* 600px — Small Tablet: actions move to own full-width row */
@media (max-width: 600px) {
  .resume-topbar {
    padding: 0.9rem 1rem;
    gap: 0.6rem;
  }

  /* Force actions onto their own row, aligned right */
  .resume-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    gap: 0.5rem;
  }

  .resume-btn {
    font-size: 0.78rem;
    padding: 0.5rem 1rem;
  }

  .resume-filename {
    font-size: 0.85rem;
  }

  .resume-meta {
    font-size: 0.65rem;
  }
}

/* 480px — Small Phone: buttons share row equally, full width each */
@media (max-width: 480px) {
  .resume-topbar {
    padding: 0.85rem 0.9rem;
  }

  /* Tabs: each button stretches to fill row */
  .resume-tabs {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .resume-tab-btn {
    flex: 1 1 auto;
    font-size: 0.72rem;
    padding: 0.55rem 0.6rem;
    text-align: center;
  }

  /* Actions: both buttons share the row equally */
  .resume-actions {
    width: 100%;
    gap: 0.4rem;
    justify-content: stretch;
  }

  .resume-btn {
    flex: 1 1 0;
    justify-content: center;
    font-size: 0.74rem;
    padding: 0.5rem 0.5rem;
    min-width: 0;
    text-align: center;
  }

  .resume-filename {
    font-size: 0.8rem;
  }

  .resume-meta {
    font-size: 0.62rem;
  }

  /* Icon: shrink slightly so info block has more text room */
  .resume-icon {
    font-size: 1.5rem;
  }
}