/* ============================================================================
   GLL INSIGHTS — scoped editorial reskin for the blog (/insights)
   ----------------------------------------------------------------------------
   Loaded ONLY when body.gll-type-insights is present (theme header emits that
   class for the "/insights" path prefix). Every selector below therefore begins
   with `body.gll-type-insights` so it can NEVER touch the Law Firms / Lawyers
   directories, which share the same listings / searchbox / listing widgets.

   Language = siblings of the rebuilt /about-us + /contact pages (the canonical
   GLL content-page system): dark #1F1F1F hero band, gold square-dot eyebrows,
   Inter light display headings with a gold accent, white hairline cards, Roboto
   prose, SQUARE corners, IntersectionObserver-friendly reveals.

   Tokens only — brand gold #B8922A, Inter (headings) / Roboto (body). The OLD
   gold (#8b6b28 / #ddc088) and the fonts Cormorant / Jost / Garamond are BANNED.
   Fonts already load site-wide: NO @import, NO google-fonts <link> here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. SCOPE TOKENS  (mirror the canonical --gllp-* ramp)
   --------------------------------------------------------------------------- */
body.gll-type-insights{
  --gli-ink:      #1F1F1F;
  --gli-ink-2:    #262626;
  --gli-ink-3:    #333333;
  --gli-mid:      #545454;
  --gli-soft:     #898989;
  --gli-faint:    #BDBEBE;
  --gli-line:     #E8E8E8;
  --gli-milk:     #F2F3F3;
  --gli-white:    #ffffff;
  --gli-gold:     #B8922A;
  --gli-gold-l:   #D4AF5A;
  --gli-gold-bg:  rgba(184,146,42,0.06);
  --gli-gold-rule:rgba(184,146,42,0.20);
  --gli-slate:    #626769;
  --gli-slate-l:  #6E7376;
  --gli-slate-d:  #565B5D;
  --gli-card:     #FAFAFA;
  --gli-font:      'Roboto', Helvetica, Arial, sans-serif;
  --gli-font-head: 'Inter', sans-serif;
  --gli-ease:      cubic-bezier(.22,1,.36,1);
}

/* =====================================================================
   1. LANDING HERO  —  turn the listings-widget header into a dark
   editorial band (the "INSIGHTS" hub headline lives in .glw-header).
   ===================================================================== */
body.gll-type-insights .listings-widget.glw-section{
  padding: 0 !important;
  background: var(--gli-white);
  border-bottom: 1px solid var(--gli-line);
}
body.gll-type-insights .listings-widget .glw-header{
  position: relative;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0;
  padding: clamp(3.4rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);
  /* full-bleed dark band that breaks out of the .container gutter */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(184,146,42,0.16) 0%, rgba(184,146,42,0) 48%),
    linear-gradient(165deg, var(--gli-slate-l) 0%, var(--gli-slate) 46%, var(--gli-slate-d) 100%);
  overflow: hidden;
}
/* subtle topographic wave texture — gradually fades to transparent */
body.gll-type-insights .listings-widget .glw-header::before{
  content:'';
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M0 20 Q60 6 120 20 T240 20'/%3E%3Cpath d='M0 60 Q60 46 120 60 T240 60'/%3E%3Cpath d='M0 100 Q60 84 120 100 T240 100'/%3E%3Cpath d='M0 140 Q60 126 120 140 T240 140'/%3E%3Cpath d='M0 180 Q60 166 120 180 T240 180'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 200px;
  -webkit-mask-image: linear-gradient(172deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 92%);
          mask-image: linear-gradient(172deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 92%);
  pointer-events:none;
}
/* inner content aligned to the grid (mirrors .container max) */
body.gll-type-insights .listings-widget .glw-header > *{
  position: relative;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0px, 2vw, 12px);
  padding-right: clamp(0px, 2vw, 12px);
}

/* eyebrow — gold square dot + caps label */
body.gll-type-insights .listings-widget .glw-caption{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--gli-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--gli-gold-l) !important;
  margin: 0 0 22px 0 !important;
}
body.gll-type-insights .listings-widget .glw-caption::before{
  content:'';
  width: 8px; height: 8px;
  background: var(--gli-gold);
  flex-shrink: 0;
  display: block;
}
/* kill the trailing hairline the widget's ::after draws */
body.gll-type-insights .listings-widget .glw-caption::after{
  display: none !important;
}

/* display heading — Inter light on dark */
body.gll-type-insights .listings-widget .glw-heading{
  font-family: var(--gli-font-head) !important;
  font-weight: 300 !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  max-width: 15ch;
  margin: 0 !important;
}
body.gll-type-insights .listings-widget .glw-heading em,
body.gll-type-insights .listings-widget .glw-heading i,
body.gll-type-insights .listings-widget .glw-heading strong{
  font-style: normal;
  font-weight: 300;
  color: var(--gli-gold-l);
}
/* the widget's little gold rule reads as a lede accent on the dark band */
body.gll-type-insights .listings-widget .glw-rule{
  width: 44px;
  height: 2px;
  background: var(--gli-gold);
  margin-top: 26px;
}

