/* ============================================
   RESPONSIVE STYLESHEET
   Breakpoints: 1024px | 768px | 480px | 360px
   ============================================ */

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
  }

  .hero-title { font-size: 2.4rem; }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions { justify-content: center; }
  .hero-stats   { justify-content: center; }

  .hero-visual { order: -1; }

  .hero-card { max-width: 440px; margin: 0 auto; }

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

  .sidebar { order: -1; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

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

  .features-strip .container {
    flex-wrap: wrap;
  }

  .feature-item {
    flex: 1 1 calc(50% - 1px);
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .feature-item:nth-child(odd)    { border-right: 1px solid var(--border); }
  .feature-item:last-child        { border-bottom: none; }
  /* Fix: remove bottom border from both items in last row of 2-col layout */
  .feature-item:nth-last-child(2) { border-bottom: none; }

  /* Section header row on tablet */
  .section-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .section-link {
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
  }
}

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

  :root { font-size: 15px; }

  /* Nav top bar — compact on mobile */
  .nav-top {
    font-size: 0.72rem;
    padding: 5px 12px;
    line-height: 1.5;
    white-space: normal;
  }

  /* Nav */
  .nav-menu { display: none; }
  .hamburger { display: flex; }

  /* Navbar logo */
  .nav-logo .logo-text { font-size: 1.1rem; }

  /* Hero */
  .hero { padding: 48px 16px; }
  .hero-title { font-size: 2rem; }
  .hero-stat .number { font-size: 1.3rem; }
  .hero-stats { gap: 18px; }

  /* Hero badge center on mobile */
  .hero-badge { display: inline-flex; }

  /* Sections */
  .section { padding: 44px 0; }
  .section-title { font-size: 1.6rem; }

  /* Section header row — stack on mobile */
  .section-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
  }

  .section-link {
    font-size: 0.84rem;
    color: var(--primary);
    font-weight: 600;
  }

  /* Feature Strip */
  .feature-item {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .feature-item:last-child { border-bottom: none; }

  /* Grids */
  .version-grid { grid-template-columns: 1fr; }
  .feat-cards   { grid-template-columns: 1fr 1fr; }
  .mode-cards   { grid-template-columns: 1fr; }

  /* Requirements inline grid — CRITICAL FIX */
  .req-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card header — wrap long headings properly */
  .card-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
  }

  .card-header h2 {
    font-size: 1rem;
    flex: 1 1 100%;
    line-height: 1.4;
  }

  .card-header a {
    font-size: 0.82rem;
  }

  /* Tables — prevent cell text overflow */
  .req-table td,
  .req-table th {
    word-break: break-word;
    hyphens: auto;
  }

  /* Contact form grid → single column */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Java vs Bedrock compare grid → single column */
  .compare-grid {
    grid-template-columns: 1fr !important;
  }

  /* Featured version card inner flex → wrap */
  .featured-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Version changelog card header → wrap on mobile */
  .ver-header-row {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  /* CTA */
  .cta-section h2 { font-size: 1.6rem; }
  .cta-actions { flex-direction: column; align-items: center; }

  /* Page Hero */
  .page-hero { padding: 32px 16px; }
  .page-hero h1 { font-size: 1.7rem; }

  /* Tabs */
  .tabs-nav { flex-wrap: nowrap; overflow-x: auto; }
  .tab-btn  { font-size: 0.82rem; padding: 10px 14px; white-space: nowrap; }

  /* Table */
  .req-table { font-size: 0.82rem; }
  .req-table th, .req-table td { padding: 9px 12px; }

  /* Scroll top */
  .scroll-top { bottom: 16px; right: 16px; }

  /* Main layout */
  .main-layout { margin: 24px auto; }

  /* Sidebar full width */
  .download-box { padding: 22px; }
  .sidebar { width: 100%; }

  /* Widget list */
  .widget-list li { font-size: 0.86rem; }
}

/* ---- SMALL MOBILE (max 480px) ---- */
@media (max-width: 480px) {

  /* Hero */
  .hero { padding: 40px 14px; }
  .hero-title { font-size: 1.7rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-direction: column; gap: 10px; align-items: center; }

  /* Grids */
  .feat-cards { grid-template-columns: 1fr; }
  .vc-actions { flex-direction: column; }

  /* Section title */
  .section-title { font-size: 1.4rem; }

  /* Hide nav-top on small phones */
  .nav-top { display: none; }

  /* Buttons */
  .btn { padding: 11px 22px; font-size: 0.88rem; }

  /* Cards */
  .card-body { padding: 16px; }

  /* Card header — stack vertically */
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
  }

  /* Footer */
  .footer-grid { gap: 20px; }

  /* Hero card info — single column */
  .hero-card-info { grid-template-columns: 1fr; gap: 8px; }
  .hero-card { padding: 20px; }

  /* Feature strip — tighter spacing */
  .feature-item { padding: 14px 16px; gap: 10px; }
  .feature-item .feat-icon { width: 36px; height: 36px; font-size: 1rem; }

  /* Mode cards compact */
  .mode-card-header { padding: 16px 16px 0; gap: 10px; }
  .mode-card-body   { padding: 0 16px 16px; font-size: 0.86rem; }

  /* Step items */
  .step-num  { width: 38px; height: 38px; font-size: 0.9rem; flex-shrink: 0; }
  .step-item { gap: 14px; }
  .step-content h4 { font-size: 0.95rem; }
  .step-content p  { font-size: 0.84rem; }

  /* Info box compact */
  .info-box { padding: 13px 16px; font-size: 0.86rem; gap: 10px; }

  /* Download box */
  .download-box { padding: 18px; }

  /* Version card */
  .version-card { padding: 18px; }

  /* CTA */
  .cta-section { padding: 44px 16px; }
  .cta-section h2 { font-size: 1.5rem; }
  .cta-section p { font-size: 0.9rem; }

  /* Section header row — wrap */
  .section-header-row {
    flex-wrap: wrap;
    gap: 2px;
  }

  /* Version changelog headers → stack on small screens */
  .ver-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Featured version inner → stack emoji + title */
  .featured-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Footer */
  .footer-grid { padding-bottom: 28px; }
  .footer-col ul li { margin-bottom: 6px; }

  /* Widget */
  .widget-body { padding: 14px; }
  .widget-list li { padding: 8px 0; }
}

