/* ==========================================================================
   Industry Insights: the post archive and single posts.
   --------------------------------------------------------------------------
   Loaded only on blog views, not site-wide. Posts are plain editor output, so
   unlike the Elementor-built pages they inherit no type scale at all and
   .ipost-body has to supply one. The archive cards reuse .nlist/.ncard from
   News & Achievements rather than adding a second card style for the same job.
   ========================================================================== */
.ins-inner{max-width:1180px;margin-inline:auto}
@media(max-width:1220px){.ins-inner{padding-inline:24px}}
@media(max-width:767px){.ins-inner{padding-inline:16px}}

.ins-body{background:var(--canvas);padding:clamp(2.5rem,5vw,4rem) 0}
.ins-more{background:var(--mist);padding:clamp(2.5rem,5vw,3.5rem) 0}
.ins-more h2{margin:0}

/* the card excerpt, which News & Achievements does not carry */
.nexc{font-size:.9rem;line-height:1.55;color:var(--steel);margin:.55rem 0 0}

/* .nlist draws its dividing rules by letting the container background show
   through a 1px gap. That works on News & Achievements, where the card count
   is fixed and even, but an archive has however many posts exist: an odd
   number leaves the last cell as a bare grey block with nothing in it.
   Here the cards carry their own border instead, so an empty track is simply
   empty. Scoped to .ins-body so the news page is untouched. */
.ins-body .nlist,
.ins-more .nlist{background:none;border:0;gap:1.25rem}
.ins-body .ncard,
.ins-more .ncard{border:1px solid var(--line)}
.ins-body .ncard a:hover,
.ins-more .ncard a:hover{background:var(--mist)}

/* The related band asks for three posts and gets however many share the
   category, which early on is one. A fixed two column grid then leaves a bare
   filled cell beside it, so the track count follows the content instead. */
