/* Mobile responsive overrides for Portfolio
   Breakpoints: mobile-first. These rules assume desktop styles exist in other files.
*/

:root{
  --mobile-padding: 14px;
}

/* Global adjustments */
html, body{
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body{
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

/* Header: stack and compress */
header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px var(--mobile-padding);
}

.header-nav nav ul{
  display:flex;
  gap:12px;
}

.header-nav{ order: 3; }
.header-left{ order:1 }
.header-right{ order:2 }

.header-nav nav ul{ padding:0; margin:0; list-style:none; }
.header-nav a{ font-size:15px; }

/* Hero */
.hero-inner{ padding: 28px var(--mobile-padding); text-align:center }
.hero-title{ font-size:2.2rem }
.hero-sub{ font-size:1rem }
.hero-cta .btn{ display:inline-block; margin:8px 6px }

/* Projects section: single column, larger tappable targets */
.projects{
  padding: 1.4rem var(--mobile-padding) 3rem;
}

/* Presentation (About) - stack image above text on mobile */
.presentation { padding-top: 4rem; padding-bottom: 2rem; margin-top: 2rem;}
.presentation-content { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.presentation-content img { width: 180px; height: 180px; margin-bottom: 6px; }
.presentation-text { max-width: 100%; }

.projects-inner{ padding:0 }
.projects-title{ font-size:2rem; margin-bottom:1.2rem }

.projects-grid{ grid-template-columns: 1fr; gap:1.2rem }

.project-card{ border-radius:12px; }
.project-media{ height:180px }
.project-info{ padding: 1rem }
.project-info h3{ font-size:1.05rem }
.project-info .meta{ font-size: .92rem }

.project-play{ width:40px; height:40px; top:8px; right:8px }

/* Make pills wrap and be scrollable if needed */
.projects-filters{ flex-wrap:wrap; gap:8px; padding:0 6px; }
.pill{ padding:.5rem .9rem; font-size: .95rem }

/* Lightbox mobile behavior: full screen panel and touch-friendly controls */
.lightbox-panel{ width:100%; height:100%; max-width:100%; border-radius:0; display:flex; flex-direction:column; }
.lightbox-content{ padding:12px; }
.lightbox-media-wrapper{ max-width:100vw }
/* Ensure video iframe keeps 16:9 ratio on mobile too and scales within viewport */
.lightbox-media-wrapper .lightbox-image,
.lightbox-media-wrapper iframe{
  max-width:100%;
  height:auto;
}
.lightbox-media-wrapper iframe{
  width: min(1100px, 94vw);
  aspect-ratio: 16 / 9;
  max-height: 75vh;
}

.lightbox-prev, .lightbox-next{ left:6px; right:6px; width:44px; height:44px }
.lightbox-close{ top:8px; right:8px }

/* Contact form adjustments */
.contact-inner{ padding: 18px var(--mobile-padding) }
.contact-form{ margin-bottom:18px }
.form-contact input, .form-contact textarea{ font-size:16px; padding:10px; }
.form-contact button{ width:100%; padding:12px }

/* Footer */
.footer-inner{ padding: 20px var(--mobile-padding); text-align:center }
.footer-nav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }

/* Smaller screens adjustments */
@media (max-width:420px){
  .hero-title{ font-size:1.8rem }
  .project-media{ height:150px }
  .project-play{ width:38px; height:38px }
}

/* Accessibility: make interactive elements larger touch targets */
.pill, .btn, .btn-white, .btn-blue, .project-play{ min-height:40px; }

/* reduce heavy shadows on mobile for performance */
.lightbox-content{ box-shadow:none }

/* end mobile.css */

/* Tablet and desktop breakpoints (mobile-first) */
@media (min-width: 641px) {
  /* Tablet: two-column projects */
  .projects-grid{ grid-template-columns: repeat(2, 1fr); gap:1.6rem }
  .project-media{ height:200px }
  .hero-title{ font-size:2.4rem }
  .hero-sub{ font-size:1.05rem }
  .header-inner{ padding: 16px 20px }
  .header-nav{ order:2 }
  .header-right{ order:3 }
  .project-info h3{ font-size:1.05rem }
}

@media (min-width: 980px) {
  /* Desktop: three-column projects and more spacing */
  .projects-grid{ grid-template-columns: repeat(3, 1fr); gap:2.6rem }
  .project-media{ height:220px }
  .hero-inner{ padding: 48px 40px }
  .hero-title{ font-size:3rem }
  .hero-sub{ font-size:1.1rem }
  .projects{ padding: 2rem 12px 6rem }
  .lightbox-panel{ max-width:1100px; width:95%; }
  /* restore header layout to horizontal */
  header .header-inner{ flex-wrap:nowrap }
  .header-nav{ order:2 }
  .header-right{ order:3 }
}