/* ==========================================================
            DEVELOPER DIARY
            PART 1
========================================================== */

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

.diary-hero{

padding:170px 8% 110px;

text-align:center;

}

.diary-hero .container{

max-width:1000px;

margin:auto;

}

.hero-badge{

display:inline-block;

padding:10px 22px;

border-radius:50px;

background:rgba(37,99,235,.10);

border:1px solid var(--border);

color:var(--primary);

font-weight:600;

margin-bottom:28px;

}

.diary-hero h1{

font-size:68px;

font-weight:800;

line-height:1.12;

margin-bottom:28px;

letter-spacing:-2px;

}

.diary-hero h1 span{

display:block;

color:var(--primary);

}

.diary-hero p{

max-width:760px;

margin:auto;

font-size:20px;

line-height:36px;

color:var(--text-light);

}

/* ===========================
        HERO INFO
=========================== */

.hero-info{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:70px;

}

.hero-info div{

padding:28px;

background:var(--glass);

border:1px solid var(--border);

border-radius:22px;

backdrop-filter:blur(20px);

transition:.35s;

box-shadow:var(--shadow);

}

.hero-info div:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.hero-info h3{

font-size:34px;

margin-bottom:8px;

color:var(--primary);

}

.hero-info span{

font-size:15px;

color:var(--text-light);

}

/* ===========================
        INTRO
=========================== */

.diary-intro{

padding:0 8% 90px;

}

.intro-card{

max-width:900px;

margin:auto;

padding:55px;

border-radius:28px;

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.category{

display:inline-block;

padding:8px 18px;

border-radius:40px;

background:rgba(37,99,235,.10);

color:var(--primary);

font-weight:600;

margin-bottom:25px;

}

.intro-card h2{

font-size:46px;

margin-bottom:20px;

line-height:1.2;

}

.meta{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:30px;

color:var(--text-light);

font-size:15px;

}

.intro-card p{

font-size:18px;

line-height:34px;

color:var(--text-light);

}
/* ==========================================================
            DEVELOPER DIARY
            PART 2
            TIMELINE + ARTICLE
========================================================== */

/* ===========================
        MAIN LAYOUT
=========================== */

.diary-layout{

padding:20px 8% 120px;

}

.diary-grid{

display:grid;

grid-template-columns:300px minmax(0,1fr);

gap:60px;

align-items:start;

}

/* ===========================
        SIDEBAR
=========================== */

.diary-sidebar{

position:sticky;

top:120px;

align-self:start;

}

.sidebar-card{

padding:35px;

background:var(--glass);

border:1px solid var(--border);

border-radius:28px;

backdrop-filter:blur(18px);

box-shadow:var(--shadow);

}

.sidebar-card h3{

font-size:26px;

margin-bottom:35px;

}

/* ===========================
        TIMELINE
=========================== */

.timeline{

list-style:none;

padding:0;

margin:0;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:10px;

top:0;

bottom:0;

width:2px;

background:rgba(37,99,235,.25);

}

.timeline li{

display:flex;

gap:18px;

margin-bottom:35px;

position:relative;

}

.timeline li:last-child{

margin-bottom:0;

}

.timeline .dot{

width:20px;

height:20px;

border-radius:50%;

background:#ffffff;

border:4px solid var(--primary);

z-index:2;

margin-top:3px;

flex-shrink:0;

transition:.35s;

}

.timeline li.active .dot{

background:var(--primary);

box-shadow:0 0 0 8px rgba(37,99,235,.15);

}

.timeline h4{

font-size:16px;

margin-bottom:6px;

font-weight:700;

}

.timeline p{

font-size:15px;

line-height:24px;

color:var(--text-light);

}

/* ===========================
        ARTICLE
=========================== */

.diary-article{

max-width:820px;

margin:auto;

}

.article-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 20px;

border-radius:40px;

background:rgba(37,99,235,.10);

border:1px solid var(--border);

font-weight:600;

color:var(--primary);

margin-bottom:30px;

}

.diary-article h1{

font-size:60px;

font-weight:800;

line-height:1.15;

letter-spacing:-1.5px;

margin-bottom:35px;

}

.diary-article .lead{

font-size:22px;

line-height:40px;

color:var(--text-light);

margin-bottom:45px;

}

