/* ================================
     Component Styles
================================ */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.75rem;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
}

.btn:hover {
    background-color: var(--color-gray-lighter);
}

.btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Filter Tab Buttons */
.filter-tab {
    padding: 0.75rem;
    min-width: 18.375rem; /* 294px */
    background-color: var(--color-gray-light);
    color: var(--color-gray-dark);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.filter-tab--active {
    background-color: var(--color-black);
    color: var(--color-white);
}

.filter-subtab {
    padding: 0.75rem;
    min-width: auto;
    background-color: var(--color-gray-light);
    color: var(--color-gray-dark);
}

.filter-subtab--active {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Project/Document Cards */
.card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__icon svg {
    width: 100%;
    height: 100%;
}

.card__content {
    flex: 1;
    min-width: 0;
}

.card__title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-medium);
    color: var(--color-black);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Filter Boxes */
.filter-box {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 23px */
}

.filter-box:not(:last-child) {
    margin-bottom: 1.5rem;
}

.filter-box__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-box__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-primary);
    flex: 1;
}

.filter-box__toggle {
    width: 0.775rem; /* 12.397px */
    height: 0.125rem; /* 2px */
    background-color: var(--color-primary);
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-base);
}

.filter-box__toggle::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    transform: rotate(90deg);
    transition: opacity var(--transition-base);
}

.filter-box--collapsed .filter-box__toggle::after {
    opacity: 0;
}

.filter-box__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-box--collapsed .filter-box__content {
    display: none;
}

/* Checkboxes */
.checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    cursor: pointer;
    user-select: none;
}

.checkbox__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox__box {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-black);
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.checkbox__input:checked + .checkbox__box {
    background-color: var(--color-black);
}

.checkbox__input:checked + .checkbox__box::after {
    content: "✓";
    color: var(--color-white);
    font-size: 0.75rem;
}

.checkbox__input:focus + .checkbox__box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.checkbox__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-black);
}

/* Dropdown/Select */
.dropdown {
    position: relative;
}

.dropdown__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1875rem; /* 19px */
    padding: 0.625rem;
    background-color: var(--color-gray-lighter);
    border: none;
    border-radius: 0.625rem; /* 10px */
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-black);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown__trigger:hover {
    background-color: var(--color-gray-light);
}

.dropdown__arrow {
    width: 0.75rem;
    height: 0.5625rem;
    transition: transform var(--transition-fast);
}

.dropdown--open .dropdown__arrow {
    transform: rotate(180deg);
}

.dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border-radius: 0.625rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 15rem;
    overflow-y: auto;
    z-index: 10;
}

.dropdown--open .dropdown__menu {
    display: block;
}

.dropdown__option {
    padding: 0.625rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown__option:hover {
    background-color: var(--color-gray-lighter);
}

/* Search Input */
.search-input {
    width: 100%;
    padding: 0.625rem;
    background-color: var(--color-gray-lighter);
    border: none;
    border-radius: 0.625rem;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-black);
    transition: background-color var(--transition-fast);
}

.search-input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    background-color: var(--color-white);
}

.search-input::placeholder {
    color: var(--color-black);
    opacity: 1;
}

/* Scrollable List */
.scrollable-list {
    display: flex;
    gap: 3.1875rem; /* 51px */
}

.scrollable-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.scrollable-list__scrollbar {
    width: 0.627rem; /* 10.035px */
    height: 3.75rem; /* 60px */
    background-color: var(--color-gray-light);
    border-radius: 0.375rem; /* 6px */
    flex-shrink: 0;
}

/* Range Slider */
.range-slider {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.range-slider__values {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.range-slider__value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-black);
    line-height: 1.2;
}

.range-slider__track-container {
    position: relative;
    width: 100%;
    height: 1.25rem; /* 20px */
}

.range-slider__track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--color-gray-light);
}

.range-slider__track-active {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    background-color: var(--color-black);
}

.range-slider__handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 50%;
    cursor: grab;
    transition: transform var(--transition-fast);
}

