/* =====================================================
AUTHORS & BOOKSTAGRAMMERS PAGE — extends styles.css
Load AFTER styles.css. Uses the same tokens (--orange etc.)
===================================================== */

/* ---------- NAV ACTIVE ---------- */
.nav-links a.current{ color:var(--orange); }

/* ---------- HERO VIDEO ---------- */
.hero-video-frame{ aspect-ratio:16/10; background:#000; }
.hero-video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- AUTHOR SERVICES ---------- */
.authors-svc{ padding:20px 0 100px; }
.svc-card.list-card{ min-height:0; }
.svc-card.list-card p{ max-width:100%; margin-bottom:20px; }
.svc-list{ list-style:none; margin-bottom:8px; position:relative; z-index:2; }
.svc-list li{ font-size:14px; font-weight:600; padding:9px 0; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:10px; }
.svc-list li:before{ content:"✓"; font-weight:800; }
.svc-orange .svc-list li{ border-top-color:rgba(0,0,0,.18); color:var(--black); }
.svc-dark .svc-list li, .svc-charcoal .svc-list li{ color:#d8d8d8; }
.svc-dark .svc-list li:before, .svc-charcoal .svc-list li:before{ color:var(--orange); }
.svc-know-more a{ display:contents; }

/* ---------- PORTFOLIO SHOWCASE ---------- */
.showcase{ padding:100px 0; background:var(--bg); overflow:hidden; }
.showcase .automation-tabs-nav{ margin-bottom:40px; }

/* ---------- SLIDER (shared) ---------- */
.slider{ position:relative; }
.slider-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:20px 5vw 26px; align-items:flex-start; }
.slider-track::-webkit-scrollbar{ display:none; }
.slider:before, .slider:after{ content:""; position:absolute; top:0; bottom:0; width:6%; z-index:2; pointer-events:none; }
.slider:before{ left:0; background:linear-gradient(90deg,var(--sl-bg,var(--black)),transparent); }
.slider:after{ right:0; background:linear-gradient(-90deg,var(--sl-bg,var(--black)),transparent); }
.showcase .slider{ --sl-bg:var(--bg); }
.slider-arrow{ position:absolute; top:calc(50% - 40px); z-index:3; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(18,18,18,.85); backdrop-filter:blur(8px); color:var(--white); font-size:28px; line-height:1; cursor:pointer; transition:.3s; display:flex; align-items:center; justify-content:center; padding-bottom:4px; }
.slider-arrow:hover{ background:var(--orange); border-color:var(--orange); transform:scale(1.08); }
.slider-arrow.left{ left:2.5vw; }
.slider-arrow.right{ right:2.5vw; }

.pcard{ flex-shrink:0; scroll-snap-align:start; }
.pmedia{ position:relative; border-radius:18px; overflow:hidden; background:#0f0f0f; border:1px solid var(--border); box-shadow:0 30px 70px rgba(0,0,0,.5); transition:.35s; }
.pcard:hover .pmedia{ border-color:var(--orange); transform:translateY(-8px); }
.pmedia img{ width:100%; height:100%; object-fit:cover; }
.pcard figcaption{ margin-top:16px; }
.pcard .cat{ font-family:"Playfair Display",serif; font-style:italic; color:var(--orange); font-size:15px; display:block; margin-bottom:3px; }
.pcard .title{ font-size:14px; font-weight:600; color:var(--white); }
.ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:16px;
  background:repeating-linear-gradient(135deg,#171717 0 14px,#121212 14px 28px); color:var(--gray); }
.ph b{ color:var(--orange); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.ph small{ font-size:11px; word-break:break-all; }

/* card sizes per category (bigger, easy to view) */
.pcard.k-banner{ width:clamp(300px,84vw,900px); }
.pcard.k-post{ width:clamp(240px,70vw,340px); }
.pcard.k-cover{ width:clamp(220px,62vw,300px); }
.pcard.k-cover .pmedia{ border-radius:4px 10px 10px 4px; box-shadow:-6px 0 0 rgba(255,255,255,.06) inset,0 30px 60px rgba(0,0,0,.6); }
.pcard.k-logo{ width:clamp(220px,62vw,300px); }
.pcard.k-logo .pmedia img{ object-fit:contain; padding:14%; }
.pcard.k-brand{ width:clamp(280px,80vw,460px); }
.pcard.k-web{ width:clamp(300px,84vw,640px); }
.pcard.k-web .pmedia{ border-radius:12px; padding-top:26px; background:#1f1f1f; }
.pcard.k-web .pmedia:before{ content:""; position:absolute; top:9px; left:12px; width:8px; height:8px; border-radius:50%; background:#ff5f57; box-shadow:14px 0 0 #febc2e,28px 0 0 #28c840; z-index:2; }
.pcard.k-web .pmedia img{ position:absolute; top:26px; left:0; width:100%; height:auto; object-fit:initial; transform:translateY(0); transition:transform 1.2s ease; will-change:transform; }
/* auto-scroll full-page screenshot: hover on desktop, in-view on touch */
@media(hover:hover){ .pcard.k-web:hover .pmedia img{ transform:translateY(var(--dist,0px)); transition:transform var(--dur,6s) linear; } }
@media(hover:none){ .pcard.k-web.playing .pmedia img{ transform:translateY(var(--dist,0px)); transition:transform var(--dur,6s) linear .6s; } }
.pcard{ cursor:zoom-in; outline:none; }
.pcard:focus-visible .pmedia{ border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,98,36,.3); }
.pcard figcaption .title{ font-size:15px; }
/* "view larger" hint */
.pmedia:after{ content:"⤢"; position:absolute; right:12px; bottom:12px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(18,18,18,.8); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; opacity:.9; transition:.3s; pointer-events:none; }
.pcard:hover .pmedia:after{ background:var(--orange); border-color:var(--orange); }
.showcase-note{ margin-top:10px; text-align:center; font-size:13px; color:var(--gray); }
.showcase-note a{ color:var(--orange); font-weight:700; }

/* ---------- BOOKSTAGRAMMERS ---------- */
.bookstagram{ padding:100px 0 90px; overflow:hidden; }
.bg-offers{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:60px; }
.bg-offers .engagement-card{ background:linear-gradient(160deg,#1c1c1c,#0f0f0f); }
.bg-offers .engagement-card h3{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:30px; }
.size-spec{ display:inline-flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:22px; padding:10px 18px; border-radius:50px; border:1px dashed rgba(255,98,36,.5); font-size:12.5px; color:var(--gray); }
.size-spec strong{ color:var(--orange); font-family:"Space Grotesk",sans-serif; }
.slider-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:14px; }
.slider-head h3{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:28px; }
.live-badge{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--orange); background:var(--orange-light); border:1px solid rgba(255,98,36,.25); padding:8px 16px; border-radius:50px; }
.live-badge i{ width:8px; height:8px; border-radius:50%; background:var(--orange); animation:pulse 2s infinite; }

/* ---------- INQUIRY FORM ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
#contactForm label.chip{ position:relative; display:inline-flex; margin:0; padding:10px 16px; border:1px solid var(--border); border-radius:50px; background:var(--black-3); color:#cfcfcf; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; cursor:pointer; transition:.25s; }
#contactForm .chip input{ position:absolute; opacity:0; width:0; height:0; padding:0; margin:0; border:0; }
#contactForm label.chip:hover{ border-color:var(--orange); }
#contactForm label.chip:has(input:checked){ background:var(--orange); border-color:var(--orange); color:#fff; }
#contactForm label.chip:has(input:focus-visible){ box-shadow:0 0 0 4px rgba(255,98,36,.25); }
.opt{ text-transform:none; letter-spacing:0; font-weight:500; color:#777; }
.form-hint{ font-size:12px; color:var(--gray); margin:-10px 0 18px; }

/* ---------- YOUTUBE FACADE (used in reviews) ---------- */
.yt-facade{ position:relative; width:100%; height:100%; background:#000; cursor:pointer; }
.yt-thumb{ width:100%; height:100%; object-fit:cover; }
.yt-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:0; background:var(--orange); color:#fff; font-size:22px; padding-left:4px; cursor:pointer; box-shadow:0 10px 30px rgba(255,98,36,.45); transition:.3s; }
.yt-facade:hover .yt-play{ transform:scale(1.1); }

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .bg-offers{ grid-template-columns:1fr; }
  .slider-arrow{ width:44px; height:44px; font-size:24px; }
}
@media(max-width:600px){
  .slider-arrow.left{ left:8px; } .slider-arrow.right{ right:8px; }
  .hero-visual-frame.tri-frame{ padding:16px; }
  .showcase .automation-tab-btn{ padding:12px 18px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce){ .slider-track{ scroll-behavior:auto; } }

/* ---------- LIGHTBOX (full-screen viewer) ---------- */
body.lb-open{ overflow:hidden; }
.lb{ position:fixed; inset:0; z-index:3000; display:none; flex-direction:column; background:rgba(6,6,6,.95); backdrop-filter:blur(8px); }
.lb.open{ display:flex; animation:fadeIn .25s ease; }
.lb-bar{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px; position:relative; z-index:5; }
.lb-info{ min-width:0; }
.lb-info .cat{ font-family:"Playfair Display",serif; font-style:italic; color:var(--orange); font-size:14px; display:block; }
.lb-info .title{ color:var(--white); font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.lb-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lb-btn{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; padding:0 0 3px; font-family:inherit; }
.lb-btn:hover:not(:disabled){ background:var(--orange); border-color:var(--orange); }
.lb-btn:disabled{ opacity:.35; cursor:not-allowed; }
.lb-btn.lb-close{ background:var(--orange); border-color:var(--orange); font-size:22px; padding:0; margin-left:8px; }
.lb-btn.lb-close:hover{ background:var(--orange-dark); }
.lb-zoom{ min-width:56px; text-align:center; font-size:13px; font-weight:700; color:#d5d5d5; }
.lb-stage{ flex:1; position:relative; overflow:hidden; touch-action:none; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.lb-stage.zoomed{ cursor:grab; }
.lb-stage.dragging{ cursor:grabbing; }
.lb-stage img{ max-width:94vw; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); border-radius:10px; user-select:none; -webkit-user-drag:none; will-change:transform; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-ph{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:min(90vw,700px); aspect-ratio:4/3; border-radius:14px; text-align:center; padding:20px; background:repeating-linear-gradient(135deg,#171717 0 14px,#121212 14px 28px); color:var(--gray); }
.lb-ph b{ color:var(--orange); letter-spacing:.06em; text-transform:uppercase; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:50px; height:50px; font-size:30px; }
.lb-prev{ left:14px; } .lb-next{ right:14px; }
.lb-hint{ text-align:center; font-size:12px; color:#777; padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px)); }
@media(max-width:600px){
  .lb-bar{ padding-left:12px; padding-right:12px; gap:8px; }
  .lb-btn{ width:42px; height:42px; font-size:24px; }
  .lb-zoom{ min-width:46px; font-size:12px; }
  .lb-btn.lb-close{ margin-left:4px; }
  .lb-nav{ width:42px; height:42px; font-size:26px; }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
  .lb-info .cat{ display:none; }
  .lb-stage img{ max-width:98vw; border-radius:6px; }
}

/* lightbox: website screenshots open full-width and scroll */
.lb-stage{ min-height:0; }
.lb-stage.web{ display:block; overflow:auto; touch-action:pan-x pan-y; cursor:default; padding:0 2vw 24px; -webkit-overflow-scrolling:touch; }
.lb-stage.web img{ display:block; margin:0 auto; max-width:none; max-height:none; border-radius:8px; }
.lb-stage.web .lb-ph{ margin:40px auto; }