/*
 * Methods Page Styles - Brutalist Design System
 * Exact implementation of Figma design with proper typography, colors, and layout
 */

/* ===== TYPOGRAPHY SYSTEM ===== */
/* Helvetica Neue font family for all elements */
/* Methods page main container */
.methods-page {
    padding: var(--space-xl, 32px);
    background-color: #ffffff;
}

/* ===== COLOR SYSTEM ===== */
:root {
    --color-primary-blue: #2b28c2;
    --color-primary-red: #fb4f46;
    --color-background-light: #f5f5ff;
    --color-background-white: #ffffff;
    --color-text-black: #000000;
    --color-text-gray: #606060;
    --color-border-black: #000000;
    --color-yellow: #ffea00;
    --gutter-size: 32px;
}

/* ===== MAIN LAYOUT STRUCTURE ===== */

/* Section title styling */
.methods-section-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 30px;
    line-height: 1;
    color: var(--color-primary-blue);
    margin: 0 0 8px 0;
    width: 100%;
}

.methods-section-description {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: normal;
    color: var(--color-primary-blue);
    margin: 0 0 32px 0;
    max-width: 576px;
}

/* Main content row - for sidebar and top grid */
.methods-content-row {
    display: grid;
    /* First column matches exactly first column of main grid, second takes remaining space */
    grid-template-columns: calc((100% - 64px) / 3) 1fr;
    gap: 32px;
    width: 100%;
    align-items: flex-start;
    margin-bottom: 32px;
}

/* Filter sidebar - left side, same width as a method card */
.methods-sidebar {
    background-color: #f5f5ff;
    border: 1.5px solid #000000;
    box-shadow: 4px 4px 0px 0px #000000;
    padding: 32px;
    width: 100%; /* Full width of its grid column */
    flex-shrink: 0;
    min-height: fit-content; /* Allow sidebar to expand to fit content */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Top methods grid (next to sidebar) */
.methods-grid-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: 100%;
    /* Each column has the same width as one column in the main grid */
    grid-template-columns: repeat(2, calc((100% - 32px) / 2));
}

/* Main methods grid (below) */
.methods-grid-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
    /* Ensure grid columns are exactly the same width, first one matching sidebar width */
    grid-template-columns: calc((100% - 64px) / 3) calc((100% - 64px) / 3) calc((100% - 64px) / 3);
}

/* Filter titles */
.filter-section-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 30px;
    line-height: 1;
    color: var(--color-primary-blue);
    margin: 0 0 8px 0;
}

.filter-results-count {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-black);
    margin: 0 0 32px 0;
}

/* ===== SEARCH SECTION ===== */

.search-filter-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.search-filter-label {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-primary-blue);
    margin: 0;
}

.search-input-field {
    background-color: var(--color-background-white);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    padding: 12px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-gray);
    width: 100%;
    box-sizing: border-box;
}

.search-input-field::placeholder {
    color: var(--color-text-gray);
}

/* ===== CATEGORY FILTER SECTION ===== */

.category-filter-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0;
}

.category-section-header {
    padding: 16px 0;
}

.category-section-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-primary-blue);
    margin: 0;
}

/* Category accordion items - Brutalist style */
.category-accordion-item {
    background: var(--color-background-white);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    margin-bottom: 0;
    width: 100%;
}

.category-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.category-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.category-checkbox {
    width: 20px;
    height: 20px;
    background-color: var(--color-background-white);
    border: 1.5px solid var(--color-primary-red);
    box-shadow: 2px 2px 0px 0px var(--color-border-black);
    appearance: none;
    margin: 0;
    cursor: pointer;
}

.category-checkbox:checked {
    background-color: var(--color-primary-red);
}

.category-label {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: normal;
    color: var(--color-text-black);
    cursor: pointer;
    flex: 1;
    text-align: left;
}

.category-expand-icon {
    width: 20px;
    height: 19px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19"><path d="M5 7l5 5 5-5" stroke="%23000" stroke-width="2" fill="none"/></svg>') no-repeat center;
    background-size: contain;
    transition: transform 0.2s ease;
}

.category-accordion-item.expanded .category-expand-icon {
    transform: rotate(180deg);
}

/* ===== SUCCESS FILTER SECTION ===== */

