/* Premium Grade Description - Interactive Accordion */

.grade-section {
padding: 4vw 4vw;
background: #f8fafc;
display: flex;
flex-direction: column;
align-items: center;
}

.grade-container {
width: 90%;
max-width: 1400px;
display: flex;
flex-direction: column;
gap: 1.5vw;
}

/* Accordion Item */
.grade-accordion {
background: #ffffff;
border-radius: 1vw;
box-shadow: 0 0.5vw 1.5vw rgba(0, 58, 93, 0.05);
overflow: hidden;
border: none; /* No borders! */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.grade-accordion:hover {
box-shadow: 0 1vw 3vw rgba(0, 58, 93, 0.12);
transform: translateY(-0.2vw); /* Slight lift effect instead of borders */
}

.grade-accordion.active {
box-shadow: 0 1vw 3vw rgba(0, 58, 93, 0.15); /* More prominent shadow for active */
transform: translateY(-0.2vw);
}

/* Accordion Header */
.accordion-header {
padding: clamp(15px, 2vw, 25px);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: #ffffff;
}

.header-content {
display: flex;
align-items: center;
gap: 1.5vw;
}

.grade-badge {
background: var(--brand-blue);
color: #fff;
padding: 0.4vw 1.2vw;
border-radius: 50px;
font-size: clamp(12px, 1vw, 14px);
font-weight: 800;
text-transform: uppercase;
transition: background 0.3s ease;
}

.grade-accordion.active .grade-badge {
background: var(--brand-green);
}

.accordion-header h3 {
margin: 0;
color: var(--brand-blue);
font-size: clamp(16px, 1.4vw, 22px);
font-weight: 800;
letter-spacing: 1px;
}

.toggle-icon {
font-size: clamp(20px, 1.8vw, 28px);
color: var(--brand-blue);
font-weight: 300;
transition: transform 0.3s ease, color 0.3s ease;
}

.grade-accordion.active .toggle-icon {
transform: rotate(45deg);
color: var(--brand-green);
}

/* Accordion Content */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
background: #fafbfc;
}

.accordion-inner {
padding: 0 clamp(15px, 2vw, 25px) clamp(20px, 2.5vw, 30px) clamp(15px, 2vw, 25px);
}

.accordion-inner p {
margin: 0;
color: #475569;
font-size: clamp(14px, 1.1vw, 18px);
line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
.grade-section {
padding: 10vw 6vw;
}

.grade-container {
gap: 4vw;
}

.grade-accordion {
border-radius: 2vw;
}

.grade-accordion.active {
/* No border changes on mobile either */
}

.accordion-header h3 {
font-size: 4.5vw;
}

.grade-badge {
font-size: 3vw;
padding: 1vw 3vw;
}

.accordion-inner p {
font-size: 4vw;
}
}