/* ==========================================================================
   Compressors Module - Reciprocating Specific Styles
   Extends compressors-shared.css for reciprocating-specific components
   Matches centrifugal module styling - uses base CSS without color overrides
   ========================================================================== */

/* ==========================================================================
   Application Cards - Reciprocating-specific applications
   (Gathering, Gas Lift, Transmission)
   ========================================================================== */
.recip-module .application-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.recip-module .application-card {
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid;
}

.recip-module .application-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.recip-module .application-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 4px;
    color: white;
    letter-spacing: 0.05em;
}

.recip-module .application-card ul {
    margin: 0 0 0.75rem 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.recip-module .application-card ul li {
    margin-bottom: 0.25rem;
}

.recip-module .application-card ul a {
    text-decoration: none;
    transition: color 0.2s;
}

.recip-module .application-card ul a:hover {
    text-decoration: underline;
}

.recip-module .application-card .note {
    font-size: 0.75rem;
    font-style: italic;
    margin: 0;
    opacity: 0.8;
}

/* Gathering - Blue theme (matches centrifugal pipeline) */
.recip-module .application-card.gathering {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #93c5fd;
}

.recip-module .application-card.gathering h4 {
    color: #1e40af;
}

.recip-module .application-card.gathering .application-badge {
    background: #3b82f6;
}

.recip-module .application-card.gathering ul {
    color: #2563eb;
}

.recip-module .application-card.gathering ul a {
    color: #2563eb;
}

.recip-module .application-card.gathering ul a:hover {
    color: #1e40af;
}

.recip-module .application-card.gathering .note {
    color: #1e40af;
}

/* Gas Lift - Green theme (matches centrifugal process) */
.recip-module .application-card.gaslift {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #86efac;
}

.recip-module .application-card.gaslift h4 {
    color: #166534;
}

.recip-module .application-card.gaslift .application-badge {
    background: #22c55e;
}

.recip-module .application-card.gaslift ul {
    color: #15803d;
}

.recip-module .application-card.gaslift ul a {
    color: #15803d;
}

.recip-module .application-card.gaslift ul a:hover {
    color: #166534;
}

.recip-module .application-card.gaslift .note {
    color: #166534;
}

/* Transmission - Cyan theme (matches centrifugal refrigeration) */
.recip-module .application-card.transmission {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    border-color: #67e8f9;
}

.recip-module .application-card.transmission h4 {
    color: #0e7490;
}

.recip-module .application-card.transmission .application-badge {
    background: #06b6d4;
}

.recip-module .application-card.transmission ul {
    color: #0891b2;
}

.recip-module .application-card.transmission ul a {
    color: #0891b2;
}

.recip-module .application-card.transmission ul a:hover {
    color: #0e7490;
}

.recip-module .application-card.transmission .note {
    color: #0e7490;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .recip-module .application-grid {
        grid-template-columns: 1fr;
    }
}