/* =====================================================================
   FITCOM — GUIDES  ·  /guides  (human browse surface)
   Editorial photo-forward hub. Reference: riverside.com/blog + vulcanpost.
   Fonts (Poppins/Geist) loaded by header. Scoped under .gd to stay clear
   of home.css / learn.css. Orange accent only, no emoji, no cut-corners.
   ===================================================================== */
.gd{
  --orange:#F6921E; --orange-dark:#D97B0A; --ink:#141414; --body:#5c5c5c;
  --muted:#8c8c8c; --paper:#F7F5F1; --line:#ECE8E2; --radius:16px;
  background:#fff; color:var(--ink);
  font-family:'Geist',system-ui,sans-serif; line-height:1.62;
}
.gd *{box-sizing:border-box}
.gd h1,.gd h2,.gd h3,.gd h4{font-family:'Poppins',sans-serif; letter-spacing:-.02em; line-height:1.14; margin:0}
.gd a{color:inherit; text-decoration:none}
.gd-wrap{max-width:1200px; margin:0 auto; padding:0 28px}

.gd-btn{font-family:'Poppins'; font-weight:600; font-size:.85rem; padding:.72rem 1.2rem; border:0; cursor:pointer; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem}
.gd-btn--orange{background:var(--orange); color:#fff}
.gd-btn--orange:hover{background:var(--orange-dark)}
.gd-pill{display:inline-block; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); color:#fff; font-family:'Poppins'; font-weight:600; font-size:.74rem; padding:.36rem .85rem; border-radius:999px; margin-bottom:1rem}
.gd-av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#F6921E,#c9781e); flex:none}

/* ---- HERO carousel ---- */
.gd-hero-c{position:relative; margin:38px 0 6px}
.gd-hero-vp{overflow:hidden; border-radius:24px}
.gd-hero-track{display:flex; transition:transform .55s cubic-bezier(.22,1,.36,1); will-change:transform}
.gd-hero__slide{flex:0 0 100%; position:relative; display:flex; align-items:flex-end; min-height:472px; background:linear-gradient(130deg,#243039,#4a6472 60%,#7d9aa6)}
.gd-hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gd-hero__fallback{position:absolute; inset:0; background:linear-gradient(130deg,#20303a,#3f5a68)}
.gd-hero__slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.76) 100%)}
.gd-hero__body{position:relative; z-index:2; padding:42px 46px; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:24px}
.gd-hero__main{max-width:60%}
.gd-hero__h1{color:#fff; font-size:clamp(1.9rem,1.35rem + 2.5vw,3rem); font-weight:800; margin-bottom:.7rem}
.gd-hero__lead{color:rgba(255,255,255,.88); font-size:1.02rem; max-width:52ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gd-hero__who{display:flex; align-items:center; gap:.7rem; color:#fff; font-size:.85rem; white-space:nowrap}
.gd-hero__who small{display:block; color:rgba(255,255,255,.7); font-size:.78rem}
.gd-hero__who .gd-av{border:2px solid rgba(255,255,255,.6)}
.gd-hero__arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:#141414; font-family:'Poppins'; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.2); transition:background .15s ease}
.gd-hero__arrow:hover{background:#fff}
.gd-hero__arrow--prev{left:16px}
.gd-hero__arrow--next{right:16px}
.gd-hero__dots{position:absolute; left:46px; bottom:18px; z-index:3; display:flex; gap:7px}
.gd-hero__dot{width:8px; height:8px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.5); cursor:pointer; transition:width .2s ease, background .2s ease}
.gd-hero__dot.is-on{background:#fff; width:22px}

/* ---- section head + search + tabs ---- */
.gd-head{padding:46px 0 0}
.gd-title{font-size:2.3rem; font-weight:800}
.gd-desc{color:var(--body); font-size:1.05rem; margin-top:.45rem; max-width:58ch}
.gd-search{display:flex; gap:10px; margin:20px 0 4px; max-width:640px}
.gd-search input{flex:1; border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; font-family:'Geist'; font-size:.95rem; background:#fff; color:var(--ink)}
.gd-search input:focus{outline:2px solid var(--orange); border-color:transparent}
.gd-tabs{display:flex; gap:4px; flex-wrap:wrap; margin-top:24px; border-bottom:1px solid var(--line); padding-bottom:2px}
.gd-tab{font-family:'Poppins'; font-weight:600; font-size:.86rem; color:#666; padding:.6rem .95rem; cursor:pointer; background:none; border:0; border-bottom:2.5px solid transparent; border-radius:8px 8px 0 0}
.gd-tab:hover{color:var(--ink)}
.gd-tab.is-on{color:var(--orange); border-bottom-color:var(--orange)}
.gd-tab--soon{color:#b8b3aa; cursor:default; display:inline-flex; align-items:center; gap:.4rem}
.gd-tab--soon:hover{color:#b8b3aa}
.gd-soon{font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#b8b3aa; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:.05rem .32rem}

/* ---- layout ---- */
.gd-layout{display:grid; grid-template-columns:1fr 316px; gap:46px; padding:30px 0 clamp(4.5rem,9vw,7.5rem); align-items:start}
.gd-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px}

/* ---- card ---- */
.gd-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; display:block; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.gd-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,14,4,.13); border-color:transparent}
.gd-card__img{position:relative; display:block; aspect-ratio:16/10; overflow:hidden}
.gd-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.gd-cat{position:absolute; top:14px; left:14px; z-index:2; background:rgba(20,20,20,.82); backdrop-filter:blur(4px); color:#fff; font-family:'Poppins'; font-weight:600; font-size:.72rem; padding:.36rem .8rem; border-radius:999px}
.gd-card__body{display:block; padding:18px 20px 20px}
.gd-card__meta{display:block; font-size:.79rem; color:var(--muted); margin-bottom:.5rem; font-family:'Poppins'}
.gd-card__title{display:block; font-size:1.16rem; font-weight:700; font-family:'Poppins'; line-height:1.28; margin-bottom:.45rem; color:var(--ink)}
.gd-card:hover .gd-card__title{color:var(--orange-dark)}
.gd-card__excerpt{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.92rem; color:var(--body); margin-bottom:.9rem}
.gd-card__foot{display:flex; align-items:center; justify-content:space-between}
.gd-card__author{display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:#3f3f3f}
.gd-card__author .gd-av{width:26px; height:26px}
.gd-read{font-family:'Poppins'; font-weight:600; font-size:.82rem; color:var(--orange)}

/* ---- branded fallback tile (image slot always filled) ---- */
.gd-card__fallback,.gd-hero__fallback{position:absolute; inset:0; background:linear-gradient(135deg,#1c2530,#33414d)}
.gd-card__fallback::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange)}
.gd-card__fallback::after{content:attr(data-cat); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 1rem; text-align:center; color:rgba(255,255,255,.9); font-family:'Poppins'; font-weight:700; font-size:1rem; letter-spacing:.01em}

/* ---- sidebar ---- */
.gd-side{position:sticky; top:92px; display:grid; gap:30px}
.gd-side h4{font-size:1.1rem; font-weight:800; margin-bottom:.7rem}
.gd-feat{display:flex; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.gd-feat:last-child{border-bottom:0}
.gd-feat__thumb{width:66px; height:66px; flex:none; border-radius:12px; overflow:hidden; position:relative}
.gd-feat__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.gd-feat__date{display:block; font-size:.72rem; color:var(--muted); font-family:'Poppins'}
.gd-feat__t{display:block; font-size:.9rem; font-weight:600; line-height:1.3; margin-top:.15rem; font-family:'Poppins'}
.gd-feat:hover .gd-feat__t{color:var(--orange-dark)}
.gd-sub{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.gd-sub p{font-size:.88rem; color:var(--body); margin:.5rem 0 1rem}
.gd-sub input{width:100%; border:1px solid var(--line); border-radius:11px; padding:.7rem .85rem; font-family:'Geist'; font-size:.9rem; margin-bottom:.7rem; background:#fff}
.gd-sub .gd-btn--orange{width:100%}

.gd-empty{color:var(--body); padding:2rem 0; text-align:center}

@media (max-width:900px){
  .gd-layout{grid-template-columns:1fr; gap:34px}
  .gd-side{position:static}
  .gd-hero__slide{min-height:0}
  .gd-hero__body{flex-direction:column; align-items:flex-start; gap:16px; padding:30px 26px 46px}
  .gd-hero__main{max-width:100%}
  .gd-hero__arrow{width:38px; height:38px; font-size:1.3rem}
  .gd-hero__arrow--prev{left:10px}
  .gd-hero__arrow--next{right:10px}
  .gd-hero__dots{left:26px; bottom:14px}
}
@media (max-width:640px){
  .gd-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .gd-tabs::-webkit-scrollbar{display:none}
  .gd-tab{white-space:nowrap}
}
@media (max-width:560px){
  .gd-grid{grid-template-columns:1fr}
  .gd-title{font-size:1.9rem}
  .gd-hero__h1{font-size:1.75rem}
}
@media (max-width:480px){
  .gd-search{flex-direction:column}
  .gd-search .gd-btn--orange{width:100%}
}

/* author avatar image inside the gradient circle */
.gd-av { overflow: hidden; }
.gd-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }