/* ============================================================
   responsive.css — Responsive Design Breakpoints
   Mobile-first approach with desktop enhancements
   ============================================================

   BREAKPOINTS:
   - Mobile: < 480px (phones in portrait)
   - Mobile Landscape: 481px - 768px (phones in landscape, small tablets)
   - Tablet: 769px - 1024px (tablets, small laptops)
   - Desktop: 1025px+ (laptops, desktops, large screens)

   ============================================================ */

/* ── MOBILE: UP TO 480PX ──────────────────────────────────── */

@media (max-width: 480px) {
  :root {
    --nav-h: 56px;
    --sidebar-w: 0;
  }

  body {
    font-size: 15px;
  }

  /* Navigation */
  #site-nav {
    height: var(--nav-h);
    padding: 0 16px;
  }

  .nav-logo img {
    height: 36px;
  }

  .nav-toggle {
    display: flex;
  }

  /* Sidebar - Hidden on mobile */
  .sidebar {
    display: none;
  }

  .sidebar-overlay {
    display: none;
  }

  /* Hero Section */
  .hero {
    padding: calc(var(--nav-h) + 30px) 16px 50px 16px;
    min-height: auto;
  }

  .hero-eyebrow {
    font-size: 0.6rem;
    margin-bottom: 16px;
  }

  .hero-title {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    margin-bottom: 16px;
  }

  .hero-sub {
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.6;
  }

  .hero-img {
    width: 100%;
    margin-bottom: 20px;
  }

  .hero-cta {
    padding: 11px 20px;
    font-size: 0.75rem;
  }

  .hero-scroll-hint {
    display: none;
  }

  /* Content Wrap */
  .content-wrap {
    margin-left: 0;
    padding: 0 0 40px 0;
  }

  .section {
    padding: 0;
  }

  .section-inner {
    padding: 40px 16px;
    max-width: 100%;
  }

  .section-tag {
    font-size: 0.6rem;
    margin-bottom: 8px;
  }

  .section h2 {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    margin-bottom: 18px;
  }

  .section h3 {
    font-size: 1rem;
    margin: 28px 0 10px 0;
  }

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

  .section-illustration {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px 0;
  }

  /* Code Blocks */
  .code-block {
    margin: 14px 0;
    border-radius: 4px;
  }

  .code-label {
    font-size: 0.55rem;
    padding: 5px 12px;
  }

  .code-block pre {
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .code-block code {
    font-size: 0.75rem;
  }

  /* Callouts */
  .callout {
    padding: 12px 14px;
    margin: 16px 0;
    font-size: 0.87rem;
  }

  /* Prereq Box */
  .prereq-box {
    padding: 16px 18px;
    margin: 16px 0;
  }

  .prereq-list li {
    font-size: 0.88rem;
    padding-left: 16px;
  }

  /* Spec Grid */
  .spec-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 16px 0;
  }

  .spec-card {
    padding: 12px;
  }

  .spec-label {
    font-size: 0.72rem;
    margin-bottom: 4px;
  }

  .spec-value {
    font-size: 0.78rem;
    margin-bottom: 6px;
  }

  .spec-note {
    font-size: 0.62rem;
  }

  /* Rule List */
  .rule-list {
    margin: 16px 0;
  }

  .rule-item {
    grid-template-columns: 1fr;
  }

  .rule-port {
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
  }

  .rule-source {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  /* Footer */
  .site-footer {
    margin-left: 0;
    padding: 32px 16px;
  }

  .footer-inner {
    gap: 10px;
  }

  .footer-logo img {
    height: 28px;
  }

  .footer-copy {
    font-size: 0.62rem;
  }

  /* Step Content */
  .step-content p {
    font-size: 0.93rem;
  }

  /* Prerequisite List */
  .prereq-list {
    gap: 6px;
  }

  /* Sidebar Coffee Widget - Hidden */
  .coffee-widget {
    display: none;
  }

  /* Progress Bar */
  .progress-bar {
    height: 1.5px;
  }
}

/* ── MOBILE LANDSCAPE: 481PX - 768PX ─────────────────────── */

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --sidebar-w: 0;
  }

  body {
    font-size: 16px;
  }

  #site-nav {
    padding: 0 20px;
  }

  .nav-logo img {
    height: 40px;
  }

  .hero {
    padding: calc(var(--nav-h) + 40px) 28px 60px 28px;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 2.6rem);
    margin-bottom: 20px;
  }

  .hero-sub {
    font-size: 0.95rem;
    margin-bottom: 28px;
  }

  .content-wrap {
    margin-left: 0;
    padding: 0 0 60px 0;
  }

  .section-inner {
    padding: 50px 28px;
    max-width: 100%;
  }

  .section h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 20px;
  }

  .section h3 {
    font-size: 1.05rem;
    margin: 30px 0 12px 0;
  }

  .section-illustration {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px 0;
  }

  .code-block {
    margin: 16px 0;
  }

  .code-label {
    font-size: 0.6rem;
    padding: 6px 14px;
  }

  .code-block pre {
    padding: 14px;
  }

  .code-block code {
    font-size: 0.8rem;
  }

  .callout {
    padding: 14px 16px;
    margin: 18px 0;
    font-size: 0.9rem;
  }

  .prereq-box {
    padding: 18px 20px;
    margin: 18px 0;
  }

  .spec-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .spec-card {
    padding: 14px;
  }

  .rule-item {
    grid-template-columns: 1fr;
  }

  .rule-port {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
  }

  .rule-source {
    padding: 12px 14px;
  }

  .site-footer {
    margin-left: 0;
    padding: 36px 28px;
  }

  .sidebar {
    display: none;
  }

  .sidebar-overlay {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .coffee-widget {
    display: none;
  }
}

