/* ============================================================
   RECENT TRENDS PAGE — trends.css
   ============================================================ */

/* ── Trends Hero ─────────────────────────────────────────── */
.trends-hero {
    position: relative; padding: 120px 0 80px; overflow: hidden;
    background: linear-gradient(135deg, #06101e 0%, #0b1629 100%);
}
.trends-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.trends-hero__orb {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18;
}
.trends-hero__orb--1 { width: 600px; height: 600px; background: #0E5FE8; top: -200px; right: -100px; }
.trends-hero__orb--2 { width: 500px; height: 500px; background: #19A7FF; bottom: -200px; left: -100px; }
.trends-hero__grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(14,95,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,95,232,.05) 1px,transparent 1px);
    background-size: 40px 40px;
}
.trends-hero__inner { position: relative; z-index: 1; text-align: center; }
.trends-hero__heading {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 900; line-height: 1.12;
    background: linear-gradient(135deg, #fff 40%, #94a3b8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin: 1rem 0 1.25rem;
}
.trends-hero__desc {
    max-width: 640px; margin: 0 auto 2.5rem;
    color: #64748b; font-size: 1.05rem; line-height: 1.75;
}
.trends-hero__cats {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .6rem;
}
.trends-hero__cat-label { font-size: .8rem; color: #475569; margin-right: .25rem; font-weight: 600; }
.trends-cat-pill {
    padding: .4rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
    color: #94a3b8; cursor: pointer;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.trends-cat-pill:hover {
    background: rgba(14,95,232,.12); color: #93c5fd;
    border-color: rgba(14,95,232,.3);
}

/* ── Featured Trend ──────────────────────────────────────── */
.trends-featured { padding: 60px 0 40px; }
.trends-featured__label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: #f59e0b; margin-bottom: 1.5rem;
}
.featured-trend-card {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 24px; overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-top: 2px solid var(--ft-color, #0E5FE8);
    transition: transform .3s ease, box-shadow .3s ease;
    min-height: 380px;
}
.featured-trend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.featured-trend-card__media { position: relative; overflow: hidden; min-height: 280px; }
.featured-trend-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.featured-trend-card:hover .featured-trend-card__img { transform: scale(1.04); }
.featured-trend-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(14,95,232,.15), rgba(25,167,255,.1));
    display: flex; align-items: center; justify-content: center;
    min-height: 280px;
}
.featured-trend-card__cat-badge {
    position: absolute; top: 16px; left: 16px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: .3rem .75rem; border-radius: 999px;
    background: var(--ft-color, #0E5FE8); color: #fff;
}
.featured-trend-card__content {
    padding: 2.5rem 2.5rem 2rem;
    display: flex; flex-direction: column; justify-content: center;
}
.featured-trend-card__meta {
    display: flex; gap: 1.25rem; margin-bottom: 1rem;
}
.featured-trend-card__date,
.featured-trend-card__read {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: #475569;
}
.featured-trend-card__title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800; line-height: 1.3; margin-bottom: 1rem;
}
.featured-trend-card__title a { color: #e2e8f0; text-decoration: none; transition: color .2s ease; }
.featured-trend-card__title a:hover { color: var(--ft-color, #0E5FE8); }
.featured-trend-card__excerpt { font-size: .875rem; color: #64748b; line-height: 1.7; margin-bottom: 1.75rem; }
.featured-trend-card__btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: 10px; font-size: .88rem; font-weight: 600;
    background: var(--ft-color, #0E5FE8); color: #fff;
    text-decoration: none; align-self: flex-start;
    transition: opacity .2s ease, transform .2s ease;
}
.featured-trend-card__btn:hover { opacity: .88; transform: translateX(3px); }

/* ── Filter Bar ──────────────────────────────────────────── */
.trends-grid-section { padding: 40px 0 80px; }
.trends-filter {
    display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem;
}
.trends-filter__btn {
    padding: .45rem 1.1rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
    color: #64748b; cursor: pointer;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    transition: all .2s ease;
}
.trends-filter__btn:hover,
.trends-filter__btn.is-active {
    background: #0E5FE8; color: #fff; border-color: #0E5FE8;
}

/* ── Trends Grid ─────────────────────────────────────────── */
.trends-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.trend-card {
    border-radius: 20px; overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display: flex; flex-direction: column;
}
.trend-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 16px 50px rgba(0,0,0,.4);
}
.trend-card__media-link { display: block; aspect-ratio: 16/9; overflow: hidden; }
.trend-card__thumb {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.trend-card:hover .trend-card__thumb { transform: scale(1.05); }
.trend-card__thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tc-accent, #0E5FE8) 15%, transparent),
        rgba(15,23,42,.6)
    );
    display: flex; align-items: center; justify-content: center;
    color: var(--tc-accent, #0E5FE8);
}
.trend-card__body { padding: 1.25rem 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.trend-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.trend-card__cat {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: .22rem .6rem; border-radius: 999px;
    color: var(--tc-accent, #0E5FE8);
    background: color-mix(in srgb, var(--tc-accent, #0E5FE8) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tc-accent, #0E5FE8) 25%, transparent);
}
.trend-card__read {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: #475569;
}
.trend-card__title {
    font-size: .95rem; font-weight: 700; line-height: 1.4; margin-bottom: .7rem; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.trend-card__title a { color: #e2e8f0; text-decoration: none; transition: color .2s ease; }
.trend-card__title a:hover { color: var(--tc-accent, #0E5FE8); }
.trend-card__excerpt {
    font-size: .8rem; color: #64748b; line-height: 1.7; margin-bottom: 1.25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trend-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.06);
    font-size: .75rem; color: #475569; margin-top: auto;
}
.trend-card__author {
    display: flex; align-items: center; gap: .45rem; font-weight: 500; color: #94a3b8;
}
.trend-card__author-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg,#0E5FE8,#19A7FF);
    display: grid; place-items: center;
    font-size: .6rem; font-weight: 800; color: #fff;
}

/* ── Newsletter ──────────────────────────────────────────── */
.trends-newsletter {
    position: relative; padding: 100px 0; overflow: hidden;
    background: linear-gradient(135deg, #06101e 0%, #09142e 100%);
}
.trends-newsletter__bg { position: absolute; inset: 0; pointer-events: none; }
.trends-newsletter__shape {
    position: absolute; border-radius: 50%; filter: blur(100px); opacity: .15;
}
.trends-newsletter__shape--1 { width: 500px; height: 500px; background: #0E5FE8; top: -150px; right: 0; }
.trends-newsletter__shape--2 { width: 400px; height: 400px; background: #19A7FF; bottom: -120px; left: -50px; }
.trends-newsletter__grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 48px 48px;
}
.trends-newsletter__inner {
    position: relative; z-index: 1;
    max-width: 580px; margin: 0 auto; text-align: center;
}
.trends-newsletter__icon {
    width: 68px; height: 68px; border-radius: 18px;
    background: rgba(14,95,232,.15);
    border: 1px solid rgba(14,95,232,.3);
    display: grid; place-items: center;
    color: #4F6FD4; margin: 0 auto 1.5rem;
}
.trends-newsletter__heading {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800; line-height: 1.2; color: #f1f5f9; margin-bottom: .75rem;
}
.trends-newsletter__subtitle {
    color: #64748b; font-size: .95rem; line-height: 1.7; margin-bottom: 2rem;
}
.trends-newsletter__input-wrap {
    display: flex; gap: .5rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px; padding: .4rem .4rem .4rem 1rem;
    margin-bottom: .75rem;
}
.trends-newsletter__input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #e2e8f0; font-size: .95rem; padding: .35rem 0;
}
.trends-newsletter__input::placeholder { color: #475569; }
.trends-newsletter__btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: 10px; font-size: .88rem; font-weight: 600;
    background: linear-gradient(135deg,#0E5FE8,#19A7FF); color: #fff; cursor: pointer; border: none;
    transition: opacity .2s ease, transform .2s ease;
}
.trends-newsletter__btn:hover { opacity: .9; transform: translateX(2px); }
.trends-newsletter__note {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: #475569;
}
.trends-newsletter__trust {
    margin-top: 1.75rem; font-size: .8rem; color: #475569;
    display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap;
}
.trends-newsletter__trust .sep { opacity: .3; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .trends-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-trend-card { grid-template-columns: 1fr; min-height: auto; }
    .featured-trend-card__media { min-height: 220px; }
}
@media (max-width: 640px) {
    .trends-grid { grid-template-columns: 1fr; }
    .trends-newsletter__input-wrap { flex-direction: column; padding: .75rem; }
    .trends-newsletter__btn { width: 100%; justify-content: center; }
}