.isf {
    --isf-padding-v:            30px;
    --isf-padding-top:          var(--isf-padding-v);
    --isf-padding-bottom:       var(--isf-padding-v);
    --isf-max-width:            1440px;
    --isf-gap:                  20px;
    --isf-contained-padding-h:  30px;
    --isf-slider-indent-h: max(
        var(--isf-contained-padding-h),
        calc((100vw - var(--isf-max-width)) / 2 + var(--isf-contained-padding-h))
    );
    --isf-slot-w:               calc(100vw - 2 * var(--isf-slider-indent-h));
    --isf-peek:                 0px;
    --isf-card-radius:          8px;
    --isf-arrow-size:           28px;
    --isf-transition:           0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --isf-img-height:           500px;
    --isf-img-height-tablet:    404px;
    --isf-img-height-mobile:    370px;
    --isf-single-height:        750px;
    --isf-single-height-tablet: 520px;
    --isf-single-height-mobile: 450px;
    --isf-bg:           #ffffff;
    --isf-title-color:  #000000;
    --isf-text-color:   #444444;
    --isf-btn-color:    #000000;
    --isf-arrow-filter: none;
}

.isf.isf--dark {
    --isf-bg:           #000000;
    --isf-title-color:  #ffffff;
    --isf-text-color:   #cccccc;
    --isf-btn-color:    #ffffff;
    --isf-arrow-filter: invert(1);
}

.isf {
    background-color:    var(--isf-bg);
    padding-block-start: var(--isf-padding-top);
    padding-block-end:   var(--isf-padding-bottom);
    padding-inline:      0;
    overflow:            visible;
    transition:          background-color var(--isf-transition);
}

.isf__inner {
    max-width:      100%;
    margin-inline:  auto;
    padding-inline: 0;
    box-sizing:     border-box;
}

.isf__inner--contained {
    max-width:      var(--isf-max-width);
    margin-inline:  auto;
    padding-inline: var(--isf-contained-padding-h);
    box-sizing:     border-box;
}

.isf--single .isf__viewport {
    overflow:      hidden;
    border-radius: var(--isf-card-radius);
}

.isf--single .isf__track {
    display:        block;
    overflow:       hidden;
    cursor:         default;
    padding-bottom: 0;
}

.isf--single .isf__item         { display: block; width: 100%; }
.isf--single .isf__card         { display: block; }
.isf--single .isf__card:hover
    .isf__image                  { transform: none; }
.isf--single .isf__controls     { display: none; }

.isf--single .isf__image-wrap {
    position:         relative;
    block-size:       var(--isf-single-height);
    aspect-ratio:     auto;
    overflow:         hidden;
    border-radius:    var(--isf-card-radius);
    background-color: #1a1a1a;
}

.isf--grid .isf__viewport {
    overflow:      hidden;
    border-radius: var(--isf-card-radius);
}

.isf--grid .isf__track {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--isf-gap);
    overflow:  hidden;
    cursor:    default;
}

.isf--grid .isf__controls { display: none; }

.isf--grid.isf--cols-1 .isf__item { flex: 0 0 100%;                                           min-width: 0; }
.isf--grid.isf--cols-2 .isf__item { flex: 0 0 calc(50% - var(--isf-gap) / 2);                 min-width: 0; }
.isf--grid.isf--cols-3 .isf__item { flex: 0 0 calc((100% - var(--isf-gap) * 2) / 3);          min-width: 0; }
.isf--grid.isf--cols-4 .isf__item { flex: 0 0 calc((100% - var(--isf-gap) * 3) / 4);          min-width: 0; }

.isf--grid .isf__image-wrap {
    position:         relative;
    block-size:       var(--isf-img-height);
    overflow:         hidden;
    border-radius:    var(--isf-card-radius);
    background-color: #1a1a1a;
}

.isf--slider .isf__viewport {
    overflow-x:    visible;
    overflow-y:    hidden;
    border-radius: 0;
}

.isf--slider .isf__track {
    display:                    flex;
    flex-wrap:                  nowrap;
    gap:                        var(--isf-gap);
    overflow-x:                 auto;
    scroll-behavior:            smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x:      contain;
    scrollbar-width:            none;
    -ms-overflow-style:         none;
    padding-bottom:             4px;
    cursor:                     grab;
    user-select:                none;
    touch-action:               pan-y;
    padding-inline-start:       var(--isf-slider-indent-h);
    padding-inline-end:         var(--isf-slider-indent-h);
    scroll-snap-type:           x mandatory;
    scroll-padding-inline-start: var(--isf-slider-indent-h);
    scroll-padding-inline-end:   var(--isf-slider-indent-h);
}
.isf--slider .isf__track::-webkit-scrollbar { display: none; }
.isf--slider .isf__track.is-dragging        { cursor: grabbing; scroll-behavior: auto; }

