/**
 * Portfolio Filter Styles
 * Clean text with global category tag styling for active state
 * Supports both BEM classes and legacy classes for backward compatibility
 */

/* === BASE STYLES === */
.portfolio-filter {
    margin-bottom: 2rem;
}

/* Layout Modifiers */
.portfolio-filter--inline {
    /* Default styling for inline layout */
}

.portfolio-filter--spaced {
    /* Default styling for spaced layout */
}

/* === BEM CONTAINER STYLES === */
.portfolio-filter__container {
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.portfolio-filter__container--inline {
    /* Inline-specific container styles */
}

.portfolio-filter__container--spaced {
    /* Spaced-specific container styles */
}

/* === BEM BUTTON SECTION STYLES === */
.portfolio-filter__buttons-section {
    flex-shrink: 0;
}

.portfolio-filter__buttons {
    gap: var(--category-tags-gap, 8px);
    flex-wrap: wrap;
}

/* === BEM BUTTON STYLES === */
.portfolio-filter__button {
    /* Clean minimal styling for default state */
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    font-family: var(--main-font-family, system-ui, -apple-system, sans-serif);

    /* Minimal default styling - same dimensions as active state to prevent layout shift */
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);
    background: transparent;
    color: var(--theme-text-color, #222222);
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5; /* Consistent line height */
    box-sizing: border-box; /* Include padding in height calculation */
}

.portfolio-filter__button:hover {
    text-decoration: none;
    opacity: 0.7;
}

.portfolio-filter__button--active {
    /* Use global category tag styling for active state */
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);
    background-color: var(--category-background, transparent);
    color: var(--category-text-color, var(--theme-text-color, #222222));
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    font-weight: 500;
}

.portfolio-filter__button--active:hover {
    opacity: 0.8;
}

/* Button Type Modifiers */
.portfolio-filter__button--all {
    /* Specific styling for "All" button if needed */
}

.portfolio-filter__button--category {
    /* Specific styling for category buttons if needed */
}

/* === BEM SEARCH STYLES === */
.portfolio-filter__search-section {
    flex-shrink: 0;
}

.portfolio-filter__search {
    position: relative;
}

.portfolio-filter__search-input {
    /* Match category tag styling exactly */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);

    /* Match category tag font styling exactly */
    font-family: var(--main-font-family, system-ui, -apple-system, sans-serif);
    font-size: 0.875rem; /* Match filter button font size */
    color: var(--theme-text-color, #222222);
    font-weight: 400;
    line-height: 1.5; /* Match button line height */

    /* Input specific styles */
    outline: none;
    transition: all 0.3s ease;
    width: 120px;
    min-width: 100px;
    white-space: nowrap;
    box-sizing: border-box; /* Include padding in height calculation */

    /* Remove browser defaults */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.portfolio-filter__search-input::placeholder {
    color: var(--theme-text-color, #222222);
    opacity: 0.5;
    font-weight: 400;
}

.portfolio-filter__search-input:focus {
    outline: none;
    border-color: var(--theme-accent-color, #ff6b35);
    box-shadow: none;
}

/* === SORTING CONTROLS === */
.portfolio-filter__sorting-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.portfolio-filter__sorting-select {
    /* Match search input and button styling */
    background: transparent !important;
    background-color: transparent !important;
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);

    /* Match font styling */
    font-family: var(--main-font-family, system-ui, -apple-system, sans-serif);
    font-size: 0.875rem;
    color: var(--theme-text-color, #222222);
    font-weight: 400;
    line-height: 1.5;

    /* Control styles */
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 100px;

    /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 28px;
}

.portfolio-filter__sorting-select:focus {
    outline: none;
    border-color: var(--theme-accent-color, #ff6b35);
}

.portfolio-filter__sorting-select:hover {
    border-color: var(--theme-accent-color, #ff6b35);
}

.portfolio-filter__direction-toggle {
    /* Match button styling */
    background: transparent;
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);

    /* Font styling */
    font-family: var(--main-font-family, system-ui, -apple-system, sans-serif);
    font-size: 1rem;
    color: var(--theme-text-color, #222222);
    line-height: 1.5;

    /* Control styles */
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: auto;
    box-sizing: border-box;
}

.portfolio-filter__direction-toggle:hover {
    border-color: var(--theme-accent-color, #ff6b35);
    color: var(--theme-accent-color, #ff6b35);
}

.portfolio-filter__direction-toggle:focus {
    outline: none;
    border-color: var(--theme-accent-color, #ff6b35);
}

.portfolio-filter__direction-toggle .direction-icon {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* === MODULAR ALIGNMENT SYSTEM === */
/* HIGH SPECIFICITY - Override all Tailwind classes */

/* Inline Layout Alignment */
.portfolio-filter .filter-align-left.filter-container.flex,
.portfolio-filter .filter-align-left.portfolio-filter__container.flex {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.portfolio-filter .filter-align-center.filter-container.flex,
.portfolio-filter .filter-align-center.portfolio-filter__container.flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.portfolio-filter .filter-align-right.filter-container.flex,
.portfolio-filter .filter-align-right.portfolio-filter__container.flex {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* Spaced Layout Alignment */
.portfolio-filter .filter-align-left.filter-spaced-container.flex,
.portfolio-filter .filter-align-left.portfolio-filter__container--spaced.flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 1rem !important;
}

.portfolio-filter .filter-align-center.filter-spaced-container.flex,
.portfolio-filter .filter-align-center.portfolio-filter__container--spaced.flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 1rem !important;
}

.portfolio-filter .filter-align-right.filter-spaced-container.flex,
.portfolio-filter .filter-align-right.portfolio-filter__container--spaced.flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    flex-direction: row-reverse !important;
    gap: 1rem !important;
}

/* === LEGACY CLASS SUPPORT === */
/* Maintain backward compatibility with existing implementations */

/* Container base styles */
.filter-container {
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-spaced-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-buttons-side {
    flex-shrink: 0;
}

.filter-search-side {
    flex-shrink: 0;
}

.filter-buttons {
    gap: var(--category-tags-gap, 8px);
    flex-wrap: wrap;
}

.filter-button {
    /* Clean minimal styling for default state */
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    font-family: var(--main-font-family, system-ui, -apple-system, sans-serif);

    /* Minimal default styling - same dimensions as active state to prevent layout shift */
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);
    background: transparent;
    color: var(--theme-text-color, #222222);
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5; /* Consistent line height */
    box-sizing: border-box; /* Include padding in height calculation */
}

.filter-button:hover {
    text-decoration: none;
    opacity: 0.7;
}

.filter-button.active {
    /* Use global category tag styling for active state */
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);
    background-color: var(--category-background, transparent);
    color: var(--category-text-color, var(--theme-text-color, #222222));
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    font-weight: 500;
}

.filter-button.active:hover {
    opacity: 0.8;
}

/* Search Field Styles - Match category tags exactly */
.filter-search {
    position: relative;
}

.search-input {
    /* Match category tag styling exactly */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: var(--category-border, none);
    border-radius: var(--category-border-radius, 6px);
    padding: var(--category-vertical-padding, 2px) var(--category-horizontal-padding, 8px);

    /* Match category tag font styling exactly */
    font-family: var(--main-font-family, system-ui, -apple-system, sans-serif);
    font-size: 0.875rem; /* Match filter button font size */
    color: var(--theme-text-color, #222222);
    font-weight: 400;
    line-height: 1.5; /* Match button line height */

    /* Input specific styles */
    outline: none;
    transition: all 0.3s ease;
    width: 120px;
    min-width: 100px;
    white-space: nowrap;
    box-sizing: border-box; /* Include padding in height calculation */

    /* Remove browser defaults */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.search-input::placeholder {
    color: var(--theme-text-color, #222222);
    opacity: 0.5;
    font-weight: 400;
}

.search-input:focus {
    outline: none;
    border-color: var(--theme-accent-color, #ff6b35);
    box-shadow: none;
}

/* === GALLERY ITEM TRANSITIONS === */
.gallery-item {
    transition: all 0.3s ease;
}

.gallery-item.filter-hidden {
    opacity: 0;
    transform: scale(0.8);
}

.gallery-item.search-hidden {
    opacity: 0;
    transform: scale(0.8);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .portfolio-filter__button,
    .filter-button {
        font-size: 0.875rem; /* Keep readable, larger touch target */
        padding: 8px 14px; /* Larger touch targets (min 44px height) */
    }

    .portfolio-filter__search-input,
    .search-input {
        width: 100%; /* Full width on mobile */
        max-width: 250px;
        min-width: 120px;
        font-size: 0.875rem; /* Keep readable */
        padding: 8px 14px; /* Match button padding */
    }

    .portfolio-filter__container,
    .filter-container {
        gap: 0.75rem; /* Better spacing for touch targets */
    }

    .portfolio-filter__buttons,
    .filter-buttons {
        gap: 10px; /* Slightly larger gap for mobile */
    }

    /* Stack spaced layout on mobile */
    .portfolio-filter__container--spaced,
    .filter-spaced-container {
        flex-direction: column !important;
        align-items: stretch;
        gap: 1rem;
    }

    .portfolio-filter__buttons-section,
    .portfolio-filter__search-section,
    .filter-buttons-side,
    .filter-search-side {
        width: 100%;
    }

    /* Center everything on mobile for spaced layout */
    .portfolio-filter__container--spaced .portfolio-filter__buttons,
    .filter-spaced-container .filter-buttons {
        justify-content: center;
    }

    .portfolio-filter__container--spaced .portfolio-filter__search,
    .filter-spaced-container .filter-search {
        display: flex;
        justify-content: center;
    }

    .portfolio-filter__container--spaced .portfolio-filter__search-input,
    .filter-spaced-container .search-input {
        max-width: 100%; /* Full width for stacked layout */
    }
}