/* Utilities (Tailwind-like, but plain CSS) */

.collapse {
    visibility: collapse;
}

.visible {
    visibility: visible;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.static {
    position: static;
}

.inset-0 {
    inset: 0;
}

.container {
    width: 100%;
}

@media (min-width: 40rem) {
    .container {
        max-width: 40rem;
    }
}

@media (min-width: 48rem) {
    .container {
        max-width: 48rem;
    }
}

@media (min-width: 64rem) {
    .container {
        max-width: 64rem;
    }
}

@media (min-width: 80rem) {
    .container {
        max-width: 80rem;
    }
}

@media (min-width: 96rem) {
    .container {
        max-width: 96rem;
    }
}

.mb-4 {
    margin-bottom: 1rem; /* 4 * 0.25rem */
}

.block {
    display: block;
}

.contents {
    display: contents;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.inline {
    display: inline;
}

.table {
    display: table;
}

.\!h-full {
    height: 100% !important;
}

.h-full {
    height: 100%;
}

.w-1\/2 {
    width: 50%;
}

.w-full {
    width: 100%;
}

.flex-1 {
    flex: 1;
}

/* The .transform utility no longer carries Tailwind transform vars;
   keep it as a no-op so inline transforms still work. */
.transform {
    transform: none;
}

.resize {
    resize: both;
}

.flex-col {
    flex-direction: column;
}

/* Space utilities approximated with regular margins */
.space-y-2 > :not(:last-child) {
    margin-bottom: 0.5rem; /* 2 * 0.25rem */
}

.space-x-2 > :not(:last-child) {
    margin-right: 0.5rem;
}

@media (min-width: 48rem) {
    .md\:space-y-3 > :not(:last-child) {
        margin-bottom: 0.75rem; /* 3 * 0.25rem */
    }

    .md\:space-x-3 > :not(:last-child) {
        margin-right: 0.75rem;
    }
}

@media (min-width: 64rem) {
    .lg\:space-y-4 > :not(:last-child) {
        margin-bottom: 1rem; /* 4 * 0.25rem */
    }

    .lg\:space-x-4 > :not(:last-child) {
        margin-right: 1rem;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.bg-blue-200 {
    background-color: oklch(88.2% .059 254.128);
}

.bg-gray-300 {
    background-color: oklch(87.2% .01 258.338);
}

.object-cover {
    object-fit: cover;
}

.blur {
    filter: blur(8px);
}

.filter {
    filter: none;
}

.transition {
    transition-property: color, background-color, border-color, outline-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* === CASE GALLERY / GALLERY-SPECIFIC STYLES === */

.op-case-gallery-wrapper {
    padding: 3.5em 1.5em;
}

.full-gallery-buttons {
    margin-top: 2rem; /* 8 * 0.25rem */
    display: flex;
    justify-content: center;
}

.op-case-item {
    opacity: 0;
    transition-duration: .3s;
}

.op-case-item.loaded {
    opacity: 1;
}

.op-gallery-nav {
    margin-bottom: 2rem;
}

@media (min-width: 48rem) {
    .op-gallery-nav {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 64rem) {
    .op-gallery-nav {
        margin-bottom: 3rem;
    }
}

.op-gallery-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0 !important;
    list-style-type: none !important;
}

.op-gallery-nav-list li {
    width: 100%;
}

.op-gallery-nav-list .op-gallery-filter--active {
  /* whatever you like */
  filter: brightness(1.4); /* 1 = normal, 0 = fully black */
  pointer-events: none;
}

@media (min-width: 48rem) {
    .op-gallery-nav-list li {
        width: auto;
    }
}

.op-gallery-nav .button {
    width: 100%;
    text-align: center;
}

.op-single-case {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 48rem) {
    .op-single-case {
        gap: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .op-single-case {
        gap: 2rem;
    }
}

.op-single-case-header {
    display: flex;
    justify-content: space-between;
}

.op-image-label {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    padding-inline: 0.75rem;
    padding-block: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.3333333; /* 1 / 0.75 */
    letter-spacing: 0.05em;
    color: #fff;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
    background-color: #000000b3;
    border-radius: 0.25rem;
    display: block;
}

@supports (color: color-mix(in lab, red, red)) {
    .op-image-label {
        background-color: color-mix(in oklab, #000 70%, transparent);
    }
}

.op-grid-images-inner {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 48rem) {
    .op-grid-images-inner.has-portraits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.op-grid-image {
    position: relative;
}

.op-grid-images {
    background-color: oklch(92.8% .006 264.531);
    padding: 1rem;
}

@media (min-width: 48rem) {
    .op-grid-images {
        padding: 1.5rem;
    }
}

@media (min-width: 64rem) {
    .op-grid-images {
        padding: 2rem;
    }
}

.op-grid-image img {
    width: 100% !important;
    object-fit: cover;
}

.op-case-quote {
    margin-top: 2rem;
}

.op-case-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.op-case-card .op-grid-images-inner {
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

@media (min-width: 48rem) {
    .op-case-card .op-grid-images-inner {
        margin-bottom: 2rem;
        gap: 1rem;
    }
}

@media (min-width: 64rem) {
    .op-case-card .op-grid-images-inner {
        margin-bottom: 3rem;
        gap: 2rem;
    }
}

.op-case-card .button {
    display: inline-flex;
    margin-inline: auto;
}

.op-bg-image {
    position: relative;
    height: 100%;
}

.op-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.op-case-gallery .button {
    text-align: center;
    text-wrap: nowrap;
}

.op-case-gallery .button-full {
    width: 100%;
}

.op-single-gallery {
    display: grid;
    gap: 2rem;
}

@media (min-width: 48rem) {
    .op-single-gallery {
        gap: 2.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .op-single-gallery {
        gap: 3rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.op-portrait-image img,
.op-grid-images img {
    width: 100%;
}

/* Split image (before/after) */

.split-image-wrapper {
    margin-bottom: 1rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.split-image-wrapper img {
    pointer-events: none;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    transition-property: filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    position: absolute;
}

.split-before-image,
.split-after-image {
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.split-before-image {
    z-index: 20;
}

.split-after-image {
    z-index: 10;
}

.handle {
    top: 0;
    bottom: 0;
    z-index: 30;
    width: 40px;
    cursor: ew-resize;
    touch-action: none;
    background-color: transparent;
    border-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.handle:before {
    content: "";
    background: #fff;
    border: 1px solid #fff;
    width: 4px;
    transition: background .3s, border .3s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 12px #0000004d;
    -webkit-mask-image: radial-gradient(circle, #0000 20px, #000 20px);
    mask-image: radial-gradient(circle, #0000 20px, #000 20px);
}

.drag-icon {
    pointer-events: none;
    background-color: transparent;
    border: 3px solid #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    transition: background-color .3s, border .3s;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px #0000004d;
}

.drag-icon svg {
    fill: currentColor;
    width: 32px;
    height: 32px;
    color: #fff;
    display: block;
}

.label {
    pointer-events: none;
    fill: currentColor;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.3333333;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    background-color: #0009;
    padding: 3px 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@supports (color: color-mix(in lab, red, red)) {
    .label {
        background-color: color-mix(in oklab, #000 60%, transparent);
    }
}

.before-label {
    text-align: left;
    left: 10px;
}

.after-label {
    text-align: right;
    right: 10px;
}

.split-image-wrapper:hover img {
    filter: brightness(.7);
}

.split-image-wrapper:hover .label {
    opacity: 1;
}

.split-image-wrapper.dragging img,
.split-image-wrapper.dragging:hover img {
    filter: brightness(1);
}

.split-image-wrapper.dragging .label,
.split-image-wrapper.dragging:hover .label {
    opacity: 0;
}

/* Misc */

.show-on-load {
    display: none;
}