/* 
  RESPONSIVE STYLES & GRID COLLAPSE FOR DHIRAN REDDY PORTFOLIO
  Manages layouts for small laptops/tablets (<1200px) and mobile (<768px)
*/

/* ══════════════════════════════════════════
   TABLET — max-width: 1200px
══════════════════════════════════════════ */
@media screen and (max-width: 1200px) {
  /* Collapse background grid to 3 columns */
  .grid-overlay {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-overlay .grid-col-line:nth-child(4),
  .grid-overlay .grid-col-line:nth-child(5) {
    display: none;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Header */
  header .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .header-status { display: none; }

  /* Hero */
  .hero-title-container { grid-column: 1 / 4; }
  .hero-main-title { font-size: 10vw; }

  .hero-details-row {
    grid-column: 1 / 4;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0;
    padding-bottom: 3rem;
  }

  .hero-left-text  { grid-column: 1; grid-row: 2; padding: 0 1.5rem; }
  .hero-center-img-col { grid-column: 2; grid-row: 1 / 3; padding: 2rem 0; }
  .hero-right-text { grid-column: 3; grid-row: 2; padding: 0 1.5rem; }

  /* Works — collapse 3-col cards to 1-col stack */
  .works-grid {
    grid-column: 1 / 4;
    grid-template-columns: 1fr;
  }

  .work-card-left,
  .work-card-mid,
  .work-card-right {
    border-right: none;
  }

  /* Works tab bar */
  .works-tab-bar { grid-column: 1 / 4; }

  /* Blog — collapse to 1 col */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-border { border-left: none; border-top: 1px solid var(--grid-line-color); }

  /* Certifications — collapse to 2 col */
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-card-border-top { border-top: none; }

  /* Experience */
  .exp-sidebar {
    grid-column: 1 / 4;
    border-right: none;
    border-bottom: 1px solid var(--grid-line-color);
    padding: 3rem 1.5rem;
  }
  .exp-sidebar-sticky { position: static; }
  .exp-timeline { grid-column: 1 / 4; padding: 3rem 1.5rem; }

  /* Capabilities */
  .capabilities-table { grid-column: 1 / 4; }
  .cap-row {
    grid-template-columns: repeat(3, 1fr);
    padding: 2.5rem 0;
  }
  .cap-index  { grid-column: 1; }
  .cap-category { grid-column: 1; grid-row: 2; padding-left: 2rem; margin-top: 0.5rem; }
  .cap-items  { grid-column: 2 / 4; }

  /* About */
  .about-text-col { grid-column: 1 / 4; padding: 3rem 1.5rem; }

  /* Contact */
  .contact-container { grid-column: 1 / 4; padding: 3rem 1.5rem; }
  .contact-email { font-size: 6vw; }

  /* Footer */
  .footer-copy  { grid-column: 1 / 3; }
  .footer-links { grid-column: 3; padding-right: 2rem; }
}

/* ══════════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  /* Hide background grid lines */
  .grid-overlay { display: none; }

  /* Grid container → block */
  .grid-container { display: block; width: 100%; }

  /* Header */
  header .grid-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 10vh;
  }

  .header-logo { padding-left: 0; }
  .header-nav  { display: none; } /* Replaced by mobile menu */
  .mobile-nav-toggle { display: block; }

  /* Hero */
  #hero { min-height: auto; padding: 2rem 0; }

  .hero-title-container { padding: 2rem 1.5rem; }
  .hero-main-title { font-size: 14vw; letter-spacing: -1.5px; }
  .hero-subtitle  { font-size: 1rem; margin-top: 1rem; letter-spacing: 1px; }

  .hero-details-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 1.5rem 3rem 1.5rem;
    gap: 2.5rem;
  }

  .hero-left-text,
  .hero-right-text { width: 100%; padding: 0; font-size: 1.05rem; }

  .hero-center-img-col { width: 100%; justify-content: center; padding: 1rem 0; }
  .hero-center-img { max-width: 260px; }

  /* Section headers */
  .section-intro-header  { height: 15vh; }
  .section-bg-text-outline { font-size: 15vw; }
  .section-fg-text { font-size: 8vw; margin-top: 2vw; }

  /* Works tab bar — horizontal scroll if needed */
  .works-tab-bar {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.5rem;
  }
  .works-tab { padding: 0 1.5rem; white-space: nowrap; }

  /* Project cards — single column */
  .works-grid { display: flex; flex-direction: column; }

  .work-card-wrapper { padding: 3rem 1.5rem; border-right: none; }
  .work-img-container { margin-bottom: 1.5rem; }
  .work-title { font-size: 1.75rem; }
  .work-desc  { font-size: 0.95rem; }

  /* Blog — single column */
  .blog-grid { display: flex; flex-direction: column; }
  .blog-card { padding: 2.5rem 1.5rem; }
  .blog-card-border { border-left: none; border-top: 1px solid var(--grid-line-color); }

  /* Certifications — single column */
  .cert-grid { display: flex; flex-direction: column; }
  .cert-card { padding: 2rem 1.5rem; }
  .cert-card-border-left { border-left: none; border-top: 1px solid var(--grid-line-color); }
  .cert-card-border-top  { border-top: 1px solid var(--grid-line-color); }

  /* Experience */
  .exp-sidebar { padding: 2.5rem 1.5rem; }
  .exp-sidebar h3 { font-size: 2rem; }
  .exp-sidebar p  { font-size: 1rem; }
  .exp-timeline   { padding: 2.5rem 1.5rem; }
  .exp-role     { font-size: 1.25rem; line-height: 1.3; }
  .exp-duration { font-size: 1.1rem; display: block; margin-top: 0.25rem; }
  .exp-company  { font-size: 0.95rem; margin-bottom: 0.75rem; }
  .exp-bullets li { font-size: 0.95rem; margin-bottom: 0.6rem; }
  .research-list  { margin-top: 3.5rem; padding-top: 3rem; }
  .research-list h4 { font-size: 1.4rem; margin-bottom: 1.5rem; }
  .research-title { font-size: 1.15rem; }
  .research-pub   { font-size: 1.05rem; }

  /* Capabilities */
  .capabilities-table { display: block; }
  .cap-row {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    align-items: flex-start;
  }
  .cap-index    { padding-left: 0; font-size: 1.2rem; margin-bottom: 0.25rem; }
  .cap-category { padding-left: 0; font-size: 1.1rem; margin-bottom: 1rem; }
  .cap-items    { padding-right: 0; gap: 0.5rem; }
  .cap-badge    { font-size: 0.85rem; padding: 0.25rem 0.6rem; }

  /* About */
  .about-text-col { padding: 3rem 1.5rem; font-size: 1.15rem; line-height: 1.7; }
  .about-highlight { font-size: 1.5rem; margin-bottom: 2rem; }

  /* Contact */
  .contact-container { padding: 4rem 1.5rem; }
  .contact-pre  { font-size: 1rem; }
  .contact-email {
    font-size: 6.5vw;
    margin-bottom: 2.5rem;
    word-break: break-all;
  }
  .contact-socials-row { gap: 1.5rem; }
  .social-link { font-size: 1rem; }

  /* Footer */
  footer .grid-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 0 1.5rem;
  }
  .footer-copy  { padding-left: 0; font-size: 0.85rem; }
  .footer-links { justify-content: flex-start; gap: 1.5rem; padding-right: 0; flex-wrap: wrap; width: 100%; }
}