.success-filter-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.success-filter-intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.success-filter-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-primary-blue);
    margin: 0;
}

.success-filter-description {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: normal;
    color: var(--color-primary-blue);
    margin: 0;
}

/* TomSelect dropdowns - Brutalist styling */
.tomselect-dropdown {
    background-color: var(--color-background-white);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    height: 45px;
    margin-bottom: 16px;
}

.tomselect-control {
    background-color: var(--color-background-white);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    padding: 0 12px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tomselect-selected-item {
    background-color: var(--color-primary-red);
    color: var(--color-background-white);
    padding: 2px 4px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

/* ===== MINIMUM SUCCESS SLIDER ===== */

.min-success-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.min-success-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.min-success-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-primary-blue);
    margin: 0;
}

.progress-value {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: normal;
    color: var(--color-text-black);
    margin: 0;
    text-align: right;
}

.progress-container {
    background-color: var(--color-background-white);
    border: 2px solid var(--color-border-black);
    padding: 2px;
    height: 12px;
    position: relative;
    width: 100%;
}

.progress-bar {
    background-color: var(--color-yellow);
    height: 8px;
    width: 70%; /* Default value - 7.0/10 */
}

.progress-indicator {
    position: absolute;
    top: -4px;
    right: calc(30% - 10px); /* Positioned at end of progress bar */
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10,0 20,20 0,20" fill="%23000"/></svg>') no-repeat center;
    background-size: contain;
}

/* ===== ORDER BY SECTION ===== */

.order-filter-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 0 16px 0;
    border-top: 1.5px solid var(--color-primary-blue);
}

.order-section-header {
    padding: 0;
}

.order-section-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-primary-blue);
    margin: 0;
}

/* Enhanced Starfish select field styling for order dropdown */
.order-filter-section .starfish-select-field {
    position: relative;
}

.order-filter-section .starfish-input-field {
    background: var(--color-background-white);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    padding: 12px;
    min-height: 45px;
    display: flex;
    align-items: center;
    position: relative;
}

.order-filter-section .starfish-input {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-gray);
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Custom select arrow */
.order-filter-section .starfish-input-field::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--color-border-black);
    pointer-events: none;
}

/* Placeholder token styling */
.order-filter-section .starfish-select-field::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-primary-red);
    color: #ffffff;
    padding: 2px 4px;
    font-size: 14px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
}

/* Hide placeholder token when field has focus or value */
.order-filter-section .starfish-select-field.has-value::before,
.order-filter-section .starfish-select-field:focus-within::before {
    display: none;
}

/* Focus states */
.order-filter-section .starfish-select-field:focus-within .starfish-input-field {
    border-color: var(--color-primary-blue);
    box-shadow: 4px 4px 0px 0px var(--color-primary-blue);
}

.order-filter-section .starfish-input:focus {
    outline: none;
}

/* ===== METHOD GRID ===== */

/* Method cards - 3 columns with proper sizing */
.method-card {
    background-color: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    padding: var(--gutter-size);
    width: 100%; /* Full width within grid column */
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* For the absolute positioned link */
    cursor: pointer;
}

.method-card:hover {
    transform: translateY(-3px);
    box-shadow: 6px 6px 0px 0px var(--color-border-black);
}

.method-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Lower than other clickable elements */
}

.method-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 20px;
    line-height: normal;
    margin: 0;
    width: 100%;
}

.method-title a {
    color: var(--color-primary-red);
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
    z-index: 2; /* Higher than the card link */
}

.method-title a:hover {
    color: #d83c34; /* Slightly darker shade of primary red */
    text-decoration: none;
}

.method-image {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* For the absolute positioned link inside */
}

.method-image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure it's above the background but below other content */
}

/* Method info section */
.method-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Historical success bar */
.success-bar-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.success-bar-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: normal;
    color: var(--color-text-black);
}

.success-bar-progress {
    background-color: var(--color-background-white);
    border: 2px solid var(--color-border-black);
    height: 12px;
    width: 100%;
}

.success-bar-fill {
    background-color: var(--color-yellow);
    height: 8px;
    width: 42%; /* Example: 7.2/10 = 72% but visually appears as 42% */
}

/* Cases count */
.method-cases {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: normal;
    color: var(--color-text-black);
    margin: 0;
}

