/* ============================================================================
   HYDROPHOBICITY & MEMBRANE INTERACTIONS PAGE - SPECIFIC STYLES
   Leverages: variables.css, components.css, content.css, ed_rss.css
   ============================================================================ */

/* Reuse from other pages */
/* .concept-card, .concept-header, .concept-icon, .concept-body {
    /* Defined in pi.css
}

.sequence-display, .sequence-label, .sequence-text, .sequence-info {
    /* Defined in net_charge.css and pi.css
} */

/* ===== ENTROPY DIAGRAM ===== */
.entropy-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.entropy-state {
    text-align: center;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
}

.entropy-state.favorable {
    border-color: var(--primary-blue);
    background: rgba(102, 126, 234, 0.05);
}

.entropy-value {
    display: block;
    margin-top: var(--spacing-sm);
    font-weight: var(--font-weight-bold);
    color: var(--primary-blue);
}

.entropy-arrow {
    font-size: 2rem;
    color: var(--primary-blue);
    font-weight: var(--font-weight-bold);
}

/* ===== SCALES GRID ===== */
.scales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.scale-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--border-light);
}

.scale-card.highlighted {
    border-left-color: var(--primary-blue);
    background: rgba(102, 126, 234, 0.05);
}

.scale-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

/* ===== ΔG INTERPRETATION ===== */
.dg-interpretation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.dg-card {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
}

.dg-card.positive { background: rgba(231, 76, 60, 0.1); border-left: 4px solid #e74c3c; }
.dg-card.neutral { background: rgba(149, 165, 166, 0.1); border-left: 4px solid #95a5a6; }
.dg-card.negative { background: rgba(52, 152, 219, 0.1); border-left: 4px solid #3498db; }

/* ===== METHOD CARDS ===== */
.method-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    margin: var(--spacing-xl) 0;
    border-left: 4px solid var(--primary-blue);
}

.method-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

.equation-box {
    background: var(--bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
    font-family: 'Courier New', monospace;
    text-align: center;
    border: 2px solid var(--primary-blue);
}

/* ===== AMPHIPATHIC HELIX ===== */
.amphipathic-explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}

.amphipathic-visual {
    display: grid;
    gap: var(--spacing-lg);
}

.helix-representation {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
}

.helix-side, .helix-wheel {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.wheel-explanation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.wheel-exp-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary-blue);
}

.wheel-exp-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

/* ===== MELITTIN CASE STUDY ===== */
.melittin-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.melittin-prop-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid #f39c12;
}

.melittin-prop-card h4 {
    color: #f39c12;
    margin-bottom: var(--spacing-md);
}

/* ===== MECHANISM CARDS ===== */
.mechanism-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    margin: var(--spacing-xl) 0;
    border: 2px solid var(--primary-blue);
}

.mechanism-steps {
    display: grid;
    gap: var(--spacing-md);
}

.mech-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.step-content {
    background: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

/* ===== APPLICATION GRID ===== */
.application-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.app-card {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-blue);
    font-size: var(--font-size-sm);
}

/* ===== CPP COMPONENTS ===== */
.cpp-requirements-grid, .cpp-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.cpp-req-card, .cpp-example-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary-blue);
}

.cpp-req-card h4, .cpp-example-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

.cpp-sequence {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-blue);
    text-align: center;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    margin: var(--spacing-md) 0;
}

.mechanism-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.mech-pathway {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary-blue);
}

.mech-pathway h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

/* ===== AMP COMPONENTS ===== */
.selectivity-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    margin: var(--spacing-xl) 0;
    border: 2px solid var(--primary-blue);
}

.membrane-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
}

.membrane-type {
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.amp-families-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.amp-family-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid #27ae60;
}

.amp-family-card h4 {
    color: #27ae60;
    margin-bottom: var(--spacing-md);
}

/* ===== MECHANISM MODELS ===== */
.mechanisms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.mechanism-detail-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary-blue);
}

.mechanism-detail-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

.model-diagram {
    background: var(--bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
}

.model-diagram pre {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: center;
}

/* ===== BINDING/PENETRATION ===== */
.binding-penetration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}

.bp-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary-blue);
}

.bp-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

.insertion-depth-scale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.depth-marker {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
    border-left: 4px solid var(--border-light);
}

.depth-marker.surface { border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.05); }
.depth-marker.shallow { border-left-color: #f39c12; background: rgba(243, 156, 18, 0.05); }
.depth-marker.deep { border-left-color: #3498db; background: rgba(52, 152, 219, 0.05); }
.depth-marker.transmembrane { border-left-color: #27ae60; background: rgba(39, 174, 96, 0.05); }

/* ===== DESIGN COMPONENTS ===== */
.design-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}

.design-app-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary-blue);
}

.design-app-card h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

.design-rules {
    font-size: var(--font-size-sm);
}

.design-rules strong {
    display: block;
    color: var(--text-primary);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

/* ===== MISTAKE & TIP CARDS (reuse from net_charge.css) ===== */
.mistake-card {
    border-left: 4px solid #e74c3c;
}

.mistake-card .property-name {
    color: #e74c3c;
}

.tip-card {
    border-left: 4px solid #27ae60;
}

.tip-card .property-name {
    color: #27ae60;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .entropy-diagram {
        grid-template-columns: 1fr;
    }

    .entropy-arrow {
        transform: rotate(90deg);
    }

    .amphipathic-explanation,
    .wheel-explanation-grid,
    .mechanism-comparison,
    .membrane-comparison,
    .binding-penetration-grid {
        grid-template-columns: 1fr;
    }

    .model-diagram pre {
        font-size: 0.75rem;
    }
}