.isf--slider .isf__item {
    scroll-snap-align: start;
    scroll-snap-stop:  always;
}

.isf--slider .isf__controls {
    justify-content: center;
    gap:             12px;
}

.isf--slider.isf--view-1 .isf__item {
    flex:      0 0 calc(var(--isf-slot-w) - var(--isf-peek));
    min-width: 0;
}
.isf--slider.isf--view-2 .isf__item {
    flex:      0 0 calc((var(--isf-slot-w) - var(--isf-gap) * 1 - var(--isf-peek)) / 2);
    min-width: 0;
}
.isf--slider.isf--view-3 .isf__item {
    flex:      0 0 calc((var(--isf-slot-w) - var(--isf-gap) * 2 - var(--isf-peek)) / 3);
    min-width: 0;
}
.isf--slider.isf--view-4 .isf__item {
    flex:      0 0 calc((var(--isf-slot-w) - var(--isf-gap) * 3 - var(--isf-peek)) / 4);
    min-width: 0;
}

.isf--slider .isf__image-wrap {
    position:         relative;
    block-size:       var(--isf-img-height);
    overflow:         hidden;
    border-radius:    var(--isf-card-radius);
    background-color: #1a1a1a;
}

.isf__card {
    display:          flex;
    flex-direction:   column;
    height:           100%;
    background-color: transparent;
}

.isf__image {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    transition:      transform 0.5s ease;
    will-change:     transform;
}
.isf__card:hover .isf__image                  { transform: scale(1.04); }
.isf__card:has(.isf__video):hover .isf__image  { transform: none; }

.isf__video { cursor: pointer; }

.isf__video-btn {
    position:                    absolute;
    inset:                       0;
    display:                     flex;
    align-items:                 center;
    justify-content:             center;
    background:                  none;
    border:                      none;
    padding:                     0;
    cursor:                      pointer;
    z-index:                     2;
    transition:                  opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.isf__video-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }
.isf__video-btn--hidden       { opacity: 0; pointer-events: none; }

.isf__play-icon {
    width:       clamp(48px, 8%, 72px);
    height:      clamp(48px, 8%, 72px);
    filter:      drop-shadow(0 2px 8px oklch(0% 0 0 / 40%));
    transition:  transform 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
}
.isf__video-btn:hover .isf__play-icon,
.isf__video-btn:focus-visible .isf__play-icon {
    transform: scale(1.1);
    filter:    drop-shadow(0 4px 16px oklch(0% 0 0 / 60%));
}

.isf__video-controls {
    position:        absolute;
    inset-inline:    0;
    inset-block-end: 0;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             4px;
    padding-block:   8px;
    padding-inline:  12px;
    background:      linear-gradient(to top, oklch(0% 0 0 / 55%), oklch(0% 0 0 / 0%));
    z-index:         3;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.25s ease;
}
.isf__video-controls--visible              { opacity: 1; pointer-events: auto; }
.isf__image-wrap--fullscreen
    .isf__video-controls                   { display: none; }

.isf__fs-controls {
    position:             absolute;
    inset-inline:         0;
    inset-block-end:      0;
    display:              flex;
    flex-direction:       column;
    gap:                  6px;
    padding-block-start:  32px;
    padding-block-end:    14px;
    padding-inline:       16px;
    background:           linear-gradient(to top, oklch(0% 0 0 / 72%) 0%, oklch(0% 0 0 / 0%) 100%);
    z-index:              4;
    opacity:              0;
    pointer-events:       none;
    transition:           opacity 0.3s ease;
}
.isf__fs-controls--visible { opacity: 1; pointer-events: auto; }

.isf__fs-row             { display: flex; align-items: center; gap: 10px; }
.isf__fs-row--btns       { justify-content: space-between; }
.isf__fs-left,
.isf__fs-right           { display: flex; align-items: center; gap: 8px; }

