/**
* Quality Page Styles
* Extracted from quality.html inline CSS
* All hardcoded colors converted to Design Tokens
* 
* @layer components
*/

/* ============================================
QUALITY PAGE LAYOUT
============================================ */
.quality-page {
padding-top: 0;
}

/* ============================================
QUALITY HERO
============================================ */
.quality-hero {
position: relative;
padding: var(--spacing-8, 32px) 0;
margin-bottom: var(--spacing-8, 32px);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
border-radius: var(--radius-xl, 16px);
overflow: hidden;
}

.quality-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}

.quality-hero-content {
position: relative;
z-index: 1;
max-width: 700px;
}

.quality-hero-title {
font-size: var(--font-size-4xl, 3rem);
font-weight: 800;
color: #ffffff;
margin-bottom: var(--spacing-4, 16px);
line-height: 1.1;
}

@media (max-width: 768px) {
.quality-hero-title {
font-size: var(--font-size-3xl, 2.25rem);
}
}

.quality-hero-desc {
font-size: var(--font-size-lg, 1.125rem);
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}

/* ============================================
STATS SECTION
============================================ */
.quality-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-5, 20px);
margin-bottom: var(--spacing-8, 32px);
}

@media (max-width: 1024px) {
.quality-stats {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.quality-stats {
grid-template-columns: 1fr;
}
}

.quality-stat-item {
background: var(--bg-primary);
border-radius: var(--radius-xl, 16px);
padding: var(--spacing-6, 24px);
text-align: center;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-stat-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

.quality-stat-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(16, 185, 129, 0.1);
border-radius: var(--radius-lg, 12px);
margin: 0 auto var(--spacing-4, 16px);
}

.quality-stat-icon svg {
width: 28px;
height: 28px;
color: #10b981;
}

.quality-stat-number {
font-size: var(--font-size-3xl, 1.875rem);
font-weight: 800;
color: var(--text-primary);
margin-bottom: var(--spacing-2, 8px);
line-height: 1.1;
}

.quality-stat-label {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-secondary, #6b7280);
}

/* ============================================
QUALITY CONTENT SECTIONS
============================================ */
.quality-section {
margin-bottom: var(--spacing-8, 32px);
}

.quality-section-header {
text-align: center;
margin-bottom: var(--spacing-6, 24px);
}

.quality-section-title {
font-size: var(--font-size-3xl, 1.875rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-3, 12px);
}

.quality-section-desc {
font-size: var(--font-size-lg, 1.125rem);
color: var(--color-text-secondary, #6b7280);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

/* ============================================
PROCESS SECTION
============================================ */
.quality-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-5, 20px);
}

@media (max-width: 1024px) {
.quality-process-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.quality-process-grid {
grid-template-columns: 1fr;
}
}

.quality-process-card {
position: relative;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl, 16px);
padding: var(--spacing-6, 24px);
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quality-process-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
border-color: #10b981;
}

.quality-process-number {
position: absolute;
top: var(--spacing-4, 16px);
right: var(--spacing-4, 16px);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
font-size: var(--font-size-sm, 0.875rem);
font-weight: 700;
border-radius: 50%;
}

.quality-process-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(16, 185, 129, 0.1);
border-radius: var(--radius-lg, 12px);
margin: 0 auto var(--spacing-4, 16px);
}

.quality-process-icon svg {
width: 32px;
height: 32px;
color: #10b981;
}

.quality-process-title {
font-size: var(--font-size-lg, 1.125rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-2, 8px);
}

.quality-process-desc {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-secondary, #6b7280);
line-height: 1.5;
margin: 0;
}

/* ============================================
CERTIFICATIONS SECTION
============================================ */
.quality-certs-section {
background: var(--bg-secondary);
border-radius: var(--radius-xl, 16px);
padding: var(--spacing-8, 32px);
}

.quality-certs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-5, 20px);
}