/* ---- EXTRA SMALL (max 360px) ---- */
@media (max-width: 360px) {

  :root { font-size: 14px; }

  /* Hero */
  .hero { padding: 32px 12px; }
  .hero-title { font-size: 1.45rem; }
  .hero-badge { font-size: 0.7rem; padding: 4px 10px; }
  .hero-desc  { font-size: 0.88rem; }
  .hero-stat .number { font-size: 1.1rem; }
  .hero-stats { gap: 8px; }

  /* Hero card */
  .hero-card { padding: 16px; }
  .hero-card-info { grid-template-columns: 1fr; gap: 8px; }
  .hero-card-icon { width: 50px; height: 50px; font-size: 1.5rem; }
  .hero-card-title { font-size: 1.1rem; }

  /* Navbar */
  .navbar { padding: 10px 12px; }
  .nav-logo .logo-text { font-size: 1rem; }
  .nav-logo .logo-icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .nav-logo .logo-sub { font-size: 0.58rem; }

  /* Main layout */
  .main-layout { padding: 0 12px; }

  /* Sections */
  .section-title { font-size: 1.25rem; }
  .section-subtitle { font-size: 0.88rem; }

  /* Cards */
  .card-header { padding: 12px 14px; }
  .card-header h2 { font-size: 0.92rem; }
  .card-body { padding: 14px; }

  /* Step items */
  .step-num  { width: 34px; height: 34px; font-size: 0.82rem; }
  .step-item { gap: 10px; padding: 14px 0; }
  .step-content h4 { font-size: 0.9rem; }
  .step-content p  { font-size: 0.82rem; }

  /* Version cards */
  .version-card { padding: 14px; }
  .vc-icon { width: 46px; height: 46px; font-size: 1.3rem; }
  .vc-info h3 { font-size: 0.92rem; }
  .vc-desc { font-size: 0.82rem; }

  /* Feat cards */
  .feat-card { padding: 18px 14px; }
  .feat-card .fc-icon { font-size: 2rem; margin-bottom: 10px; }
  .feat-card h3 { font-size: 0.92rem; }
  .feat-card p { font-size: 0.8rem; }

  /* Mode cards */
  .mode-card-header { padding: 14px 14px 0; gap: 8px; }
  .mode-card-header .mc-icon { width: 44px; height: 44px; font-size: 1.3rem; }
  .mode-card-header h3 { font-size: 0.95rem; }
  .mode-card-body { padding: 0 14px 14px; font-size: 0.82rem; }
  .mode-difficulty { font-size: 0.7rem; }

  /* FAQ */
  .faq-question { font-size: 0.87rem; padding: 13px 14px; }
  .faq-answer { font-size: 0.84rem; padding: 13px 14px; }

  /* Tables */
  .req-table { font-size: 0.76rem; }
  .req-table th, .req-table td { padding: 7px 10px; }

  /* Buttons */
  .btn { padding: 10px 18px; font-size: 0.84rem; }

  /* Sidebar widgets */
  .widget-body { padding: 12px; }
  .widget-list li { font-size: 0.82rem; padding: 7px 0; }
  .widget-list li span.count { font-size: 0.7rem; padding: 2px 6px; }

  /* Download box */
  .download-box { padding: 14px; }
  .download-box .dbox-icon { font-size: 2.2rem; }
  .download-box h3 { font-size: 1rem; }
  .download-box p { font-size: 0.78rem; }

  /* Notification bar */
  .notif-bar { font-size: 0.76rem; padding: 6px 10px; }

  /* Info box */
  .info-box { padding: 11px 13px; font-size: 0.82rem; gap: 8px; }
  .info-box-icon { font-size: 1.1rem; }

  /* Feature strip */
  .feature-item { padding: 12px 14px; gap: 8px; }
  .feature-item .feat-icon { width: 32px; height: 32px; font-size: 0.9rem; }
  .feature-item .feat-title { font-size: 0.84rem; }
  .feature-item .feat-desc { font-size: 0.72rem; }

  /* Footer */
  .footer-grid { gap: 18px; }
  .footer-brand p { font-size: 0.78rem; }
  .footer-col h4 { font-size: 0.82rem; margin-bottom: 10px; }
  .footer-col ul li a { font-size: 0.78rem; }
  .footer-bottom { font-size: 0.74rem; padding: 14px 12px; }

  /* CTA */
  .cta-section h2 { font-size: 1.3rem; }
  .cta-section p  { font-size: 0.86rem; }

  /* Badges */
  .badge { font-size: 0.68rem; padding: 2px 8px; }

  /* Section header row */
  .section-header-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 4px;
  }

  .section-link { font-size: 0.78rem; margin-top: 2px; }
}

/* ---- PRINT ---- */
@media print {
  .header, .footer, .scroll-top, .nav-drawer,
  .hero-visual, .sidebar, .cta-section { display: none !important; }

  .main-layout { grid-template-columns: 1fr; }
  body { background: white; color: black; }
}