/*
 * responsive.css — Sally Loutfy Portfolio
 * Link in every HTML file before </head>:
 * <link rel="stylesheet" href="responsive.css">
 *
 * Breakpoints:
 *   900px — tablet
 *   700px — phone (hamburger nav kicks in)
 *   600px — phone (full single-column)
 *   380px — small phone
 */

/* ─────────────────────────────────────────────
   GLOBAL — all screen sizes
───────────────────────────────────────────── */

img { max-width: 100%; }

nav a { min-height: 44px; display: inline-flex; align-items: center; touch-action: manipulation; }

/* EMAIL — always white */
.fe,
.footer-email,
a[href^="mailto"] {
  color: var(--white, #f0eeeb) !important;
  text-decoration: none;
}
.fe:hover,
.footer-email:hover,
a[href^="mailto"]:hover { opacity: 0.65; }


/* ─────────────────────────────────────────────
   HAMBURGER NAV — works on all project pages
───────────────────────────────────────────── */

.mob-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 310;
  flex-shrink: 0;
}
.mob-ham span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--white, #f0eeeb);
  transition: transform 0.3s, opacity 0.3s;
}
.mob-ham.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mob-ham.open span:nth-child(2) { opacity: 0; }
.mob-ham.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mob-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(20,20,20,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 300;
  padding: 72px 28px 36px;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid rgba(240,238,235,0.08);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mob-menu.open { transform: translateY(0); }
.mob-menu a {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240,238,235,0.55);
  text-decoration: none;
  padding: 17px 0;
  border-bottom: 1px solid rgba(240,238,235,0.08);
  transition: color 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mob-menu a:last-child { border-bottom: none; }
.mob-menu a:hover, .mob-menu a:active { color: #f0eeeb; }
.mob-menu .mob-contact { color: var(--accent, #c8a882) !important; }


/* ─────────────────────────────────────────────
   TABLET  900px
───────────────────────────────────────────── */
@media (max-width: 900px) {

  nav { padding: 18px 24px; }

  /* Standard hero */
  .ph { grid-template-columns: 1fr; }
  .phi { min-height: 56vw; }
  .pinfo { padding: 44px 24px; border-left: none; border-top: 1px solid var(--rule); }
  .pidx { font-size: 5rem; }

  /* Tool hero */
  .project-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 48px; margin-top: 65px; }

  /* metal-grc hero */
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-image { min-height: 56vw; }
  .hero-meta { padding: 44px 28px; border-left: none; border-top: 1px solid var(--rule, rgba(240,238,235,0.08)); }

  /* metal-fabrication hero */
  .hero-info { padding: 44px 24px; border-left: none; border-top: 1px solid var(--rule); }
  .project-index { font-size: 5rem; }

  /* Intro */
  .intro { grid-template-columns: 1fr; padding: 56px 24px; }
  .intro-section { grid-template-columns: 1fr; padding: 56px 24px; }

  /* Content */
  .cs { grid-template-columns: 1fr; }
  .csl { padding: 44px 24px 0; border-right: none; }
  .csl h3 { position: static; }
  .csb { padding: 24px 24px 44px; }
  .content-section { grid-template-columns: 1fr; }
  .content-label-col { padding: 48px 24px 0; border-right: none; }
  .content-label-col h3 { position: static; }
  .content-body-col { padding: 24px 24px 48px; }
  .section-row { grid-template-columns: 1fr; gap: 32px; padding: 56px 28px; }
  .section-label { position: static; }

  /* Image grids */
  .ig2 { grid-template-columns: 1fr; }
  .ig3 { grid-template-columns: 1fr 1fr; }
  .ig4 { grid-template-columns: 1fr 1fr; }
  .iga { grid-template-columns: 1fr; }
  .ig-asym { grid-template-columns: 1fr; }
  .image-grid.col-2,
  .image-grid.col-3,
  .image-grid.asym { grid-template-columns: 1fr; }

  /* Feature/steps */
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .workflow-split { grid-template-columns: 1fr; }

  /* Tags */
  .tags-s { padding: 28px 24px; }
  .tags-section { padding: 28px 24px; }
  .tech-row { padding: 20px 24px; }
  .tags-row { padding: 20px 28px; }

  /* Project nav */
  .pnav { grid-template-columns: 1fr; }
  .pni + .pni { border-left: none; border-top: 1px solid var(--rule); }
  .project-nav { flex-direction: column; align-items: flex-start; gap: 20px; padding: 36px 28px; }
  .pnav-item + .pnav-item { border-left: none; border-top: 1px solid var(--rule); }

  /* Tool header */
  .tool-header { padding: 28px 24px 24px; flex-direction: column; gap: 16px; }

  /* Vimeo full width */
  [style*="width:65%"],
  [style*="width: 65%"] { width: 100% !important; max-width: 100% !important; }

  .ext-link-block { padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .series-div { padding: 36px 24px 0; }
  .stat-inline { padding: 32px 24px; }
  .qs { padding: 36px 24px; }
  .full-bleed img { min-height: 50vw; }
  .full-strip img, .full-strip .iph { height: 50vw; min-height: 280px; }

  footer { padding: 36px 24px; flex-direction: column; gap: 14px; align-items: flex-start; }
}


/* ─────────────────────────────────────────────
   PHONE NAV  700px — hamburger
───────────────────────────────────────────── */
@media (max-width: 700px) {

  /* Hide the "← All Work" back link and any desktop nav links */
  nav .nb,
  nav .nav-links { display: none !important; }

  /* Show hamburger */
  .mob-ham { display: flex; }
  .mob-menu { display: flex; }

  nav { padding: 15px 18px; justify-content: space-between; align-items: center; }
  nav .nl, nav .nav-logo { opacity: 0.85; font-size: 0.62rem; }
}


/* ─────────────────────────────────────────────
   PHONE  600px
───────────────────────────────────────────── */
@media (max-width: 600px) {

  nav { padding: 13px 16px; }

  /* Standard hero */
  .phi { min-height: 72vw; }
  .pinfo { padding: 28px 16px; }
  .pidx { font-size: 3.5rem; margin-bottom: -8px; }
  .ptit { font-size: clamp(26px, 8vw, 46px); }
  .psub { font-size: 0.54rem; margin-bottom: 24px; }
  .mg { grid-template-columns: 1fr; }
  .mi:nth-child(odd) { padding-right: 0; border-right: none; }
  .mi:nth-child(even) { padding-left: 0; }
  .mi { padding: 10px 0; }

  /* Tool hero */
  .project-hero { padding: 40px 16px 32px; gap: 24px; margin-top: 58px; }
  .project-title { font-size: clamp(26px, 9vw, 48px); }
  .project-subtitle { font-size: 0.54rem; }
  .hero-desc { font-size: 0.9rem; }
  .meta-grid { grid-template-columns: 1fr; }
  .meta-item:nth-child(odd) { border-right: none; }

  /* metal-grc */
  .hero-meta { padding: 32px 16px; }
  .hero-title { font-size: clamp(26px, 8vw, 48px); }
  .hero-subtitle { font-size: 0.52rem; margin-bottom: 28px; }

  /* metal-fabrication */
  .hero-info { padding: 28px 16px; }
  .intro-section { padding: 36px 16px; }

  /* Intro */
  .intro { padding: 36px 16px; gap: 20px; }
  .ibody { font-size: 0.98rem; line-height: 1.75; }

  /* Content sections */
  .csl { padding: 32px 16px 0; }
  .csl h3 { font-size: 1.2rem; }
  .csb { padding: 14px 16px 32px; }
  .csb p { font-size: 0.93rem; }
  .content-label-col { padding: 32px 16px 0; }
  .content-body-col { padding: 14px 16px 32px; }
  .section-row { padding: 40px 16px; gap: 24px; }

  /* Image grids — all single column */
  .ig2, .ig3, .ig4, .iga { grid-template-columns: 1fr; }
  .ig-asym { grid-template-columns: 1fr; }
  .image-grid.col-2,
  .image-grid.col-3,
  .image-grid.asym { grid-template-columns: 1fr; }
  .ig2 .gc, .ig3 .gc { min-height: 52vw; }
  .ig2 .gc img, .ig3 .gc img,
  .ig2 img, .ig3 img { max-height: 75vw; object-fit: cover; }
  .ig2 .iph, .ig2 img,
  .ig3 .iph, .ig3 img,
  .ig-asym .iph, .ig-asym img { height: 56vw !important; }

  /* Feature/steps/process */
  .feat-grid { grid-template-columns: 1fr; gap: 2px; }
  .feat-item { padding: 16px; }
  .steps-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 24px; }
  .workflow-split { grid-template-columns: 1fr; }
  .workflow-col { padding: 24px 16px; }

  /* Special sections */
  .mats { grid-template-columns: 1fr; padding: 0 16px; }
  .steps { padding: 0 16px; }
  .struct-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fw-grid { grid-template-columns: 1fr; }
  .degrees { padding: 32px 16px; }
  .degrees-header { flex-direction: column; gap: 12px; }
  .interventions { padding: 0 16px; }
  .dl-banner { flex-direction: column; gap: 14px; padding: 24px 16px; }
  .dl-btn { width: 100%; text-align: center; }

  /* Tab bar */
  .tab-bar { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { font-size: 0.52rem; white-space: nowrap; }

  /* Map/video (moments-in-space) */
  .map-controls { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .map-stack { min-height: 55vw; }
  .video-pair { grid-template-columns: 1fr; }
  .vid-toolbar { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }

  /* Quote */
  .qs { padding: 28px 16px; font-size: clamp(18px, 5.5vw, 30px); }

  /* Tags */
  .tags-s { padding: 18px 16px; }
  .tags-section { padding: 18px 16px; }
  .tech-row { padding: 14px 16px; }
  .tags-row { padding: 16px 16px; }
  .tag, .tech-tag { padding: 5px 10px; font-size: 0.46rem; }

  /* Project nav */
  .pnav { grid-template-columns: 1fr; }
  .pni { padding: 24px 16px; }
  .pni + .pni { border-left: none; border-top: 1px solid var(--rule); }
  .pnt { font-size: 1rem; }
  .project-nav { padding: 28px 16px; }
  .pnav-item { padding: 24px 16px; }

  /* Series divider */
  .series-div { padding: 24px 16px 0; }
  .series-title { font-size: 1.4rem; }

  /* Tool / iframe */
  .tool-header { padding: 18px 16px 14px; }
  .tool-title { font-size: 1.2rem; }
  .iframe-wrap { padding: 16px; }
  .tool-open-btn { width: 100%; text-align: center; }

  /* Stats */
  .stat-inline { padding: 22px 16px; }
  .stats-row { flex-direction: column; gap: 14px; }
  .stat-big { font-size: 2.2rem; }

  /* Ext link */
  .ext-link-block { padding: 18px 16px; }
  .ext-link-btn { width: 100%; text-align: center; padding: 12px 16px; }

  /* Images */
  .full-img img { min-height: 52vw; }
  .full-bleed img { min-height: 56vw; }
  .full-strip img, .full-strip .iph { height: 56vw; }
  .icap { font-size: 0.44rem; right: 14px; bottom: 12px; }

  /* Deliverables */
  .del-list { padding: 0 16px; }
  .del-text { font-size: 0.85rem; }

  /* Footer */
  footer { padding: 26px 16px; gap: 10px; }
  .fn { font-size: 0.9rem; }
  .footer-name { font-size: 0.9rem; }

  /* mobile menu */
  .mob-menu { padding: 68px 20px 32px; }
  .mob-menu a { font-size: 0.68rem; padding: 15px 0; }
}


/* ─────────────────────────────────────────────
   SMALL PHONE  380px
───────────────────────────────────────────── */
@media (max-width: 380px) {

  nav { padding: 12px 14px; }
  .mob-menu { padding: 62px 16px 28px; }
  .mob-menu a { font-size: 0.62rem; padding: 13px 0; }

  .pinfo, .hero-info, .hero-meta { padding: 22px 14px; }
  .csl, .content-label-col { padding: 26px 14px 0; }
  .csb, .content-body-col { padding: 12px 14px 26px; }
  .intro, .intro-section, .section-row { padding: 28px 14px; }
  .tags-s, .tech-row, .tags-row, .tags-section { padding: 14px 14px; }
  .pni, .pnav-item { padding: 20px 14px; }
  footer { padding: 20px 14px; }
  .project-nav { padding: 24px 14px; }
  .series-div { padding: 20px 14px 0; }

  .pidx { font-size: 3rem; }
  .project-index { font-size: 3rem; }
  .ptit { font-size: clamp(22px, 8.5vw, 36px); }
  .project-title { font-size: clamp(22px, 8.5vw, 36px); }
  .hero-title { font-size: clamp(22px, 8vw, 36px); }

  .tag, .tech-tag { font-size: 0.43rem; padding: 4px 8px; }
}