/**
 * Emre Can Simsek — Senior Product Manager
 * Responsive Media Queries & Mobile Optimizations
 */

/* Disable custom cursor on touch/pointer coarse devices */
@media (pointer: coarse), (hover: none) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hero-heading-punchy {
    font-size: 3rem;
  }

  .case-story-section {
    padding: 2.5rem 2rem;
  }

  .case-story-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .appoteket-dual-viewport {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .comparison-center-action {
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem 0;
  }

  .compact-story-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .handdrawn-process-line {
    justify-content: flex-start;
  }

  .career-trajectory-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .trajectory-progress-line {
    display: none;
  }

  .scroll-progress-nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .hero-clean-editorial {
    padding-top: 6.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-heading-punchy {
    font-size: 2.35rem;
  }

  .hero-portrait-photo {
    width: 130px;
    height: 130px;
  }

  .hero-sub-text {
    font-size: 1.05rem;
  }

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

  .hero-btn-row a {
    justify-content: center;
  }

  .hero-doodle-annotation {
    display: none;
  }

  .career-trajectory-track {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 1.25rem;
  }

  .trajectory-node {
    align-items: flex-start;
    padding-left: 2.5rem;
    position: relative;
  }

  .trajectory-dot {
    position: absolute;
    left: 0;
    top: 0;
  }

  .trajectory-preview-tooltip {
    display: none !important;
  }

  .case-story-section {
    padding: 1.75rem 1.25rem;
    border-radius: 20px;
  }

  .exp-metrics-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .case-story-visual-stage {
    padding: 1.25rem;
  }

  .appoteket-annotations-grid {
    grid-template-columns: 1fr;
  }

  .merchandising-flow {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .scale-metrics-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-glass-container {
    padding: 2rem 1.5rem;
  }

  .contact-punchy-title {
    font-size: 2.1rem;
  }

  .case-study-drawer {
    padding: 3rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Interactive demo mockups (Eureka search/analytics, Appoteket admin +
   phone, telecom NOC) are built with fixed pixel dimensions tuned for
   desktop. On small phones they don't have room to breathe by default —
   these overrides free up width and let dense dashboards scroll internally
   instead of clipping or crushing content.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .case-story-section {
    padding: 1.25rem 0.85rem;
  }

  .eureka-demo-surface {
    padding: 1rem 0.75rem;
  }

  /* Phone mockup: shrink to fit the available width instead of clipping */
  .appoteket-phone-shell {
    width: 100%;
    max-width: 290px;
  }

  /* Dense two-column dashboards: keep a readable minimum width for the
     main content column and let the shell scroll horizontally rather
     than crushing text/KPIs unreadably small */
  .appoteket-b2b-admin-shell,
  .telecom-noc-shell {
    grid-template-columns: 100px minmax(260px, 1fr);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .appoteket-sidebar {
    width: 100px;
  }

  /* Feature tab bar (AI Search / Analytics / Merchandising, etc.): let the
     tab group scroll horizontally instead of overflowing the card edge */
  .eureka-demo-tabs-bar {
    gap: 0.5rem;
  }

  .eureka-tabs-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

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