/* ==========================================================================
   MY BUSINESS FEED — editorial polish
   Loads after skin.css. This is the layer that separates "a news layout" from
   "a masthead": structured section rules, a bigger lead, badges on imagery,
   quieter furniture, and a slower vertical rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Vertical rhythm — give the page room to breathe
   -------------------------------------------------------------------------- */
.llb-section { padding-block: var(--llb-10) var(--llb-12); }
.llb-stack--lg > * + * { margin-top: var(--llb-16); }
.llb-shell { gap: 48px; }

/* --------------------------------------------------------------------------
   2. Section headings — hairline rule with a red tab under the title
   -------------------------------------------------------------------------- */
.llb-sechead {
  position: relative;
  align-items: flex-end;
  gap: var(--llb-4);
  padding-bottom: 14px;
  margin-bottom: var(--llb-6);
  border-bottom: 1px solid #e2e2e2;
}
.llb-sechead::before {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 56px; height: 3px;
  background: var(--llb-brand);
}
.llb-sechead__title {
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em;
}
.llb-sechead__title a { transition: color var(--llb-t); }
.llb-sechead__title a:hover { color: var(--llb-brand); }
.llb-sechead__link {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--llb-ink-3); padding-bottom: 3px;
}
.llb-sechead__link:hover { color: var(--llb-brand); }

/* The red "Breaking News" style label keeps its own treatment */
.llb-sechead--filled { border-bottom: 0; padding-bottom: 0; align-items: center; }
.llb-sechead--filled::before { display: none; }
.llb-sechead--filled .llb-sechead__title {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; padding: 9px 18px;
}

/* --------------------------------------------------------------------------
   3. Imagery — badges, calmer hover, no flat grey holes
   -------------------------------------------------------------------------- */
