/* Theme overrides loaded after app.css */

.swiper-slider--home .c-slider__slide__video {
    --tw-brightness: brightness(1) !important;
}

/* Widen the home slider text column */
.swiper-slider--home .c-slider__slide-content {
    grid-column: span 10 / span 10 !important;
    grid-column-start: 2 !important;
}

/* Hero: flex row — logo wrap on left, copy on right */
.swiper-slider--home .c-slider__home-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 20;
}

/*
  Logo wrapper: fixed to the VISUAL dimensions of the rotated image.
  CSS height of image = 80px → rendered width = 80 × (1880/443) ≈ 339px
  After -90deg rotation: visual width = 80px, visual height = 339px.
  So the wrapper must be width:80px × height:339px.
*/
.swiper-slider--home .c-slider__entropy-logo-wrap {
    width: 80px;
    height: 339px;
    flex-shrink: 0;
    position: relative;
    margin-top: 4px;
}

/*
  Image: absolute inside wrapper, placed at top=339px (= container height),
  then rotated -90deg from top-left → fills the container exactly.
*/
.swiper-slider--home .c-slider__entropy-logo {
    position: absolute;
    top: 339px;
    left: 0;
    height: 80px;
    width: auto;
    transform: rotate(-90deg);
    transform-origin: top left;
    display: block;
}

/* Reduce home title size so it doesn't overflow into the white circle */
/* .swiper-slider--home .c-slider__slide__title {
    font-size: 62px !important;
    line-height: 64px !important;
    letter-spacing: -0.5px !important;
} */

.swiper-slider--home .c-slider__home-copy {
    position: relative;
    z-index: 20;
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    /* Mobile: shrink logo — height=46px → width≈195px, container 46×195 */
    .swiper-slider--home .c-slider__entropy-logo-wrap {
        width: 46px;
        height: 195px;
        margin-top: 4px;
    }

    .swiper-slider--home .c-slider__entropy-logo {
        top: 195px;
        height: 46px;
    }

    .swiper-slider--home .c-slider__slide__title {
        font-size: 40px !important;
        line-height: 42px !important;
    }
}