/* Gallery Page Styles - Header hero + interactive cards */
@font-face {
    src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
      format("woff2");
    font-family: "Meta";
    font-style: normal;
    font-weight: normal;
  }
.ko-gallery-hero {
    background-image: url(http://junaid-knockout.test/wp-content/themes/knockout/assets/images/bg.jpg);
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    position: relative;
    min-height: 40vh;
    width: 100%;
    display: flex
;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    padding-inline: clamp(16px, 4vw, 64px);
    padding-block: clamp(24px, 6vw, 80px);
}

.ko-gallery-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.25) 100%);
}

.ko-gallery-hero-title {
    transition: all 0.5s;
    -webkit-text-stroke: clamp(1px, 0.3vw, 4px) #b0d136;
    font-variation-settings: "wght" 900, "ital" 1;
    font-size: clamp(3rem, 8vw, 15rem);
    z-index: 1;
    color: transparent;
    font-family: "Meta", sans-serif;
    text-shadow: clamp(3px, 0.7vw, 10px) clamp(3px, 0.7vw, 10px) 0px #07bccc,
    clamp(4px, 1vw, 15px) clamp(4px, 1vw, 15px) 0px #e601c0,
    clamp(6px, 1.3vw, 20px) clamp(6px, 1.3vw, 20px) 0px #e9019a,
    clamp(8px, 1.7vw, 25px) clamp(8px, 1.7vw, 25px) 0px #f40468,
    clamp(15px, 3vw, 45px) clamp(15px, 3vw, 45px) clamp(3px, 0.7vw, 10px) #1f1241;
  cursor: pointer;
    text-align: center;
}
.ko-gallery-hero-title:hover {
    font-variation-settings: "wght" 100, "ital" 0;
    text-shadow: none;
  }

/* Cards container */
.ko-gallery-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1920px !important; /* cap at 1920px on large screens */
    margin: 0 auto; /* center within viewport */
    padding: clamp(16px, 4vw, 48px);
    overflow: hidden;
    transform: skew(5deg);
    gap: clamp(8px, 2vw, 16px);
}

.container {
    max-width: 1920px !important;
}


.ko-gallery-card {
    flex: 1 1 0%;
    transition: all 1s ease-in-out;
    height: min(75vmin, 72rem);
    position: relative;
    overflow: hidden;
}

.ko-gallery-card img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: all 1s ease-in-out;
    filter: grayscale(100%);
    display: block;

}

.ko-gallery-card:not(:last-child) {
    margin-right: 0;
}

.ko-gallery-card-head {
    color: #000000;
    background: #b0d136;
    padding: 0.5em;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    transition: all 0.5s ease-in-out;
    min-width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1em;
    white-space: nowrap;
    box-sizing: content-box !important;
}

.ko-gallery-card:hover {
    flex-grow: 10;
}

.ko-gallery-card:hover img {
    filter: grayscale(0);
}

.ko-gallery-card:hover .ko-gallery-card-head {
    text-align: center;
    top: calc(100% - 2em);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    font-size: 2em;
    transform: rotate(0deg) skew(-5deg);
}

@media (max-width: 992px) {
    .ko-gallery-container {
        padding: clamp(12px, 5vw, 32px);
    }
}

/* Stack cards only on ultra-small devices; keep angled row for >=360px */
@media (max-width: 359px) {
    .ko-gallery-container {
        transform: none;
        flex-direction: column;
        width: 100%;
        padding: clamp(12px, 5vw, 24px);
    }
    .ko-gallery-card {
        width: 100%;
        height: 52vmin;
    }
    .ko-gallery-card:hover {
        flex-grow: 1;
    }
}