/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   Data Documentation Page
   ============================================ */

/* Animations & Enhancements */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
}
.nav.scrolled { padding: 12px 40px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; }

/* iPad Pro (1024px - 1199px) */
@media (max-width: 1199px) {
    .hero { padding: 140px 40px 60px !important; }
    .hero-title { font-size: 44px !important; }
    .tam-breakdown { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    .lineage-diagram { padding: 32px !important; }
}

/* iPad / Tablets (768px - 1023px) */
@media (max-width: 1023px) {
    .nav { padding: 14px 24px !important; }
    .nav-logo { font-size: 18px !important; }
    .nav-links { gap: 16px !important; }
    .nav-link { font-size: 13px !important; }
    .hero { padding: 120px 32px 48px !important; }
    .hero-badge { padding: 6px 14px !important; font-size: 12px !important; }
    .hero-title { font-size: 38px !important; line-height: 1.2 !important; }
    .hero-subtitle { font-size: 17px !important; }
    .main { padding: 48px 32px !important; }
    .section-title { font-size: 26px !important; }
    .section-subtitle { font-size: 16px !important; }
    .lineage-diagram { padding: 24px !important; border-radius: 16px !important; }
    .lineage-title { font-size: 20px !important; }
    .lineage-box { min-width: 140px !important; padding: 12px 16px !important; font-size: 12px !important; }
    .dataset-card { border-radius: 16px !important; }
    .dataset-header { padding: 20px 24px !important; flex-direction: column !important; align-items: flex-start !important; }
    .dataset-title { font-size: 18px !important; }
    .dataset-body { padding: 24px !important; }
    .tam-calc { padding: 32px !important; border-radius: 16px !important; }
    .tam-title { font-size: 22px !important; }
    .tam-equation { font-size: 13px !important; }
    .tam-item-value { font-size: 26px !important; }
    .footer { padding: 36px 32px !important; }
}

/* iPhone Plus / Large Mobile (481px - 767px) */
@media (max-width: 767px) {
    .nav { padding: 12px 20px !important; }
    .nav-logo { font-size: 16px !important; }
    .nav-links { gap: 8px !important; }
    .nav-link { font-size: 11px !important; padding: 6px 10px !important; }
    .hero { padding: 100px 20px 40px !important; }
    .hero-badge { padding: 5px 12px !important; font-size: 10px !important; }
    .hero-title { font-size: 28px !important; }
    .hero-subtitle { font-size: 15px !important; }
    .main { padding: 36px 20px !important; }
    .section-title { font-size: 22px !important; }
    .section-subtitle { font-size: 14px !important; }
    .lineage-diagram { padding: 20px !important; border-radius: 14px !important; }
    .lineage-title { font-size: 18px !important; }
    .lineage-row { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
    .lineage-box { min-width: 100% !important; padding: 14px 16px !important; font-size: 13px !important; }
    .lineage-arrow { margin: 8px 0 !important; font-size: 20px !important; }
    .lineage-arrow-horizontal { display: none !important; }
    .dataset-card { border-radius: 14px !important; margin-bottom: 20px !important; }
    .dataset-header { padding: 16px 20px !important; gap: 12px !important; }
    .dataset-badge { font-size: 9px !important; padding: 4px 10px !important; }
    .dataset-title { font-size: 16px !important; }
    .dataset-filename { font-size: 10px !important; display: block !important; margin-top: 8px !important; word-break: break-all !important; white-space: normal !important; }
    .dataset-body { padding: 20px !important; }
    .dataset-desc { font-size: 14px !important; }
    .lineage-info { padding: 14px 16px !important; }
    .lineage-info-content { flex-direction: column !important; gap: 12px !important; }
    .lineage-info-value { font-size: 12px !important; }
    .fields-grid { gap: 5px !important; }
    .field-tag { font-size: 10px !important; padding: 4px 8px !important; }
    .sample-table-wrapper { margin: 0 -20px !important; padding: 0 20px !important; }
    .sample-table th { padding: 8px 10px !important; font-size: 9px !important; }
    .sample-table td { padding: 6px 10px !important; font-size: 9px !important; }
    .usage-section { padding: 16px 18px !important; }
    .usage-text { font-size: 13px !important; }
    .tam-calc { padding: 24px 20px !important; border-radius: 14px !important; }
    .tam-title { font-size: 18px !important; }
    .tam-formula { padding: 16px !important; }
    .tam-equation { font-size: 11px !important; line-height: 2.4 !important; word-break: break-word !important; white-space: normal !important; }
    .tam-breakdown { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .tam-item { padding: 14px !important; }
    .tam-item-value { font-size: 22px !important; }
    .tam-item-label { font-size: 11px !important; }
    .footer { padding: 28px 20px !important; }
    .footer-text { font-size: 12px !important; }
}

/* iPhone / Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    .nav { padding: 10px 16px !important; }
    .nav-logo { font-size: 14px !important; }
    .nav-links { gap: 4px !important; }
    .nav-link { font-size: 9px !important; padding: 5px 6px !important; }
    .hero { padding: 90px 16px 32px !important; }
    .hero-badge { padding: 4px 10px !important; font-size: 9px !important; }
    .hero-title { font-size: 24px !important; }
    .hero-subtitle { font-size: 14px !important; }
    .main { padding: 28px 16px !important; }
    .section-title { font-size: 20px !important; }
    .section-subtitle { font-size: 13px !important; }
    .lineage-diagram { padding: 16px !important; border-radius: 12px !important; }
    .lineage-title { font-size: 16px !important; }
    .lineage-box { padding: 12px 14px !important; font-size: 12px !important; }
    .dataset-card { border-radius: 12px !important; }
    .dataset-header { padding: 14px 16px !important; }
    .dataset-badge { font-size: 8px !important; }
    .dataset-title { font-size: 15px !important; }
    .dataset-body { padding: 16px !important; }
    .dataset-desc { font-size: 13px !important; }
    .lineage-info { padding: 12px 14px !important; }
    .field-tag { font-size: 9px !important; padding: 3px 6px !important; }
    .sample-table-wrapper { margin: 0 -16px !important; padding: 0 16px !important; }
    .sample-table th { padding: 6px 8px !important; font-size: 8px !important; }
    .sample-table td { padding: 5px 8px !important; font-size: 8px !important; max-width: 80px !important; }
    .tam-calc { padding: 20px 16px !important; border-radius: 12px !important; }
    .tam-title { font-size: 16px !important; }
    .tam-equation { font-size: 10px !important; }
    .tam-breakdown { grid-template-columns: 1fr !important; gap: 8px !important; }
    .tam-item { padding: 12px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
    .tam-item-value { font-size: 20px !important; margin-bottom: 0 !important; }
    .tam-item-label { font-size: 11px !important; text-align: right !important; }
    .footer { padding: 24px 16px !important; }
    .footer-text { font-size: 11px !important; }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding: 80px 32px 32px !important; }
    .tam-breakdown { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .dataset-card:hover, .lineage-box:hover { transform: none !important; box-shadow: none !important; }
    .nav-link { min-height: 44px !important; display: flex !important; align-items: center !important; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}