/* ============================================================
   INSIGHTS / BLOG PAGE — insights.css
   Page-specific styles. Uses global CSS variables.
   All new classes prefixed .ins-
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.ins-page {
    max-width:    1400px;
    margin:       0 auto;
    padding:      calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
    overflow-x:   hidden;
}

/* ── Hero ─────────────────────────────────────────────────── */
.ins-hero {
    display:         flex;
    flex-direction:  column;
    gap:             var(--sp-8);
    margin-bottom:   var(--sp-16);
}

@media (min-width: 900px) {
    .ins-hero {
        flex-direction:  row;
        align-items:     flex-end;
        justify-content: space-between;
    }
}

.ins-hero-content { max-width: 820px; }

.ins-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 8vw, 7rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    0.92;
    color:          #fff;
    margin-top:     var(--sp-5);
    margin-bottom:  0;
}

.ins-h1 em {
    font-style: italic;
    color:      var(--clr-green);
}

.ins-hero-aside {
    display:     none;
    max-width:   260px;
    padding-bottom: var(--sp-2);
}

@media (min-width: 900px) {
    .ins-hero-aside {
        display:     block;
        flex-shrink: 0;
    }
}

.ins-hero-aside p {
    font-family:    var(--font-body);
    font-size:      0.75rem;
    color:          rgba(255,255,255,0.35);
    line-height:    1.7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Category tag pill ────────────────────────────────────── */
.ins-tag {
    display:        inline-block;
    background:     var(--clr-green);
    color:          #0e0e0e;
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:        0.3rem 0.75rem;
    border-radius:  var(--r-pill);
}

/* ── Featured post ────────────────────────────────────────── */
.ins-featured {
    position:      relative;
    width:         100%;
    height:        480px;
    border-radius: var(--r-xl);
    overflow:      hidden;
    background:    #111311;
    margin-bottom: var(--sp-12);
    cursor:        pointer;
}

@media (min-width: 768px) {
    .ins-featured { height: 600px; }
}

.ins-featured-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    filter:     grayscale(100%) brightness(0.5);
    transition: filter 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    display:    block;
}

.ins-featured:hover .ins-featured-img {
    filter:    grayscale(0%) brightness(0.6);
    transform: scale(1.04);
}

/* Placeholder image (no real image yet) */
.ins-featured-placeholder {
    width:      100%;
    height:     100%;
    background: linear-gradient(135deg, #111311 0%, #1a1f1a 40%, #0d0f0d 100%);
    position:   relative;
    overflow:   hidden;
}

.ins-featured-placeholder::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 30px,
        rgba(202,255,111,0.018) 30px,
        rgba(202,255,111,0.018) 31px
    );
}

/* Gradient overlay */
.ins-featured-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index:    1;
}

/* Content at bottom-left */
.ins-featured-content {
    position: absolute;
    bottom:   0;
    left:     0;
    padding:  var(--sp-8) var(--sp-8) var(--sp-10);
    z-index:  2;
    width:    100%;
}

@media (min-width: 768px) {
    .ins-featured-content {
        padding: var(--sp-12) var(--sp-12) var(--sp-12);
        width:   75%;
    }
}

.ins-featured-badge {
    display:        inline-block;
    background:     var(--clr-green);
    color:          #0e0e0e;
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:        0.3rem 0.875rem;
    border-radius:  var(--r-pill);
    margin-bottom:  var(--sp-5);
}

.ins-featured-title {
    font-family:    var(--font-display);
    font-size:      clamp(1.75rem, 4vw, 3.5rem);
    font-weight:    700;
    color:          #fff;
    line-height:    1.05;
    letter-spacing: -0.03em;
    margin-bottom:  var(--sp-6);
}

.ins-featured-meta {
    display:     flex;
    align-items: center;
    gap:         var(--sp-6);
    flex-wrap:   wrap;
}

.ins-featured-author {
    display:     flex;
    align-items: center;
    gap:         var(--sp-3);
}

.ins-author-avatar {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    #2a2c2a;
    border:        1px solid rgba(255,255,255,0.12);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    overflow:      hidden;
}

.ins-author-avatar svg {
    width:  18px;
    height: 18px;
    stroke: rgba(255,255,255,0.35);
}

.ins-featured-author-name {
    font-family:  var(--font-display);
    font-size:    0.875rem;
    font-weight:  600;
    color:        #fff;
}

