/**
 * Base styles - Typography, resets, and global styles
 * Shared across all pages in the portfolio
 */

/* Hide default cursor for custom cursor experience */
* {
  cursor: none !important;
}

body {
  overflow: hidden;
  height: 100vh;
}

/* Responsive text scaling using clamp() */
.responsive-heading-xl {
  font-size: clamp(2.5rem, 5vw, 6rem);
  line-height: 1.1;
}

.responsive-heading-lg {
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.2;
}

.responsive-heading-md {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.3;
}

.responsive-heading-sm {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
}

.responsive-text-lg {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.responsive-text-base {
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  line-height: 1.7;
}

/* Responsive spacing utilities */
.section-padding {
  padding-top: clamp(3rem, 8vh, 5rem);
  padding-bottom: clamp(1.5rem, 4vh, 2rem);
}

.section-padding-extra {
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

/* Responsive image constraints */
.responsive-image {
  max-height: clamp(200px, 25vh, 300px);
  width: 100%;
  object-fit: cover;
}

/* Restore native cursor/tap feedback on touch devices */
@media (hover: none) and (pointer: coarse) {
  * {
    cursor: auto !important;
  }
}

/* Respect OS-level "Reduce Motion" preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }
}

/* Compact layout for shorter viewports (e.g. 14" laptops with browser chrome) */
@media (max-height: 900px) {
  .section-padding {
    padding-top: clamp(1.25rem, 3vh, 2.5rem);
    padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
  }

  .section-padding-extra {
    padding-top: clamp(1.25rem, 3vh, 2.5rem);
    padding-bottom: clamp(1rem, 2.5vh, 1.5rem);
  }

  .responsive-heading-xl {
    font-size: clamp(2rem, 4.5vw, 4.5rem);
  }

  .responsive-heading-lg {
    font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  }

  .responsive-heading-md {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
  }
}