.range-slider__handle:hover,
.range-slider__handle:active {
    transform: translate(-50%, -50%) scale(1.15);
}

.range-slider__handle:active {
    cursor: grabbing;
}

/* Link Styles */
.link {
    color: var(--color-gray-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--color-black);
}

/* Social Icons */
.social-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-fast);
}

.social-icon:hover {
    opacity: 0.7;
}

main {
    padding-top: calc(var(--header-height) + var(--spacing-lg) + 2rem);
}

/* ================================
     Projects Archive Page
     ================================ */

.projects-page {
    min-height: 100vh;
    background-color: var(--color-bg);
}

.projects-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0.875rem 0 0;
}

.projects-header {
    display: flex;
    gap: 3.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Projects Title */
.projects-title {
    transform: translateY(0.75rem);
    font-family: var(--font-family);
    font-size: 2.0625rem; /* 33px */
    font-weight: var(--font-weight-medium);
    line-height: 2.0625rem; /* 33px */
    letter-spacing: -0.33px;
    color: var(--color-gray);
    margin-bottom: 2rem;
}
.projects-title.hidden {
    display: none;
}
/* Projects Tabs */
.projects-tabs {
    display: flex;
    gap: 1.5rem; /* 24px */
}

.projects-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem; /* 12px */
    width: 18.75rem; /* 294px */
    height: 3.25rem; /* 52px */
    background-color: var(--color-white);
    border: none;
    border-radius: 1rem; /* 16px */
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.projects-tab--active {
    background-color: var(--color-black);
    color: var(--color-white);
}

.projects-tab--disabled {
    background-color: var(--color-gray-light);
    color: var(--color-gray-dark);
    cursor: not-allowed;
    opacity: 0.7;
}

.projects-tab:not(.projects-tab--disabled):hover {
    transform: translateY(-2px);
}

/* Projects Search */
.projects-search {
    margin-bottom: 1.5rem;
}

.projects-search-input {
    width: 100%;
    height: 3rem; /* 48px */
    padding: 0 0.8375rem; /* ~13.44px */
    background-color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm); /* 12px */
    font-family: var(--font-family);
    font-size: var(--font-size-medium); /* 18px */
    font-weight: var(--font-weight-book);
    line-height: 1.5rem; /* 24px */
    color: var(--color-black);
}

.projects-search-input::placeholder {
    color: #b4b4b4;
}

.projects-search-input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Projects Layout */
.projects-layout {
    display: grid;
    grid-template-columns: 15.875rem 1fr; /* 252px sidebar + rest */
    gap: 3rem; /* ~48px */
    align-items: start;
}

.projects-grid-container {
    min-width: 0; /* allow grid item to shrink within its 1fr track */
}

/* Projects Sidebar */
.projects-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

/* Filter Box */
.filter-box {
    background-color: var(--color-white);
    border-radius: 1.25rem; /* 20px */
    padding: 1.25rem; /* 20px */
    overflow: hidden;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.filter-title {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-primary);
    text-align: left;
}
.filter-icon-container {
    position: relative;
    width: 13px;
}
.filter-icon-container svg {
    position: absolute;
    left: 0px;
}
.filter-icon {
    width: 0.775rem; /* ~12.397px */
    color: var(--color-primary);
    transition: transform var(--transition-fast);
    transform-origin: center;
}

.filter-box.collapsed .filter-icon {
    transform: rotate(-90deg);
}

.filter-box.collapsed .filter-content {
    display: none;
}

/* Filter Content */
.filter-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

/* Filter Checkbox */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    border: 1px solid var(--color-black);
    border-radius: 0.125rem; /* 2px */
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-white);
    flex-shrink: 0;
}

.filter-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-black);
    position: relative;
}

.filter-checkbox span {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
}

/* Link variant of filter-checkbox (no AJAX trigger) */
a.filter-checkbox {
    text-decoration: none;
    color: inherit;
}

.filter-checkbox__box {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-black);
    border-radius: 0.125rem;
    background-color: var(--color-white);
    flex-shrink: 0;
    display: inline-block;
}

