@charset "UTF-8";
/******************************************************

******************************************************/
:root { --grid-columns: 3; }
#gallery { flex: auto; column-count: var(--grid-columns); column-gap: 1rem; margin: 0; }
#gallery.full-width { display: flex; flex-direction: column; width: 100%; column-count: unset !important; column-gap: 0; }
#cats-container { padding: 0; }
#gallery-wrapper { flex: 2; display: flex; flex-direction: column; }
#detail-container { display: flex; gap: 2rem; align-items: flex-start; margin: 0; padding:0; }
#gallery-cats .cat-card, #gallery .card { display: inline-block; width: 100%; margin-bottom: 1rem; vertical-align: top; position: relative; overflow: hidden; border-radius: 8px; background: #f0f0f0; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
#gallery-cats .cat-card:hover, #gallery .card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.cat-card img, .card img { width: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.cat-card:hover img, .card:hover img { transform: scale(1.05); }
.cat-card h4, .card h4 { margin: 0 auto; text-align: center; font-size: 1.2rem; font-weight: 600; color: #fff; padding: .5rem .5rem 1rem; }
.card:hover .overlay-text, .cat-card:hover .cat-overlay { opacity: 1; pointer-events: all; }
.card .overlay-text, .cat-card .cat-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: .5rem; box-sizing: border-box; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); opacity: 1; transition: opacity .3s ease; pointer-events: none; }
.cat-card .icon-overlay, .card .icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s ease; pointer-events: none; font-size: 1rem; font-weight: 600; color: #1f2937; background: rgba(255,255,255,0); padding: 0.8rem 1.5rem; border-radius: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0); cursor: pointer; }
.cat-card:hover .icon-overlay, .card:hover .icon-overlay { opacity: 1; pointer-events: all; }
.cat-card .icon-overlay i, .card .icon-overlay i { font-size: 2.5rem; color: rgb(5,146,194); background: rgba(255,255,255,1); padding: 0.5rem; border-radius: 50%; box-shadow: rgba(0,114,186,0.4) 0 -25px 85px; }
.cat-card .icon-overlay i.fa-circle-play, .card .icon-overlay i.fa-circle-play { color: red; }