/* ── TABLET: 769PX - 1024PX ──────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --sidebar-w: 190px;
  }

  .section-inner {
    padding: 60px 32px;
  }

  .section h2 {
    font-size: clamp(1.55rem, 3.2vw, 2rem);
  }

  .hero {
    padding: calc(var(--nav-h) + 56px) 32px 80px calc(var(--sidebar-w) + 32px);
  }

  .spec-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .rule-item {
    grid-template-columns: 200px 1fr;
  }

  .content-wrap {
    margin-left: var(--sidebar-w);
  }

  .site-footer {
    margin-left: var(--sidebar-w);
    padding: 40px 32px;
  }

  .sidebar {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .sidebar-overlay {
    display: none;
  }

  .coffee-widget {
    display: flex;
  }
}

/* ── DESKTOP: 1025PX+ ────────────────────────────────────── */

@media (min-width: 1025px) {
  :root {
    --sidebar-w: 210px;
  }

  .section-inner {
    padding: 80px 48px;
    max-width: 860px;
  }

  .section h2 {
    font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  }

  .hero {
    padding: calc(var(--nav-h) + 56px) 40px 80px calc(var(--sidebar-w) + 40px);
  }

  .spec-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rule-item {
    grid-template-columns: 200px 1fr;
  }

  .content-wrap {
    margin-left: var(--sidebar-w);
  }

  .site-footer {
    margin-left: var(--sidebar-w);
    padding: 44px 48px;
  }

  .sidebar {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .sidebar-overlay {
    display: none;
  }

  .coffee-widget {
    display: flex;
  }

  .section-illustration {
    float: right;
    width: 260px;
    margin: 0 0 20px 32px;
  }
}

/* ── EXTRA LARGE SCREENS: 1400PX+ ───────────────────────── */

@media (min-width: 1400px) {
  .section-inner {
    padding: 90px 60px;
    max-width: 920px;
  }

  .hero {
    padding: calc(var(--nav-h) + 60px) 60px 100px calc(var(--sidebar-w) + 60px);
  }

  .hero-title {
    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  }
}

/* ── ORIENTATION: LANDSCAPE ──────────────────────────────── */

@media (orientation: landscape) and (max-height: 600px) {
  .hero {
    padding: calc(var(--nav-h) + 20px) 20px 40px;
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin-bottom: 12px;
  }

  .hero-sub {
    margin-bottom: 16px;
    font-size: 0.9rem;
  }

  .hero-scroll-hint {
    display: none;
  }
}

/* ── TOUCH DEVICES ────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch target sizes */
  .tutorial-link,
  a,
  button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Remove hover effects on touch devices */
  .tutorial-card:hover {
    transform: none;
  }

  /* Add active state for touch feedback */
  .tutorial-link:active {
    background: var(--teal-glow-str);
    border-color: var(--teal);
  }

  /* Reduce transitions on touch devices */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── HIGH DPI / RETINA DISPLAYS ──────────────────────────── */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* SVG and icon optimizations for high DPI */
  .coffee-svg {
    image-rendering: -webkit-optimize-contrast;
  }

  /* Subtle adjustments for crisp display */
  .hero-cta {
    border-width: 1px;
  }

  .tutorial-card {
    border-width: 1px;
  }
}

/* ── DARK MODE / PREFERS DARK ────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* Already using dark theme as default, no additional changes needed */
}

/* ── REDUCED MOTION ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .tutorial-card:hover {
    transition: none;
    transform: none;
  }

  .progress-bar {
    transition: none;
  }
}

/* ── LANDING PAGE RESPONSIVE ─────────────────────────────── */

@media (max-width: 768px) {
  .landing-page .hero {
    padding: calc(var(--nav-h) + 30px) 20px 50px 20px;
  }

  .landing-page .hero-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }

  .landing-content {
    padding: 40px 20px;
  }

  .tutorial-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tutorial-card {
    padding: 20px;
  }

  .tutorial-title {
    font-size: 1.15rem;
  }

  .tutorial-desc {
    font-size: 0.9rem;
  }

  .tutorial-meta {
    font-size: 0.75rem;
    gap: 12px;
  }

  .tutorial-link {
    padding: 8px 14px;
    font-size: 0.75rem;
  }
}

@media (min-width: 769px) {
  .landing-page .hero {
    padding: calc(var(--nav-h) + 56px) 40px 80px 40px;
  }

  .landing-content {
    padding: 60px 48px;
  }

  .tutorial-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
  }

  .tutorial-card {
    padding: 28px;
  }
}