@import url('./common.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap');

.insights-page {
    background: linear-gradient(180deg, #eff2f6 0%, #eceef1 100%);
}

.insights-hero {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: flex-end;
    background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=2200&q=80');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.insights-hero::after {
    content: '';
    position: absolute;
    inset: auto -14% -34% auto;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(104, 203, 83, 0.16), rgba(104, 203, 83, 0));
    pointer-events: none;
}

.insights-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(7, 10, 30, 0.84) 0%, rgba(7, 10, 30, 0.7) 42%, rgba(7, 10, 30, 0.3) 100%),
        radial-gradient(circle at 85% 16%, rgba(47, 154, 210, 0.18), rgba(47, 154, 210, 0));
}

.insights-hero .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 0 116px;
    padding-inline-start: clamp(40px, 7vw, 120px);
    color: #fff;
}

.hero-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.84rem, 1vw, 0.98rem);
    font-weight: 700;
    line-height: 1.2;
    color: #d8e2fa;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-breadcrumb .sep {
    color: #ecf2ff;
    font-size: 1rem;
    line-height: 1;
}

.insights-hero h1 {
    margin: 0;
    max-width: 760px;
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.4rem, 4.3vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.insights-intro {
    background:
        radial-gradient(circle at 12% 18%, rgba(104, 203, 83, 0.12), rgba(104, 203, 83, 0)),
        linear-gradient(180deg, #14173b, #111433);
    color: #fff;
    padding: 106px 0 112px;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
}

.intro-grid h2 {
    margin: 0;
    max-width: 700px;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.95rem, 3vw, 3.2rem);
    line-height: 1.14;
    letter-spacing: -0.04em;
}

.intro-grid p {
    margin: 0;
    max-width: 720px;
    color: #d0dcf7;
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    line-height: 1.82;
}

.insights-section {
    padding: 96px 0 104px;
}

.section-light {
    background: transparent;
}

.section-dark {
    background: linear-gradient(180deg, #15183e, #111433);
}

.category-title {
    margin: 0 0 30px;
    color: #1d2a3f;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.category-title.text-light {
    color: #fff;
}

.insights-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insights-grid.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insight-card {
    border-radius: 28px;
    border: 1px solid rgba(188, 197, 220, 0.62);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 246, 250, 0.96));
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    min-height: 560px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.insight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(167, 181, 211, 0.86);
}

.insight-image {
    display: block;
}

.insight-image img {
    width: 100%;
    height: 330px;
    object-fit: cover;
}

.insight-body {
    padding: 24px 24px 28px;
}

.insight-body .blog-title {
    margin: 0;
    color: #1c2a3f;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.18rem, 1.45vw, 1.56rem);
    line-height: 1.34;
    letter-spacing: -0.03em;
}

.insight-date {
    margin: 14px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #50617b;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.insight-date .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b3bfce;
}

.insight-body .blog-link {
    display: inline-flex;
    margin-top: 12px;
    color: #1f9de4;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 700;
}

.insight-body .blog-link::after {
    content: '\2192';
    margin-inline-start: 8px;
    transition: transform var(--transition-base);
}

.insight-card:hover .blog-link::after {
    transform: translateX(3px);
}

.empty-note {
    margin: 0;
    color: #4b5c75;
    font-size: 0.96rem;
    line-height: 1.74;
}

.insights-placeholder {
    border-radius: 28px;
    border: 1px dashed rgba(151, 163, 189, 0.85);
    background: rgba(255, 255, 255, 0.82);
    padding: 42px;
    box-shadow: var(--shadow-soft);
}

.insights-placeholder h2 {
    margin: 0 0 16px;
    color: #1c2a3f;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 2.4vw, 2.7rem);
    line-height: 1.18;
    letter-spacing: -0.04em;
}

.insights-placeholder p {
    margin: 0;
    color: #465874;
    font-size: 1rem;
    line-height: 1.82;
}

.section-dark .empty-note {
    color: #dbe5ff;
}

body.rtl .hero-breadcrumb,
body.rtl .insight-date,
body.rtl .intro-grid,
body.rtl .insights-grid {
    direction: rtl;
}

@media (max-width: 1200px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .insights-grid.columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .insights-hero {
        min-height: 500px;
        background-position: 65% center;
    }

    .insights-hero .hero-content {
        padding-bottom: 78px;
        padding-inline-start: clamp(16px, 4vw, 26px);
    }

    .hero-breadcrumb {
        font-size: 0.78rem;
    }

    .insights-grid,
    .insights-grid.columns-3 {
        grid-template-columns: 1fr;
    }

    .insight-card {
        min-height: auto;
    }

    .insight-image img {
        height: 250px;
    }
}

@media (max-width: 600px) {
    .insights-hero .hero-content {
        padding-inline-start: 10px;
    }

    .insights-intro,
    .insights-section {
        padding-top: 62px;
        padding-bottom: 66px;
    }

    .category-title {
        margin-bottom: 22px;
    }

    .insight-body,
    .insights-placeholder {
        padding: 22px 18px;
    }

    .insight-date .dot {
        width: 9px;
        height: 9px;
    }
}

.insights-hero {
    min-height: auto;
    padding: 38px 0 78px;
    align-items: flex-end;
}

.insights-hero .hero-content {
    padding: 0;
}

.insights-hero .container.hero-content {
    max-width: 1160px;
}

.insights-hero .hero-content[data-animate] {
    padding: 40px 46px;
    border-radius: 38px;
    border: 1px solid rgba(206, 216, 240, 0.16);
    background:
        radial-gradient(circle at 84% 16%, rgba(47, 154, 210, 0.14), rgba(47, 154, 210, 0)),
        linear-gradient(135deg, rgba(12, 18, 46, 0.82), rgba(20, 26, 64, 0.66));
    box-shadow: 0 30px 68px rgba(7, 12, 28, 0.22);
    backdrop-filter: blur(14px);
}

.insights-intro .container {
    padding: 34px 38px;
    border-radius: 36px;
    border: 1px solid rgba(190, 201, 224, 0.16);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 24px 54px rgba(8, 12, 28, 0.14);
}

.insights-section .container {
    display: grid;
    grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
    gap: 30px;
    align-items: start;
}

.category-title {
    position: sticky;
    top: 122px;
    margin: 8px 0 0;
}

.insights-grid {
    gap: 24px;
}

.insights-grid.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insights-grid.columns-3 .insight-card:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1.16fr);
}

.insights-grid.columns-3 .insight-card:first-child .insight-image img {
    height: 100%;
}

@media (max-width: 1200px) {
    .insights-section .container {
        grid-template-columns: 1fr;
    }

    .category-title {
        position: static;
        margin-bottom: 12px;
    }
}

@media (max-width: 900px) {
    .insights-hero .hero-content[data-animate],
    .insights-intro .container {
        padding: 30px 24px;
        border-radius: 28px;
    }

    .insights-grid.columns-3 .insight-card:first-child {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}