.isf__seek-wrap          { position: relative; flex: 1; block-size: 28px; display: flex; align-items: center; }
.isf__seek-track         { position: absolute; inset-inline: 0; block-size: 4px; background: oklch(100% 0 0 / 30%); border-radius: 4px; pointer-events: none; }
.isf__seek-fill          { block-size: 100%; inline-size: 0%; background: #ffffff; border-radius: 4px; }
.isf__seek-thumb         { position: absolute; inset-block-start: 50%; inset-inline-start: 0%; translate: -50% -50%; inline-size: 20px; block-size: 20px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 2; }
.isf__seek-wrap:hover
    .isf__seek-thumb      { opacity: 1; }
.isf__seek-ring          { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.isf__seek-ring-bg       { fill: none; stroke: oklch(100% 0 0 / 25%); stroke-width: 2; }
.isf__seek-ring-fill     { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: 50.27; transform-origin: center; rotate: -90deg; }
.isf__seek-input         { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; z-index: 3; }

.isf__time               { color: #ffffff; font-size: 0.8rem; font-family: inherit; white-space: nowrap; user-select: none; min-inline-size: 80px; }
.isf__time-sep           { opacity: 0.6; }

.isf__vc-btn {
    display:                     inline-flex;
    align-items:                 center;
    justify-content:             center;
    inline-size:                 36px;
    block-size:                  36px;
    padding:                     0;
    background:                  oklch(0% 0 0 / 35%);
    border:                      none;
    border-radius:               50%;
    color:                       #ffffff;
    cursor:                      pointer;
    flex-shrink:                 0;
    -webkit-tap-highlight-color: transparent;
    transition:                  background 0.2s ease, transform 0.15s ease;
}
.isf__vc-btn:hover         { background: oklch(0% 0 0 / 60%); }
.isf__vc-btn:active        { transform: scale(0.9); }
.isf__vc-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.isf__vc-icon              { display: block; inline-size: 20px; block-size: 20px; flex-shrink: 0; }
.isf__vc-icon--muted,
.isf__vc-icon--compress,
.isf__vc-icon--play-sm     { display: none; }

.isf__image-wrap--muted      .isf__vc-icon--unmuted  { display: none; }
.isf__image-wrap--muted      .isf__vc-icon--muted    { display: block; }
.isf__image-wrap--fullscreen .isf__vc-icon--expand   { display: none; }
.isf__image-wrap--fullscreen .isf__vc-icon--compress { display: block; }
.isf__image-wrap--paused     .isf__vc-icon--pause    { display: none; }
.isf__image-wrap--paused     .isf__vc-icon--play-sm  { display: block; }

:fullscreen .isf__image-wrap,
:-webkit-full-screen .isf__image-wrap { inline-size: 100%; block-size: 100%; border-radius: 0; display: flex; align-items: center; justify-content: center; background: #000000; }
:fullscreen .isf__video,
:-webkit-full-screen .isf__video      { inline-size: 100%; block-size: 100%; object-fit: contain; }

.isf__content  { padding: 1.25rem 0 0; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.isf__title  { font-size: clamp(1.125rem, calc(1.5vw + 2px), 1.375rem); font-weight: 600; color: var(--isf-title-color); margin: 0; transition: color var(--isf-transition); }
.isf__text p {  font-size: clamp(0.9375rem, calc(1vw + 2px), 1.125rem) ; color: var(--isf-text-color); margin: 0; line-height: 1.55; transition: color var(--isf-transition); }


.isf__controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 2rem; }

.isf__btn {
    display:                     inline-flex;
    align-items:                 center;
    justify-content:             center;
    width:                       44px;
    height:                      44px;
    padding:                     0;
    background:                  none;
    border:                      none;
    border-radius:               50%;
    cursor:                      pointer;
    flex-shrink:                 0;
    -webkit-tap-highlight-color: transparent;
    transition:                  opacity var(--isf-transition), transform 0.15s ease;
}
.isf__btn:hover:not(:disabled)  { opacity: 0.5; }
.isf__btn:active:not(:disabled) { transform: scale(0.9); }
.isf__btn:disabled              { opacity: 0.2; cursor: default; pointer-events: none; }
.isf__btn:focus-visible         { outline: 2px solid var(--isf-btn-color); outline-offset: 3px; }

.isf__arrow {
    display:        block;
    width:          var(--isf-arrow-size);
    height:         var(--isf-arrow-size);
    pointer-events: none;
    filter:         var(--isf-arrow-filter);
    transition:     filter var(--isf-transition);
    flex-shrink:    0;
    transform:      scaleX(-1);
}
.isf__btn--next .isf__arrow { transform: scaleX(1); }

@media (max-width: 1400px) {
    .isf {
        --isf-max-width: 1140px;
    }
}

@media (max-width: 1199px) {
    .isf--grid .isf__image-wrap,
    .isf--slider .isf__image-wrap {
        block-size: var(--isf-img-height-tablet);
    }
}

@media (max-width: 1024px) {
    .isf {
        --isf-max-width:           1440px;
        --isf-contained-padding-h: 40px;
    }

    .isf--single .isf__image-wrap { block-size: var(--isf-single-height-tablet); }
}

@media (max-width: 767px) {

    .isf {
        --isf-contained-padding-h: 15px;
        --isf-padding-v:           20px;
        --isf-padding-top:         var(--isf-padding-v);
        --isf-padding-bottom:      var(--isf-padding-v);
        --isf-gap:                 15px;
    }


    .isf__inner,
    .isf__inner--contained { padding-inline: 0; }

    .isf__viewport { border-radius: 0; }

    .isf--single .isf__image-wrap {
        block-size:   var(--isf-single-height-mobile);
        aspect-ratio: auto;
    }

    .isf--grid .isf__viewport {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .isf--grid .isf__track {
        flex-wrap:                  nowrap;
        overflow-x:                 auto;
        overflow-y:                 hidden;
        scroll-behavior:            smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x:      contain;
        scrollbar-width:            none;
        -ms-overflow-style:         none;
        padding-bottom:             4px;
        cursor:                     grab;
        user-select:                none;
        touch-action:               pan-y;
        scroll-snap-type:           x mandatory;
    }
    .isf--grid .isf__track::-webkit-scrollbar { display: none; }
    .isf--grid .isf__track.is-dragging        { cursor: grabbing; scroll-behavior: auto; }

    .isf--grid .isf__controls {
        display:         flex;
        justify-content: center;
        gap:             12px;
    }

    .isf--slider .isf__track {
        padding-inline-start: 0;
        padding-inline-end:   0;
    }
    .isf--slider .isf__controls {
        justify-content:      center;
        padding-inline-start: 0;
        gap:                  12px;
    }

    .isf--grid.isf--cols-1 .isf__item,
    .isf--grid.isf--cols-2 .isf__item,
    .isf--grid.isf--cols-3 .isf__item,
    .isf--grid.isf--cols-4 .isf__item,
    .isf--slider.isf--view-1 .isf__item,
    .isf--slider.isf--view-2 .isf__item,
    .isf--slider.isf--view-3 .isf__item,
    .isf--slider.isf--view-4 .isf__item {
        flex:              0 0 calc((100% - var(--isf-gap) * 0.5) / 1.1);
        min-width:         0;
        scroll-snap-align: start;
        scroll-snap-stop:  always;
    }

    .isf__track {
        padding-inline-start:        var(--isf-contained-padding-h) !important;
        padding-inline-end:          var(--isf-contained-padding-h) !important;
        scroll-padding-inline-start: var(--isf-contained-padding-h) !important;
        scroll-padding-inline-end:   var(--isf-contained-padding-h) !important;
    }

    /* Single slide (no siblings to slide/grid between): let the image run
       edge-to-edge on mobile instead of sitting in the shared track gutter,
       while the heading/copy keep the same inset they already have. */
    .isf--single .isf__track {
        padding-inline-start: 0 !important;
        padding-inline-end:   0 !important;
    }

    .isf--single .isf__image-wrap {
        border-radius: 0;
    }

    .isf--single .isf__viewport {
        border-radius: 0;
    }

    .isf--single .isf__content {
        padding-inline: var(--isf-contained-padding-h);
    }

    .isf--grid .isf__image-wrap,
    .isf--slider .isf__image-wrap {
        block-size: var(--isf-img-height-mobile);
    }

    .isf__controls { margin-top: 1.5rem; }

    .isf__title
    {
        font-size: clamp(1.3rem, calc(1.5vw + 2px), 1.375rem) !important;
        font-weight: 600 !important;
    }

    .isf__text
    {
        font-size: clamp(1rem, calc(1vw + 2px), 1.125rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .isf__track                         { scroll-behavior: auto; }
    .isf__image, .isf__btn              { transition: none; }
    .isf__video-controls, .isf__fs-controls,
    .isf__seek-fill, .isf__seek-thumb   { transition: none; }
}