/*==========================================================
AUTHOR PAGE
VB Sambad CMS v6.0
==========================================================*/

:root{

--primary:#f97316;
--primary-dark:#ea580c;

--secondary:#1e3a8a;

--success:#16a34a;

--danger:#dc2626;

--white:#ffffff;

--black:#111827;

--gray-50:#f9fafb;
--gray-100:#f3f4f6;
--gray-200:#e5e7eb;
--gray-300:#d1d5db;
--gray-400:#9ca3af;
--gray-500:#6b7280;
--gray-600:#4b5563;
--gray-700:#374151;
--gray-800:#1f2937;
--gray-900:#111827;

--radius-sm:8px;
--radius:15px;
--radius-lg:22px;
--radius-xl:30px;

--shadow-sm:0 2px 8px rgba(0,0,0,.05);

--shadow:
0 10px 30px rgba(0,0,0,.08);

--shadow-lg:
0 20px 50px rgba(0,0,0,.12);

--transition:
all .30s ease;

}

/*==========================================================
RESET
==========================================================*/

.author-hero,
.author-posts,
.author-bottom{

position:relative;

width:100%;

}

.author-hero *,

.author-posts *,

.author-bottom *{

box-sizing:border-box;

}

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

.author-hero{

padding:70px 0;

background:

linear-gradient(

135deg,

#1e3a8a 0%,

#0f172a 100%

);

overflow:hidden;

}

.author-hero::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:320px;

height:320px;

border-radius:50%;

background:

rgba(255,255,255,.05);

}

.author-hero::after{

content:"";

position:absolute;

left:-80px;

bottom:-80px;

width:220px;

height:220px;

border-radius:50%;

background:

rgba(255,255,255,.04);

}

.author-hero-wrapper{

position:relative;

z-index:2;

display:flex;

align-items:center;

gap:45px;

}

.author-photo{

width:180px;

height:180px;

border-radius:50%;

overflow:hidden;

flex-shrink:0;

background:#fff;

padding:6px;

box-shadow:

0 15px 40px rgba(0,0,0,.25);

}

.author-photo img{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

display:block;

}

/*==========================================================
AUTHOR INFO
==========================================================*/

.author-info{

flex:1;

color:#fff;

}

.author-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

margin-bottom:18px;

border-radius:50px;

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

backdrop-filter:blur(10px);

font-size:14px;

font-weight:600;

letter-spacing:.5px;

}

.author-badge i{

color:#22c55e;

font-size:15px;

}

.author-info h1{

margin:0;

font-size:46px;

font-weight:800;

line-height:1.2;

}

.author-designation{

margin-top:14px;

font-size:20px;

font-weight:600;

color:#fde68a;

}

.author-location{

margin-top:10px;

display:flex;

align-items:center;

gap:8px;

font-size:15px;

opacity:.92;

}

.author-location i{

color:#f97316;

}

.author-bio{

margin-top:25px;

max-width:760px;

font-size:17px;

line-height:1.9;

opacity:.95;

}

/*==========================================================
AUTHOR STATS
==========================================================*/

.author-stat-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

margin-top:35px;

max-width:720px;

}

.author-stat{

padding:22px;

border-radius:18px;

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

backdrop-filter:blur(14px);

text-align:center;

transition:var(--transition);

}

.author-stat:hover{

transform:translateY(-6px);

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

}

.stat-number{

font-size:34px;

font-weight:800;

line-height:1;

margin-bottom:10px;

}

.stat-title{

font-size:14px;

text-transform:uppercase;

letter-spacing:1px;

opacity:.85;

}

/*==========================================================
SOCIAL ICONS
==========================================================*/

.author-social{

display:flex;

align-items:center;

gap:14px;

margin-top:35px;

flex-wrap:wrap;

}

.author-social a{

width:48px;

height:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#fff;

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

backdrop-filter:blur(10px);

transition:var(--transition);

font-size:18px;

}

.author-social a:hover{

background:var(--primary);

transform:translateY(-4px) scale(1.08);

box-shadow:

0 10px 20px rgba(249,115,22,.35);

}

/*==========================================================
SECTION HEADING
==========================================================*/

.section-heading{

display:flex;

justify-content:space-between;

align-items:flex-end;

gap:20px;

margin-bottom:40px;

padding-bottom:18px;

border-bottom:2px solid var(--gray-200);

}

.section-heading h2{

margin:0;

font-size:34px;

font-weight:800;

color:var(--gray-900);

}

.section-heading p{

margin:0;

font-size:15px;

color:var(--gray-500);

font-weight:500;

}

/*==========================================================
AUTHOR POSTS
==========================================================*/

.author-posts{

padding:70px 0;

background:var(--gray-50);

}

.author-post-grid{

display:grid;

grid-template-columns:

repeat(3,minmax(0,1fr));

gap:30px;

}

/*==========================================================
POST CARD
==========================================================*/

.author-post-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

display:flex;

flex-direction:column;

height:100%;

position:relative;

}

.author-post-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}

/*==========================================================
THUMBNAIL
==========================================================*/

.post-thumbnail{

display:block;

position:relative;

overflow:hidden;

height:240px;

background:#eee;

}

.post-thumbnail img{

width:100%;

height:100%;

display:block;

object-fit:cover;

transition:

transform .45s ease;

}

.author-post-card:hover

.post-thumbnail img{

transform:scale(1.08);

}

.post-thumbnail::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,0),

rgba(0,0,0,.18)

);

opacity:0;

transition:.3s;

}

.author-post-card:hover

.post-thumbnail::after{

opacity:1;

}

/*==========================================================
POST BODY
==========================================================*/

.post-body{

padding:24px;

display:flex;

flex-direction:column;

flex:1;

}

.post-meta{

display:flex;

align-items:center;

gap:12px;

flex-wrap:wrap;

margin-bottom:18px;

font-size:13px;

}

.post-category{

display:inline-flex;

align-items:center;

padding:6px 14px;

background:rgba(249,115,22,.10);

color:var(--primary-dark);

font-weight:700;

border-radius:30px;

text-decoration:none;

transition:.3s;

}

.post-category:hover{

background:var(--primary);

color:#fff;

}

.dot{

color:#cbd5e1;

font-weight:700;

}

.post-date{

color:var(--gray-500);

display:flex;

align-items:center;

gap:6px;

}

.post-title{

margin:0 0 15px;

font-size:24px;

font-weight:700;

line-height:1.45;

}

.post-title a{

color:var(--gray-900);

text-decoration:none;

transition:.3s;

}

.post-title a:hover{

color:var(--primary);

}

.post-excerpt{

margin:0;

color:var(--gray-600);

font-size:15px;

line-height:1.9;

flex:1;

}

/*==========================================================
POST FOOTER
==========================================================*/

.post-footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:25px;

padding-top:20px;

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

}

.post-left{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.post-left span{

display:flex;

align-items:center;

gap:7px;

font-size:14px;

color:var(--gray-500);

font-weight:600;

}

.post-left i{

color:var(--primary);

}

.read-more-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:11px 20px;

border-radius:50px;

background:var(--primary);

color:#fff;

text-decoration:none;

font-size:14px;

font-weight:700;

transition:var(--transition);

white-space:nowrap;

}

.read-more-btn:hover{

background:var(--primary-dark);

transform:translateX(4px);

box-shadow:

0 10px 20px rgba(249,115,22,.25);

}

.read-more-btn i{

transition:.30s;

}

.read-more-btn:hover i{

transform:translateX(5px);

}

/*==========================================================
NO POSTS
==========================================================*/

.author-empty{

padding:90px 40px;

background:#fff;

border-radius:25px;

box-shadow:var(--shadow);

text-align:center;

}

.empty-icon{

width:110px;

height:110px;

margin:0 auto 30px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(249,115,22,.08);

font-size:42px;

color:var(--primary);

}

.author-empty h2{

margin:0 0 15px;

font-size:34px;

color:var(--gray-900);

}

.author-empty p{

max-width:600px;

margin:0 auto 35px;

font-size:16px;

line-height:1.9;

color:var(--gray-600);

}

.home-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:50px;

background:var(--primary);

color:#fff;

text-decoration:none;

font-weight:700;

transition:var(--transition);

}

.home-btn:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

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

.author-bottom{

padding:70px 0;

background:#fff;

}

.author-layout{

display:grid;

grid-template-columns:

2fr 380px;

gap:40px;

align-items:start;

}

.author-main{

min-width:0;

}

.author-sidebar{

position:sticky;

top:100px;

}

.sidebar-widget{

background:#fff;

border-radius:20px;

padding:25px;

margin-bottom:30px;

box-shadow:var(--shadow);

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

}

.sidebar-widget h3{

margin:0 0 22px;

font-size:22px;

font-weight:700;

color:var(--gray-900);

padding-bottom:14px;

border-bottom:2px solid var(--gray-100);

}

.sidebar-author{

text-align:center;

}

.sidebar-author img{

width:110px;

height:110px;

border-radius:50%;

object-fit:cover;

margin-bottom:18px;

}

.sidebar-author h4{

margin:0;

font-size:22px;

font-weight:700;

}

.sidebar-designation{

margin-top:8px;

color:var(--primary);

font-weight:600;

font-size:15px;

}

.sidebar-author p{

margin:18px 0;

font-size:15px;

line-height:1.8;

color:var(--gray-600);

}

.sidebar-btn{

display:inline-block;

padding:12px 24px;

background:var(--primary);

color:#fff;

text-decoration:none;

border-radius:50px;

font-weight:700;

transition:var(--transition);

}

.sidebar-btn:hover{

background:var(--primary-dark);

}

/*==========================================================
POPULAR POSTS
==========================================================*/

.popular-post{

display:flex;

gap:15px;

margin-bottom:20px;

padding-bottom:20px;

border-bottom:1px solid var(--gray-200);

}

.popular-post:last-child{

margin-bottom:0;

padding-bottom:0;

border-bottom:none;

}

.popular-post img{

width:95px;

height:75px;

border-radius:12px;

object-fit:cover;

flex-shrink:0;

transition:var(--transition);

}

.popular-post:hover img{

transform:scale(1.05);

}

.popular-post a{

text-decoration:none;

color:var(--gray-900);

font-size:15px;

font-weight:700;

line-height:1.6;

transition:.3s;

}

.popular-post a:hover{

color:var(--primary);

}

.popular-date{

margin-top:8px;

font-size:13px;

color:var(--gray-500);

}

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

.category-link{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 18px;

margin-bottom:12px;

border-radius:12px;

background:var(--gray-50);

text-decoration:none;

color:var(--gray-700);

font-weight:600;

transition:var(--transition);

}

.category-link:hover{

background:var(--primary);

color:#fff;

padding-left:24px;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.author-layout{

grid-template-columns:1fr;

}

.author-sidebar{

position:relative;

top:auto;

}

}

@media(max-width:992px){

.author-hero{

padding:60px 0;

}

.author-hero-wrapper{

flex-direction:column;

text-align:center;

}

.author-info{

text-align:center;

}

.author-bio{

margin-left:auto;

margin-right:auto;

}

.author-stat-grid{

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

margin-left:auto;

margin-right:auto;

}

.author-social{

justify-content:center;

}

.author-post-grid{

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

}

.section-heading{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.author-photo{

width:150px;

height:150px;

}

.author-info h1{

font-size:34px;

}

.author-designation{

font-size:18px;

}

.author-bio{

font-size:15px;

}

.author-stat-grid{

grid-template-columns:1fr;

gap:15px;

}

.author-post-grid{

grid-template-columns:1fr;

}

.post-thumbnail{

height:220px;

}

.post-title{

font-size:21px;

}

.post-footer{

flex-direction:column;

align-items:flex-start;

}

.read-more-btn{

width:100%;

justify-content:center;

}

.sidebar-widget{

padding:20px;

}

}

@media(max-width:480px){

.author-hero{

padding:45px 0;

}

.author-photo{

width:130px;

height:130px;

}

.author-info h1{

font-size:28px;

}

.author-badge{

font-size:12px;

padding:6px 12px;

}

.section-heading h2{

font-size:28px;

}

.author-empty{

padding:60px 25px;

}

.empty-icon{

width:80px;

height:80px;

font-size:32px;

}

}

/*==========================================================
DARK MODE
==========================================================*/

body.dark-mode .author-posts,

body.dark-mode .author-bottom{

background:#0f172a;

}

body.dark-mode .author-post-card,

body.dark-mode .sidebar-widget,

body.dark-mode .author-empty{

background:#1e293b;

color:#fff;

border-color:#334155;

}

body.dark-mode .post-title a,

body.dark-mode .sidebar-widget h3,

body.dark-mode .sidebar-author h4,

body.dark-mode .author-empty h2{

color:#fff;

}

body.dark-mode .post-excerpt,

body.dark-mode .sidebar-author p,

body.dark-mode .popular-date,

body.dark-mode .post-date,

body.dark-mode .post-left span{

color:#cbd5e1;

}

body.dark-mode .category-link{

background:#334155;

color:#fff;

}

/*==========================================================
ANIMATIONS
==========================================================*/

.author-post-card,

.sidebar-widget,

.author-stat{

animation:fadeUp .5s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}