@media (max-width:600px) { #gallery-cats { column-width: 150px; } #gallery { column-width: 150px; } }
@media (max-width:768px) { .cat-card .icon-overlay, .card .icon-overlay { display: none!important; } }

.category-hero { width: 100%; overflow: hidden; border-radius: 8px; margin-bottom: 1rem; }
.category-hero__img { width: 100%; display: block; object-fit: cover; max-height: 300px; }
.hero-image { width: 100%; margin-bottom: 1.5rem; overflow: hidden; border-radius: 8px; }
.hero-image img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .3s ease; }
.hero-image:hover img { transform: scale(1.05); }
.detail-header { font-family: "Asap Condensed", sans-serif; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; margin: 0 0 3rem; background: rgba(155,208,223,0.8); box-shadow: 0 -25px 85px rgba(0,114,186,.4); padding: 0.8rem; }
.detail-header .detail-left, .detail-header .detail-center, .detail-header .detail-right { flex: 1; }
.detail-header .detail-left { text-align: left; }
.detail-header .detail-center { text-align: center; }
.detail-header .detail-right { text-align: right; }
.detail-header button { background: rgba(155,208,223,0); border: 2px solid rgba(0,195,186, .3); padding: .7rem .8rem; color: #0592c2; font-size: .68rem; font-weight: 700; text-transform: uppercase; border-radius: 8px; cursor: pointer; box-shadow: 0 -5px 15px rgba(0,114,186,.4); transition: color .2s, transform .2s; }
.detail-header button:hover { color: #037b98; transform: scale(1.1); }
.detail-header h2 { margin: 0; font-size: 2rem; font-weight: 800; text-shadow: 0 2px 4px rgba(0,0,0,0); text-transform: uppercase; letter-spacing: .1rem; color: #0592c2; }
.detail-header .detail-center .category-description { margin: 0.5rem 0 0; font-size: 0.9rem; font-weight: 400; color: rgba(0,0,0,0.7); }
#detail-header[hidden], #detail-container[hidden] { display: none; }

#gallery-nav.grid-mode { width: 350px; flex-shrink: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
#gallery-nav.list-mode { width: 380px; flex-shrink: 0; display: block; }
#gallery-nav .nav-title { font-family: "Asap Condensed", sans-serif; position:relative; width: 100%; display: block; margin: 0 0 1rem; padding-bottom: 1rem; font-size: 2rem; font-weight: 800; text-transform: uppercase; color: #0592c2; box-sizing: border-box; }
#gallery-nav.grid-mode .nav-title { grid-column: 1 / -1; }
#gallery-nav .nav-list { list-style: none; margin: 0; padding: 0; }
#gallery-nav .nav-list li { list-style: none; list-style-type: none; color: #0592c2; font-size: 1rem; font-weight: 600; padding: .6rem 2rem; margin-bottom: 0.3rem; cursor: pointer; border-bottom: 0px solid #ddd; border-radius: 8px; background: rgba(155,208,223,0.3); transition: all .2s ease; }
#gallery-nav .nav-list li.nav-toggle { position: relative; top: 20px; border: 2px solid rgba(0,195,186, .4); color: #0592c2;  font-size: 1.1rem; font-weight: 800; padding: 0.8rem 2rem; }
#gallery-nav .nav-list li.nav-toggle i { color: red; }

#gallery-nav .nav-list li:hover, #gallery-nav .nav-list li.active { background: rgba(155, 208, 223, 0.55);transform: scale(1.1); box-shadow: 2px 0px 21px 5px rgba(0, 114, 186, .5); transition: color .2s, transform .2s; cursor: pointer;}
#gallery-nav.list-mode .nav-card, #gallery-nav.grid-mode .nav-list { display:none; }
#gallery-nav .nav-list li.active { background: rgba(5, 146, 194, 0.2); font-weight: bold; }
#gallery-nav .nav-card { position: relative; overflow: hidden; border-radius: 8px; background: #f0f0f0; opacity:0.3; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
#gallery-nav .nav-card:hover { transform: scale(1.02); box-shadow: 0 4px 15px rgba(0,0,0,0.15); opacity:1; transition: opacity .2s ease; }
#gallery-nav .nav-card.active { outline: 3px solid rgba(5,146,194,0.7); opacity:1; }
#gallery-nav .nav-card.active:hover { opacity:1; }
#gallery-nav .nav-card.active .cat-overlay { opacity: 1; }
#gallery-nav .nav-card img { width: 100%; height: 120px; object-fit: cover; transition: transform .3s ease; }
#gallery-nav .nav-card:hover img { transform: scale(1.1); }
#gallery-nav .nav-card h5 { margin: 0 auto; text-align: center; font-size: .75rem; color: #fff; padding: .1rem; font-weight: 600; }
#gallery-nav .nav-card .cat-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content:center; opacity: 0; transition: opacity .3s ease; }
#gallery-nav .nav-card:hover .cat-overlay { opacity: 1; transition: opacity .3s ease; }
@media (max-width:997px) { #gallery-nav.grid-mode { grid-template-columns: 1fr; } }
@media (max-width:800px) { #detail-container { flex-direction: column; } #gallery-nav.grid-mode { order: 1; grid-template-columns: repeat(2,1fr); width: 100%; } #gallery-wrapper { order: 2; } #gallery { order: 1; } #load-more { order: 2; margin-top: 1rem; align-self: flex-start; } }
#category-dropdown-container { display: none; margin: 1.2rem 0; }
#category-dropdown { appearance: none; width: 100%; padding: .8rem 1rem; font-size: 1rem; color: #0592c2; font-weight: 800; background: rgba(155,208,223,0.4) url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right .75rem center; background-size: 12px 8px; border: 2px solid rgba(155,208,223,1); border-radius: 8px; box-shadow: 0 -25px 85px rgba(0,114,186,.4); transition: color .2s, border-color .2s, box-shadow .2s, transform .2s; cursor: pointer; }
#category-dropdown:hover { border-color: rgba(155,208,223,.8); box-shadow: 0 -25px 65px rgba(0,114,186,.2); }
#category-dropdown:focus { outline: none; border-color:#5b9dd9; box-shadow: 0 -25px 35px rgba(0,114,186,.24); }
#category-dropdown option:hover { background-color: #e6f7ff; }
#category-dropdown.open { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6l5-5 5 5' stroke='%23777' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
@media (max-width:800px) { #category-dropdown-container { display: block; } #gallery-nav.grid-mode, #gallery-nav.list-mode { display: none; } }
@media (min-width:801px) { #category-dropdown-container { display: none; } }

.carousel { position: relative; border-radius: 8px; width: 100%; /* padding-top: 56.25%; */ padding-top: 65.25%; overflow: hidden; }
.carousel .slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.carousel .slide { position: absolute; top:0; left:0; width:100%; opacity:0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
.carousel .slide.active { opacity: 1; visibility: visible; }
.carousel.effect-fade .slide { transition: opacity .5s ease, visibility .5s ease; }
.carousel.effect-slide .slides { display: flex; transition: transform .5s ease; }
.carousel.effect-slide .slide { position: relative; opacity: 1; visibility: visible; flex: 0 0 100%; }
.carousel .slide a { display: block; position: relative; }
.carousel .slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 8px; }
.carousel .slide img.landscape { object-fit: contain; }
.carousel .slide img.portrait { object-fit: contain; }
.carousel .slide-overlay { position: absolute; top: 60px; left: 60px; /*width: 100%;*/ text-align: center; transform: translate(-50px, -50px); background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); padding: 0.8rem 0.45rem; border-radius: 10px; cursor: pointer; opacity: 1; transition: opacity .3s ease; pointer-events: none; word-wrap: break-word; }
.carousel .slide-overlay i { font-size: 2rem; color: rgb(5, 146, 194); background: rgba(155, 208, 223, 0.8); box-shadow: rgba(0, 114, 186, 0.4) 0 -25px 85px; padding: 0; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; cursor: pointer; pointer-events: all; text-align: center; display: block; margin: 0 auto 0.5rem auto; }
.carousel .slide-overlay h4 { width: 100px; max-width: 110px; font-size: 1rem; line-height: 1.1; font-family: "Asap Condensed", sans-serif; font-weight: 800; text-transform: uppercase; }
.carousel:hover .slide.active .slide-overlay { opacity:1; pointer-events: all; }
@media (max-width:768px) { .carousel .slide-overlay { display:none!important; } }

.carousel button { position:absolute; top:50%; transform:translateY(-50%); background:rgba(155,208,223,0.8); font-size:1.8rem; color:rgb(5,146,194); border:none; padding:.8rem 1.2rem; border-radius:8px; cursor:pointer; opacity:0; transition:opacity .3s, transform .3s; }
.carousel button:hover { background: #fff; transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.carousel button:focus { outline: none; box-shadow: none; }
.carousel button.prev { left:0; transform:translate(-100%, -50%); border-radius:0 8px 8px 0; }
.carousel button.next { right:0; transform:translate(100%, -50%); border-radius:8px 0 0 8px; }
.carousel:hover button.prev, .carousel:hover button.next { opacity:1; transform:translate(0, -50%); }
.carousel .bullets { position:absolute; bottom: 8rem; left: 50%; transform: translate(-8rem, -50%); display:flex; gap:.5rem; text-align:center; z-index: 10; }
.carousel .bullets button { position: relative; top: unset; transform: translateY(-50%); padding: 0; margin:0; width: 15px; height: 15px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background .2s; outline: none; opacity: 1; }
.carousel .bullets button.active { background:rgba(5,146,194,0.85); }
.thumb-carousel { position: relative; overflow: hidden; width: 100%; margin-top: 1rem; background: rgba(255,255,255,1); padding: 0.5rem; border-radius: 8px; z-index: 99; }
.thumb-carousel .thumbnails { width: 98%; margin: 0 auto; display: flex; gap: .65rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .5rem 1.2rem; box-sizing: border-box; user-select: none; cursor: grab; scroll-behavior: smooth; }
.thumb-carousel .thumbnails::-webkit-scrollbar { display: none; }
.thumb-carousel .thumbnails { scrollbar-width: none;  }
.thumb-carousel .thumbnails.dragging { cursor: grabbing; user-select: none; }
.thumb-carousel button.thumb-prev, .thumb-carousel button.thumb-next { background: rgba(255, 255, 255, 0.8); width: 2rem; height: 2rem; border-radius: 4px; font-size: 1.2rem; line-height: 0.5rem; padding: .5rem .2rem .3rem .3rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0); z-index: 10; }
.thumb-carousel button.thumb-prev { left: 1rem; transform:translate(-100%, -50%); }
.thumb-carousel button.thumb-next { right: 1rem; transform:translate(100%, -50%); }
.thumb-carousel:hover button.thumb-prev, .thumb-carousel:hover button.thumb-next { opacity:1; transform:translate(0, -50%); }
.thumb-carousel button.thumb-prev:hover, .thumb-carousel button.thumb-next:hover {  }
#gallery.full-width .thumb-carousel { max-width: 100%; }
.thumb-carousel .thumbnails img { width: 100px; height: 80px; object-fit: cover; scroll-snap-align: center; cursor: pointer; opacity: .69; border: 2px solid transparent; border-radius: 8px; transition: opacity .3s, border-color .3s; cursor: grab; user-select: none; pointer-events: all; cursor: pointer; transition: transform 0.2s ease; }
.thumb-carousel .thumbnails img.active { opacity: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-radius: 8px; border-color: rgba(155,208,223,0.8); transform: scale(1.1);  }
.thumb-carousel .thumbnails img:hover { opacity: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.2); border-color: rgba(102, 126, 234, 0.5); transform: scale(1.05); }

#gallery.video-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: 1rem; margin: 0; }
#gallery.video-grid .video-card { position: relative; overflow: hidden; border-radius: 8px; background: #000; }
#gallery.video-grid .video-card video { width: 100%; display: block; border-radius: 8px; }
#gallery.video-grid .video-card img { width: 100%; display: block; object-fit: cover; border-radius: 8px; }

.video-card .overlay-text { background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent); transition:all .2s ease; }
.video-card:hover .overlay-text { background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent); }
.video-card h4 { margin: 0 auto; text-align: center; font-size: 1.2rem; font-weight: 600; color: #fff; padding: .5rem .5rem 1rem; }
.video-card .icon-overlay { text-align: center; transform: translate(-55%,-50%); background: none; padding:0; }
.video-card:hover .icon-overlay { opacity: 1; pointer-events: all; }
.video-card .icon-overlay i {  transition: transform 0.3s ease,; font-size: 2.2rem; line-height: 3.2rem; color: red; background: rgba(255, 255, 255, 1); padding: 0; width: 3.2rem; height: 3.2rem; }
.video-card:hover .icon-overlay i { transform: scale(1.15); }

@media (max-width:600px) { #gallery-cats { column-width: 150px; } #gallery { column-width: 150px; } }
@media (max-width:768px) { .cat-card .icon-overlay, .card .icon-overlay, .video-card .icon-overlay { display: none!important; } }

.fade-container { transition: opacity 0.4s ease; }
.fade-out { opacity: 0; transition: opacity .4s ease; }
.fade-in { opacity: 1; }
#scroll-sentinel { height: 1px; visibility: hidden; }
button#load-more { align-self: flex-start; background: rgba(155,208,223,0.8); padding: .8rem 1rem; color: #0592c2; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 -25px 85px rgba(0,114,186,.4); transition: color .2s, transform .2s; }
button#load-more:hover { color: #037b98; transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.no-items { text-align: center; padding: 3rem; color: #6b7280; font-size: 1.2rem; background: #f9fafb; border-radius: 12px; border: 2px dashed #d1d5db; }

.lightbox-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; z-index:1000; cursor:pointer; }
.lightbox-content { position:relative; max-width:90%; max-height:90%; cursor:default; }
.lightbox-content img, .lightbox-content iframe { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.lightbox-close { position:absolute; top:-40px; right:-40px; width:40px; height:40px; background:rgba(255,255,255,0.9); border:none; border-radius:50%; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.lightbox-close:hover { background:#fff; transform:scale(1.1); }

@media (max-width: 768px) { .lightbox-close { top: 10px; right: 10px; } }

#gallery.grid-view { column-count: var(--grid-columns); column-gap: 1rem; display: block !important; width: auto !important; }
#gallery.grid-view .card { display: inline-block; width: 100%; margin-bottom: 1rem;  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }

.plyr { border-radius: 20px; }
.plyr-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.plyr-modal-content { position: relative; width: min(100%, 1200px); max-height: 90vh; padding: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); background: #000; }
.plyr-modal-content .plyr__video-embed,
.plyr-modal-content video { display: block; width: 90vw; max-width: 1200px; height: auto; aspect-ratio: 16/9; }
.plyr-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.95); color: #111; font-size: 22px; line-height: 40px; cursor: pointer; z-index: 10000; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.plyr-close:hover { transform: scale(1.06); }
:root { --plyr-color-main: #0592c2; --plyr-control-icon-size: 18px; --plyr-control-spacing: 12px; --plyr-range-fill-background: #0592c2; }
.plyr--video .plyr__controls { font-family: "Asap Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); padding-inline: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.plyr__control { border-radius: 8px; }
.plyr__popover, .plyr__menu { border-radius: 8px; overflow: hidden; }
.plyr__video-embed { /* YouTube ratio */ aspect-ratio: 16/9; }

/*
.plyr-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.plyr-modal-content { position: relative; max-width: 90%; max-height: 90%; }
.plyr-modal-content video, .plyr-modal-content iframe { width: 100%; height: auto; border-radius: 8px; }
.plyr-close { position: absolute; top: -1.5rem; right: -1.5rem; background: #fff; border: none; border-radius: 50%; width: 2.5rem; height: 2.5rem; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.plyr-close:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
*/

@media (max-width: 768px) { .plyr-modal-content .plyr__video-embed, .plyr-modal-content video {   width: 100vw;   max-width: 100vw;   aspect-ratio: 16/9; } .plyr-close { top: 10px; right: 10px; } }











#car-a .carousel, 
#car-b .carousel, 
#car-c .carousel, 
#car-d .carousel { padding-top: 0 !important; }

#car-a .carousel button, 
#car-b .carousel button, 
#car-c .carousel button, 
#car-d .carousel button { top: 45%; padding: 15px 15px 10px 15px; }

#car-a .carousel .slide-overlay, 
#car-b .carousel .slide-overlay, 
#car-c .carousel .slide-overlay, 
#car-d .carousel .slide-overlay { top: 50px; left: 50px; width: 100%; height: 100%; transform: translate(-50px, -50px); background: rgba(255, 255, 255, 0); 
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); padding: 0; opacity: 1; }

#car-a .carousel button.open-lightbox, 
#car-b .carousel button.open-lightbox, 
#car-c .carousel button.open-lightbox, 
#car-d .carousel button.open-lightbox { position: absolute;
    opacity: 1;
    top: -10px;
    right: -10px;
    transform: scale(.8); border-radius: 0 8px 0 8px; }

#car-a .carousel .slide-overlay h4, 
#car-b .carousel .slide-overlay h4, 
#car-c .carousel .slide-overlay h4, 
#car-d .carousel .slide-overlay h4 {
    width: auto;
    max-width: 220px;
    font-size: 1rem;
    text-align: left;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    background: #fff;
    padding: 1rem 2rem;
    border-bottom-right-radius: 10px;
}
#car-a .carousel .slide-overlay i,
#car-b .carousel .slide-overlay i,
#car-c .carousel .slide-overlay i,
#car-d .carousel .slide-overlay i { transform: scale(1); font-size: 1.5rem; width: 50px; line-height: 50px; }

















				
										 
																																						  
																																				
																					 
																																														 
																																																																																																												
																														  
																																																																																																																											 
																															
																																																																						
																															 

/* Responsive column count for #gallery.grid-view & .video-grid */
@media (max-width: 1200px){ :root { --grid-columns: 2; } }
@media (max-width: 700px){  :root { --grid-columns: 1; } }

/* Keyboard: show carousel arrows when tabbing inside the carousel */
.carousel:focus-within button.prev,
.carousel:focus-within button.next { opacity: 1; transform: translate(0, -50%); }
.carousel button:focus-visible { outline: 3px solid #0592c2; outline-offset: 2px; box-shadow: none; }
.carousel .bullets button:focus-visible { outline: 2px solid #fff; }
																																																																																								
																																	  
																 
																	  
																	
																																																																																																										
																							 
																																																									
																																													 
																						  

/* Make overlay actions visible when an element inside the card has focus */
.card:focus-within .icon-overlay,
.cat-card:focus-within .icon-overlay,
.video-card:focus-within .icon-overlay { opacity: 1; pointer-events: all; }
																						 
																																																																																																		
																																																														
																		

/* BUGFIX: stray comma broke transition parsing */
																												
																														 
																																																				 
																																														
																												
																  
																			 
.video-card .icon-overlay i { transition: transform 0.3s ease; }
																			  
																																											  
																																																																							
																													
																											  
																																																																																														 
																					  
																																																																																																																																																																																																			 
																																				 
																																					
																				  
																																																																										
																																															  
																									 

/* Touch ergonomics for horizontal thumb scroller */
.thumb-carousel .thumbnails { touch-action: pan-x; }
																																																	  
																				
																											  
																											
																																		
																			 
																																							
																		 
																		 
																																																																																																																																		 
																																																																																																																	
																																																			 
																										  
																											

/* Focus styles for non-link nav items */
#gallery-nav .nav-list li:focus-visible {
																			  
																															 
																															 
																																	  
																																																				  
																																																																																														  
  outline: 3px solid rgba(5,146,194,.6);
  outline-offset: 2px;
																																																																																												
																					  
																		 
																									  
																																																																																														  
																											  
																											  
																																									  
																												 
																		  
}
																																																										 
																																																				 

/* Keep nav hover scale from nudging layout */
#gallery-nav .nav-list li { will-change: transform; transform-origin: left center; }
																														
																																			  

/* Lightbox & Plyr overlays above everything */
.lightbox-overlay { z-index: 999999; }
																																											  
.plyr-modal-overlay { z-index: 1000000; }
																						  
																																																																	  
																				 

/* Tidy small screens: center bullets, keep your existing 150px columns */
@media (max-width: 600px) {
  .carousel .bullets { bottom: .75rem; left: 50%; transform: translateX(-50%); }
}

/* Reduced-motion users: nix fancy transitions/zooms */
@media (prefers-reduced-motion: reduce) {
  .card:hover img, .cat-card:hover img, .hero-image:hover img { transform: none; }
  .carousel .slides, .carousel.effect-slide .slides { transition: none; }
  .carousel button, .thumb-carousel .thumbnails img { transition: none; }
																																			 
}

/* Extra: keyboard outline for grid-mode nav cards */
#gallery-nav .nav-card:focus-visible { outline: 3px solid rgba(5,146,194,.7); outline-offset: 2px; }
																																									



.carousel .bullets { display: none; }

.slider-container.galerija { min-height: 10px; }