/* ==========================================================================
   RESPONSIVE STYLES - Media queries for tablet/mobile adjustments
   ========================================================================== */

/* Tablet Styles (1024px and below) */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .peptides-grid,
    .medications-grid,
    .receptors-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
    }
    
    .calculator-main {
        gap: 30px;
    }
    
    h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }
    
    .nav-tabs {
        gap: 12px;
    }
    
    .nav-tab {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    
    .search-container {
        padding: 20px;
    }
    
    .filter-container {
        padding: 18px;
    }
    
    .peptide-card,
    .medication-card,
    .receptor-card {
        padding: 25px;
    }
    
    header {
        padding: 35px 0;
    }
}

/* Large Mobile / Small Tablet (768px and below) */
@media (max-width: 768px) {
    /* Layout Adjustments */
    .container {
        padding: 0 12px;
    }
    
    /* Force single column layout for calculator */
    .calculator-main {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 20px;
    }
    
    .calculator-inputs,
    .calculator-results {
        width: 100% !important;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    /* Header Styles */
    header {
        padding: 30px 0;
    }
    
    h1 {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .subtitle {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-bottom: 25px;
    }
    
    /* Navigation */
    .nav-tabs {
        gap: 8px;
        margin-top: 20px;
    }
    
    .nav-tab {
        padding: 12px 20px;
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }
    
    /* Grid Layouts */
    .peptides-grid,
    .medications-grid,
    .receptors-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Cards */
    .peptide-card,
    .medication-card,
    .receptor-card {
        padding: 20px;
    }
    
    .peptide-name,
    .medication-name,
    .receptor-name {
        font-size: 1.3rem;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .card-actions {
        justify-content: center;
        width: 100%;
    }
    
    /* Search */
    .search-container {
        padding: 18px;
        margin-bottom: 25px;
    }
    
    .search-input-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .search-input {
        padding: 14px 16px;
        font-size: 1rem;
    }
    
    .search-button {
        padding: 14px 20px;
        width: 100%;
    }
    
    /* Filters */
    .filter-container {
        padding: 15px;
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-label {
        margin-bottom: 10px;
        text-align: center;
    }
    
    .filter-tags-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    /* Sections */
    .section-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .section-tabs {
        flex-direction: column;
        gap: 2px;
    }
    
    .section-tab {
        text-align: left;
        padding: 12px 16px;
    }
    
    /* Tables */
    .dosage-table {
        font-size: 0.85rem;
    }
    
    .dosage-table th,
    .dosage-table td {
        padding: 8px 10px;
    }
    
    /* PubMed */
    .pubmed-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
    }
    
    .pubmed-toggle {
        align-self: flex-end;
    }
    
    .study-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .study-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    /* Disclaimer */
    .disclaimer-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .disclaimer-text {
        font-size: 0.9rem !important;
    }
    
    body.disclaimer-visible {
        margin-top: 120px !important;
    }
    
    /* Guide Steps */
    .guide-steps {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* Quick Select and Examples */
    .quick-select-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 10px;
    }
    
    /* Header */
    h1 {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    
    .subtitle {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    /* Navigation */
    .nav-tabs {
        gap: 6px;
        margin-top: 15px;
    }
    
    .nav-tab {
        padding: 10px 16px;
        font-size: 0.85rem;
        letter-spacing: 0.2px;
    }
    
    /* Search */
    .search-container {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .search-input {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .search-button {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    /* Cards */
    .peptide-card,
    .medication-card,
    .receptor-card {
        padding: 15px;
        margin-bottom: 12px;
    }
    
    .peptide-name,
    .medication-name,
    .receptor-name {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .card-meta {
        gap: 6px;
    }
    
    .meta-tag {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    /* Sections */
    .section-title {
        font-size: 1.1rem;
        margin: 18px 0 12px 0;
    }
    
    .section-content {
        font-size: 0.9rem;
    }
    
    .section-list li {
        font-size: 0.9rem;
        padding-left: 16px;
    }
    
    .section-highlight {
        padding: 12px 15px;
        margin: 12px 0;
    }
    
    .section-step {
        gap: 10px;
    }
    
    .section-step-number {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
    
    /* Tables */
    .dosage-table {
        font-size: 0.8rem;
    }
    
    .dosage-table th,
    .dosage-table td {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    
    /* Filters */
    .filter-container {
        padding: 12px;
    }
    
    .filter-tag {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    .clear-filters {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    /* PubMed */
    .pubmed-header {
        padding: 12px;
    }
    
    .pubmed-title {
        font-size: 0.95rem;
    }
    
    .pubmed-title::before {
        display: none;
    }
    
    .pubmed-content {
        padding: 12px;
    }
    
    .pubmed-study {
        padding: 12px;
    }
    
    .study-title {
        font-size: 0.95rem;
    }
    
    .study-abstract {
        font-size: 0.85rem;
    }
    
    .study-link {
        width: 100%;
        text-align: center;
        padding: 10px;
        font-size: 0.8rem;
    }
    
    /* Buttons */
    .card-button,
    .header-button {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    
    /* Disclaimer */
    body.disclaimer-visible {
        margin-top: 140px !important;
    }
    
    #medicalDisclaimer {
        padding: 12px 15px !important;
    }
    
    .disclaimer-close {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    /* Typography */
    h1 {
        font-size: 1.6rem;
    }
    
    .subtitle {
        font-size: 0.9rem;
    }
    
    /* Navigation */
    .nav-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    /* Cards */
    .peptide-card,
    .medication-card,
    .receptor-card {
        padding: 12px;
    }
    
    .peptide-name,
    .medication-name,
    .receptor-name {
        font-size: 1.1rem;
    }
    
    /* Search */
    .search-container {
        padding: 12px;
    }
    
    .search-input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* Misc */
    .section-title {
        font-size: 1rem;
    }
    
    .meta-tag {
        padding: 3px 6px;
        font-size: 0.75rem;
    }
}

/* Landscape Mobile Adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .nav-tabs {
        margin-top: 15px;
    }
    
    .tab-content {
        padding: 25px 0;
    }
    
    header {
        padding: 25px 0;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    body.disclaimer-visible {
        margin-top: 90px !important;
    }
}

/* Print Specific Responsive */
@media print {
    .container {
        max-width: none !important;
        padding: 0 !important;
    }
    
    .peptides-grid,
    .medications-grid,
    .receptors-grid {
        grid-template-columns: 1fr !important;
        gap: 10pt !important;
    }
    
    .peptide-card,
    .medication-card,
    .receptor-card {
        page-break-inside: avoid;
        margin-bottom: 10pt !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize for retina displays */
    .peptide-card,
    .medication-card,
    .receptor-card {
        border-width: 1px;
    }
    
    .section-title::before {
        width: 3px;
    }
    
    .filter-tag,
    .meta-tag {
        border-width: 1px;
    }
}