/* ============================================================
   RESPONSIVE — Philippe Saxer Portfolio
   css/responsive.css
   ============================================================ */

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */

/* Only apply hover effects on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover {
    transform: translateY(-4px) scale(1.01);
  }

  .category-card:hover {
    transform: translateY(-4px);
  }

  .contact-info-card:hover {
    transform: translateY(-4px);
  }
}

/* Disable hover transforms on touch devices to prevent sticky states */
@media (hover: none) {
  .project-card:hover {
    transform: none;
  }

  .category-card:hover {
    transform: none;
  }

  .contact-info-card:hover {
    transform: none;
  }

  .btn-primary:hover {
    transform: none;
  }

  .btn-secondary:hover {
    transform: none;
  }

  .footer-newsletter-btn:hover {
    transform: none;
  }
}

/* ============================================================
   TABLET  (max-width: 1024px)
   ============================================================ */

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

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .team-card {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
  }

  .project-layout {
    grid-template-columns: 1fr;
    padding: var(--sp-xl);
    margin-top: -40px;
  }

  .hero-stats {
    gap: 2rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TABLET SMALL  (max-width: 900px)
   ============================================================ */

@media (max-width: 900px) {
  .sidebar-box {
    max-width: 600px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   MOBILE  (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --sp-4xl: 4.5rem;
    --sp-3xl: 3rem;
    --sp-xl: 2rem;
    --sp-lg: 1.5rem;
    --sp-md: 1rem;
  }

  /* CRITICAL: prevent horizontal scroll on mobile without breaking sticky! */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw;
  }

  /* Force all sections to clip overflow without breaking position: sticky! */
  main, section, .section {
    overflow-x: clip; 
  }

  /* HIDE BLOBS on mobile — they cause overflow + performance issues */
  .blob-canvas {
    display: none !important;
  }

  /* DISABLE backdrop-filter on mobile for significant performance gains */
  .face, .project-card, .category-card, .glass-overlay, .contact-card, .contact-info-card, .team-card, .header-scrolled, .project-hero-area::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .container {
    padding: 0 1.25rem;
  }

  .site-logo img {
    height: 38px !important; /* Slightly smaller than desktop but larger than original 32px */
  }

  /* Header — bigger tap targets and readable text */
  .site-nav {
    gap: 1rem;
  }

  .nav-link {
    font-size: 1.15rem;
    /* Increased significantly for mobile tap targets */
  }

  .nav-cta {
    display: inline-flex;
    padding: 0.6rem 1.2rem;
    /* Larger padding */
    font-size: 1.05rem;
    /* Larger text */
  }

  /* Bigger base text for readability */
  body {
    font-size: 1rem;
  }

  .section-label {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }

  .section-desc {
    font-size: 1rem;
  }

  /* Hero — safe viewport height for iOS Safari */
  .hero-sticky-wrapper {
    height: 100dvh;
    height: 100vh;
    /* fallback */
    padding: var(--sp-lg); /* Breathing room so 3D perspective doesn't clip */
  }

  /* 3D Cube — Properly scaled text for smaller mobile cube */
  .stat-number {
    font-size: 3.5rem; /* Significantly larger numbers */
  }

  .stat-label {
    font-size: 1.3rem; /* Larger labels */
  }

  .cube-code {
    font-size: 1.5rem; /* Scaled down for smaller cube */
  }

  .cube-container {
    transform: none;
    animation: none;
    /* disable floating on mobile to reduce jank */
  }

  .hero-content-wrapper {
    padding: var(--sp-md);
  }

  /* Cube face content adjustments */
  .cube .hero-name {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .cube .hero-label {
    font-size: 0.65rem;
    margin-bottom: var(--sp-sm);
  }

  .cube .hero-tagline {
    font-size: 0.85rem !important;
    line-height: 1.5;
    margin-bottom: var(--sp-md);
  }

  /* Stats inside cube face */
  .cube .hero-stats {
    gap: 0.75rem !important;
    padding: 0 4% !important;
  }

  .cube .stat-number {
    font-size: 1.4rem;
  }

  .cube .stat-label {
    font-size: 0.6rem;
  }

  /* CTA buttons inside cube */
  .cube .hero-cta {
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .cube .hero-cta .btn-primary,
  .cube .hero-cta .btn-secondary {
    padding: 0.55rem 1.1rem;
    font-size: 0.78rem;
  }

  .cube .face h2,
  .cube .face .cube-contact-title {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Card text bigger on mobile */
  .card-title {
    font-size: 1.1rem;
  }

  .card-desc {
    font-size: 0.95rem;
  }

  /* Category text bigger */
  .category-name {
    font-size: 1rem;
  }

  .category-count {
    font-size: 0.8rem;
  }

  /* Footer text bigger */
  .footer-link {
    font-size: 0.95rem;
  }

  .footer-col h4 {
    font-size: 0.8rem;
  }

  /* Hero stats (non-cube) */
  .hero-stats {
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .stat-number {
    font-size: 2rem;
  }

  /* Grids */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Override horizontal scroll to vertical stack */
  .project-horizontal-scroll {
    height: auto;
  }

  .horizontal-sticky-container {
    position: static;
    height: auto;
    display: block;
  }

  .horizontal-track {
    flex-direction: column;
    gap: var(--sp-lg);
    transform: none !important;
  }

  .h-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Newsletter & Contact */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form button {
    width: 100%;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Team card */
  .team-card {
    grid-template-columns: 1fr;
    padding: 1.75rem;
  }

  .team-photo {
    width: 140px;
    height: 140px;
    font-size: 2.75rem;
  }

  /* Project detail */
  .project-hero-area {
    height: 260px;
  }

  .project-hero-symbol {
    font-size: 8rem;
  }

  .project-hero-content {
    padding: 1.5rem;
  }

  .project-meta-bar {
    gap: 0.75rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  /* Filter bar — horizontal scroll on mobile */
  .filter-bar {
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Contact form */
  .contact-form-wrap {
    padding: 1.75rem;
  }

  /* Contact profile card on kontakt.html */
  .contact-profile-card img {
    max-height: 300px;
    object-fit: cover;
  }
}

/* ============================================================
   MOBILE SMALL  (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
  :root {
    --sp-3xl: 2rem;
  }

  /* Hero */
  .hero-name {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1rem;
  }

  /* Categories */
  .categories-grid {
    grid-template-columns: 1fr;
  }

  /* Category card adjustments for single column */
  .category-card {
    padding: var(--sp-md) var(--sp-lg);
  }

  /* Filter buttons */
  .filter-btn {
    font-size: 0.65rem;
    padding: 0.38rem 0.8rem;
  }

  /* School list */
  .school-item {
    flex-direction: column;
    gap: 2px;
  }

  .school-period {
    min-width: auto;
  }

  /* Project hero */
  .project-hero-area {
    height: 220px;
    border-radius: 12px;
  }

  .project-hero-symbol {
    font-size: 5rem;
  }

  /* Sidebar form */
  .sidebar-form {
    padding: 1.25rem;
  }

  /* Newsletter box */
  .newsletter-box {
    padding: 2rem 1.25rem;
  }

  /* Horizontal track cards removed for vertical stack */

  /* Section headers */
  .section-label {
    font-size: 0.85rem;
  }

  .section-desc {
    font-size: 0.95rem;
  }

  /* Contact card */
  .contact-card {
    padding: var(--sp-lg);
  }

  .contact-info-card {
    padding: var(--sp-lg);
  }

  /* Footer newsletter */
  .footer-newsletter-input {
    font-size: 16px;
    /* Prevents iOS zoom on focus */
  }

  /* Form inputs — prevent zoom on iOS */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }
}

/* ============================================================
   IPHONE 16 & SIMILAR  (max-width: 430px)
   ============================================================ */

@media (max-width: 430px) {
  .container {
    padding: 0 1rem;
  }

  /* Cube content fine-tuning for smaller cube */
  .hero-content-wrapper {
    padding: var(--sp-xs) var(--sp-sm);
  }

  .cube .hero-name {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .cube .hero-label {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
  }

  .cube .hero-tagline {
    font-size: 0.75rem !important;
  }

  .cube .hero-stats {
    gap: 0.5rem !important;
    padding: 0 2% !important;
  }

  .cube .stat-number {
    font-size: 1.15rem;
  }

  .cube .stat-label {
    font-size: 0.5rem;
  }

  .cube .hero-cta .btn-primary,
  .cube .hero-cta .btn-secondary {
    padding: 0.45rem 0.9rem;
    font-size: 0.7rem;
  }

  .cube .face h2,
  .cube .face .cube-contact-title {
    font-size: 1.1rem !important;
  }

  .cube-code {
    font-size: 1.2rem;
  }

  /* Header tweaks */
  .nav-link {
    font-size: 1.15rem; /* Increased for mobile tap targets */
  }

  .nav-cta {
    display: inline-flex;
    padding: 0.6rem 1.2rem; /* Larger padding */
    font-size: 1.05rem; /* Larger text */
  }

  /* Contact page sidebar stacking */
  .contact-info-sidebar {
    gap: var(--sp-md);
  }

  /* Project meta */
  .project-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Section spacing reduction */
  .section {
    padding: var(--sp-3xl) 0;
  }

  /* Horizontal section header */
  .horizontal-header-wrap {
    margin-bottom: var(--sp-md);
  }

  .section-header {
    margin-bottom: var(--sp-xl);
  }
}

/* ============================================================
   VERY SMALL SCREENS  (max-width: 360px)
   ============================================================ */

@media (max-width: 360px) {
  .cube .hero-name {
    font-size: 1.8rem;
  }

  .cube .stat-number {
    font-size: 1rem;
  }

  .cube .stat-label {
    font-size: 0.45rem;
  }

  .cube .hero-cta .btn-primary,
  .cube .hero-cta .btn-secondary {
    padding: 0.35rem 0.7rem;
    font-size: 0.65rem;
  }

  .cube .face h2,
  .cube .face .cube-contact-title {
    font-size: 0.95rem !important;
  }

  .cube-code {
    font-size: 1rem;
  }

  /* Horizontal track removed */

  .nav-link {
    font-size: 0.72rem;
  }

  .site-nav {
    gap: 0.5rem;
  }
}