/*
 * components.css
 *
 * Runtime CSS for VvvebJs element components (gallery, etc.) that must work
 * inside the editor preview iframe and on the live public page.
 *
 * These styles are extracted from vvvebjs/css/editor.css where they are
 * bundled with editor-only rules, making them unavailable in the iframe/public
 * context. Any new component that needs runtime CSS should be added here.
 */

/* -------------------------------------------------------------------------
 * Gallery / masonry
 * Matches the elements/gallery component in components-elements.js
 * ------------------------------------------------------------------------- */

.gallery {
    column-count: 4;
    column-gap: 20px;
}

.gallery.flex {
    display: flex;
    flex-wrap: wrap;
}

.gallery.flex .item {
    flex: 1 0 21%;
}

.gallery.grid {
    display: grid;
}

.gallery.has-shadow .item img {
    box-shadow: 2px 2px 4px 0 #ccc;
}

.gallery.masonry {
    margin: 0;
    padding: 0;
}

.gallery .item {
    margin-bottom: 20px;
    width: 100%;
    transition: 1s ease all;
    box-sizing: border-box;
}

.gallery .item a {
    display: block;
}

.gallery .item img {
    max-width: 100%;
    width: 100%;
}

.gallery.hover-effect .item {
    overflow: hidden;
}

.gallery.hover-effect .item img {
    transition: transform 0.4s ease;
}

.gallery.hover-effect .item:hover img {
    transform: scale(1.05);
}

@media only screen and (max-width: 320px) {
    .gallery.masonry { column-count: 1; }
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
    .gallery.masonry { column-count: 2; }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .gallery.masonry { column-count: 3; }
}

@media only screen and (min-width: 1201px) {
    .gallery.masonry { column-count: 4; }
}

/* -------------------------------------------------------------------------
 * Line Awesome icon font
 * editor.css only loads in the outer editor frame, not in the preview iframe
 * or the live public page. These declarations make social-icons (and any other
 * component using lab/las/lar classes) render correctly everywhere.
 * Font files are vendored at subsite/vvvebjs/fonts/line-awesome/.
 * ------------------------------------------------------------------------- */

@font-face {
  font-family: "Line Awesome Brands";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../vvvebjs/fonts/line-awesome/la-brands-400.woff2") format("woff2"),
       url("../vvvebjs/fonts/line-awesome/la-brands-400.woff") format("woff"),
       url("../vvvebjs/fonts/line-awesome/la-brands-400.ttf") format("truetype");
}

@font-face {
  font-family: "Line Awesome Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vvvebjs/fonts/line-awesome/la-regular-400.woff2") format("woff2"),
       url("../vvvebjs/fonts/line-awesome/la-regular-400.woff") format("woff"),
       url("../vvvebjs/fonts/line-awesome/la-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "Line Awesome Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../vvvebjs/fonts/line-awesome/la-solid-900.woff2") format("woff2"),
       url("../vvvebjs/fonts/line-awesome/la-solid-900.woff") format("woff"),
       url("../vvvebjs/fonts/line-awesome/la-solid-900.ttf") format("truetype");
}

.la, .lar, .las, .lab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.lab {
  font-family: "Line Awesome Brands", monospace;
  font-weight: 400;
}

.lar {
  font-family: "Line Awesome Free", monospace;
  font-weight: 400;
}

.las, .la {
  font-family: "Line Awesome Free", monospace;
  font-weight: 900;
}

.la-xs  { font-size: 0.75em; }
.la-sm  { font-size: 0.875em; }
.la-lg  { font-size: 1.33333em; line-height: 1.2em; vertical-align: -0.0667em; }
.la-2x  { font-size: 2em; }
.la-3x  { font-size: 3em; }
.la-4x  { font-size: 4em; }
.la-5x  { font-size: 5em; }
.la-fw  { text-align: center; width: 1.25em; }

/* Icon code points used by the social-icons component */
.la-facebook-f:before    { content: "\f39e"; }
.la-facebook:before      { content: "\f09a"; }
.la-linkedin-in:before   { content: "\f0e1"; }
.la-linkedin:before      { content: "\f08c"; }
.la-twitter:before       { content: "\f099"; }
.la-instagram:before     { content: "\f16d"; }
.la-github:before        { content: "\f09b"; }
.la-youtube:before       { content: "\f167"; }
.la-pinterest:before     { content: "\f0d2"; }
.la-tiktok:before        { content: "\e07b"; }

/* -------------------------------------------------------------------------
 * Flip box
 * Matches the elements/flip-box component in components-elements.js
 * State classes toggled by the Enabled / Show back / Vertical properties.
 * ------------------------------------------------------------------------- */

.flip-box {
    perspective: 1000px;
    min-height: 200px;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-box-front,
.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.flip-box-back {
    transform: rotateY(180deg);
}

/* Vertical flip variant */
.flip-box.vertical .flip-box-back {
    transform: rotateX(180deg);
}

/* Show back face (editor "Show back" toggle) */
.flip-box.back .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box.vertical.back .flip-box-inner {
    transform: rotateX(180deg);
}

/* Hover flip on the live page when .enabled is set */
.flip-box.enabled:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box.enabled.vertical:hover .flip-box-inner {
    transform: rotateX(180deg);
}