@media (max-width: 1024px) {
.quality-certs-grid {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 768px) {
.quality-certs-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.quality-certs-grid {
grid-template-columns: 1fr;
}
}

.quality-cert-card {
background: var(--bg-primary);
border-radius: var(--radius-lg, 12px);
padding: var(--spacing-5, 20px);
text-align: center;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-cert-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

.quality-cert-badge {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-3, 12px);
background: var(--bg-secondary);
border-radius: 50%;
}

.quality-cert-badge svg {
width: 40px;
height: 40px;
color: var(--accent);
}

.quality-cert-name {
font-size: var(--font-size-base, 1rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-1, 4px);
}

.quality-cert-desc {
font-size: var(--font-size-xs, 0.75rem);
color: var(--color-text-tertiary, #9ca3af);
}

/* ============================================
TESTING SECTION
============================================ */
.quality-testing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-5, 20px);
}

@media (max-width: 768px) {
.quality-testing-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.quality-testing-grid {
grid-template-columns: 1fr;
}
}

.quality-testing-card {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl, 16px);
padding: var(--spacing-5, 20px);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-testing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}

.quality-testing-header {
display: flex;
align-items: center;
gap: var(--spacing-3, 12px);
margin-bottom: var(--spacing-3, 12px);
}

.quality-testing-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(37, 99, 235, 0.1);
border-radius: var(--radius-md, 8px);
flex-shrink: 0;
}

.quality-testing-icon svg {
width: 24px;
height: 24px;
color: var(--accent);
}

.quality-testing-title {
font-size: var(--font-size-base, 1rem);
font-weight: 700;
color: var(--text-primary);
}

.quality-testing-list {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 8px);
padding: 0;
margin: 0;
list-style: none;
}

.quality-testing-list li {
display: flex;
align-items: center;
gap: var(--spacing-2, 8px);
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-secondary, #6b7280);
}

.quality-testing-list li svg {
width: 16px;
height: 16px;
color: #10b981;
flex-shrink: 0;
}

/* ============================================
COMMITMENT SECTION
============================================ */
.quality-commitment-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-5, 20px);
}

@media (max-width: 768px) {
.quality-commitment-grid {
grid-template-columns: 1fr;
}
}

.quality-commitment-card {
position: relative;
background: var(--bg-primary);
border-radius: var(--radius-xl, 16px);
padding: var(--spacing-6, 24px);
text-align: center;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
border: 1px solid var(--border-color);
}

.quality-commitment-icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
border-radius: 50%;
margin: 0 auto var(--spacing-4, 16px);
}

.quality-commitment-icon svg {
width: 36px;
height: 36px;
color: var(--accent);
}

.quality-commitment-title {
font-size: var(--font-size-lg, 1.125rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-2, 8px);
}

.quality-commitment-desc {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-secondary, #6b7280);
line-height: 1.6;
margin: 0;
}

/* ============================================
CTA SECTION
============================================ */
.quality-cta {
position: relative;
padding: var(--spacing-8, 32px);
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-xl, 16px);
text-align: center;
overflow: hidden;
}

.quality-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}

.quality-cta-content {
position: relative;
z-index: 1;
}

.quality-cta-title {
font-size: var(--font-size-3xl, 1.875rem);
font-weight: 700;
color: #ffffff;
margin-bottom: var(--spacing-4, 16px);
}

.quality-cta-text {
font-size: var(--font-size-lg, 1.125rem);
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-6, 24px);
}

.quality-cta-buttons {
display: flex;
gap: var(--spacing-4, 16px);
justify-content: center;
flex-wrap: wrap;
}

.quality-cta-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-2, 8px);
padding: var(--spacing-3, 12px) var(--spacing-5, 20px);
font-size: var(--font-size-base, 1rem);
font-weight: 600;
border-radius: var(--radius-lg, 12px);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-cta-btn-primary {
background: #ffffff;
color: var(--accent);
}

.quality-cta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.quality-cta-btn-secondary {
background: transparent;
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.5);
}

.quality-cta-btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #ffffff;
}