.filter-checkbox.active .filter-checkbox__box {
    background-color: var(--color-black);
}

/* Range Slider */
.range-slider-wrapper {
    padding-top: 0.5rem;
}

.range-track {
    position: relative;
    width: 100%;
    height: 0.125rem; /* 2px */
    background-color: var(--color-gray-light);
    margin-bottom: 1rem;
}

.range-fill {
    position: absolute;
    height: 100%;
    background-color: var(--color-black);
    left: 25%;
    right: 25%;
}

.range-handle {
    position: absolute;
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
}

.range-handle--min {
    left: 25%;
    transform: translate(-50%, -50%);
}

.range-handle--max {
    right: 25%;
    transform: translate(50%, -50%);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.125rem; /* 18px */
    color: var(--color-black);
}

/* Filter Dropdown */
.filter-dropdown {
    width: 100%;
}

.dropdown-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem; /* 10px */
    background-color: var(--color-gray-lighter);
    border: none;
    border-radius: 0.625rem; /* 10px */
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
    cursor: pointer;
}

/* Filter Search */
.filter-search {
    margin-bottom: 1rem;
}

.filter-search input {
    width: 100%;
    padding: 0.625rem; /* 10px */
    background-color: var(--color-gray-lighter);
    border: none;
    border-radius: 0.625rem; /* 10px */
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
}

.filter-search input::placeholder {
    color: var(--color-black);
}

/* Organization Filter List */
.filter-org-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    max-height: 15rem;
    overflow-y: auto;
    padding-right: 0.625rem;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Ensure the hidden attribute wins over display:flex on cards */
.project-card[hidden] {
    display: none !important;
}

/* Load More */
.projects-load-more {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.js-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 2rem;
    background-color: var(--color-white);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-book);
    color: var(--color-black);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.js-load-more:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.js-load-more[hidden] {
    display: none !important;
}

/* Project Card */
.project-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-xl); /* 24px */
    transition: all var(--transition-fast);
    min-width: 0; /* allow card to shrink within its 1fr grid track */
}

.project-card:hover .project-card-title {
    color: var(--color-primary);
}

.project-card-title {
    font-family: var(--font-family);
    font-size: 1.25rem; /* 20px */
    font-weight: var(--font-weight-medium);
    line-height: 1.5rem; /* 24px */
    color: var(--color-black);
    margin: 0;
    min-height: 4.5rem; /* Space for 3 lines */
    transition: all var(--transition-fast);
}

.project-card-tags {
    display: flex;
    gap: 0.75rem; /* 12px */
    flex-wrap: wrap;
}

.project-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* 8px */
    background-color: #fff4f4;
    border-radius: 0.25rem; /* 4px */
    font-family: var(--font-family);
    font-size: 0.75rem; /* 12px */
    font-weight: var(--font-weight-book);
    line-height: 0.875rem; /* 14px */
    color: var(--color-primary);
}

