/* ========================================
TRENDING HERO
======================================== */

.oddlyz-trending-hero {
position: relative;
min-height: 760px;
overflow: hidden;
background: #050706;
}

.oddlyz-trending-hero .wp-block-query,
.oddlyz-trending-hero .wp-block-post-template,
.oddlyz-trending-hero .wp-block-post {
min-height: inherit;
margin: 0;
padding: 0;
}

.oddlyz-hero-post {
position: relative;
min-height: 760px;
overflow: hidden;
isolation: isolate;
}

.oddlyz-hero-image {
position: absolute;
z-index: -3;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
}

.oddlyz-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.02);
animation: oddlyzHeroZoom 10s ease-out forwards;
}

.oddlyz-hero-post::before {
position: absolute;
z-index: -2;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3, 6, 5, 0.96) 0%,
rgba(3, 6, 5, 0.77) 42%,
rgba(3, 6, 5, 0.22) 76%
),
linear-gradient(
to top,
#050706 0%,
rgba(5, 7, 6, 0.72) 20%,
transparent 62%
);
content: “”;
}

.oddlyz-hero-post::after {
position: absolute;
z-index: -1;
inset: 0;
opacity: 0.16;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(255, 255, 255, 0.03) 4px
);
content: “”;
pointer-events: none;
}

.oddlyz-hero-content-wrap {
position: relative;
display: flex;
align-items: center;
width: min(calc(100% – 40px), var(–oddlyz-container));
min-height: 760px;
margin-inline: auto;
padding: 120px 0 90px;
}

.oddlyz-hero-content {
width: min(760px, 66%);
margin: 0 !important;
}

.oddlyz-hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}

.oddlyz-hero-label {
display: inline-flex;
align-items: center;
min-height: 29px;
margin: 0;
padding: 5px 12px;
border: 1px solid rgba(69, 231, 206, 0.5);
border-radius: 999px;
background: rgba(4, 10, 8, 0.55);
color: var(–oddlyz-cyan);
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
backdrop-filter: blur(10px);
}

.oddlyz-hero-category,
.oddlyz-hero-category a {
color: rgba(255, 255, 255, 0.62);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.oddlyz-hero-title {
max-width: 860px;
margin: 0 0 24px;
font-family: var(–oddlyz-heading);
font-size: clamp(3rem, 6vw, 6rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.98;
text-wrap: balance;
}

.oddlyz-hero-title a {
color: var(–oddlyz-text);
text-decoration: none;
}

.oddlyz-hero-title a:hover {
color: var(–oddlyz-cyan);
}

.oddlyz-hero-excerpt {
max-width: 650px;
margin-bottom: 28px;
color: #c2cbc5;
font-size: clamp(0.95rem, 1.3vw, 1.08rem);
line-height: 1.75;
}

.oddlyz-hero-excerpt p {
margin-bottom: 22px;
}

.oddlyz-hero-read-more .wp-block-post-excerpt__more-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
background: var(–oddlyz-cyan);
color: #04100d;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.07em;
text-decoration: none;
text-transform: uppercase;
transition:
transform 200ms ease,
background-color 200ms ease;
}

.oddlyz-hero-read-more .wp-block-post-excerpt__more-link:hover {
transform: translateY(-2px);
background: #71f2de;
}

.oddlyz-hero-date {
margin-top: 18px;
color: rgba(255, 255, 255, 0.55);
font-size: 0.72rem;
letter-spacing: 0.05em;
}

@keyframes oddlyzHeroZoom {
from {
transform: scale(1.08);
}

to {
transform: scale(1.02);
}
}