.ins-featured-read-time {
    font-family: var(--font-body);
    font-size:   0.8125rem;
    color:       rgba(255,255,255,0.4);
    font-style:  italic;
}

/* Arrow button — bottom-right of featured */
.ins-arrow-btn {
    position:        absolute;
    bottom:          var(--sp-10);
    right:           var(--sp-8);
    z-index:         2;
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--clr-green);
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    overflow:        hidden;
    transition:      transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.ins-arrow-btn:hover {
    transform:  scale(1.1);
    box-shadow: 0 8px 32px -4px rgba(202,255,111,0.4);
}

.ins-arrow-btn svg {
    width:  24px;
    height: 24px;
    stroke: #0e0e0e;
    transition: transform 0.3s var(--ease-out);
}

.ins-arrow-btn:hover svg {
    transform: translate(3px, -3px);
}

@media (min-width: 768px) {
    .ins-arrow-btn {
        width:  80px;
        height: 80px;
        bottom: var(--sp-12);
        right:  var(--sp-12);
    }
    .ins-arrow-btn svg {
        width:  28px;
        height: 28px;
    }
}

/* ── Masonry article grid ─────────────────────────────────── */
.ins-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--sp-8);
}

@media (min-width: 900px) {
    .ins-grid {
        grid-template-columns: repeat(12, 1fr);
        align-items:           start;
    }

    .ins-card-wide   { grid-column: span 8; }
    .ins-card-narrow { grid-column: span 4; }
    .ins-card-bento  { grid-column: span 8; }
}

/* Offset the narrow text card down to match reference stagger */
@media (min-width: 900px) {
    .ins-card-narrow-text { margin-top: 3rem; }
}

/* ── Wide image card ──────────────────────────────────────── */
.ins-card-img-wrap {
    border-radius: var(--r-xl);
    overflow:      hidden;
    background:    #0a0a0a;
    margin-bottom: var(--sp-6);
    position:      relative;
}

.ins-card-img-wrap--ratio-wide   { aspect-ratio: 16/9; }
.ins-card-img-wrap--ratio-square { aspect-ratio: 1/1; }

.ins-card-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.6;
    filter:     grayscale(100%);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
    display:    block;
}

.ins-card-wide:hover .ins-card-img-wrap img,
.ins-card-narrow:hover .ins-card-img-wrap img {
    opacity:   0.8;
    transform: scale(1.04);
    filter:    grayscale(20%);
}

.ins-card-img-placeholder {
    width:      100%;
    height:     100%;
    min-height: 200px;
    background: linear-gradient(135deg, #111311 0%, #1a1f1a 50%, #0e0e0e 100%);
    position:   relative;
    overflow:   hidden;
}

.ins-card-img-placeholder::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(202,255,111,0.025) 20px,
        rgba(202,255,111,0.025) 21px
    );
}

/* Tag floating on image */
.ins-card-img-tag {
    position: absolute;
    top:      var(--sp-5);
    left:     var(--sp-5);
    z-index:  1;
}

.ins-card-title-wide {
    font-family:    var(--font-display);
    font-size:      clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight:    700;
    color:          #fff;
    line-height:    1.15;
    letter-spacing: -0.02em;
    margin-bottom:  var(--sp-4);
    transition:     color 0.3s;
}

.ins-card-wide:hover .ins-card-title-wide { color: var(--clr-green); }

.ins-card-excerpt {
    font-family:   var(--font-body);
    font-size:     0.9375rem;
    color:         rgba(255,255,255,0.45);
    line-height:   1.65;
    margin-bottom: var(--sp-6);
    max-width:     540px;
}

/* "Read Article" expandable link */
.ins-read-link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    color:           var(--clr-green);
    font-family:     var(--font-display);
    font-size:       0.625rem;
    font-weight:     700;
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    text-decoration: none;
}

.ins-read-link-line {
    display:    block;
    height:     1px;
    width:      2rem;
    background: rgba(202,255,111,0.3);
    transition: width 0.3s var(--ease-out);
}

.ins-read-link:hover .ins-read-link-line { width: 3.5rem; }

/* ── Narrow square image card ─────────────────────────────── */
.ins-card-title-narrow {
    font-family:    var(--font-display);
    font-size:      clamp(1.25rem, 2vw, 1.5rem);
    font-weight:    700;
    color:          #fff;
    line-height:    1.2;
    letter-spacing: -0.02em;
    margin-bottom:  0;
}