/* =====================================================================
   2. ARTICLE CARD GRID  —  white hairline cards, square corners,
   caps category tag, Inter title, Roboto excerpt, gold top-rule on hover.
   ===================================================================== */

/* neutralise the shared .glw-card-wrap double frame so .gll-ac owns the look */
body.gll-type-insights .glw-grid{ margin-top: 0 !important; }
body.gll-type-insights .glw-col{ margin-bottom: clamp(16px, 2.2vw, 24px) !important; }
body.gll-type-insights .glw-card-wrap{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}
body.gll-type-insights .glw-card-wrap:hover{
  box-shadow: none !important;
  transform: none !important;
}

body.gll-type-insights .gll-ac{
  background: var(--gli-white) !important;
  border: 1px solid var(--gli-line) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  height: 100%;
  transition: border-color .25s var(--gli-ease), box-shadow .25s var(--gli-ease), transform .25s var(--gli-ease) !important;
}
/* gold top-rule on hover (pseudo keeps layout stable) */
body.gll-type-insights .gll-ac::before{
  content:'';
  position:absolute; top:0; left:0; right:0;
  height: 3px;
  background: var(--gli-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--gli-ease);
  z-index: 2;
}
body.gll-type-insights .gll-ac:hover{
  border-color: var(--gli-faint) !important;
  box-shadow: 0 10px 34px rgba(31,31,31,0.08) !important;
  transform: translateY(-3px);
}
body.gll-type-insights .gll-ac:hover::before{ transform: scaleX(1); }

/* cover */
body.gll-type-insights .gll-ac__cover{ border-radius: 0 !important; }
body.gll-type-insights .gll-ac__img{
  transition: transform .6s var(--gli-ease), filter .6s var(--gli-ease);
  filter: saturate(.96);
}
body.gll-type-insights .gll-ac:hover .gll-ac__img{ transform: scale(1.04); }
/* placeholder — refined dark tile with gold monogram */
body.gll-type-insights .gll-ac__placeholder{
  background: linear-gradient(140deg, #262626 0%, #1F1F1F 100%) !important;
  border-radius: 0 !important;
}
body.gll-type-insights .gll-ac__placeholder-mark{
  font-family: var(--gli-font-head) !important;
  color: rgba(184,146,42,0.30) !important;
  letter-spacing: 3px !important;
}

/* body */
body.gll-type-insights .gll-ac__body{ padding: 22px 22px 10px 22px !important; }

/* category — caps gold square-dot tag */
body.gll-type-insights .gll-ac__category{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gli-font) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--gli-gold) !important;
  margin: 0 0 12px 0 !important;
}
body.gll-type-insights .gll-ac__category::before{
  content:'';
  width: 6px; height: 6px;
  background: var(--gli-gold);
  flex-shrink: 0;
}

/* title — Inter */
body.gll-type-insights .gll-ac__title{
  font-family: var(--gli-font-head) !important;
  font-weight: 400 !important;
  font-size: 1.12rem !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: #3A3A3A !important;
  margin: 0 0 12px 0 !important;
}
body.gll-type-insights .gll-ac:hover .gll-ac__title{ color: var(--gli-ink) !important; }

/* excerpt — Roboto */
body.gll-type-insights .gll-ac__excerpt{
  font-family: var(--gli-font) !important;
  font-weight: 400 !important;
  font-size: 0.86rem !important;
  line-height: 1.62 !important;
  color: var(--gli-mid) !important;
}

/* premium alternation: whitest section backgrounds + soft-grey cards */
body.gll-type-insights .listings-widget.glw-section{ background: var(--gli-white) !important; }
body.gll-type-insights .gll-icat{ background: var(--gli-white); }
body.gll-type-insights .gll-ac{ background: var(--gli-card) !important; }
body.gll-type-insights .gll-icat__tile{ background: var(--gli-card) !important; }
/* keep the empty/photo placeholder tiles reading as covers, not grey bodies */
body.gll-type-insights .gll-ac__meta{ background: transparent !important; }

/* footer meta row — date (left) + read-more CTA (right), hairline separator */
body.gll-type-insights .gll-ac__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px 18px 22px !important;
  margin-top: 6px;
  border-top: 1px solid var(--gli-line);
}
body.gll-type-insights .gll-ac__date{
  font-family: var(--gli-font) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gli-soft) !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
}
/* read-more CTA — gold, uppercase, arrow slides on card hover */
body.gll-type-insights .gll-ac__more{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--gli-font) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gli-gold) !important;
  white-space: nowrap;
}
body.gll-type-insights .gll-ac__more-arrow{
  transition: transform .25s var(--gli-ease);
}
body.gll-type-insights .gll-ac:hover .gll-ac__more-arrow{
  transform: translateX(4px);
}

/* =====================================================================
   3. CATEGORY / SEARCH-RESULTS HEADER on /insights/{category}
   (the shared listing-search-results-header renders the .page-title +
   category accordion — refine typography only, no structural changes.)
   ===================================================================== */
body.gll-type-insights .content-section .page-title{
  font-family: var(--gli-font-head) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--gli-ink) !important;
}
body.gll-type-insights .content-section .page-title::after{
  background: var(--gli-gold) !important;
}
body.gll-type-insights .content-section .page-description p,
body.gll-type-insights .content-section .page-description{
  font-family: var(--gli-font) !important;
  color: var(--gli-ink-3) !important;
}
body.gll-type-insights .content-section .page-description a{
  color: var(--gli-gold) !important;
  text-decoration-color: var(--gli-gold-rule) !important;
}
body.gll-type-insights .content-section .page-description a:hover{ color: var(--gli-gold-l) !important; }
/* dark hero eyebrow accent on the results header keeps the square language */
body.gll-type-insights .gll-def-eyebrow-text{ color: var(--gli-gold-l) !important; }

/* category chips / accordion header — square, hairline, gold on hover */
body.gll-type-insights .categories-accordion .accordion-header{
  border-radius: 0 !important;
}
body.gll-type-insights .categories-accordion .accordion-header:hover{
  border-color: var(--gli-gold-rule) !important;
  background: var(--gli-gold-bg) !important;
}

/* =====================================================================
   4. SINGLE-ARTICLE READ VIEW
   Article HTML (h2/h3/p/blockquote/ul…) lives inside the shared
   .listing-widget "_description" block. Constrain to a comfortable
   measure and apply canonical prose typography — scoped to insights so
   directory profile bodies are untouched.
   ===================================================================== */
body.gll-type-insights .listing-widget{ background: var(--gli-white); }

/* article title (h1) — Inter light display */
body.gll-type-insights .listing-widget h1.display-3{
  font-family: var(--gli-font-head) !important;
  font-weight: 300 !important;
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  color: var(--gli-ink) !important;
}
/* breadcrumb / category caps line above the title */
body.gll-type-insights .listing-widget .listing-widget-category-breadcrumb{
  color: var(--gli-gold) !important;
  letter-spacing: 0.16em !important;
}

/* the prose column — the About block that holds the rendered article body */
body.gll-type-insights .listing-widget [class*="order-"] > .display-5{
  font-family: var(--gli-font-head) !important;
  font-weight: 500 !important;
  color: var(--gli-ink) !important;
}
/* comfortable measure + canonical prose for the article body paragraph */
body.gll-type-insights .listing-widget .col-12 > p{
  font-family: var(--gli-font) !important;
}
body.gll-type-insights .listing-widget .col-12 > p,
body.gll-type-insights .listing-widget .col-12 > p *{
  font-size: 1rem;
  line-height: 1.8;
}
body.gll-type-insights .listing-widget .col-12 > p{
  color: var(--gli-ink-3) !important;
  max-width: 760px;
}
/* headings inside the article body */
body.gll-type-insights .listing-widget .col-12 > p h2,
body.gll-type-insights .listing-widget .col-12 > p h3,
body.gll-type-insights .listing-widget .col-12 > p h4{
  font-family: var(--gli-font-head) !important;
  color: var(--gli-ink) !important;
  letter-spacing: -0.01em;
  line-height: 1.22;
  max-width: 760px;
}
body.gll-type-insights .listing-widget .col-12 > p h2{
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  margin: 2.4em 0 0.7em;
  position: relative;
  padding-left: 20px;
}
/* gold square-dot section marker on H2 */
body.gll-type-insights .listing-widget .col-12 > p h2::before{
  content:'';
  position:absolute; left:0; top:0.62em;
  width: 8px; height: 8px;
  background: var(--gli-gold);
}
body.gll-type-insights .listing-widget .col-12 > p h3{
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  margin: 1.9em 0 0.6em;
}
body.gll-type-insights .listing-widget .col-12 > p h4{
  font-weight: 600;
  font-size: 1.12rem;
  margin: 1.6em 0 0.5em;
}
/* body paragraphs */
body.gll-type-insights .listing-widget .col-12 > p p{ margin: 0 0 1.35em; }
/* links */
body.gll-type-insights .listing-widget .col-12 > p a{
  color: var(--gli-gold) !important;
  text-decoration: underline;
  text-decoration-color: var(--gli-gold-rule);
  text-underline-offset: 3px;
}
body.gll-type-insights .listing-widget .col-12 > p a:hover{ color: var(--gli-gold-l) !important; }
/* lists — gold square marker */
body.gll-type-insights .listing-widget .col-12 > p ul,
body.gll-type-insights .listing-widget .col-12 > p ol{
  max-width: 760px;
  padding-left: 1.3em;
  margin: 0 0 1.35em;
}
body.gll-type-insights .listing-widget .col-12 > p li{ margin: 0 0 0.55em; }
body.gll-type-insights .listing-widget .col-12 > p ul{ list-style: none; padding-left: 0; }
body.gll-type-insights .listing-widget .col-12 > p ul > li{
  position: relative;
  padding-left: 1.4em;
}
body.gll-type-insights .listing-widget .col-12 > p ul > li::before{
  content:'';
  position:absolute; left:0; top:0.62em;
  width: 6px; height: 6px;
  background: var(--gli-gold);
}
/* pull-quote / blockquote — hairline gold left rule, larger measure */
body.gll-type-insights .listing-widget .col-12 > p blockquote{
  margin: 1.8em 0;
  max-width: 760px;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 2px solid var(--gli-gold);
  font-family: var(--gli-font-head) !important;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--gli-ink-2) !important;
}
/* hairline separators */
body.gll-type-insights .listing-widget .col-12 > p hr{
  border: 0;
  border-top: 1px solid var(--gli-line);
  margin: 2.4em 0;
  max-width: 760px;
}
/* inline images in the body */
body.gll-type-insights .listing-widget .col-12 > p img{
  max-width: 100%;
  height: auto;
  border-radius: 0;
  margin: 1.4em 0;
}
/* the feature/detail table + badges keep square corners */
body.gll-type-insights .listing-widget .gll-badge{ border-radius: 0 !important; }
body.gll-type-insights .listing-widget .table th,
body.gll-type-insights .listing-widget .table td{ font-family: var(--gli-font) !important; }

