/*
Theme Name: JBescort Child
Template: twentytwentyfour
Version: 1.4
*/

/* =========================================================
   DESIGN TOKENS
========================================================= */

:root{
  --bg:#0b0c10;
  --bg2:#13151b;
  --card:#14161d;
  --muted:#9aa0aa;
  --text:#f5f7fb;
  --gold:#d4af37;
  --gold-2:#b9962d;
  --ring:rgba(212,175,55,.35);
  --accent:#ffd37a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius-sm:12px;
  --max:1440px;
}

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

*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:radial-gradient(1200px 600px at 50% -100px,#1a1d25 10%,#0b0c10 60%);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif
}

img{max-width:100%;display:block}

a{
  color:inherit;
  text-decoration:none
}

/* =========================================================
   CONTAINER
========================================================= */

.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:0 14px
}

/* =========================================================
   HEADER
========================================================= */

header{
  position:sticky;
  top:0;
  z-index:50
}

.glass{
  background:linear-gradient(
  180deg,
  rgba(13,15,20,.9),
  rgba(13,15,20,.6),
  transparent
  );
  backdrop-filter:saturate(120%) blur(8px)
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.3px
}

.brand-badge{
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--gold),#5c4a16);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 2px #000 inset,0 4px 18px rgba(212,175,55,.25)
}

.brand-badge svg{
  width:20px;
  height:20px;
  fill:#111
}

.menu{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0
}

.cta{
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#111;
  font-weight:700;
  box-shadow:0 8px 24px rgba(212,175,55,.25)
}

/* =========================================================
   SECTION LAYOUT
========================================================= */

section{
  padding:40px 0
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}

h1{
  font-size:clamp(22px,4.8vw,40px);
  margin:0 0 6px
}

h2{
  font-size:clamp(18px,3vw,28px);
  margin:0
}

.sub{
  color:var(--muted);
  font-size:14px
}

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

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:start
}

@media (max-width:1100px){

  .blog-grid{
    grid-template-columns:repeat(2,1fr)
  }

}

@media (max-width:640px){

  .blog-grid{
    grid-template-columns:1fr
  }

}

/* =========================================================
   BLOG CARD
========================================================= */

.post-card{
  display:flex;
  gap:14px;
  align-items:center;
  background:linear-gradient(180deg,#171a23,#10131a);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  transition:all .25s ease
}

.post-card:hover{
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.35);
  box-shadow:0 20px 40px rgba(0,0,0,.4)
}

/* text */

.post-card .content{
  flex:1;
  min-width:0
}

.post-card .title{
  font-size:16px;
  margin:0 0 4px;
  font-weight:700;
  line-height:1.4
}

.post-card .title a:hover{
  color:var(--gold)
}

.post-card .date{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px
}

.post-card .excerpt{
  font-size:14px;
  line-height:1.5;
  color:#c0c6d0;
  margin:0
}

/* thumbnail */

.post-card .thumb{
  flex:0 0 160px;
  width:160px;
  height:110px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#0e1117
}

.post-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}

.post-card:hover .thumb img{
  transform:scale(1.05)
}

@media (max-width:640px){

  .post-card{
    gap:10px
  }

  .post-card .thumb{
    width:130px;
    height:90px
  }

}

/* =========================================================
   BLOG PAGINATION
========================================================= */

.pagination{
  margin-top:28px;
  display:flex;
  justify-content:center
}

.pagination ul{
  display:flex;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0
}

.pagination a,
.pagination span{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1a1d26,#10131a);
  color:#dfe3ea
}

.pagination a:hover{
  border-color:rgba(212,175,55,.5)
}

.pagination .current{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#111;
  border:none
}

/* =========================================================
   SINGLE BLOG POST
========================================================= */

.single-hero{
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow)
}

.single-hero img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover
}

.copy{
  background:linear-gradient(180deg,#12141a,#0e1016);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:18px;
  margin-top:14px
}

.copy p{
  margin:10px 0;
  color:#c2c8d3;
  line-height:1.6
}

.copy h2,
.copy h3{
  margin-top:20px
}

.copy img{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  margin:12px 0
}

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

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1a1d26,#10131a);
  color:#dfe3ea
}

.btn:hover{
  border-color:rgba(255,255,255,.2)
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#111;
  font-weight:700
}

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

footer{
  padding:30px 0 60px
}

.foot{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:16px;
  align-items:start
}

@media (max-width:900px){

  .foot{
    grid-template-columns:1fr
  }

}

.legal{
  color:#aab0ba;
  font-size:13px
}

.gold{
  color:var(--gold)
}