/* =================================================
GUIDE — vertical tall image gallery (1:3) -> link to subpage
================================================= */

.guide-intro{
text-align:center;
max-width:780px;
margin:0 auto 40px;
color:#bcc0cf;
line-height:1.6;
}

.guide-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:18px;
}

.guide-tile{
position:relative;
display:block;
border-radius:10px;
overflow:hidden;
background:#0c0f1a;
border:1px solid rgba(255,255,255,.06);
text-decoration:none;
color:inherit;
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.guide-tile:hover{
transform:translateY(-4px);
border-color:rgba(212,175,55,.55);
box-shadow:0 14px 32px rgba(0,0,0,.55),
           0 0 0 1px rgba(212,175,55,.25);
}

.guide-tile-img{
position:relative;
width:100%;
aspect-ratio:1/3;
overflow:hidden;
background:#0a0c14;
}

.guide-tile-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}

.guide-tile:hover .guide-tile-img img{
transform:scale(1.04);
}

.guide-tile-placeholder{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:#3a3f55;
font-size:12px;
letter-spacing:.05em;
text-transform:uppercase;
text-align:center;
padding:8px;
background:repeating-linear-gradient(
  45deg,
  rgba(255,255,255,.015) 0 10px,
  rgba(255,255,255,.04) 10px 20px
);
}

.guide-tile-overlay{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
padding:12px 10px;
background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.9) 100%);
opacity:.95;
transition:opacity .25s ease;
}

.guide-tile:hover .guide-tile-overlay{
opacity:1;
}

.guide-tile-title{
font-size:13px;
font-weight:600;
color:#f4e7c2;
text-shadow:0 2px 8px rgba(0,0,0,.9);
line-height:1.25;
}

/* =================================================
GUIDE VIEW — top tab bar + full-width content
================================================= */

/* Full-viewport-width container so the embedded standalone guides
   (hellbound, stakato) render 1:1 with their original layout. */
.guide-view-section{
max-width:none;
width:100%;
padding-top:100px;
padding-bottom:60px;
padding-left:24px;
padding-right:24px;
}

/* Sticky horizontal tab bar with all guides, sits under the main navbar. */
.guide-view-tabs{
position:sticky;
top:84px;
z-index:50;
display:flex;
gap:6px;
overflow-x:auto;
overflow-y:hidden;
padding:10px 4px;
margin:0 -4px 22px;
background:rgba(5,6,14,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.05);
scrollbar-width:thin;
}

.guide-view-tabs::-webkit-scrollbar{height:6px;}
.guide-view-tabs::-webkit-scrollbar-track{background:transparent;}
.guide-view-tabs::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.08);
border-radius:3px;
}

.guide-view-tab{
flex:0 0 auto;
padding:8px 16px;
border-radius:6px;
text-decoration:none;
color:#bcc0cf;
font-size:14px;
line-height:1.3;
border:1px solid rgba(255,255,255,.06);
background:rgba(12,15,26,.6);
white-space:nowrap;
transition:background .15s ease,color .15s ease,border-color .15s ease;
}

.guide-view-tab:hover{
background:rgba(255,255,255,.05);
color:#f4e7c2;
border-color:rgba(212,175,55,.35);
}

.guide-view-tab.is-active{
background:rgba(212,175,55,.14);
border-color:rgba(212,175,55,.55);
color:#f4e7c2;
font-weight:600;
}

.guide-view-content{
width:100%;
}

.guide-view-content h1{
color:#f4e7c2;
margin-bottom:10px;
}

.guide-view-desc{
color:#bcc0cf;
line-height:1.6;
margin-bottom:30px;
}

.guide-view-body{
color:#e6e6e6;
line-height:1.7;
font-size:15px;
}

.guide-view-body h2,
.guide-view-body h3{
color:#f4e7c2;
margin:30px 0 14px;
}

.guide-view-body p{
margin:0 0 14px;
}

.guide-view-body img{
max-width:100%;
height:auto;
display:block;
margin:18px auto;
border-radius:6px;
}

.guide-view-body ul,
.guide-view-body ol{
margin:0 0 14px 22px;
}

.guide-view-body code{
background:rgba(255,255,255,.06);
padding:2px 6px;
border-radius:4px;
font-size:13px;
}

/* Iframe embed for standalone guide pages (hellbound, stakato, etc.) — full width. */
.guide-view-iframe-wrap{
width:100%;
border-radius:8px;
overflow:hidden;
border:1px solid rgba(255,255,255,.06);
background:#0d0d10;
}

.guide-view-iframe{
display:block;
width:100%;
min-height:80vh;
border:none;
background:#0d0d10;
}

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

@media (max-width:1180px){
.guide-grid{grid-template-columns:repeat(5,1fr);}
}

@media (max-width:980px){
.guide-grid{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:720px){
.guide-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
.guide-tile-title{font-size:12px;}
.guide-view-tabs{top:78px;}
.guide-view-tab{padding:7px 12px;font-size:13px;}
}

@media (max-width:460px){
.guide-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
}