.project-card-image {
    margin-top: auto;
    width: 100%;
    aspect-ratio: 4096 / 2731;
    border-radius: 0.25rem; /* 4px */
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-card a {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* ================================
     Single Project Page
     ================================ */

.single-project {
    min-height: 100vh;
    background-color: var(--color-bg);
}

.single-project-container {
    max-width: var(--container-max-width);
    margin: 3.75rem auto 0;
    padding: 0;
}

/* Single Project Layout */
.single-project-layout {
    display: grid;
    grid-template-columns: 10fr 2fr;
    gap: 1.5rem; /* 24px */
}

/* Main Project Info Box */
.project-info-box {
    flex: 0 0 66.25rem; /* 1060px */
    background-color: var(--color-white);
    border-radius: var(--radius-xl); /* 24px */
    padding: 1.5rem; /* 24px */
    display: flex;
    flex-direction: column;
    gap: 3.5rem; /* 56px */
}

/* Project Hero */
.project-hero {
    display: flex;
    gap: 1.5rem; /* 24px */
}

.project-hero-image {
    flex: 0 0 23.72rem; /* ~379.5px */
    height: 15.81rem; /* ~253px */
    border-radius: 0.25rem; /* 4px */
    overflow: hidden;
}

.project-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-hero-content {
    flex: 1;
    max-width: 38.25rem; /* 612px */
}

.project-hero-title {
    font-family: var(--font-family);
    font-size: 2rem; /* 32px */
    font-weight: var(--font-weight-book);
    line-height: 2.25rem; /* 36px */
    color: var(--color-black);
    margin: 0;
}

/* Project Meta Row */
.project-meta-row {
    display: grid;
    grid-template-columns: repeat(5, 2fr);
    gap: 1.5rem;
    padding-top: 0.5rem; /* 56px */
    border-top: 1px solid var(--color-gray-light);
    position: relative;
}

.project-meta-icon {
    flex: 0 0 2rem; /* 32px */
    height: 2rem;
    color: var(--color-black);
}

.project-details-row--links-value {
    grid-column-start: 3;
}

.project-details-row--links-value a {
    display: block;
}

.project-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.project-meta-item--download {
    /* justify-content: flex-end; */
}

.project-meta-item--download .project-jury-button {
    width: fit-content;
}

.project-meta-label {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: #a7a7a7;
}

.project-meta-value {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
}

/* Project Details Rows */
.project-details-row {
    display: grid;
    grid-template-columns: repeat(5, 2fr);
    gap: 1.5rem;
    padding-top: 0.5rem; /* 8px */
    border-top: 1px solid var(--color-gray-light);
}

.project-details-row--last {
    border-bottom: none;
}

.project-details-row a {
    color: var(--color-black);
}

.project-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
    flex: 0 0 auto;
}

.project-detail-item--awards,
.project-detail-item--coord {
    grid-column: 1/3;
}

.project-detail-item--team,
.project-detail-item--events {
    grid-column: 3/5;
}

.project-detail-item--tiraj {
    grid-column: 5/6;
}

.project-detail-label {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: #a7a7a7;
}

.project-detail-value {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
}

.project-team-list p,
.project-awards-list p,
.project-events-list p {
    margin: 0;
    line-height: 1.0625rem; /* 17px */
}

/* Jury Report Button */
.project-jury-button {
    display: inline-block;
    align-items: center;
    justify-content: center;
    padding: 0.625rem; /* 10px */
    background-color: var(--color-primary);
    border-radius: 0.625rem; /* 10px */
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.project-jury-button:hover {
    opacity: 0.9;
}

/* Project Sidebar */
.project-sidebar {
    flex: 0 0 10.9375rem; /* 175px */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
}

.project-sidebar-box {
    background-color: var(--color-white);
    border-radius: var(--radius-xl); /* 24px */
    padding: 1.25rem; /* 20px */
    display: flex;
    flex-direction: column;
    gap: 1.875rem; /* 30px */
}

.project-sidebar-title {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-primary);
    margin: 0;
}

/* Recurring Project Dropdown */
.project-recurring-dropdown {
    width: 100%;
}

select.filter-select,
.project-recurring-dropdown .dropdown-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem; /* 10px */
    background-color: var(--color-gray-lighter);
    border: none;
    border-radius: 0.25rem; /* 4px */
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
    cursor: pointer;
}

.project-recurring-dropdown .dropdown-button svg {
    width: 0.75rem; /* 12px */
    height: 0.5625rem; /* 9px */
    transform: rotate(180deg);
}

/* Keywords List */
.project-keywords-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

.project-keyword-tag {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.625rem 0.75rem; /* 10px 12px */
    background-color: transparent;
    border: 1px solid var(--color-black);
    border-radius: var(--radius-sm); /* 12px */
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: var(--color-black);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: fit-content;
    text-decoration: none;
}

.project-keyword-tag:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Description Section */
.project-description-section {
    margin-right: calc(20% - 1.5rem);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(5, 2fr);
    gap: 1.5rem;
}

