/* Beast Sheds product guide */
.guide-page {
    padding-bottom: 0 !important;
    background: #fff;
    color: var(--primary);
}

.guide-page p,
.guide-page li {
    line-height: 1.75;
}

.guide-hero {
    position: relative;
    overflow: hidden;
    min-height: 48vh;
    padding: 10rem 0 5rem;
    color: #fff;
    background-color: var(--primary);
    background-image:
        linear-gradient(90deg, rgba(20,20,20,.94), rgba(20,20,20,.68) 58%, rgba(20,20,20,.48)),
        url(../../images/guide/framework_beast2.jpg);
    background-position: center;
    background-size: cover;
}

.guide-index-hero {
    min-height: 64vh;
    display: flex;
    align-items: end;
}

.guide-hero .container { position: relative; z-index: 2; }
.guide-kicker {
    margin-bottom: .8rem;
    color: var(--secondary);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.guide-hero h1 {
    max-width: 980px;
    margin-bottom: 1rem;
    font-size: clamp(2.7rem, 6vw, 5.6rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
}
.guide-hero-lead {
    max-width: 780px;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.6;
    opacity: .9;
}
.guide-hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.guide-button {
    display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
    padding:.85rem 1.2rem; border:2px solid var(--secondary); font-weight:800;
    text-decoration:none; transition:.2s ease;
}
.guide-button-primary { color:#000; background:var(--secondary); }
.guide-button-secondary { color:#fff; border-color:#fff; background:transparent; }
.guide-button:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(220,236,150,.55); }
.guide-button-primary:hover { color:#000; background:#fff; border-color:#fff; }
.guide-button-secondary:hover { color:#000; background:var(--secondary); border-color:var(--secondary); }

.guide-index-intro { padding:4.5rem 0 1.5rem; }
.guide-index-intro h2, .guide-article h2 { font-size:clamp(2rem,4vw,3rem); line-height:1.12; }
.guide-index-intro p { max-width:820px; font-size:1.08rem; opacity:.8; }
.guide-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.guide-index-section { padding:2rem 0 4.5rem; }
.guide-index-section-dark { color:#fff; background:var(--primary); }
.guide-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.guide-section-heading p { max-width:600px; opacity:.76; }
.guide-card {
    position:relative; display:flex; flex-direction:column; min-height:225px; padding:1.5rem;
    color:var(--primary); background:#fff; border:1px solid rgba(0,0,0,.1);
    box-shadow:0 14px 35px rgba(0,0,0,.08); text-decoration:none; transition:.2s ease;
}
.guide-index-section-dark .guide-card { border-color:rgba(255,255,255,.15); }
.guide-card:hover { color:var(--primary); transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--secondary); }
.guide-card-icon {
    display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
    margin-bottom:1.5rem; background:var(--secondary); font-size:1.2rem;
}
.guide-card h3 { margin-bottom:.55rem; font-size:1.35rem; }
.guide-card p { margin-bottom:1rem; color:#555; font-size:.95rem; }
.guide-card-more { margin-top:auto; font-weight:800; }

.guide-shell { padding:3.5rem 0 5rem; }
.guide-layout { display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:2.5rem; align-items:start; }
.guide-sidebar { position:sticky; top:9rem; }
.guide-nav { border:1px solid rgba(0,0,0,.1); background:#f7f7f7; }
.guide-nav-inner { padding:.65rem; }
.guide-nav-home, .guide-nav-link { display:block; color:var(--primary); text-decoration:none; }
.guide-nav-home { padding:.85rem .9rem; font-weight:800; background:#fff; border-bottom:3px solid var(--secondary); }
.guide-nav-home i { margin-right:.45rem; }
.guide-nav-label { margin:1rem .75rem .35rem; color:#777; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.guide-nav-link { padding:.58rem .75rem; border-left:3px solid transparent; font-size:.92rem; font-weight:600; }
.guide-nav-link:hover, .guide-nav-link.active, .guide-nav-home.active { color:#000; background:var(--secondary); border-left-color:var(--primary); }
.guide-nav-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; padding:.9rem 1rem; border:0; color:#000; background:var(--secondary); font-weight:800; }

.guide-article { min-width:0; }
.guide-article > :first-child { margin-top:0; }
.guide-article h2 { margin:2.5rem 0 1rem; }
.guide-article h3 { margin:2rem 0 .75rem; font-size:1.45rem; }
.guide-article p + p { margin-top:1rem; }
.guide-lead { margin-bottom:1.75rem; font-size:1.15rem; line-height:1.75; color:#4d4d4d; }
.guide-note {
    margin:1.5rem 0; padding:1.2rem 1.35rem; border-left:5px solid var(--secondary); background:#f5f7ec;
}
.guide-note strong { display:block; margin-bottom:.2rem; }
.guide-spec-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.guide-spec-card { padding:1.35rem; border:1px solid rgba(0,0,0,.1); background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.06); }
.guide-spec-card h3 { margin:0 0 .7rem; }
.guide-spec-card ul { margin:.7rem 0 0; padding:0; }
.guide-spec-card li { position:relative; padding-left:1.45rem; margin:.35rem 0; }
.guide-spec-card li:before { content:'✓'; position:absolute; left:0; color:#637500; font-weight:900; }
.guide-spec-card-featured { border:3px solid var(--secondary); }
.guide-stat-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:1.5rem 0; background:#ddd; border:1px solid #ddd; }
.guide-stat { padding:1.2rem; background:#fff; text-align:center; }
.guide-stat strong { display:block; font-size:1.5rem; }
.guide-stat span { display:block; margin-top:.2rem; color:#666; font-size:.9rem; }

.guide-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0 2rem; }
.guide-gallery-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.guide-photo { overflow:hidden; margin:0; background:#f3f3f3; border:1px solid rgba(0,0,0,.1); }
.guide-photo img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; }
.guide-photo.contain img { object-fit:contain; padding:1rem; background:#fff; }
.guide-photo figcaption { padding:.75rem .85rem; font-size:.88rem; color:#555; background:#fff; }
.guide-photo figcaption strong { color:var(--primary); }

.guide-table-wrap { overflow-x:auto; margin:1.5rem 0 2rem; border:1px solid rgba(0,0,0,.1); }
.guide-table { width:100%; margin:0; border-collapse:collapse; }
.guide-table th, .guide-table td { padding:.9rem 1rem; border-bottom:1px solid #e8e8e8; text-align:left; vertical-align:top; }
.guide-table th { color:#000; background:var(--secondary); font-weight:800; }
.guide-table tr:last-child td { border-bottom:0; }
.guide-choice-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 1.4rem; }
.guide-choice { padding:.55rem .8rem; background:#f0f0f0; border-left:4px solid var(--secondary); font-weight:700; }
.guide-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0 2rem; }
.guide-video { position:relative; overflow:hidden; padding-top:56.25%; background:#000; }
.guide-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.guide-video-portrait { padding-top:90%; }

.guide-pager { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem; padding-top:2rem; border-top:1px solid #ddd; }
.guide-pager-link { display:flex; align-items:center; gap:.8rem; padding:1rem; color:var(--primary); border:1px solid #ddd; text-decoration:none; font-weight:800; }
.guide-pager-link small { display:block; color:#777; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.guide-pager-next { justify-content:flex-end; text-align:right; }
.guide-pager-link:hover { color:#000; background:var(--secondary); border-color:var(--secondary); }
.guide-final-cta { padding:4rem 0; color:#fff; background:var(--primary-light); }
.guide-final-card { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem; background:var(--primary); border:1px solid rgba(255,255,255,.15); }
.guide-final-card h2 { margin-bottom:.65rem; font-size:clamp(1.8rem,4vw,2.8rem); }
.guide-final-card p { max-width:700px; opacity:.8; }

@media (max-width: 991px) {
    .guide-hero { padding-top:8.5rem; }
    .guide-layout { grid-template-columns:1fr; gap:1.4rem; }
    .guide-sidebar { position:static; }
    .guide-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .guide-hero { min-height:auto; padding:8rem 0 3.5rem; background-position:center; }
    .guide-index-hero { min-height:70vh; }
    .guide-card-grid, .guide-spec-grid, .guide-gallery, .guide-gallery-3, .guide-video-grid { grid-template-columns:1fr; }
    .guide-stat-strip { grid-template-columns:1fr; }
    .guide-section-heading, .guide-final-card { display:block; }
    .guide-section-heading p { margin-top:.6rem; }
    .guide-final-card .guide-button { margin-top:1.2rem; }
    .guide-pager { grid-template-columns:1fr; }
    .guide-pager-next { grid-column:1; }
}