.diary-article h2{

font-size:36px;

margin-top:60px;

margin-bottom:22px;

font-weight:700;

}

.diary-article p{

font-size:18px;

line-height:36px;

margin-bottom:26px;

color:var(--text-light);

}

.diary-article hr{

border:none;

height:1px;

background:var(--border);

margin:55px 0;

}

.diary-article blockquote{

margin:45px 0;

padding:30px;

border-left:5px solid var(--primary);

background:rgba(37,99,235,.06);

border-radius:16px;

font-size:22px;

line-height:38px;

font-style:italic;

color:var(--text);

}
/* ==========================================================
            DEVELOPER DIARY
            PART 3
     TECH STACK • LEARNINGS • SIGNATURE
========================================================== */

/* ===========================
        TECH STACK
=========================== */

.tech-stack{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-top:30px;

margin-bottom:50px;

}

.tech-stack span{

padding:12px 22px;

border-radius:40px;

background:rgba(37,99,235,.08);

border:1px solid var(--border);

font-size:15px;

font-weight:600;

transition:.35s;

cursor:default;

}

.tech-stack span:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

}

/* ===========================
      LEARNING GRID
=========================== */

.learning-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

margin:45px 0 60px;

}

.learning-card{

padding:32px;

border-radius:24px;

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(18px);

box-shadow:var(--shadow);

transition:.35s;

}

.learning-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.learning-card i{

font-size:42px;

color:var(--primary);

margin-bottom:22px;

}

.learning-card h3{

font-size:24px;

margin-bottom:16px;

}

.learning-card p{

font-size:16px;

line-height:30px;

margin:0;

}

/* ===========================
        BUTTONS
=========================== */

.project-links{

display:flex;

gap:20px;

flex-wrap:wrap;

margin:45px 0 70px;

}