.ins-more .nlist{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, which stretched
   a lone related card across the full 1180px against a 148px thumbnail. Filled
   tracks keep every card the same width whatever the count, and because the
   grid no longer paints a background the unused ones are simply not there. */

/* ---- single post: two columns ------------------------------------------
   The reading measure has to stay near 68 characters or the text stops being
   comfortable to track. Capping it inside the 1180px band left roughly 490px
   of empty space down the right of every article, which reads as an
   unfinished page rather than a deliberate one.

   The column keeps its measure and a sidebar takes the rest. Every item in it
   is an internal link, so the space earns its place instead of being padding.
   The sidebar sticks while the article scrolls, which needs a travel distance
   on the parent: align-start on the grid gives it one.
   ------------------------------------------------------------------------ */
.ipost-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ipost-main{min-width:0}

/* With a sidebar present the column itself sets the measure, so the 68ch cap
   comes off: keeping both would reintroduce a gap inside the column, which is
   the thing this layout exists to remove.
   The sidebar is 360 rather than 320 because measuring real paragraphs at 320
   gave 84 characters a line, right at the top of the comfortable range. 360
   brings the column to about 764px and the line to roughly 80. */
.ipost-grid .ipost-body,
.ipost-grid .ipost-foot{max-width:none}

.ipost-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.6rem;font-size:.92rem}
.side-block{border-top:3px solid transparent;border-image:var(--grad) 1;border-image-width:3px 0 0 0;
  background:#fff;border-left:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:1.2rem 1.25rem 1.35rem}
.side-h{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.95rem !important;line-height:1.1 !important;
  color:var(--g900);margin:0 0 .9rem !important}

.side-topics{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.side-topics a{display:inline-block;padding:.4rem .7rem;border:1px solid var(--line);
  border-radius:2px;text-decoration:none;color:var(--steel);
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.8rem;line-height:1;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.side-topics a:hover{border-color:var(--flame);color:var(--g900)}
.side-topics a[aria-current="true"]{background:var(--g900);border-color:var(--g900);color:#fff}

.side-list{list-style:none;margin:0;padding:0}
.side-list li + li{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line)}
.side-list a{text-decoration:none;display:block}
.side-date{display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  color:var(--flame-deep);margin-bottom:.25rem}
.side-title{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;font-size:.98rem;line-height:1.2;color:var(--g900);
  transition:color .16s var(--ease)}
.side-list a:hover .side-title{color:var(--flame-deep)}

.side-cta{background:var(--g900);color:#fff;padding:1.4rem 1.25rem 1.5rem;
  border-top:3px solid transparent;border-image:var(--grad) 1;border-image-width:3px 0 0 0}
.side-cta-eyebrow{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;color:var(--amber);margin:0 0 .6rem}
.side-cta-body{font-size:.88rem;line-height:1.6;color:#B3A8A1;margin:0 0 1.1rem}
/* Every colour below is scoped through a parent class on purpose.
   The Elementor kit styles every anchor on the site with ".elementor-kit-39 a"
   at specificity (0,1,1), which beats a lone ".side-cta-btn" at (0,1,0) and
   painted the button label the same flame as its own background: the text was
   there all along and simply invisible. Two classes win it back without
   resorting to !important. */
.side-cta .side-cta-btn{display:block;text-align:center;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.92rem;
  background:var(--flame-deep);color:#fff;padding:.75rem 1rem;border-radius:2px;
  transition:background .16s var(--ease)}
.side-cta .side-cta-btn:hover{background:var(--hs-flame-pressed);color:#fff}
.side-cta .side-cta-alt{display:block;margin-top:.8rem;text-align:center;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--steel3)}
.side-cta .side-cta-alt:hover{color:#fff}

/* the other sidebar links, pinned the same way for the same reason */
.ipost-side .side-topics a{color:var(--steel)}
.ipost-side .side-topics a:hover{color:var(--g900)}
.ipost-side .side-topics a[aria-current="true"]{color:#fff}
.ipost-side .side-list a{color:inherit}

/* Below this the sidebar stops being a column and becomes a footer to the
   article, so it must not stay stuck to the viewport. */
@media(max-width:1000px){
  .ipost-grid{grid-template-columns:1fr}
  /* Once the sidebar drops away nothing constrains the measure, and the body
     would run the full container: about 98 characters a line at 1000px. The
     cap has to come back the moment the column stops doing the job. */
  .ipost-grid .ipost-body,
  .ipost-grid .ipost-foot{max-width:70ch;margin-inline:auto}
  /* centred, not left aligned: a capped column pushed to one side leaves the
     slack all on the right and looks lopsided, which is the complaint this
     layout started from. Centred, the same slack reads as margin. */
  .ipost-grid .ipost-hero{margin-inline:auto}
  .ipost-side{position:static;top:auto;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;
    margin-top:2.5rem}
  .side-cta{grid-column:1 / -1}
}
@media(max-width:620px){
  .ipost-side{grid-template-columns:1fr}
}

/* ---- single post ------------------------------------------------------- */
.ipost-meta{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.03em;
  color:var(--steel3);margin:1.1rem 0 0}
.ipost-meta span{margin:0 .5rem;color:#5C534E}

/* Featured images arrive at whatever shape they were shot or cut out in: the
   product cut-outs are square, the plant photographs are 16:9. Stretching all
   of them to the column width made a square flange render 946px tall, a full
   screen of image before a word of the article, and upscaled an 800px file
   while doing it.
   So: cap the height, never scale past the file's own size, and centre what is
   left. The figure shrinks to the image so the gradient rule above it lines up
   with the picture rather than floating wider than it. */
.ipost-hero{margin:0 0 2.4rem;position:relative;width:fit-content;max-width:100%}
.ipost-hero img{display:block;margin-inline:auto;
  width:auto;height:auto;max-width:100%;max-height:430px}
.ipost-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);z-index:1}
.ipost-hero figcaption{margin-top:.8rem;font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;color:var(--steel)}

/* The reading column is capped well short of the 1180px band. An over-long
   measure is the commonest way a blog becomes hard to read, and 68ch is about
   the widest that still tracks comfortably at this size. */
.ipost-body{max-width:68ch;font-size:1.06rem;line-height:1.72;color:var(--g900)}
.ipost-body > *:first-child{margin-top:0}
.ipost-body p{margin:0 0 1.35rem}

/* The kit sets a very large h2 with !important for the Elementor sections, so
   a heading inside a post needs the same weapon or it lands at 48px
   mid-article. */
.ipost-body h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;color:var(--g900);
  font-size:1.72rem !important;line-height:1.12 !important;
  margin:2.6rem 0 .9rem !important}
.ipost-body h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.3rem;line-height:1.18;letter-spacing:.02em;
  color:var(--g900);margin:2rem 0 .7rem}
.ipost-body h4{font-family:"IBM Plex Sans",sans-serif;font-weight:600;
  font-size:1.05rem;color:var(--g900);margin:1.7rem 0 .5rem}
.ipost-body ul,.ipost-body ol{margin:0 0 1.35rem;padding-left:1.35rem}
.ipost-body li{margin:0 0 .5rem}
.ipost-body a{color:var(--flame-deep);text-decoration:none;
  border-bottom:1px solid rgba(214,55,26,.35)}
.ipost-body a:hover{border-bottom-color:var(--flame-deep)}
.ipost-body img{max-width:100%;height:auto;display:block;margin:2rem 0}
.ipost-body figure{margin:2rem 0}
.ipost-body figcaption{font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  color:var(--steel);margin-top:.7rem}
.ipost-body blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--flame);font-size:1.14rem;line-height:1.6;color:var(--g900)}
.ipost-body blockquote p:last-child{margin-bottom:0}
.ipost-body code{font-family:"IBM Plex Mono",monospace;font-size:.88em;
  background:var(--mist);padding:.12em .4em;border-radius:2px}
.ipost-body table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.92rem}
.ipost-body th,.ipost-body td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.ipost-body th{background:var(--mist);font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}