/* ── Narrow text card (dark background) ───────────────────── */
.ins-text-card {
    background:      #131313;
    border:          1px solid rgba(255,255,255,0.06);
    border-radius:   var(--r-xl);
    padding:         var(--sp-8);
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    height:          100%;
    min-height:      320px;
    transition:      background 0.5s, border-color 0.5s;
}

.ins-text-card:hover {
    background:   #1a1a1a;
    border-color: rgba(202,255,111,0.18);
}

.ins-text-card-label {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--clr-green);
    display:        block;
    margin-bottom:  var(--sp-10);
}

.ins-text-card-title {
    font-family:    var(--font-display);
    font-size:      clamp(1.5rem, 2.5vw, 2rem);
    font-weight:    700;
    color:          #fff;
    line-height:    1.1;
    letter-spacing: -0.025em;
    margin-bottom:  var(--sp-5);
}

.ins-text-card-excerpt {
    font-family:   var(--font-body);
    font-size:     0.875rem;
    color:         rgba(255,255,255,0.4);
    line-height:   1.65;
    margin-bottom: var(--sp-8);
    flex:          1;
}

.ins-text-card-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     var(--sp-6);
    border-top:      1px solid rgba(255,255,255,0.07);
}

.ins-text-card-code {
    font-family:    monospace;
    font-size:      0.625rem;
    color:          rgba(255,255,255,0.2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ins-text-card-icon {
    width:           28px;
    height:          28px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--clr-green);
    font-size:       1.25rem;
    font-weight:     300;
    line-height:     1;
}

/* ── Horizontal bento card ────────────────────────────────── */
.ins-bento {
    background:    #131313;
    border-radius: var(--r-xl);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    background 0.5s;
}

@media (min-width: 900px) {
    .ins-bento { flex-direction: row; }
}

.ins-bento:hover { background: #1a1a1a; }

.ins-bento-text {
    padding:         var(--sp-10);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    flex:            1;
}

@media (min-width: 900px) {
    .ins-bento-text { flex: 0 0 50%; }
}

.ins-bento-label {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--clr-green);
    display:        block;
    margin-bottom:  var(--sp-5);
}

.ins-bento-title {
    font-family:    var(--font-display);
    font-size:      clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight:    700;
    color:          #fff;
    line-height:    1.15;
    letter-spacing: -0.02em;
    margin-bottom:  var(--sp-4);
}

.ins-bento-excerpt {
    font-family:   var(--font-body);
    font-size:     0.875rem;
    color:         rgba(255,255,255,0.4);
    line-height:   1.65;
    margin-bottom: var(--sp-8);
}

.ins-bento-btn {
    align-self:      flex-start;
    border:          1px solid rgba(202,255,111,0.35);
    color:           var(--clr-green);
    background:      none;
    font-family:     var(--font-display);
    font-size:       0.625rem;
    font-weight:     700;
    letter-spacing:  0.15em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         0.6rem 1.5rem;
    border-radius:   var(--r-pill);
    transition:      background 0.25s, border-color 0.25s, color 0.25s;
}

.ins-bento-btn:hover {
    background:   var(--clr-green);
    color:        #0e0e0e;
    border-color: var(--clr-green);
}

.ins-bento-img {
    flex:          1;
    min-height:    260px;
    overflow:      hidden;
    position:      relative;
}

@media (min-width: 900px) {
    .ins-bento-img { flex: 0 0 50%; min-height: 300px; }
}

.ins-bento-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    filter:     grayscale(100%) contrast(1.15);
    transition: filter 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    display:    block;
}

.ins-bento:hover .ins-bento-img img {
    filter:    grayscale(30%) contrast(1.1);
    transform: scale(1.04);
}

.ins-bento-img-placeholder {
    width:      100%;
    height:     100%;
    min-height: 260px;
    background: linear-gradient(135deg, #0e0e0e 0%, #1a1f1a 100%);
    position:   relative;
    overflow:   hidden;
}

.ins-bento-img-placeholder::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(202,255,111,0.02) 20px,
        rgba(202,255,111,0.02) 21px
    );
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 599px) {
    .ins-page     { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .ins-featured { height: 360px; }
    .ins-arrow-btn { width: 52px; height: 52px; bottom: var(--sp-5); right: var(--sp-5); }
}