#jg-hero {
position: relative;
width: 100%;
overflow: hidden;
z-index: 0;
display: block;
}
.wp-site-blocks:has(#jg-hero),
main:has(#jg-hero) {
padding-top: 0 !important;
margin-top: 0 !important;
}
#jg-hero-track {
position: absolute;
inset: 0;
} .jg-slide {
position: absolute;
inset: 0;
pointer-events: none; opacity: 0;
transform: none; }
.jg-slide.jg-slide-active {
pointer-events: auto;
opacity: 1;
transform: none;
} .jg-slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-repeat: no-repeat;
will-change: transform;
transform-origin: center center;
}
.jg-slide.jg-kb-active .jg-slide-bg {
animation: jgKenBurns var(--jg-hero-duration, 5s) ease-in-out forwards;
}
@keyframes jgKenBurns {
from { transform: scale(1); }
to   { transform: scale(1.08); }
}
.jg-slide-overlay {
position: absolute;
inset: 0;
z-index: 1;
} .jg-slide-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center; align-items: var(--jg-content-align, center);
width: 100%;
box-sizing: border-box;
padding: 0 40px;
text-align: center;
} .jg-slide-content > * { margin-top: 0; margin-bottom: 0; }
@media (max-width: 768px) {
.jg-slide-content { padding: 0 20px; }
} .jg-slide:first-child {
opacity: 1;
pointer-events: auto;
}
.jg-slide-content .wp-block-group,
.jg-slide-content .wp-block-cover,
.jg-slide-content .is-layout-flow { height: auto; } #jg-hero-prev,
#jg-hero-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(0, 0, 0, 0);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
padding: 8px;
opacity: 0.85;
transition: opacity 0.2s, background 0.2s;
line-height: 0; backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#jg-hero-prev { left: 20px; }
#jg-hero-next { right: 20px; }
#jg-hero-prev:hover,
#jg-hero-next:hover { opacity: 1; background: rgba(184, 184, 184, 0); } #jg-hero-scroll {
position: absolute;
padding: 8px;
border-radius: 50%;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
color: #fff;
display: flex;
text-decoration: none;
opacity: 0.7;
animation: jgHeroBounce 1.8s ease-in-out infinite;
transition: opacity 0.2s;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#jg-hero-scroll:hover { opacity: 1; background: rgba(184, 184, 184, 0);}
@keyframes jgHeroBounce {
0%, 100% { transform: translateX(-50%) translateY(0);   }
50%       { transform: translateX(-50%) translateY(10px); }
}  @media (max-width: 768px) { #jg-hero-prev,
#jg-hero-next {
opacity: 0.7;
padding: 8px;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
}
#jg-hero-prev svg,
#jg-hero-next svg { width: 28px; height: 28px; }
#jg-hero-prev { left: 8px; }
#jg-hero-next { right: 8px; } #jg-hero-scroll { bottom: 16px; }
#jg-hero-scroll svg { width: 40px; height: 40px; }
}  #jg-hero .jg-action-btn-wrap {
margin-top:  0;
text-align:  center;
}
#jg-hero .jg-action-btn {
display:              inline-block;
padding:              12px 32px;
background:           transparent;
border:               2px solid rgba(255,255,255,0.75);
border-radius:        0;
color:                #fff;
font-size:            15px;
font-weight:          300;
letter-spacing:       0.04em;
cursor:               pointer;
text-decoration:      none;
text-transform:       uppercase;
transition:           background 0.25s, border-color 0.25s;
backdrop-filter:      blur(4px);
-webkit-backdrop-filter: blur(4px);
min-width:            44px;
min-height:           44px;
line-height:          1.4;
}
#jg-hero .jg-action-btn:hover,
#jg-hero .jg-action-btn:focus {
background:   rgba(255,255,255,0.1);
border-color: #fff;
outline:      none;
}
@media (max-width: 768px) {
#jg-hero .jg-action-btn {
font-size: 14px;
padding:   10px 24px;
}
}  @supports (height: 100svh) {
#jg-hero[style*="height:100vh"],
#jg-hero[style*="height: 100vh"] {
height: 100svh !important;
}
} @media (max-width: 600px) { .jg-slide-content {
padding: 0 16px;
} .jg-slide-content h1 {
font-size: clamp(1.2rem, 6.5vw, 1.8rem);
}
.jg-slide-content h2 {
font-size: clamp(1rem, 5.5vw, 1.5rem);
}
.jg-slide-content p {
font-size: clamp(0.8rem, 3.5vw, 0.95rem);
} #jg-hero-prev svg,
#jg-hero-next svg { width: 28px; height: 28px; }
}  .jg-slide-content {
align-items: center !important;
text-align: center !important;
} .jg-slide-content h1,
.jg-slide-content h2,
.jg-slide-content h3,
.jg-slide-content p,
.jg-slide-content .wp-block-heading,
.jg-slide-content .wp-block-paragraph,
.jg-slide-content .wp-block-group,
.jg-slide-content .wp-block-buttons {
text-align: center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
} .jg-slide-content h1 { font-size: clamp(1.4rem, 4vw, 3rem); }
.jg-slide-content h2 { font-size: clamp(1.1rem, 3vw, 2rem); }
.jg-slide-content h3 { font-size: clamp(0.95rem, 2.5vw, 1.5rem); } @media (max-width: 768px) {
.jg-slide-content {
padding: 0 60px !important;
}
.jg-slide-content h1 { font-size: clamp(1.3rem, 5.5vw, 2rem); }
.jg-slide-content h2 { font-size: clamp(1rem, 4.5vw, 1.5rem); }
.jg-slide-content h3 { font-size: clamp(0.85rem, 3.5vw, 1.1rem); }
} @media (max-width: 600px) {
.jg-slide-content {
padding: 0 56px !important;
}
.jg-slide-content h1 { font-size: clamp(1.1rem, 5vw, 1.6rem); }
.jg-slide-content h2 { font-size: clamp(0.95rem, 4.5vw, 1.3rem); }
.jg-slide-content p  { font-size: clamp(0.75rem, 3.5vw, 0.9rem); } #jg-hero .jg-action-btn-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
}
#jg-hero .jg-action-btn {
display: block;
width: 100%;
text-align: center;
box-sizing: border-box;
padding: 12px 16px;
}
}.jg-card {
cursor: pointer;
position: relative;
width: 100%;
aspect-ratio: 1;
border: .2rem solid #e5e5e5;
overflow: hidden;
box-sizing: border-box;
display: block;
}
.jg-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}  @media (hover: hover) {
.jg-card::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.7);
width: 52px; height: 52px;
background: rgba(255,255,255,0.92);
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 5; pointer-events: none;
}
.jg-card:hover::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.jg-card::before {
content: '';
position: absolute; inset: 0;
background: rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), 0);
box-shadow: inset 0 0 0 0px rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), 0);
transition: background 0.4s ease, box-shadow 0.4s ease;
z-index: 4; pointer-events: none;
}
.jg-card:hover::before {
background: rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), var(--jg-hover-intensity));
box-shadow: inset 0 0 0 1.5px rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), var(--jg-hover-border-opacity));
}
}  @media (hover: none) {
.jg-card::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.6);
width: 36px; height: 36px;
background: rgba(255,255,255,0.85);
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
opacity: 0.5;
z-index: 5; pointer-events: none;
}
}   .jg-tap-card {
position: relative;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
cursor: pointer;
border: .2rem solid #e5e5e5;
box-sizing: border-box;
}
.jg-tap-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jg-tap-card::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.6);
width: 32px; height: 32px;
background: rgba(255,255,255,0.85);
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
opacity: 0.6;
animation: jg-tap-pulse 2s ease-in-out infinite;
z-index: 5; pointer-events: none;
}
@keyframes jg-tap-pulse {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.6); }
50%       { opacity: 0.9; transform: translate(-50%, -50%) scale(0.75); }
}  .jg-discography-grid-wrap {
width: 100%;
box-sizing: border-box;
} .jg-discography-grid-wrap .wp-block-post-template {
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.jg-discography-grid-wrap .wp-block-post-template > li {
list-style: none;
list-style-type: none;
} .jg-discography-grid-wrap .wp-block-post-featured-image {
margin: 0;
aspect-ratio: 1;
overflow: hidden;
}
.jg-discography-grid-wrap .wp-block-post-featured-image a {
display: block;
width: 100%;
height: 100%;
}
.jg-discography-grid-wrap .wp-block-post-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}