.llb-media { background: #f0f0f0; }
.llb-media > img { transition: transform 600ms cubic-bezier(.22,.61,.36,1); }
a:hover > .llb-media > img,
.llb-story:hover .llb-media > img,
.llb-hero:hover .llb-media > img { transform: scale(1.045); }

/* Category badge sitting on the image, LLB-style */
.llb-media__flag { left: 0; top: 0; }
.llb-media__flag .llb-flag {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  padding: 7px 12px; background: var(--llb-brand); color: #fff;
}

/* Placeholders should read as a design decision, not a missing file */
.llb-media--ph {
  background:
    linear-gradient(135deg, #fafafa 0%, #efefef 100%);
  border: 1px solid var(--llb-line);
}
.llb-media--ph .llb-media__label {
  font-family: var(--llb-font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #bdbdbd;
}

/* --------------------------------------------------------------------------
   4. Lead story — larger, with a kicker over a heavier headline
   -------------------------------------------------------------------------- */
.llb-grid--hero { grid-template-columns: minmax(0,1.72fr) minmax(0,1fr); gap: 36px; }
.llb-hero__body { padding-top: var(--llb-5); }
.llb-hero__title {
  font-size: 2.125rem; line-height: 1.22; letter-spacing: -.015em;
  margin-top: var(--llb-3);
}
.llb-hero__meta { margin-top: var(--llb-4); font-size: 12px; letter-spacing: .02em; }
.llb-hero .llb-kicker { margin-bottom: 0; }

@media (max-width: 1080px) {
  .llb-grid--hero { grid-template-columns: minmax(0,1fr); }
  .llb-hero__title { font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   5. Story units — tighter internals, clearer hierarchy
   -------------------------------------------------------------------------- */
.llb-story__body { padding-top: var(--llb-4); }
.llb-story__title { letter-spacing: -.005em; }
.llb-story__title a { transition: color var(--llb-t); }
.llb-story__excerpt { margin-top: var(--llb-3); line-height: 1.65; color: #4a4a4a; }
.llb-story__meta { margin-top: var(--llb-3); }

.llb-story--lead .llb-story__title { font-size: 1.625rem; line-height: 1.26; }
.llb-story--lead .llb-story__body { padding-top: var(--llb-5); }

/* Small thumbs run 3:2 like the reference site, not square.
   The kit only sets display:grid on --row, so --rowleft needs it here or the
   thumbnail stretches to the full column. */
.llb-story--row     { grid-template-columns: minmax(0,1fr) 148px; gap: var(--llb-5); }
.llb-story--rowleft { display: grid; align-items: start; grid-template-columns: 148px minmax(0,1fr); gap: var(--llb-5); }
.llb-story--rowleft .llb-story__body { padding-top: 0; }
.llb-story--mini    { grid-template-columns: 104px minmax(0,1fr); gap: var(--llb-4); }
.llb-story--row .llb-story__title,
.llb-story--rowleft .llb-story__title { font-size: 1.0625rem; line-height: 1.38; }
.llb-story--mini .llb-story__title { font-size: .875rem; line-height: 1.4; }

.llb-divided > * + * { padding-top: var(--llb-5); margin-top: var(--llb-5); border-top-color: #ededed; }
.llb-divided--tight > * + * { padding-top: var(--llb-4); margin-top: var(--llb-4); }

/* Meta — small caps, quiet */
.llb-byline, .llb-date {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a;
}
.llb-byline a { color: #6b6b6b; font-weight: 700; }

/* Kicker / tag */
.llb-kicker, .llb-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}

/* Headline lists */
.llb-headlines > li { padding-block: 13px; border-top-color: #ededed; }
.llb-headlines > li::before { top: 21px; width: 6px; height: 6px; }
.llb-headlines a { font-size: 1rem; line-height: 1.4; transition: color var(--llb-t); }

/* --------------------------------------------------------------------------
   6. READ MORE — a rule, not a slab
   -------------------------------------------------------------------------- */
.llb-readmore, .llb-readmore--outline {
  background: transparent; color: var(--llb-ink);
  border: 0; border-top: 1px solid var(--llb-ink); border-bottom: 1px solid var(--llb-ink);
  margin-top: var(--llb-8); padding: 15px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  transition: background var(--llb-t), color var(--llb-t);
}
.llb-readmore::after { content: " \2192"; color: var(--llb-brand); transition: color var(--llb-t); }
.llb-readmore:hover, .llb-readmore--outline:hover { background: var(--llb-ink); color: #fff; }
.llb-readmore:hover::after { color: #fff; }

/* --------------------------------------------------------------------------
   7. Sidebar — dark signup, bolder Most Read numerals
   -------------------------------------------------------------------------- */
.llb-widget + .llb-widget,
.llb-stack--lg > aside > * + * { margin-top: var(--llb-12); }

.llb-widget__title {
  font-size: 1.0625rem; letter-spacing: -.005em;
  padding-bottom: 12px; border-bottom: 1px solid var(--llb-ink);
  margin-bottom: var(--llb-5);
}

.llb-mostread > li { grid-template-columns: 36px minmax(0,1fr); gap: var(--llb-4); align-items: start; }
.llb-mostread > li::before {
  font-family: var(--llb-font-display); font-size: 1.625rem; font-weight: 700;
  color: #e0e0e0; line-height: 1;
}
.llb-mostread > li:hover::before { color: var(--llb-brand); }
.llb-mostread h4 { font-size: .9375rem; line-height: 1.42; }

.llb-signup { background: var(--llb-navy); color: #b4b4b4; padding: var(--llb-6); }
.llb-signup h3 { color: #fff; font-size: 1.125rem; line-height: 1.3; }
.llb-signup p { font-size: 13px; line-height: 1.6; }
.llb-signup .llb-input { border: 0; padding: 13px 14px; }
.llb-signup .llb-btn { padding: 13px 22px; font-weight: 700; letter-spacing: .14em; font-size: 11px; }
.llb-signup .llb-form__note { color: #8a8a8a; font-size: 11px; }

.llb-follow a {
  background: transparent; border: 1px solid var(--llb-line);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 12px;
}
.llb-follow a:hover { background: var(--llb-brand); border-color: var(--llb-brand); color: #fff; }

/* --------------------------------------------------------------------------
   8. Article page
   -------------------------------------------------------------------------- */
/* One measure for the whole article — headline, image, byline and body all
   line up, and the space left before the rail reads as editorial margin. */
.single article.llb-box { max-width: 780px; }
.llb-h1 { font-size: 2.375rem; line-height: 1.2; letter-spacing: -.015em; }
.single .llb-prose, .single .llb-standfirst { max-width: none; }
.single .llb-prose { font-size: 1.0625rem; }
.single .llb-kicker { margin-bottom: var(--llb-3); }
.llb-standfirst { font-size: 1.125rem; line-height: 1.6; color: #4a4a4a; }
.mbf-articlebar { border-block-color: #e2e2e2; padding-block: 16px; }
.mbf-lead-figure { margin-block: var(--llb-8) 0; }
.llb-share__btn { width: 34px; height: 34px; border-color: var(--llb-line); }
.llb-prose p { margin-bottom: 1.35em; }
.llb-prose h2 { margin-top: var(--llb-12); }
.llb-prose > h2:first-child { margin-top: 0; }

.mbf-adjacent__item { background: transparent; border-color: var(--llb-line); padding: var(--llb-5); }
.mbf-adjacent__item:hover { border-color: var(--llb-ink); background: transparent; }

/* --------------------------------------------------------------------------
   9. Header + footer detailing
   -------------------------------------------------------------------------- */
.llb-masthead { padding-block: var(--llb-6); }
.llb-wordmark { letter-spacing: -.03em; }
.llb-network__inner { min-height: 34px; }

.llb-navbar { border-top-color: #e2e2e2; border-bottom-color: #e2e2e2; }
.llb-nav__link { font-weight: 700; letter-spacing: .06em; font-size: 12px; }
.llb-dropdown { border-top-width: 2px; }
.llb-dropdown a { font-family: var(--llb-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.llb-footer { border-top: 3px solid var(--llb-brand); padding-block: var(--llb-16) var(--llb-8); }
.llb-footer .llb-wordmark { font-size: 1.75rem; }
.llb-footer__links { gap: var(--llb-6); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.llb-footer__legal { color: #7d7d7d; font-size: 11px; letter-spacing: .04em; }
.mbf-footer__blurb { font-size: 13px; line-height: 1.7; color: #a8a8a8; }

/* --------------------------------------------------------------------------
   10. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .llb-stack--lg > * + * { margin-top: var(--llb-12); }
  .llb-shell { gap: var(--llb-12); }
}
@media (max-width: 640px) {
  .llb-section { padding-block: var(--llb-6) var(--llb-8); }
  .llb-stack--lg > * + * { margin-top: var(--llb-10); }
  .llb-sechead__title { font-size: 1.3125rem; }
  .llb-hero__title { font-size: 1.5rem; }
  .llb-h1 { font-size: 1.75rem; }
  .llb-story--lead .llb-story__title { font-size: 1.25rem; }
  .llb-story--row     { grid-template-columns: minmax(0,1fr) 108px; gap: var(--llb-4); }
  .llb-story--rowleft { grid-template-columns: 108px minmax(0,1fr); gap: var(--llb-4); }
  .llb-story--mini    { grid-template-columns: 88px minmax(0,1fr); }
}