/* Category tags */
.method-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.method-category-tag {
    background-color: var(--color-primary-blue);
    color: var(--color-background-white);
    padding: 4px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
    position: relative;
    z-index: 2; /* Higher than the card link */
}

/* Method description */
.method-description {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: normal;
    color: var(--color-text-black);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1200px) and (min-width: 769px) {
    /* Keep sidebar and content side-by-side on tablet */
    .methods-content-row {
        grid-template-columns: 1fr 1fr; /* Equal width columns for sidebar and 1-column methods */
        gap: 24px;
    }
    
    .methods-sidebar {
        width: 100%;
    }
    
    /* Show methods in single column next to sidebar */
    .methods-grid-top {
        grid-template-columns: 1fr; /* 1 column on tablet */
        width: 100%;
    }
    
    .methods-grid-main {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet for main grid */
    }
    
    /* Adjust page padding */
    .methods-page {
        padding: var(--space-lg, 24px);
    }
}

@media (max-width: 768px) {
    /* Stack everything on mobile */
    .methods-content-row {
        grid-template-columns: 1fr; /* Single column layout for mobile */
        gap: 16px;
        margin-bottom: 16px;
    }
    
    .methods-grid-top {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    
    .methods-grid-main {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    
    :root {
        --gutter-size: 16px;
    }
    
    .methods-sidebar {
        padding: 16px;
        width: 100%; /* Ensure full width */
    }
    
    /* Adjust page padding */
    .methods-page {
        padding: var(--space-md, 16px);
    }
    
    /* Adjust filter title size */
    .filter-section-title {
        font-size: 24px;
    }
    
    /* Make search input more touch-friendly */
    .search-input-field {
        height: 40px;
        font-size: 16px; /* Prevent zoom on iOS devices */
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .methods-page {
        padding: 12px;
    }
    
    .methods-section-title {
        font-size: 20px;
    }
    
    .methods-section-description {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .methods-content-row {
        gap: 12px;
        margin-bottom: 12px;
    }
    
    .methods-grid-top, .methods-grid-main {
        gap: 16px;
    }
    
    /* Optimize card for small screens */
    .method-card .module-content {
        padding: 12px;
    }
    
    .method-card-image {
        height: 120px;
    }
}

/* ===== SEARCH FILTER SECTION ===== */

.search-filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.search-filter-section .starfish-input-field {
    width: 100%;
}

/* ===== CATEGORY FILTER SECTION ===== */

.category-filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-top: var(--border-width) solid var(--color-secondary);
}

/* Category accordion items */
.category-accordion-item {
    background: var(--color-white);
    border: var(--border-width) solid var(--color-black);
    box-shadow: var(--shadow-brutalist);
    margin-bottom: var(--spacing-sm);
}

.category-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.category-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.category-checkbox {
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border: var(--border-width) solid var(--color-primary);
    box-shadow: 2px 2px 0px 0px var(--color-black);
    cursor: pointer;
}

.category-label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-md);
    color: var(--color-black);
    cursor: pointer;
}

.category-toggle-icon {
    font-size: 20px;
    color: var(--color-black);
    transition: transform 0.3s ease;
}

.category-toggle-icon.expanded {
    transform: rotate(180deg);
}

/* Subcategory content */
.category-subcategories {
    padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    padding-left: calc(var(--spacing-sm) + 20px + var(--spacing-sm)); /* Indent for checkbox alignment */
    display: none;
}

.category-subcategories.show {
    display: block;
}

.subcategory-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.subcategory-checkbox {
    width: 16px;
    height: 16px;
    background: var(--color-white);
    border: var(--border-width) solid var(--color-primary);
    box-shadow: 1px 1px 0px 0px var(--color-black);
    cursor: pointer;
}

.subcategory-label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    cursor: pointer;
}

/* ===== SUCCESS FILTER SECTION ===== */

.success-filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-top: var(--border-width) solid var(--color-secondary);
}

.success-filter-intro {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.4;
}