.project-links a{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 30px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.project-links .primary-btn{

background:var(--primary);

color:#fff;

}

.project-links .primary-btn:hover{

transform:translateY(-5px);

}

.project-links .secondary-btn{

border:1px solid var(--border);

background:var(--glass);

color:var(--text);

}

.project-links .secondary-btn:hover{

border-color:var(--primary);

transform:translateY(-5px);

}

/* ===========================
        AUTHOR NOTE
=========================== */

.author-note{

margin-top:70px;

padding:40px;

border-radius:28px;

background:rgba(37,99,235,.05);

border:1px solid var(--border);

}

.note-line{

width:70px;

height:4px;

border-radius:20px;

background:var(--primary);

margin-bottom:24px;

}

.author-note p{

font-size:18px;

line-height:36px;

margin:0;

}

/* ===========================
        SIGNATURE
=========================== */

.signature-section{

text-align:center;

padding:80px 0 40px;

}

.signature-title{

font-size:18px;

color:var(--text-light);

margin-bottom:18px;

}

.signature{

font-family:"Caveat",cursive;

font-size:72px;

font-weight:700;

color:var(--primary);

margin-bottom:15px;

}

.signature-section h4{

font-size:22px;

margin-bottom:10px;

}

.signature-section p{

font-size:17px;

color:var(--text-light);

}

/* ===========================
      NEXT ARTICLE
=========================== */

.article-navigation{

margin-top:80px;

padding-top:50px;

border-top:1px solid var(--border);

}

.next-article{

padding:35px;

border-radius:24px;

background:var(--glass);

border:1px solid var(--border);

transition:.35s;

cursor:pointer;

}

.next-article:hover{

transform:translateY(-6px);

border-color:var(--primary);

}

.next-article span{

font-size:14px;

color:var(--primary);

font-weight:600;

}

.next-article h3{

margin:14px 0;

font-size:28px;

}

.next-article p{

margin:0;

font-size:16px;

color:var(--text-light);

}
/* ==========================================================
        DEVELOPER DIARY
        PART 4 (RESPONSIVE)
========================================================== */

/* ===========================
        Large Laptop
=========================== */

@media (max-width:1400px){

.diary-grid{

grid-template-columns:260px 1fr;

gap:45px;

}

.diary-article h1{

font-size:54px;

}

}

/* ===========================
        Laptop
=========================== */

@media (max-width:1200px){

.diary-hero h1{

font-size:58px;

}

.hero-info{

grid-template-columns:repeat(3,1fr);

}

.diary-grid{

grid-template-columns:240px 1fr;

gap:40px;

}

}

/* ===========================
        Tablet
=========================== */

@media (max-width:992px){

.diary-hero{

padding:140px 6% 80px;

}

.diary-hero h1{

font-size:48px;

}

.hero-info{

grid-template-columns:1fr;

}

.diary-grid{

grid-template-columns:1fr;

}

.diary-sidebar{

position:static;

margin-bottom:45px;

}

.learning-grid{

grid-template-columns:1fr;

}

.diary-article{

max-width:100%;

}

.diary-article h1{

font-size:44px;

}

.intro-card{

padding:40px;

}

}

/* ===========================
        Mobile
=========================== */

@media (max-width:768px){

.diary-hero{

padding:120px 20px 70px;

}

.diary-hero h1{

font-size:38px;

letter-spacing:0;

}

.diary-hero p{

font-size:17px;

line-height:30px;

}

.hero-info{

gap:18px;

margin-top:45px;

}

.hero-info div{

padding:22px;

}

.diary-intro{

padding:0 20px 60px;

}

.intro-card{

padding:28px;

border-radius:22px;

}

.intro-card h2{

font-size:32px;

}

.meta{

flex-direction:column;

gap:10px;

}

.diary-layout{

padding:0 20px 80px;

}

.sidebar-card{

padding:25px;

}

.timeline li{

margin-bottom:28px;

}

.diary-article h1{

font-size:34px;

}

.diary-article h2{

font-size:28px;

}

.diary-article p{

font-size:16px;

line-height:30px;

}

.diary-article .lead{

font-size:18px;

line-height:34px;

}

.diary-article blockquote{

font-size:18px;

line-height:32px;

padding:22px;

}

.tech-stack{

gap:12px;

}

.tech-stack span{

font-size:14px;

padding:10px 16px;

}

.learning-grid{

grid-template-columns:1fr;

}

.learning-card{

padding:25px;

}

.project-links{

flex-direction:column;

}

.project-links a{

width:100%;

justify-content:center;

}

.author-note{

padding:28px;

}

.signature{

font-size:56px;

}

.signature-section h4{

font-size:20px;

}

.next-article{

padding:25px;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-links ul{

align-items:center;

}

.footer-social .social-icons{

justify-content:center;

}

}

/* ===========================
        Small Mobile
=========================== */

@media (max-width:480px){

.diary-hero h1{

font-size:30px;

}

.hero-badge{

font-size:14px;

padding:8px 18px;

}

.diary-hero p{

font-size:15px;

line-height:28px;

}

.hero-info h3{

font-size:28px;

}

.intro-card{

padding:22px;

}

.intro-card h2{

font-size:28px;

}

.diary-article h1{

font-size:30px;

}

.diary-article h2{

font-size:24px;

}

.diary-article p{

font-size:15px;

line-height:28px;

}

.signature{

font-size:46px;

}

.signature-section h4{

font-size:18px;

}

.signature-section p{

font-size:15px;

}

.author-note{

padding:22px;

}

}

/* ===========================
        Ultra Wide
=========================== */

@media (min-width:1600px){

.diary-article{

max-width:900px;

}

.diary-hero h1{

font-size:82px;

}

.hero-info{

max-width:1200px;

margin:70px auto 0;

}

}

/* ===========================
        Reading Progress
=========================== */

.reading-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0%;

background:linear-gradient(90deg,#2563EB,#7C3AED);

z-index:9999;

transition:width .15s linear;

}
/* ===========================================
        ARTICLE ACTIONS
=========================================== */

.article-actions{

display:flex;

flex-wrap:wrap;

gap:15px;

margin:30px 0 45px;

}

.article-actions button{

display:flex;

align-items:center;

gap:10px;

padding:14px 22px;

background:var(--glass);

border:1px solid var(--border);

border-radius:50px;

cursor:pointer;

font-size:15px;

font-weight:600;

color:var(--text);

transition:.3s;

}

.article-actions button:hover{

background:var(--primary);

color:#fff;

transform:translateY(-4px);

}