.project-section-label {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    line-height: 1.0625rem; /* 17px */
    color: #a7a7a7;
    margin-bottom: 1.875rem; /* 30px */
    padding-bottom: 1.875rem;
    border-bottom: 1px solid var(--color-gray-light);
}

.project-section-label.title {
    margin: 0;
    border: 0;
    float: left;
}

.project-description-content {
    grid-column: 3/6;
    word-break: break-word;
}

.project-description-content p {
    font-family: var(--font-family);
    font-size: var(--font-size-medium); /* 18px */
    font-weight: var(--font-weight-book);
    line-height: 1.5rem; /* 24px */
    color: var(--color-black);
    margin: 0;
    min-height: 1.5rem;
}

.project-description-content a {
    color: var(--color-black);
}

.project-description-content .wp-block-embed {
    margin: 1.5rem 0;
}

.project-description-content .wp-block-embed:last-child {
    margin-bottom: 0;
}

/* Links Section */
.project-links-section {
    border-top: 1px solid var(--color-gray-light);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-light);
    margin-bottom: 1.75rem;
    margin-right: calc(20% - 1.5rem);
}

.project-links-section .project-section-label {
    border-bottom: none;
    padding-bottom: 0;
}

.project-links-section + .project-related-section {
    padding-top: 0;
    border-top: 0;
}

.project-links-list {
    margin-left: calc(16.67% + 4.25rem); /* ~68px offset */
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}

.project-links-list a {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 15px */
    font-weight: var(--font-weight-book);
    color: var(--color-black);
    text-decoration: underline;
    text-underline-position: from-font;
}

.project-gallery-slider img {
    width: 100%;
    border-radius: 1.5rem;
}

.project-gallery-slider {
    width: 100%;
    margin-left: 0;
    position: relative;
}

.project-section-divider {
    border: none;
    height: 1px;
    background: #A7A7A7;
    margin: 1.75rem 0;
}

.project-oembed-wrapper {
    padding-right: calc(20% + 13.65rem);
}

.project-oembed-wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}

.project-gallery-wrapper {
    margin-right: calc(20% - 1.5rem);
    display: grid;
    grid-template-columns: 8fr 1fr 1fr;
    gap: 1.5rem;
}

.project-gallery-nav-btn {
    width: 3.875rem;
    height: 4.75rem;
    border: none;
    border-radius: 1.5rem; /* 24px */
    padding: 1.5rem; /* 24px */
    color: var(--color-black);
    cursor: pointer;
    background: url('data:image/svg+xml,<svg width="62" height="76" viewBox="0 0 62 76" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="62" y="76" width="62" height="76" rx="24" transform="rotate(-180 62 76)" fill="white"/><path d="M24 52L38 38L24 24" stroke="black" stroke-width="2" stroke-linejoin="bevel"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: all var(--transition-base);
}

.project-gallery-nav-btn:hover {
    background: url('data:image/svg+xml,<svg width="62" height="76" viewBox="0 0 62 76" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="62" y="76" width="62" height="76" rx="24" transform="rotate(-180 62 76)" fill="%23ff412c"/><path d="M24 52L38 38L24 24" stroke="%23FFFFFF" stroke-width="2" stroke-linejoin="bevel"/></svg>');
}

.project-gallery-slider figcaption {
    margin: 0.5rem 0 0 1.5rem;
}

.project-gallery-nav-btn--prev {
    transform-origin: center;
    transform: rotate(180deg);
}

.swiper-button-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.project-gallery-nav-btn--next {
    transform: translateX(-1.5rem);
}

/* Related Projects Section */
.project-related-section {
    border-top: 1px solid var(--color-gray-light);
    padding-top: 0.75rem;
    margin-top: 1.75rem;
}

.project-related-section .project-section-label {
    border-bottom: 0;
    margin-bottom: 2.5rem;
    padding-bottom: 0;
}

.project-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 18.3125rem); /* 3 columns of ~293px */
    gap: 1.875rem; /* 30px */
}