/* =====================================================================
   5. REVEAL-ON-SCROLL  (companion to gll-pages.js; armed on html.gllp-ready)
   Only hides content WHEN the JS is live, so a JS failure keeps it visible.
   ===================================================================== */
/* SAFETY-FIRST: cards are NEVER hidden (the site-wide reveal JS observes
   .gllp-rv, not .gll-ac, so an opacity:0 rest state would leave every card
   permanently blank). Transform-only rise; opacity always 1. */
body.gll-type-insights .gll-ac{
  transition: transform .5s var(--gli-ease),
              border-color .25s var(--gli-ease), box-shadow .25s var(--gli-ease);
}
html.gllp-ready body.gll-type-insights .gll-ac{
  opacity: 1;
  transform: none;
}

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */
@media (max-width: 900px){
  body.gll-type-insights .listings-widget .glw-header{
    padding-top: clamp(2.8rem, 8vw, 4rem);
    padding-bottom: clamp(2.4rem, 6vw, 3.4rem);
  }
}
@media (max-width: 600px){
  body.gll-type-insights .listings-widget .glw-header{
    padding-left: 20px;
    padding-right: 20px;
  }
  body.gll-type-insights .listings-widget .glw-heading{ font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  /* cards → single column (Bootstrap col-md-4 already stacks < 768, keep tap targets big) */
  body.gll-type-insights .gll-ac__body{ padding: 18px 16px 6px 16px !important; }
  body.gll-type-insights .gll-ac__meta{ padding: 12px 16px 15px 16px !important; }
  /* smaller title font on phones */
  body.gll-type-insights .gll-ac__title{ font-size: 0.95rem !important; line-height: 1.32 !important; margin-bottom: 9px !important; }
  body.gll-type-insights .gll-ac__excerpt{ font-size: 0.82rem !important; }
  body.gll-type-insights .gll-ac__more{ font-size: 0.62rem !important; }
  body.gll-type-insights .gll-ac__link{ min-height: 44px; }
  body.gll-type-insights .listing-widget .col-12 > p,
  body.gll-type-insights .listing-widget .col-12 > p h2,
  body.gll-type-insights .listing-widget .col-12 > p h3{ max-width: 100%; }
}

/* reduced-motion — never hide, never move */
@media (prefers-reduced-motion: reduce){
  html.gllp-ready body.gll-type-insights .gll-ac{ opacity: 1 !important; transform: none !important; }
  body.gll-type-insights .gll-ac,
  body.gll-type-insights .gll-ac__img,
  body.gll-type-insights .gll-ac::before{ transition: none !important; }
  body.gll-type-insights .gll-ac:hover{ transform: none; }
  body.gll-type-insights .gll-ac:hover .gll-ac__img{ transform: none; }
}