/* [aob_projects] — Figma "projects" (6007:10867): heading row + 3×2 photo grid on the dark background. */
:not(#_) .aob-projects { background: var(--aob-black-3); color: var(--aob-light-1); font-family: var(--aob-font-body); }

:not(#_) .aob-projects__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: var(--aob-section-gap); }
:not(#_) .aob-projects__title { margin: 0; max-width: 490px; font-family: var(--aob-font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--aob-white); }
:not(#_) .aob-projects__accent { color: var(--aob-brand); }
:not(#_) .aob-projects__text { margin: 0; max-width: 330px; font-size: 20px; line-height: 26px; color: var(--aob-light-3); }
:not(#_) .aob-projects__btn { flex: none; }
/* Two buttons, one visible at a time: in the heading row on desktop, centered under the grid on tablet/phone. */
:not(#_) .aob-projects__btn--desktop { display: none; }
:not(#_) .aob-projects__btn--mobile { display: flex; width: fit-content; margin: var(--aob-section-gap) auto 0; }

@media (min-width: 1024px) {
	:not(#_) .aob-projects__btn--desktop { display: inline-flex; }
	:not(#_) .aob-projects__btn--mobile { display: none; }
	:not(#_) .aob-projects__head { flex-direction: row; align-items: flex-end; gap: 80px; }
	:not(#_) .aob-projects__title { flex: 1 1 0; }
	:not(#_) .aob-projects__text { flex: none; width: 330px; }
}

:not(#_) .aob-projects__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { :not(#_) .aob-projects__grid { gap: var(--aob-cards-gap); } }
@media (min-width: 1024px) { :not(#_) .aob-projects__grid { grid-template-columns: repeat(3, 1fr); } }
:not(#_) .aob-projects__card { margin: 0; aspect-ratio: 400 / 350; overflow: hidden; border-radius: var(--aob-radius); background: var(--aob-black-2); }
:not(#_) .aob-projects__card { position: relative; }
:not(#_) .aob-projects__open { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; border-radius: inherit; color: var(--aob-white); }
:not(#_) .aob-projects__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Hover hint: the photo zooms slightly, darkens and a magnifier appears (cursor: pointer says "click me"). */
:not(#_) .aob-projects__open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 16, 14, 0) 40%, rgba(17, 16, 14, 0.55)); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
:not(#_) .aob-projects__zoom { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--aob-gold-border); border-radius: 50%; background: rgba(17, 16, 14, 0.6); backdrop-filter: blur(4px); color: var(--aob-white); opacity: 0; transform: translate(-50%, -50%) scale(0.8); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
@media (hover: hover) {
	:not(#_) .aob-projects__open:hover .aob-projects__img { transform: scale(1.06); }
	:not(#_) .aob-projects__open:hover::after { opacity: 1; }
	:not(#_) .aob-projects__open:hover .aob-projects__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
:not(#_) .aob-projects__open:focus-visible { outline: 2px solid var(--aob-white); outline-offset: -2px; }
:not(#_) .aob-projects__open:focus-visible .aob-projects__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { :not(#_) .aob-projects__img, :not(#_) .aob-projects__zoom, :not(#_) .aob-projects__open::after { transition: none; } }
@media (max-width: 479px) { :not(#_) .aob-projects__card { aspect-ratio: 1 / 1; } }

/* Lightbox (native <dialog>) */
html.aob-lightbox-open { overflow: hidden; }
:not(#_) .aob-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(17, 16, 14, 0.94); color: var(--aob-white); }
:not(#_) .aob-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
:not(#_) .aob-lightbox::backdrop { background: rgba(17, 16, 14, 0.94); }
:not(#_) .aob-lightbox__stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 16px 0; box-sizing: border-box; }
:not(#_) .aob-lightbox__img { max-width: min(1200px, 100%); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--aob-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: aob-lightbox-in 0.25s ease; }
@keyframes aob-lightbox-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :not(#_) .aob-lightbox__img { animation: none; } }
:not(#_) .aob-lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 16px 20px; }
:not(#_) .aob-lightbox__count { min-width: 56px; text-align: center; font-size: 14px; letter-spacing: 0.06em; color: var(--aob-light-3); }
:not(#_) .aob-lightbox__arrow { position: relative; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
:not(#_) .aob-lightbox__arrow img { position: absolute; left: -10px; top: -8px; width: 68px; height: 68px; max-width: none; }
:not(#_) .aob-lightbox__arrow:hover { filter: brightness(1.2); }
:not(#_) .aob-lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid var(--aob-gold-border); border-radius: 50%; background: rgba(17, 16, 14, 0.6); cursor: pointer; }
:not(#_) .aob-lightbox__close span::before, :not(#_) .aob-lightbox__close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--aob-white); transform: translate(-50%, -50%) rotate(45deg); }
:not(#_) .aob-lightbox__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
:not(#_) .aob-lightbox__close:hover { background: var(--aob-brand); }
:not(#_) .aob-lightbox__arrow:focus-visible, :not(#_) .aob-lightbox__close:focus-visible { outline: 2px solid var(--aob-white); outline-offset: 4px; }
@media (min-width: 900px) {
	/* arrows on the sides of the photo on large screens */
	:not(#_) .aob-lightbox[open] { display: grid; grid-template-columns: 1fr; }
	:not(#_) .aob-lightbox__stage { grid-area: 1 / 1; padding: 56px 120px; }
	:not(#_) .aob-lightbox__nav { grid-area: 1 / 1; position: relative; justify-content: space-between; padding: 0 32px; pointer-events: none; align-self: center; }
	:not(#_) .aob-lightbox__nav > * { pointer-events: auto; }
	:not(#_) .aob-lightbox__count { position: absolute; left: 50%; bottom: -46vh; transform: translateX(-50%); }
}

/* Phones: centered heading and text (the button is centered under the grid). */
@media (max-width: 767px) {
	:not(#_) .aob-projects__head { align-items: center; text-align: center; }
	:not(#_) .aob-projects__title, :not(#_) .aob-projects__text { margin-inline: auto; }
	:not(#_) .aob-projects__title { text-wrap: balance; }
}