/* POPUP: FLY-IN, LAYOUT 1
Beeld boven, tekst en knop eronder. De waarden komen uit de goedgekeurde
mockup Mockup/popup-worship-event-template.html (blok .wwe-popup).
Kleuren, sluitknop, focus en minder beweging staan in popup-base.php.
--------------------------------------------------- */

/* MATEN
--------------------------------------------------- */
.px-popup--flyin-layout-1 {
--popup-ready: 1; /* popups.js opent de popup pas als deze opmaak er is */
--popup-width: 400px;
--popup-offset: 24px;
--popup-layer: 998; /* onder het off-canvas menu (999 in header-styles.php) */
--popup-shadow: 0 24px 60px color-mix(in srgb, var(--text) 32%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 14%, transparent);
--popup-ease: cubic-bezier(.2, .8, .3, 1);
--popup-fade: .45s;
--popup-slide: .55s;
--popup-shift: 32px;
--popup-media-height: 228px;
--popup-body-padding: 20px 24px 22px;
--popup-deco-width: 120px;
--popup-kicker-size: 12px;
--popup-title-size: 30px;
--popup-text-size: 14px;
--popup-small-size: 13px;
--popup-button-size: 16px;
--popup-chip-width: 108px;
}

/* POSITIE EN ANIMATIE
--------------------------------------------------- */
.px-popup--flyin-layout-1 {
position:fixed;
right:var(--popup-offset);
bottom:var(--popup-offset);
z-index:var(--popup-layer);
display:flex;
flex-direction:column;
width:min(var(--popup-width), 100% - var(--popup-offset) * 2);
max-height:calc(100vh - var(--popup-offset) * 2);
max-height:calc(100dvh - var(--popup-offset) * 2);
opacity:0;
transform:translateY(var(--popup-shift));
transition:opacity var(--popup-fade) var(--popup-ease), transform var(--popup-slide) var(--popup-ease);
pointer-events:none;
}

.px-popup--flyin-layout-1.px-popup--position-left {
right:auto;
left:var(--popup-offset);
}

.px-popup--flyin-layout-1.is-open {
opacity:1;
transform:none;
pointer-events:auto;
}

/* KAART
--------------------------------------------------- */
.px-popup--flyin-layout-1 .px-popup__card {
position:relative;
min-height:0;
overflow:auto;
overscroll-behavior:contain;
background:var(--white);
border-radius:var(--border-radius);
box-shadow:var(--popup-shadow);
color:var(--text);
font-weight:300;
line-height:normal;
text-align:left;
}

/* BEELD
--------------------------------------------------- */
.px-popup--flyin-layout-1 .px-popup__media {
position:relative;
height:var(--popup-media-height);
background:var(--popup-chip-bg);
overflow:hidden;
}

.px-popup--flyin-layout-1 .px-popup__image {
display:block;
width:100%;
max-width:none;
height:100%;
object-fit:cover;
object-position:50% var(--popup-image-y, 38%);
}

/* TEKST
--------------------------------------------------- */
.px-popup--flyin-layout-1 .px-popup__body {
position:relative;
padding:var(--popup-body-padding);
overflow:hidden;
}

.px-popup--flyin-layout-1 .px-popup__deco {
position:absolute;
right:-18px;
bottom:-22px;
width:var(--popup-deco-width);
height:auto;
opacity:.07;
pointer-events:none;
}

.px-popup--flyin-layout-1 .px-popup__deco path {
fill:var(--popup-accent);
}

.px-popup--flyin-layout-1 .px-popup__kicker {
margin:0 0 6px;
font-size:var(--popup-kicker-size);
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--popup-accent-small);
}

.px-popup--flyin-layout-1 .px-popup__title {
margin:0 0 8px;
font-size:var(--popup-title-size);
font-weight:800;
line-height:1.05;
letter-spacing:0;
color:var(--popup-accent);
}

.px-popup--flyin-layout-1 .px-popup__intro {
margin:0 0 14px;
font-size:var(--popup-text-size);
font-weight:300;
line-height:1.5;
}

.px-popup--flyin-layout-1 .px-popup__dates {
display:flex;
flex-direction:column;
gap:6px;
margin:0 0 10px;
padding:0;
list-style:none;
}

.px-popup--flyin-layout-1 .px-popup__date {
display:flex;
align-items:center;
gap:10px;
margin:0;
padding:0;
font-size:var(--popup-text-size);
font-weight:500;
}

.px-popup--flyin-layout-1 .px-popup__chip {
flex:none;
display:inline-block;
min-width:var(--popup-chip-width);
padding:6px 10px;
border-radius:var(--border-radius-button);
background:var(--popup-chip-bg);
color:var(--popup-chip-color);
font-size:var(--popup-small-size);
font-weight:800;
letter-spacing:.3px;
text-align:center;
}

.px-popup--flyin-layout-1 .px-popup__meta {
margin:0 0 16px;
font-size:var(--popup-small-size);
font-weight:300;
line-height:1.5;
color:var(--text);
}

/* KNOP EN LINK
De knop gebruikt de themaknop uit button-styles.php, hier alleen op de
maat van de kaart gebracht.
--------------------------------------------------- */
.px-popup--flyin-layout-1 .px-popup__actions {
position:relative;
display:flex;
flex-direction:column;
align-items:stretch;
gap:12px;
text-align:center;
}

.px-popup--flyin-layout-1 .px-button .px-button-link {
display:flex;
width:100%;
padding:15px 24px;
font-size:var(--popup-button-size);
font-weight:800;
}

.px-popup--flyin-layout-1 .px-button .px-button-link span {
line-height:0;
}

.px-popup--flyin-layout-1 .px-button .px-button-link svg {
width:auto;
height:.8em;
}

/* De sitebrede linkstijl in font-styles.php heeft een zware selector. Deze
volgt hem, zodat de tweede link de accentkleur krijgt. Overgang en
hover komen gewoon uit de sitebrede stijl. */
.px-popup--flyin-layout-1 a.px-popup__link:not(.px-button-link):not(.px-post-heading):not(.px-menu-item):not(.page-numbers):not(.fl-builder-submenu-link) {
align-self:center;
padding-bottom:2px;
color:var(--popup-accent-small);
font-size:var(--popup-text-size);
font-weight:800;
background-image:linear-gradient(var(--popup-accent-small), var(--popup-accent-small)), linear-gradient(color-mix(in srgb, var(--popup-accent-small) 30%, transparent), color-mix(in srgb, var(--popup-accent-small) 30%, transparent));
}

.px-popup--flyin-layout-1 a.px-popup__link:not(.px-button-link):not(.px-post-heading):not(.px-menu-item):not(.page-numbers):not(.fl-builder-submenu-link):focus {
background-size:100% 2px, 100% 2px;
}

/* LAGE SCHERMEN: de intro valt weg, de rest blijft in beeld
--------------------------------------------------- */
@media (max-height: 700px) {
.px-popup--flyin-layout-1 .px-popup__intro {
display:none;
}
}

/* MOBIEL: kaart over de volle breedte onderaan
--------------------------------------------------- */
@media (max-width : 767px) {.px-popup--flyin-layout-1,
.px-popup--flyin-layout-1.px-popup--position-left {
--popup-offset: 12px;
--popup-media-height: 210px;
--popup-body-padding: 18px 20px 20px;
--popup-title-size: 28px;
--popup-deco-width: 100px;
right:var(--popup-offset);
left:var(--popup-offset);
width:auto;
}
} /* End @media */