/* ===========================================================================
   GRIT GUIDE — page styles (gritblueprint standalone theme)
   Slug: grit-guide  |  Body class: gb-grit-guide-tpl
   Ported from the design source's single <style> block, every rule scoped
   under body.gb-grit-guide-tpl so nothing leaks to other templates. The page
   is otherwise inline-styled; this file holds keyframes, hovers, responsive
   overrides, the header offset, and smooth-anchor behavior.
   =========================================================================== */

/* --- Header offset: pull the hero under the transparent sticky Elementor
       header (desktop 130 / tablet 120 / mobile 100). ----------------------- */
body.gb-grit-guide-tpl { --gb-header-h:130px; }
@media (max-width:920px){ body.gb-grit-guide-tpl { --gb-header-h:120px; } }
@media (max-width:760px){ body.gb-grit-guide-tpl { --gb-header-h:100px; } }
body.gb-grit-guide-tpl #content, body.gb-grit-guide-tpl .site-content { padding-top:0!important; margin-top:0!important; }
body.gb-grit-guide-tpl .gb-app { margin-top:calc(-1 * var(--gb-header-h)) !important; color:var(--gb-ink); overflow-x:clip; }
/* Hero is min-height:100vh with flex-centered content: the negative margin above
   tucks its top behind the transparent header without covering the centered
   content, so no extra hero padding is needed. */
html:has(body.gb-grit-guide-tpl) { scroll-behavior:smooth; }
body.gb-grit-guide-tpl { scroll-padding-top:calc(var(--gb-header-h) + 12px); }