.ipost-foot{max-width:68ch;margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--steel)}
.ipost-foot a{color:var(--flame-deep);text-decoration:none}
.ipost-foot a:hover{text-decoration:underline}
.ipost-cats{margin:0 0 .5rem}
.ipost-back{margin:0}

/* ---- empty state and pager --------------------------------------------- */
.ins-empty{max-width:60ch;padding:1rem 0 2rem}
.ins-empty h2{margin:.5rem 0 0}
.ins-empty p{color:var(--steel);margin:1.2rem 0 0;line-height:1.65}
.ins-empty-go a{font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--flame-deep);text-decoration:none}
.ins-empty-go a:hover{text-decoration:underline}

.ins-pager{margin-top:2.5rem}
.ins-pager .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ins-pager .page-numbers{font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;line-height:1;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .9rem;border:1px solid var(--line);background:#fff;color:var(--steel);
  text-decoration:none;border-radius:2px;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.ins-pager a.page-numbers:hover{border-color:var(--flame);color:var(--g900)}
.ins-pager .page-numbers.current{background:var(--g900);border-color:var(--g900);color:#fff}
.ins-pager .page-numbers.dots{border-color:transparent;background:none}

/* Touch targets, keyed the same way as the rest of the site: pointer type
   first, width as the fallback for hybrid machines that report a fine pointer
   while a finger is still doing the tapping.
   Links inside .ipost-body are deliberately left alone. WCAG 2.5.8 exempts a
   link sitting in a sentence, and padding one would break the line spacing of
   the paragraph around it. */
@media (pointer:coarse), (max-width:1024px){
  .ipost-cats a,
  .ipost-back a,
  .side-cta-alt{display:inline-block;padding-block:.6rem}
  .side-topics a{min-height:44px;display:inline-flex;align-items:center}
  .side-list a{padding-block:.35rem}
}

@media(max-width:860px){.nlist{grid-template-columns:1fr}}
@media(max-width:620px){
  .ncard a{flex-direction:column;gap:1rem}
  .ncard figure{flex:none}
  .ncard img{width:100%;height:180px}
  .ipost-body{font-size:1rem}
}