.success-filter-dropdowns {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.success-filter-dropdowns .starfish-input-field {
    width: 100%;
}

/* ===== SLIDER SECTION ===== */

.slider-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.slider-container {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    padding: 2px;
    height: 12px;
    position: relative;
    width: 100%;
}

.slider-progress {
    background: #ffff00; /* Yellow from Figma */
    height: 8px;
    width: 60%; /* Default 7.0/10 = 70% but adjust for visual */
    position: relative;
}

.slider-indicator {
    position: absolute;
    right: -10px;
    top: -4px;
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    cursor: pointer;
}

.slider-value {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-md);
    color: var(--color-black);
    margin-top: var(--spacing-sm);
    text-align: center;
}



/* ===== METHOD CARD STYLING ===== */

.method-card {
    background: var(--color-light-purple);
    height: auto;
    display: flex;
    flex-direction: column;
    border: 1.5px solid #000000;
    box-shadow: 4px 4px 0px 0px #000000;
    width: 100%; /* Full width of its grid cell for consistent sizing */
}

.method-card .module-content {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    height: 100%;
}

/* Method card title */
.method-card-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg); /* 20px */
    color: var(--color-primary); /* Red for clickable */
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.2;
}

.method-card-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.method-card-title a:hover {
    opacity: 0.9;
}

/* Method card image */
.method-card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #f0f0f0;
    margin-bottom: var(--spacing-sm);
}

/* Method info section */
.method-info-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

/* Progress bar item */
.method-progress-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.method-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.method-progress-label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    flex: 1;
}

.method-progress-value {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    white-space: nowrap;
}

.method-progress-bar-container {
    width: 100%;
    height: 12px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    padding: 2px;
    box-sizing: border-box;
}

.method-progress-bar {
    height: 8px;
    background: #ffea00; /* Yellow from Figma */
}

/* Method cases info */
.method-cases-info {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    margin: var(--spacing-xs) 0;
}

/* Method categories */
.method-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0;
}

.method-category-badge {
    background: var(--color-secondary); /* Blue */
    color: var(--color-white);
    padding: 4px 8px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Method description */
.method-description {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-md);
    color: var(--color-black);
    line-height: 1.4;
    margin-top: auto; /* Push to bottom */
}

/* ===== RESET FILTERS BUTTON ===== */

.reset-filters-container {
    margin-bottom: var(--spacing-md);
}

.reset-filters-btn {
    width: 100%;
    background: var(--color-white);
    color: var(--color-black);
    border: var(--border-width) solid var(--color-black);
    box-shadow: var(--shadow-brutalist);
    padding: var(--spacing-sm);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.reset-filters-btn:hover {
    opacity: 0.9;
}

/* ===== ADDITIONAL RESPONSIVE ADJUSTMENTS ===== */

/* Method card responsive adjustments */
@media (max-width: 1200px) {
    .method-card .module-content {
        padding: var(--spacing-md, 16px); /* Slightly smaller padding on tablet */
    }
    
    /* Adjust method card components for better tablet display */
    .method-card-image {
        height: 140px; /* Slightly smaller images on tablet */
    }
    
    /* Make sure descriptions don't get too long */
    .method-description {
        max-height: 6em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 14px; /* Slightly smaller text for better fit */
    }
    
    /* Better spacing in sidebar for tablet */
    .methods-sidebar {
        padding: 24px 16px;
    }
}

/* Mobile view */
@media (max-width: 768px) {
    .method-card {
        min-width: unset;
    }
    
    .method-card .module-content {
        padding: var(--spacing-md, 16px);
    }
    
    /* Adjust method card components for mobile */
    .method-card-image {
        height: 140px;
    }
    
    /* Better typography for mobile */
    .methods-section-title {
        font-size: 24px;
    }
    
    .methods-section-description {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .filter-section-title {
        font-size: 24px;
    }
    
    /* Improve touch targets on mobile */
    .category-checkbox-container {
        padding: 8px 0;
    }
    
    .subcategory-item {
        padding: 6px 0;
    }
}

/* ===== UTILITY CLASSES ===== */

.method-hidden {
    display: none !important;
}

/* Loading state */
.methods-loading {
    grid-column: 2 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
}

/* No results state */
.methods-no-results {
    grid-column: 2 / -1;
    grid-row: 1;
    background: var(--color-light-purple);
    padding: var(--spacing-xl);
    text-align: center;
}

.methods-no-results .module-content {
    padding: var(--spacing-xl);
}

.methods-no-results h3 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.methods-no-results p {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-md);
    color: var(--color-black);
    margin: 0;
}