/* --- Ported page styles (scoped) --------------------------------------- */
body.gb-grit-guide-tpl html, body.gb-grit-guide-tpl body {margin:0;}
body.gb-grit-guide-tpl * {box-sizing:border-box;}
@keyframes ggc-ticker { from { transform:translateX(0);} to { transform:translateX(-50%);} }
@keyframes ggc-onair { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(255,24,148,.6);} 50% { opacity:.45; box-shadow:0 0 0 9px rgba(255,24,148,0);} }
@keyframes ggc-bars { 0%,100% { transform:scaleY(.22);} 50% { transform:scaleY(1);} }
@keyframes ggc-glow { 0%,100% { text-shadow:0 0 0 rgba(255,24,148,0);} 50% { text-shadow:0 0 34px rgba(255,24,148,.55);} }
@keyframes ggc-sheen { from { background-position:240% 0;} to { background-position:-140% 0;} }
@keyframes ggc-logo-in { from { transform:translateY(14px) scale(.97);} to { transform:none;} }
@keyframes reveal-in { from { opacity:0; transform:translateY(28px);} to { opacity:1; transform:none;} }
body.gb-grit-guide-tpl .reveal {animation:reveal-in linear both; animation-timeline:view(); animation-range:entry 0% cover 22%;}
@supports not (animation-timeline: view()) {
  body.gb-grit-guide-tpl .reveal {opacity:1; transform:none; animation:none;}
}
body.gb-grit-guide-tpl .hovcard {transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s;}
body.gb-grit-guide-tpl .hovcard:hover {transform:translateY(-7px);}
body.gb-grit-guide-tpl .mnav-link {position:relative;}
body.gb-grit-guide-tpl .mnav-link::after {content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--gb-pink); transition:right .25s ease;}
body.gb-grit-guide-tpl .mnav-link:hover::after {right:0;}
body.gb-grit-guide-tpl .mnav-burger {display:none;}
body.gb-grit-guide-tpl .mobile-nav {display:none;}
body.gb-grit-guide-tpl .mobile-nav.open {display:block;}
body.gb-grit-guide-tpl .gg-faq summary {list-style:none; cursor:pointer;}
body.gb-grit-guide-tpl .gg-faq summary::-webkit-details-marker {display:none;}
body.gb-grit-guide-tpl .gg-faq details[open] .faq-plus {transform:rotate(45deg);}
body.gb-grit-guide-tpl .gg-faq details[open] .faq-q {color:var(--gb-pink);}
body.gb-grit-guide-tpl .gg-more {display:none !important;}
body.gb-grit-guide-tpl .gg-chips.chips-open .gg-more {display:inline-flex !important;}
body.gb-grit-guide-tpl .gg-chips.chips-open .gg-more-btn {display:none !important;}
body.gb-grit-guide-tpl .gg-more-btn {cursor:pointer; transition:border-color .2s ease, color .2s ease;}
body.gb-grit-guide-tpl .gg-more-btn:hover {border-color:var(--gb-pink) !important; color:#fff !important;}
body.gb-grit-guide-tpl .m-br {display:none;}
body.gb-grit-guide-tpl .ec-mobile {display:none;}
@media (prefers-reduced-motion: reduce) {
  body.gb-grit-guide-tpl .ggc-anim {animation:none !important;}
  body.gb-grit-guide-tpl .gg-logo {animation:none !important;opacity:1 !important;transform:none !important;}
  body.gb-grit-guide-tpl .reveal {animation:none!important;opacity:1!important;transform:none!important;}
}
@media (max-width:560px) {
  body.gb-grit-guide-tpl .hdr-live {display:none !important;}
  body.gb-grit-guide-tpl .hdr-visit {display:none !important;}
  body.gb-grit-guide-tpl .hdr-logo img {height:22px !important;}
}
@media (max-width:1040px) {
  body.gb-grit-guide-tpl .mnav-links {display:none !important;}
  body.gb-grit-guide-tpl .mnav-burger {display:inline-flex !important;}
}
@media (max-width:900px) {
  body.gb-grit-guide-tpl .pillars-grid {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .pillars-div {display:none !important;}
  body.gb-grit-guide-tpl .two-col {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .tw-grid {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .tw-conn {padding:6px 0 !important;}
  body.gb-grit-guide-tpl .feature-2 {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .pub-grid {grid-template-columns:1fr 1fr !important;}
  body.gb-grit-guide-tpl .news-row {grid-template-columns:1fr !important; text-align:left !important;}
  body.gb-grit-guide-tpl .news-row .news-cta {text-align:left !important;}
}
@media (max-width:680px) {
  body.gb-grit-guide-tpl .reveal {opacity:1 !important; transform:none !important; animation:none !important;}
  body.gb-grit-guide-tpl .hero-status {display:none !important;}
  body.gb-grit-guide-tpl .gg-logo {height:68px !important; margin-bottom:10px !important;}
  body.gb-grit-guide-tpl .hero-h1 {font-size:24px !important; margin-bottom:18px !important;}
  body.gb-grit-guide-tpl .xword {font-size:38px !important;}
  body.gb-grit-guide-tpl .pillars-grid {display:none !important;}
  body.gb-grit-guide-tpl .grid-auto {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .six-grid {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .stat-strip {grid-template-columns:1fr 1fr !important;}
  body.gb-grit-guide-tpl .pub-grid {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .xfromto {gap:10px !important;}
}
@media (max-width:760px) {
  body.gb-grit-guide-tpl .reveal {opacity:1 !important; transform:none !important; animation:none !important;}
  body.gb-grit-guide-tpl .m-scroll {display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px !important; margin:0 -20px 0 0 !important; padding:2px 0 18px 0 !important; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gb-pink) rgba(255,255,255,.10);}
  body.gb-grit-guide-tpl .m-scroll::-webkit-scrollbar {height:5px;}
  body.gb-grit-guide-tpl .m-scroll::-webkit-scrollbar-thumb {background:var(--gb-pink); border-radius:99px;}
  body.gb-grit-guide-tpl .m-scroll::-webkit-scrollbar-track {background:rgba(148,152,155,.18); border-radius:99px;}
  body.gb-grit-guide-tpl .m-scroll > * {flex:0 0 84% !important; scroll-snap-align:start; min-width:0;}
  body.gb-grit-guide-tpl .rp-step {padding:24px 0 12px !important; border-right:none !important;}
  body.gb-grit-guide-tpl .acc-item .acc-desc {display:none !important;}
  body.gb-grit-guide-tpl .acc-item.open .acc-desc {display:block !important;}
  body.gb-grit-guide-tpl .acc-item {position:relative;}
  body.gb-grit-guide-tpl .acc-item::after {content:"+"; position:absolute; right:2px; top:16px; font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1; color:var(--gb-pink);}
  body.gb-grit-guide-tpl .acc-item.open::after {content:"\2013";}
  body.gb-grit-guide-tpl .acc-plus {display:inline-flex !important;}
  body.gb-grit-guide-tpl .acc-item.open .acc-desc::after {content:"Tap again to read on Grit Guide \2192"; display:block; margin-top:11px; font:800 10.5px/1.3 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--gb-pink);}
  body.gb-grit-guide-tpl .hero-cta a {padding:12px 20px !important; font-size:12px !important;}
  body.gb-grit-guide-tpl .hero-cta {gap:10px !important;}
  body.gb-grit-guide-tpl .ec-photo {height:300px !important;}
  body.gb-grit-guide-tpl .ec-pad {padding-left:18px !important; padding-right:18px !important;}
  body.gb-grit-guide-tpl .auth-icons {display:flex !important; grid-template-columns:none !important; overflow-x:auto; gap:12px !important; scrollbar-width:thin; scrollbar-color:var(--gb-pink) rgba(148,152,155,.20);}
  body.gb-grit-guide-tpl .auth-icons::-webkit-scrollbar {height:5px;}
  body.gb-grit-guide-tpl .auth-icons::-webkit-scrollbar-thumb {background:var(--gb-pink); border-radius:99px;}
  body.gb-grit-guide-tpl .auth-icons > * {flex:0 0 84px !important;}
  body.gb-grit-guide-tpl .m-br {display:inline !important;}
  body.gb-grit-guide-tpl .sep {display:none !important;}
  body.gb-grit-guide-tpl .ec-cols {grid-template-columns:1fr !important;}
  body.gb-grit-guide-tpl .ec-desktop {display:none !important;}
  body.gb-grit-guide-tpl .ec-mobile {display:block !important;}
  body.gb-grit-guide-tpl .m-hide {display:none !important;}
  body.gb-grit-guide-tpl .xword {font-size:32px !important;}
  body.gb-grit-guide-tpl .hero-sub {margin:20px auto 22px !important; gap:16px !important;}
}

/* ===========================================================================
   House rules applied on integration (not in the original export)
   --------------------------------------------------------------------------- */

/* FAQ accordion titles ship at 18px; bump per house standard so the questions
   read at a comfortable size (desktop 30 / mobile 22). */
body.gb-grit-guide-tpl .faq-q { font-size:30px !important; }
@media (max-width:760px){
  body.gb-grit-guide-tpl .faq-q { font-size:22px !important; }
}

/* Mobile minimum legible type: the export carries many inline sub-15px sizes
   (eyebrows, labels, meta). On phones (<=760px) raise every one to a 15px
   floor. Attribute selectors + !important outrank the inline values. */
@media (max-width:760px){
  body.gb-grit-guide-tpl [style*="font-size:8px"],
  body.gb-grit-guide-tpl [style*="font-size:9.5px"],
  body.gb-grit-guide-tpl [style*="font-size:10px"],
  body.gb-grit-guide-tpl [style*="font-size:10.5px"],
  body.gb-grit-guide-tpl [style*="font-size:11px"],
  body.gb-grit-guide-tpl [style*="font-size:11.5px"],
  body.gb-grit-guide-tpl [style*="font-size:12px"],
  body.gb-grit-guide-tpl [style*="font-size:12.5px"],
  body.gb-grit-guide-tpl [style*="font-size:13px"],
  body.gb-grit-guide-tpl [style*="font-size:13.5px"],
  body.gb-grit-guide-tpl [style*="font-size:14px"],
  body.gb-grit-guide-tpl [style*="font-size:14.5px"] { font-size:15px !important; }
  /* The export's own mobile media-queries also shrink a couple of elements
     below 15px; lift those to the same floor. */
  body.gb-grit-guide-tpl .hero-cta a { font-size:15px !important; }
  body.gb-grit-guide-tpl .acc-item.open .acc-desc::after { font-size:15px !important; }
}

/* ===========================================================================
   Client revisions (mobile polish + sizing)
   --------------------------------------------------------------------------- */

/* FAQ text larger on mobile (questions + answers). */
@media (max-width:760px){
  body.gb-grit-guide-tpl .faq-q { font-size:26px !important; }
  body.gb-grit-guide-tpl .gg-faq details p { font-size:16.5px !important; }
}

@media (max-width:760px){
  /* 1) Enlarge the GRIT GUIDE logo in the "platform / free to all" card. */
  body.gb-grit-guide-tpl img[src*="grit-guide-logo-primary"] { height:46px !important; }

  /* 2) Reader-plan steps slider: align the first step with the heading above
     (drop the left bleed; keep the right bleed for the scroll affordance). */
  body.gb-grit-guide-tpl .gg-steps-scroll { margin-left:0 !important; padding-left:0 !important; }

  /* 3) Experts slider: center the first card without overflowing the page.
     Keep the base full-width scroller (margin:0 -20px stays within the viewport,
     scrolls internally) and add flex spacers so the first/last cards can snap to
     center. No viewport-unit full-bleed (that caused horizontal page scroll). */
  body.gb-grit-guide-tpl .gg-exp-scroll { margin:0 !important; padding:2px 0 18px !important; }
  body.gb-grit-guide-tpl .gg-exp-scroll::before,
  body.gb-grit-guide-tpl .gg-exp-scroll::after { content:"" !important; flex:0 0 8% !important; }
  body.gb-grit-guide-tpl .gg-exp-scroll > * { scroll-snap-align:center !important; }
}

/* Expert Card "Known For" list: larger on mobile (ships at 12.5px). */
@media (max-width:760px){
  body.gb-grit-guide-tpl .ec-known li { font-size:17px !important; }
}

/* "What Grit Guide Covers" header: on mobile the wide eyebrow label + the
   "See All Topics" link don't fit one line, so drop the link to its own full
   line (arrow stays inline via white-space:nowrap on the link itself). */
@media (max-width:760px){
  body.gb-grit-guide-tpl .gg-cover-head > a { flex:1 0 100% !important; margin-top:4px; }
}

/* Sample Expert Card icon row: on mobile the 15px label floor widens labels
   like "Distribution" enough to blow out the 4-col grid (the card then can't
   shrink and gets clipped). Drop it to a 2x2 grid on mobile so the card fits
   while the labels stay legible. */
@media (max-width:760px){
  body.gb-grit-guide-tpl .ec-iconrow { grid-template-columns:repeat(2,1fr) !important; gap:16px 8px !important; }
}