/* ============================================================
   Wiloke Flipbox — LOCAL front-end stylesheet (self-contained).
   The original CSS/JS were served from elementor-wil-flip-box
   .netlify.app (now offline). This reconstructs the Master-CSS
   utilities the templates use, plus the grid / masonry / flip /
   reveal structure. EVERY rule is scoped under
   .wiloke-flipbox-wrapper so it never affects the theme or other
   plugins.
   ============================================================ */

.wiloke-flipbox-wrapper .ai\:center{align-items:center;}
.wiloke-flipbox-wrapper .jc\:center{justify-content:center;}
.wiloke-flipbox-wrapper .jc\:space-between{justify-content:space-between;}
.wiloke-flipbox-wrapper .fxw\:wrap{flex-wrap:wrap;}
.wiloke-flipbox-wrapper .d\:flex{display:flex;}
.wiloke-flipbox-wrapper .d\:inline-block{display:inline-block;}
.wiloke-flipbox-wrapper .d\:inline-flex{display:inline-flex;}
.wiloke-flipbox-wrapper .d\:none{display:none;}
.wiloke-flipbox-wrapper .w\:100\%{width:100%;}
.wiloke-flipbox-wrapper .mih\:100\%{min-height:100%;}
.wiloke-flipbox-wrapper .ar\:1{aspect-ratio:1;}
.wiloke-flipbox-wrapper .ar\:380\/307{aspect-ratio:380/307;}
.wiloke-flipbox-wrapper .ar\:620\/456{aspect-ratio:620/456;}
.wiloke-flipbox-wrapper .w\:pfs\(18px\,23px\){width:clamp(18px,2vw,23px);}
.wiloke-flipbox-wrapper .w\:pfs\(30px\,50px\){width:clamp(30px,4vw,50px);}
.wiloke-flipbox-wrapper .w\:pfs\(40px\,73px\){width:clamp(40px,6vw,73px);}
.wiloke-flipbox-wrapper .h\:pfs\(18px\,23px\){height:clamp(18px,2vw,23px);}
.wiloke-flipbox-wrapper .h\:pfs\(30px\,50px\){height:clamp(30px,4vw,50px);}
.wiloke-flipbox-wrapper .h\:pfs\(40px\,73px\){height:clamp(40px,6vw,73px);}
.wiloke-flipbox-wrapper .bd\:1px_solid{border:1px solid;}
.wiloke-flipbox-wrapper .bdrs\:10px{border-radius:10px;}
.wiloke-flipbox-wrapper .bdrs\:15px_15px_0px_0px{border-radius:15px 15px 0px 0px;}
.wiloke-flipbox-wrapper .bdrs\:20px{border-radius:20px;}
.wiloke-flipbox-wrapper .bdrs\:30px{border-radius:30px;}
.wiloke-flipbox-wrapper .bdrs\:50\%{border-radius:50%;}
.wiloke-flipbox-wrapper .bga\:scroll{background-attachment:scroll;}
.wiloke-flipbox-wrapper .bgz\:cover{background-size:cover;}
.wiloke-flipbox-wrapper .bgp\:center{background-position:center;}
.wiloke-flipbox-wrapper .bgr\:no-repeat{background-repeat:no-repeat;}
.wiloke-flipbox-wrapper .bgc\:\#000{background-color:#000;}
.wiloke-flipbox-wrapper .bgc\:\#eee{background-color:#eee;}
.wiloke-flipbox-wrapper .bgc\:\#C8EEF7{background-color:#C8EEF7;}
.wiloke-flipbox-wrapper .bgc\:\#F9DD74{background-color:#F9DD74;}
.wiloke-flipbox-wrapper .bgc\:\#FBA300{background-color:#FBA300;}
.wiloke-flipbox-wrapper .bg\:linear-gradient\(0deg\,rgba\(0\,0\,0\,0\.2\)\,rgba\(0\,0\,0\,0\.2\)\){background:linear-gradient(0deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2));}
.wiloke-flipbox-wrapper .bg\:rgba\(0\,0\,0\,0\.6\){background:rgba(0,0,0,0.6);}
.wiloke-flipbox-wrapper .bxsh\:0_10px_50px_-5px_rgba\(0\,0\,0\,0\.28\){box-shadow:0 10px 50px -5px rgba(0,0,0,0.28);}
.wiloke-flipbox-wrapper .bxsh\:0_0_0_0_rgba\(0\,0\,0\,0\.5\)\|h:hover{box-shadow:0 0 0 0 rgba(0,0,0,0.5);}
.wiloke-flipbox-wrapper .fil\:drop-shadow\(0px_2px_16px_rgba\(0\,0\,0\,0\.06\)\){filter:drop-shadow(0px 2px 16px rgba(0,0,0,0.06));}
.wiloke-flipbox-wrapper .c\:\#fff{color:#fff;}
.wiloke-flipbox-wrapper .c\:\#29292F{color:#29292F;}
.wiloke-flipbox-wrapper .fw\:400{font-weight:400;}
.wiloke-flipbox-wrapper .fw\:500{font-weight:500;}
.wiloke-flipbox-wrapper .fw\:700{font-weight:700;}
.wiloke-flipbox-wrapper .fz\:15px{font-size:15px;}
.wiloke-flipbox-wrapper .fz\:18px{font-size:18px;}
.wiloke-flipbox-wrapper .fz\:20px{font-size:20px;}
.wiloke-flipbox-wrapper .fz\:32px{font-size:32px;}
.wiloke-flipbox-wrapper .fz\:pfs\(12px\,15px\){font-size:clamp(12px,1.3vw,15px);}
.wiloke-flipbox-wrapper .fz\:pfs\(13px\,18px\){font-size:clamp(13px,1.6vw,18px);}
.wiloke-flipbox-wrapper .fz\:pfs\(18px\,23px\){font-size:clamp(18px,2vw,23px);}
.wiloke-flipbox-wrapper .fz\:pfs\(23px\,28px\){font-size:clamp(23px,2.4vw,28px);}
.wiloke-flipbox-wrapper .fz\:pfs\(24px\,45px\){font-size:clamp(24px,3.4vw,45px);}
.wiloke-flipbox-wrapper .fz\:pfs\(40px\,73px\){font-size:clamp(40px,5.6vw,73px);}
.wiloke-flipbox-wrapper .lh\:1\.5{line-height:1.5;}
.wiloke-flipbox-wrapper .lts\:0{letter-spacing:0;}
.wiloke-flipbox-wrapper .lts\:1px\!{letter-spacing:1px!important;}
.wiloke-flipbox-wrapper .ta\:center{text-align:center;}
.wiloke-flipbox-wrapper .tt\:uppercase{text-transform:uppercase;}
.wiloke-flipbox-wrapper .td\:none\!{text-decoration:none!important;}
.wiloke-flipbox-wrapper .ws\:initial{white-space:initial;}
.wiloke-flipbox-wrapper .va\:middle{vertical-align:middle;}
.wiloke-flipbox-wrapper .m\:0{margin:0;}
.wiloke-flipbox-wrapper .ml\:10px{margin-left:10px;}
.wiloke-flipbox-wrapper .mt\:pfs\(10px\,20px\){margin-top:clamp(10px,1.6vw,20px);}
.wiloke-flipbox-wrapper .mt\:pfs\(10px\,30px\){margin-top:clamp(10px,2.4vw,30px);}
.wiloke-flipbox-wrapper .p\:0{padding:0;}
.wiloke-flipbox-wrapper .p\:20px{padding:20px;}
.wiloke-flipbox-wrapper .p\:30px{padding:30px;}
.wiloke-flipbox-wrapper .p\:40px{padding:40px;}
.wiloke-flipbox-wrapper .p\:12px_25px{padding:12px 25px;}
.wiloke-flipbox-wrapper .p\:13px_30px{padding:13px 30px;}
.wiloke-flipbox-wrapper .p\:30px_40px{padding:30px 40px;}
.wiloke-flipbox-wrapper .p\:63px_50px{padding:63px 50px;}
.wiloke-flipbox-wrapper .p\:pfs\(20px\,50px\){padding:clamp(20px,4vw,50px);}
.wiloke-flipbox-wrapper .pb\:16px{padding-bottom:16px;}
.wiloke-flipbox-wrapper .pl\:5px{padding-left:5px;}
.wiloke-flipbox-wrapper .pr\:5px{padding-right:5px;}
.wiloke-flipbox-wrapper .pt\:100\%{padding-top:100%;}
.wiloke-flipbox-wrapper .pos\:absolute{position:absolute;}
.wiloke-flipbox-wrapper .pos\:relative{position:relative;}
.wiloke-flipbox-wrapper .ins\:0{inset:0;}
.wiloke-flipbox-wrapper .t\:50\%{top:50%;}
.wiloke-flipbox-wrapper .z\:1{z-index:1;}
.wiloke-flipbox-wrapper .z\:2{z-index:2;}
.wiloke-flipbox-wrapper .z\:3{z-index:3;}
.wiloke-flipbox-wrapper .z\:11{z-index:11;}
.wiloke-flipbox-wrapper .op\:0{opacity:0;}
.wiloke-flipbox-wrapper .cur\:pointer{cursor:pointer;}
.wiloke-flipbox-wrapper .trf\:perspective\(1000px\){transform:perspective(1000px);}
.wiloke-flipbox-wrapper .trfs\:preserve-3d{transform-style:preserve-3d;}
.wiloke-flipbox-wrapper .trfo\:center{transform-origin:center;}
.wiloke-flipbox-wrapper .prs\:1000px{perspective:1000px;}
.wiloke-flipbox-wrapper .bfv\:hidden{backface-visibility:hidden;}
.wiloke-flipbox-wrapper .wc\:transform{will-change:transform;}
.wiloke-flipbox-wrapper .trf\:translateZ\(35px\){transform:translateZ(35px);}
.wiloke-flipbox-wrapper .trf\:rotate\(45deg\){transform:rotate(45deg);}
.wiloke-flipbox-wrapper .trf\:translateX\(-20px\)_translateZ\(0\){transform:translateX(-20px) translateZ(0);}
.wiloke-flipbox-wrapper .trf\:translateX\(0\%\)_translateZ\(0\)_translateY\(-50\%\){transform:translateX(0%) translateZ(0) translateY(-50%);}
.wiloke-flipbox-wrapper .trf\:rotateY\(180deg\){transform:rotateY(180deg);}
.wiloke-flipbox-wrapper .trf\:rotateY\(-180deg\){transform:rotateY(-180deg);}
.wiloke-flipbox-wrapper .trf\:rotateX\(180deg\){transform:rotateX(180deg);}
.wiloke-flipbox-wrapper .trf\:rotateX\(-180deg\){transform:rotateX(-180deg);}
.wiloke-flipbox-wrapper .trf\:rotate3d\(1\,1\,0\,180deg\){transform:rotate3d(1,1,0,180deg);}
.wiloke-flipbox-wrapper .trf\:rotate3d\(1\,1\,0\,-180deg\){transform:rotate3d(1,1,0,-180deg);}
.wiloke-flipbox-wrapper .trf\:rotate3d\(-1\,1\,0\,180deg\){transform:rotate3d(-1,1,0,180deg);}
.wiloke-flipbox-wrapper .trf\:rotate3d\(1\,-1\,0\,-180deg\){transform:rotate3d(1,-1,0,-180deg);}
.wiloke-flipbox-wrapper .trf\:scale\(1\.1\)\|h:hover{transform:scale(1.1);}
.wiloke-flipbox-wrapper .trf\:translateY\(3px\)\|h:hover{transform:translateY(3px);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:scale\(1\.1\)\*group-hover{transform:scale(1.1);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotateY\(180deg\)\*group-hover{transform:rotateY(180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotateY\(-180deg\)\*group-hover{transform:rotateY(-180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotateY\(0deg\)\*group-hover{transform:rotateY(0deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotateX\(180deg\)\*group-hover{transform:rotateX(180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotateX\(-180deg\)\*group-hover{transform:rotateX(-180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotateX\(0deg\)\*group-hover{transform:rotateX(0deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(1\,1\,0\,180deg\)\*group-hover{transform:rotate3d(1,1,0,180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(1\,1\,0\,-180deg\)\*group-hover{transform:rotate3d(1,1,0,-180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(1\,1\,0\,0\)\*group-hover{transform:rotate3d(1,1,0,0);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(-1\,1\,0\,180deg\)\*group-hover{transform:rotate3d(-1,1,0,180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(-1\,1\,0\,0\)\*group-hover{transform:rotate3d(-1,1,0,0);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(1\,-1\,0\,-180deg\)\*group-hover{transform:rotate3d(1,-1,0,-180deg);}
.wiloke-flipbox-wrapper .group\*:hover .trf\:rotate3d\(1\,-1\,0\,0\)\*group-hover{transform:rotate3d(1,-1,0,0);}
.wiloke-flipbox-wrapper .trs\:0\.3s{transition:0.3s;}
.wiloke-flipbox-wrapper .trs\:all_0\.3s{transition:all 0.3s;}
.wiloke-flipbox-wrapper .trs\:all_0\.3s_linear{transition:all 0.3s linear;}
.wiloke-flipbox-wrapper .trs\:all_\.3s_linear{transition:all .3s linear;}
.wiloke-flipbox-wrapper .trs\:all_\.7s_cubic-bezier\(\.645\,\.045\,\.355\,1\){transition:all .7s cubic-bezier(.645,.045,.355,1);}
.wiloke-flipbox-wrapper .lines-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.wiloke-flipbox-wrapper .lines-4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;}

@media (min-width:768px){
  .wiloke-flipbox-wrapper .bdrs\:5px\@\+sm{border-radius:5px;}
  .wiloke-flipbox-wrapper .p\:10px_20px\@\+sm{padding:10px 20px;}
  .wiloke-flipbox-wrapper .p\:25px_25px\@\+sm{padding:25px 25px;}
  .wiloke-flipbox-wrapper .p\:5px_12px\@\+sm{padding:5px 12px;}
  .wiloke-flipbox-wrapper .lines-2\@\+sm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
}

/* ============================================================
   Structural rules (hand-written, scoped under .wiloke-flipbox-wrapper)
   ============================================================ */
.wiloke-flipbox-wrapper,
.wiloke-flipbox-wrapper *,
.wiloke-flipbox-wrapper *::before,
.wiloke-flipbox-wrapper *::after { box-sizing: border-box; }

.wiloke-flipbox-wrapper { width: 100%; }
.wiloke-flipbox-wrapper img { max-width: 100%; }
.wiloke-flipbox-wrapper a { text-decoration: none; }

/* The templates ship the content hidden (pos:absolute; op:0) to avoid a flash
   before the remote assets loaded. Now that the stylesheet is local we simply
   reveal it (Script.js also re-asserts this for safety / the editor). */
.wiloke-flipbox-wrapper .wiloke-flipbox-content { position: static !important; opacity: 1 !important; }

/* ---- Grid variants (1 & 4): driven by the inline --col-* / --gap-* vars ---- */
.wiloke-flipbox-wrapper .wiloke-flipbox-grid {
  display: grid;
  gap: var(--gap-xs, 16px);
  grid-template-columns: repeat(var(--col-xs, 1), minmax(0, 1fr));
}
@media (min-width: 576px) {
  .wiloke-flipbox-wrapper .wiloke-flipbox-grid {
    gap: var(--gap-sm, 16px);
    grid-template-columns: repeat(var(--col-sm, 2), minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .wiloke-flipbox-wrapper .wiloke-flipbox-grid {
    gap: var(--gap-md, 20px);
    grid-template-columns: repeat(var(--col-md, 3), minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .wiloke-flipbox-wrapper .wiloke-flipbox-grid {
    gap: var(--gap-lg, 20px);
    grid-template-columns: repeat(var(--col-lg, 4), minmax(0, 1fr));
  }
}
.wiloke-flipbox-wrapper .wiloke-flipbox-col { min-width: 0; }

/* ---- Masonry variants (2 & 3): robust CSS-columns layout (no JS needed) ----
   The 3-class selector outranks the atomic ".d:flex" on the same element. */
.wiloke-flipbox-wrapper .wiloke-flipbox-content .grid-masonry-js {
  display: block;
  column-count: 1;
  column-gap: var(--gap-lg, 24px);
}
@media (min-width: 576px) {
  .wiloke-flipbox-wrapper .wiloke-flipbox-content .grid-masonry-js { column-count: 2; }
}
@media (min-width: 992px) {
  .wiloke-flipbox-wrapper .wiloke-flipbox-content .grid-masonry-js { column-count: 3; }
}
.wiloke-flipbox-wrapper .grid-masonry-js > * {
  width: 100%;
  margin-bottom: var(--gap-lg, 24px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.wiloke-flipbox-wrapper .masonry-image-js { display: none !important; }

/* Masonry card fills its column; a default ratio prevents collapse before
   Script.js applies each image's real aspect-ratio (true masonry heights). */
.wiloke-flipbox-wrapper .wiloke-2-container { width: 100%; }
.wiloke-flipbox-wrapper .wiloke-2-container:not([style*="aspect-ratio"]) { aspect-ratio: 1 / 1; }

/* Empty-state helper box keeps a tidy look in the editor */
.wiloke-flipbox-wrapper > .ta\:center { border-radius: 12px; }