/* =========================
   KRIPTIQ LIBRARY HERO
========================= */

.library-title{

font-size:64px;
font-weight:800;

line-height:0.95;
letter-spacing:-2.5px;

margin-bottom:22px;

padding-left:80px;
padding-right:24px;

}

.gradient-text{
display:inline-block;

background:linear-gradient(
90deg,
#8b5fff,
#2ac9ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-clip:text;
color:transparent;
}

.library-subtitle{

font-size:18px;
line-height:1.75;

max-width:680px;

opacity:0.82;

padding-left:80px;
padding-right:24px;

}


/* =========================
   LIBRARY LIST
========================= */

.library-list{
display:flex;
flex-direction:column;
gap:24px;
margin-top:40px;
}

.library-row{
display:flex;
align-items:center;

gap:24px;

padding:20px;

border-radius:22px;

background:#0f172a;

text-decoration:none;

transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;

border:1px solid rgba(255,255,255,0.06);
}

.library-row:hover{
transform:translateY(-2px);
background:#162033;
border-color:rgba(139,92,246,0.22);
}

.library-row-image{
width:240px;
height:140px;

flex-shrink:0;

overflow:hidden;

border-radius:18px;
}

.library-row-image img{
width:100%;
height:100%;

object-fit:cover;

display:block;
}

.library-row-content{
display:flex;
flex-direction:column;
justify-content:center;

min-width:0;
}

.library-row-meta{
display:flex;
gap:12px;

font-size:14px;
font-weight:600;

color:#8b5cf6;

margin-bottom:14px;
}

.library-row-content h2{
font-size:30px;
line-height:1.18;

margin-bottom:14px;

color:#ffffff;

font-weight:750;

letter-spacing:-0.5px;
}

.library-row-content p{
font-size:16px;
line-height:1.7;

color:rgba(255,255,255,0.76);

max-width:820px;
}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.library-title{

font-size:38px;

line-height:0.98;
letter-spacing:-1.5px;

padding-left:20px;
padding-right:20px;

}

.library-subtitle{

font-size:15px;
line-height:1.7;

max-width:100%;

padding-left:20px;
padding-right:20px;

}


.library-list{
gap:16px;
margin-top:28px;
}

.library-row{
align-items:flex-start;

gap:14px;

padding:14px;

border-radius:16px;
}

.library-row-image{
width:92px;
height:92px;

flex-shrink:0;

border-radius:12px;
}

.library-row-content{
flex:1;
}

.library-row-meta{
font-size:11px;
margin-bottom:8px;
}

.library-row-content h2{
font-size:16px;
line-height:1.28;

margin-bottom:8px;

letter-spacing:-0.2px;
}

.library-row-content p{
font-size:13px;
line-height:1.55;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

overflow:hidden;
}

}