/* ==========================================================================
   RESPONSIVE.CSS — All breakpoints
   Ulises Arvizu Portfolio

   Order: largest → smallest (mobile-last). Rules merged across pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET (≤ 900px) — affects case studies primarily
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .meta-table       { grid-template-columns: repeat(2, 1fr); }
  .meta-cell:nth-child(2n) { border-right: none; }
  .meta-cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
  .five-patterns    { grid-template-columns: repeat(3, 1fr); }
  .breakpoints-row  { grid-template-columns: repeat(3, 1fr); }
  .principles-grid  { grid-template-columns: repeat(2, 1fr); }
  .projects-list    { grid-template-columns: 1fr; }
  .project-list-card { grid-template-columns: 1fr; grid-template-areas: "tag" "title" "image" "meta"; }
  .project-list-card .project-image { min-height: 200px; }
}


/* --------------------------------------------------------------------------
   anotehr tablet (≤ 768px) — global
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
   :root { --hero-img-opacity: 0.35; }
   [data-theme="light"] { --hero-img-opacity: 0.35; }
  .footer-top {
    grid-template-columns:repeat(3, 1fr);
    gap: 1.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;;
  }
}

/* --------------------------------------------------------------------------
   TABLET NAV (≤ 850px) — hamburger replaces nav links
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {
  .page-home .hamburger       { display: flex; }
  .page-home .nav-links       { display: none; }
  .page-home .nav-cta         { display: none; }
  .theme-toggle .label-light  { display: none !important; }
  .theme-toggle .label-dark   { display: none !important; }
}

/* --------------------------------------------------------------------------
   MOBILE (≤ 640px) — global
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ticker        { overflow: hidden; width: 100%; }

  /* Navigation */
  .nav-title                  { display: none; }
  .nav-inner                  { padding: 1rem clamp(1rem, 4vw, 1.5rem); gap: 0; }
  .nav-cta                    { font-size: 0.65rem; padding: 0.45rem 0.75rem; white-space: nowrap; }
  body:not(.page-home) .nav-links a { gap: 4px; }
  .nav-right                  { gap: 4px; }

  /* Sections tighten */
  section,
  .cs-section    { padding: 4rem 1.5rem; }

  /* Homepage hero */
  .hero {
    min-height: 100vh;
    justify-content: center;
    padding: 100px 1.5rem 6rem;
  }
  .hero-wrapper  { overflow-x: hidden; display: flex; flex-direction: column; }
  .hero-left {
  display: flex; flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}
  .hero-left { padding-bottom: 3rem; }
  /* Case study hero */
  .cs-hero       { padding: 120px 1.5rem 4rem; }

  /* Layouts collapse to single column */
  .about-grid    { grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col       { grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col-even  { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Grids — single col / 2 col where it makes sense */
  .projects-grid    { grid-template-columns: 1fr; }
  .project-card.featured { grid-row: span 1; }
  .newsletter-cols  { grid-template-columns: 1fr; }
  .stats-row        { grid-template-columns: 1fr; }
  .principles-grid  { grid-template-columns: 1fr; }
  .pattern-grid     { grid-template-columns: 1fr; }
  .retro-grid       { grid-template-columns: 1fr; }
  .meta-table       { grid-template-columns: 1fr 1fr; }
  .five-patterns    { grid-template-columns: 1fr; }
  .breakpoints-row  { grid-template-columns: repeat(2, 1fr); }
  .anatomy-item     { grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.25rem 1.5rem; }

  /* Footer */
  footer {
    flex-direction: column;
    gap: 2rem;
  }
  .footer-top {
  grid-template-columns: 1fr;
}
.footer-brand {
  grid-column: 1;
  margin-bottom: 1rem;
}
  .next-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* --------------------------------------------------------------------------
   CASE STUDY — Responsive overrides
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .cs-cards { grid-template-columns: 1fr 1fr; }
  .meta-table { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cs-hero { min-height: auto; padding-top: 140px; padding-bottom: 4rem; }
  .meta-table { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col-even { grid-template-columns: 1fr; gap: 2.5rem; }
  .retro-grid { grid-template-columns: 1fr; }
  .retro-card.full { grid-column: 1; }
  .cs-cards { grid-template-columns: 1fr; }
  .cs-results-table .col-value { font-size: 1.3rem; }
  .img-half { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cs-hero { padding: 120px 1.5rem 3rem; }
  .cs-section { padding: 4rem 1.5rem; }
  .meta-table { grid-template-columns: 1fr 1fr; }
  .cs-cards { grid-template-columns: 1fr; }
  .cs-flow { flex-direction: column; }
  .cs-flow-step {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    flex-direction: row; justify-content: flex-start; gap: 1rem;
    text-align: left;
  }
  .cs-flow-step:last-child { border-bottom: none; }
  .cs-results-table th, .cs-results-table td { padding: 0.85rem 1rem; }
  .cs-results-table .col-value { font-size: 1.2rem; width: auto; }
  .cs-results-table .col-metric { width: auto; }
  .cs-results-table .col-context { display: none; }
  .next-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .cs-footer-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .footer-right { align-items: flex-start; }
  .callout { padding: 1.25rem 1.25rem; }
}