/*==================================================
  STORY
==================================================*/

.story{

    background:var(--background);

    transition:var(--transition);

}


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

.story-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:90px;

    align-items:center;

}


/*==================================================
  IMAGE
==================================================*/

.story-image{

    position:relative;

}

.story-image img{

    width:100%;

    border-radius:28px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}


/*==================================================
  EXPERIENCE BADGE
==================================================*/

.experience-badge{

    position:absolute;

    bottom:30px;

    right:-30px;

    padding:22px 28px;

    border-radius:20px;

    background:rgba(8,17,31,.88);

    backdrop-filter:blur(20px);

    border:1px solid rgba(79,156,255,.25);

    box-shadow:var(--shadow);

}

[data-theme="light"] .experience-badge{

    background:rgba(255,255,255,.95);

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

}

.experience-badge strong{

    display:block;

    font-size:2rem;

    font-weight:800;

    color:var(--text);

    line-height:1;

}

.experience-badge span{

    display:block;

    margin-top:6px;

    color:var(--text-light);

}


/*==================================================
  CONTENT
==================================================*/

.story-content h2{

    color:var(--text);

    margin-bottom:28px;

}

.story-content p{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:24px;

}


/*==================================================
  HIGHLIGHTS
==================================================*/

.story-highlights{

    display:grid;

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

    gap:24px;

    margin-top:45px;

}

.highlight-card{

    padding:28px;

    background:var(--surface);

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

    border-radius:22px;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.highlight-card:hover{

    transform:translateY(-6px);

}

.highlight-card h3{

    color:var(--primary);

    margin-bottom:12px;

}

.highlight-card p{

    color:var(--text-light);

    margin:0;

}


/*==================================================
  SKILLS
==================================================*/

.story-skills{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:45px;

}

.story-skills span{

    padding:12px 20px;

    border-radius:999px;

    background:var(--surface-light);

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

    color:var(--text);

    font-size:.9rem;

    font-weight:600;

    transition:var(--transition);

}

.story-skills span:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-2px);

}


/*==================================================
  LINKS
==================================================*/

.story a{

    color:var(--primary);

    transition:var(--transition);

}

.story a:hover{

    opacity:.8;

}