/* Section: Our Work
   Path: assets/css/sections/our-work.css
   Loaded only when the section is added via ACF Flexible Content.
   Layout (container / row / col / gap / badge) comes from the theme's existing classes;
   only work-card styles live here. */

/* ---------- Image ---------- */
.work-item .work-img {
	aspect-ratio: 4 / 5;
	background: #eeeeee;
}

.work-item .work-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.work-item:hover .work-img img {
	transform: scale(1.05);
}

/* ---------- Details ---------- */
.work-item .work-details {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.work-item .work-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.work-item .work-tag {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-item .work-info h3 a {
	color: var(--bs-dark, #1d1d1f);
	text-decoration: none;
}

/* ---------- Arrow ---------- */
.work-item .work-arrow {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color, #d9dadd);
    color: var(--bs-dark, #1d1d1f);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.work-item:hover .work-arrow,
.work-item .work-arrow:focus-visible {
	background: #1f2a2e;
	border-color: #1f2a2e;
	color: var(--bs-white, #ffffff);
}

/* Whole card is the link */
.work-item {
	color: inherit;
	text-decoration: none;
}

a.work-item:hover,
a.work-item:focus {
	color: inherit;
}

a.work-item:focus-visible {
	outline: 2px solid var(--bs-primary, #b5423f);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.work-item .work-img img,
	.work-item .work-arrow {
		transition: none;
	}
}

/* ---------- Category filter ---------- */
.our-work .work-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.our-work .work-filter-btn {
	padding: 8px 20px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bs-dark, #1d1d1f);
	background: transparent;
	border: 1px solid var(--bs-border-color, #d9dadd);
	border-radius: 50px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.our-work .work-filter-btn:hover, .our-work .work-filter-btn.is-active {
    background: #1f2a2e;
    border-color: #1f2a2e;
    color: #fff;
}

.our-work .work-filter-btn:focus-visible {
	outline: 2px solid var(--bs-primary, #b5423f);
	outline-offset: 3px;
}

.our-work .work-col.is-hidden {
	display: none;
}

.work-item .work-info h3 {
    color: var(--bs-dark, #1d1d1f);
    font-size: 1.3rem;
}

@media (max-width: 991px) {
    .our-work {
       padding: 60px 0 !important;
    }
        
}

@media (max-width: 767px) {
    .work-item .work-info h3 {
        color: var(--bs-dark, #1d1d1f);
        font-size: 1.2rem;
    }
        
}