/*
 * Infinity Binary — blog & site UI/UX overhaul layer (v2).
 * Loads AFTER the base stylesheet; only adds/overrides, never removes content.
 * Palette comes from base tokens: --ink #0b1020, --bone #f2efe5, --paper #fbfaf6,
 * --signal #b7f52b, --coral #ff7652, --line #d9d7cd.
 */

/* ============================================================
   1. FOOTER V2 — worldwide coverage + keyword-seeded columns
   ============================================================ */
.footer-v2 { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-v2 .footer-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) 3fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.footer-v2 .footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-v2 .footer-note { max-width: 46ch; }
.footer-v2 .footer-coverage {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.footer-v2 .footer-coverage strong { color: var(--bone); font-weight: 600; }
.footer-v2 .footer-links-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 36px);
}
.footer-v2 .footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-v2 .footer-col .meta {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.footer-v2 .footer-col a {
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.footer-v2 .footer-col a:hover,
.footer-v2 .footer-col a:focus-visible { opacity: 1; transform: translateX(2px); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) {
  .footer-v2 .footer-top { grid-template-columns: 1fr; }
  .footer-v2 .footer-links-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .footer-v2 .footer-links-v2 { grid-template-columns: 1fr; }
}

/* ============================================================
   2. ARTICLE — breadcrumbs, hero, takeaways, TOC state
   ============================================================ */
.article-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px) 0;
  font-size: 12.5px;
  color: var(--muted);
}
.article-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.article-breadcrumbs a:hover, .article-breadcrumbs a:focus-visible { color: var(--signal); border-color: currentColor; }
.article-breadcrumbs .bc-here {
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.article-breadcrumbs span[aria-hidden] { opacity: 0.45; }

.article-hero { position: relative; overflow: hidden; }
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 32, 0) 42%, rgba(11, 16, 32, 0.38) 100%);
  pointer-events: none;
}
.article-hero-photo {
  transition: transform 0.9s var(--delight-ease);
}
.article-hero:hover .article-hero-photo { transform: scale(1.015); }

.article-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.article-summary li {
  position: relative;
  padding-left: 26px;
}
.article-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--signal);
  border-bottom: 2.5px solid var(--signal);
  transform: rotate(-45deg);
}

.article-toc a.is-active { color: var(--ink); font-weight: 600; }
.article-toc a.is-active::before { background: var(--signal); }

/* ============================================================
   3. POST CARDS — image geometry, hover motion, featured card
   ============================================================ */
.post-grid { align-items: stretch; }
.post-card { will-change: transform; }
.post-card .post-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.8);
  margin-bottom: 14px;
  background: var(--ink-2);
  transition: transform 0.5s var(--delight-ease), filter 0.3s ease;
}
.post-card:hover .post-card-image,
.post-card:focus-visible .post-card-image { transform: scale(1.035); filter: saturate(1.06); }
.post-card:hover { transform: translateY(-3px); box-shadow: 8px 8px 0 rgba(183, 245, 43, 0.9); border-color: var(--ink); }
.post-card h2 { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem); line-height: 1.32; }
.post-card .post-card-marker span:first-child {
  background: var(--ink);
  color: var(--signal);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* featured spotlight = first card of the hub grid */
@media (min-width: 900px) {
  .post-grid > .post-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "signal image"
      "meta   image"
      "title  image"
      "desc   image"
      "cta    image";
    align-items: start;
    column-gap: 30px;
    row-gap: 12px;
    padding: 28px;
    /* colors intentionally inherited from the base dark spotlight (.post-card:first-child) */
  }
  .post-grid > .post-card:first-child .post-card-signal { grid-area: signal; }
  .post-grid > .post-card:first-child .post-card-marker { display: none; }
  .post-grid > .post-card:first-child .post-meta { grid-area: meta; }
  .post-grid > .post-card:first-child .post-card-image {
    grid-area: image;
    height: 100%;
    aspect-ratio: auto;
    margin-bottom: 0;
  }
  .post-grid > .post-card:first-child h2 {
    grid-area: title;
    align-self: end;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  }
  .post-grid > .post-card:first-child p { grid-area: desc; align-self: start; }
  .post-grid > .post-card:first-child .post-card-link-label { grid-area: cta; }
}
@media (max-width: 899px) {
  .post-grid > .post-card:first-child { outline: 2px solid rgba(183, 245, 43, 0.55); outline-offset: -2px; }
}

/* ============================================================
   4. LISTING CONTROLS — search + filter chips
   ============================================================ */
.insights-controls {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(var(--paper) 82%, rgba(251, 250, 246, 0));
  padding-bottom: 10px;
}
#blog-search {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#blog-search:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--signal);
}
.insights-filter-row button {
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.insights-filter-row button:hover { transform: translateY(-1px); border-color: var(--ink); }
.insights-filter-row button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.blog-result-count { font-variant-numeric: tabular-nums; }

/* ============================================================
   5. RELATED CAROUSEL — snap + hover
   ============================================================ */
.related-carousel-viewport { scroll-snap-type: x mandatory; }
.related-article-card { scroll-snap-align: start; }
.related-article-card .related-article-image {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  border-radius: calc(var(--radius) * 0.8);
  background: var(--ink-2);
  transition: transform 0.45s var(--delight-ease);
}
.related-article-card:hover .related-article-image { transform: scale(1.03); }
.related-article-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   6. FORM STATUS (contact + upgrades)
   ============================================================ */
.ib-form-status { min-height: 1.4em; font-size: 14px; margin: 6px 0 0; }
.ib-form-status.is-busy { color: var(--muted); }
.ib-form-status.is-ok { color: #3e7c17; font-weight: 600; }
.ib-form-status.is-error { color: var(--coral); font-weight: 600; }

/* ============================================================
   7. MOBILE NAV polish
   ============================================================ */
.mobile-nav a.is-active { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.desktop-nav a.is-active { position: relative; }
.desktop-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--signal);
  border-radius: 2px;
}

/* ============================================================
   8. MISC — focus visibility, selection, print
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--signal); color: var(--ink); }

@media print {
  .site-header, .footer, .article-progress, .article-share, .article-toc,
  .related-articles, .article-mid-cta, .article-cta, .article-newsletter, .insights-controls { display: none !important; }
  .article-content { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card .post-card-image, .article-hero-photo, .related-article-card .related-article-image { transition: none !important; }
  .post-card:hover, .related-article-card:hover .related-article-image { transform: none; }
}

/* ============================================================
   9. ARTICLE CONTENT LINKS — visible, underlined, reactive
   ============================================================ */
.article-content a,
.article-summary a,
.section-faq a,
blockquote a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease, background-color 0.18s ease;
}
.article-content a:hover,
.article-summary a:hover,
blockquote a:hover {
  color: var(--ink);
  text-decoration-color: var(--signal);
  background: linear-gradient(transparent 62%, rgba(183, 245, 43, 0.32) 62%);
}
.article-content a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background: currentColor;
  opacity: 0.65;
  clip-path: polygon(0 100%, 0 55%, 45% 100%, 0 100%, 100% 0, 55% 0, 100% 0, 100% 45%, 55% 100%);
}
/* button-styled links keep their own design: no underline, no marker */
.article-content a.button,
.article-summary a.button,
a.text-link.cta-link {
  text-decoration: none;
}
.article-content a.button::after { content: none; }
.article-content a.button:hover,
.article-summary a.button:hover {
  color: var(--ink);
  background: var(--signal);
  text-decoration: none;
}
/* links that are explicitly nofollow/sponsored/ugc get a quiet dotted style
   so editors can spot them in preview (visible only when rel attr present) */
.article-content a[rel~="nofollow"], .article-content a[rel~="sponsored"], .article-content a[rel~="ugc"] {
  text-decoration-style: dotted;
}

/* ============================================================
   10. AUTHOR CARD V2 — persona: photo, role, fun fact, socials
   ============================================================ */
.article-author.author-card-v2 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 34px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  background: var(--paper);
}
.author-v2-photo { flex: 0 0 auto; }
.author-v2-photo img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--signal);
  background: var(--ink-2, #e8e6dc);
}
.author-v2-monogram {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--signal);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
}
.author-v2-main { min-width: 0; }
.author-v2-headline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.author-v2-headline h2 { margin: 0; font-size: clamp(19px, 2.2vw, 24px); }
.author-badge {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--signal);
  border-radius: 999px;
  padding: 4px 10px;
}
.author-v2-role { margin: 6px 0 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6a60; font-weight: 600; }
.author-v2-bio { margin: 0 0 8px; max-width: 68ch; line-height: 1.65; }
.author-v2-fun {
  margin: 0 0 12px;
  font-size: 14px;
  color: #4d4c43;
  background: rgba(183, 245, 43, 0.12);
  border-left: 3px solid var(--signal);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  max-width: 64ch;
}
.author-v2-fun strong { font-weight: 700; }
.author-v2-socials { display: flex; gap: 10px; }
.author-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.author-social:hover { background: var(--ink); color: var(--signal); transform: translateY(-2px); }
@media (max-width: 640px) {
  .article-author.author-card-v2 { flex-direction: column; padding: 20px; }
}

/* ============================================================
   11. FLOATING WHATSAPP — every page
   ============================================================ */
.ib-wa-float {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22c15e;
  color: #fff;
  box-shadow: 0 10px 26px rgba(11, 16, 32, 0.28);
  transition: transform 0.18s var(--delight-ease, ease), box-shadow 0.18s ease;
}
.ib-wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(11, 16, 32, 0.34); }
.ib-wa-float svg { width: 28px; height: 28px; }
.ib-wa-tip {
  position: absolute;
  right: 66px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 6px 18px rgba(11, 16, 32, 0.16);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ib-wa-float:hover .ib-wa-tip, .ib-wa-float:focus-visible .ib-wa-tip { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) { .ib-wa-tip { display: none; } .ib-wa-float { width: 52px; height: 52px; } }

/* ============================================================
   12. HOME TESTIMONIALS + TRUST STRIP
   ============================================================ */
.home-testimonials { padding: clamp(48px, 7vw, 88px) 0; }
.home-testimonials .section-heading { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.ib-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.ib-testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius, 14px) * 1.2);
  padding: 22px;
  box-shadow: 0 6px 22px rgba(11, 16, 32, 0.05);
  transition: transform 0.25s var(--delight-ease, ease), box-shadow 0.25s ease;
}
.ib-testimonial:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 16, 32, 0.09); }
.ib-stars { display: inline-flex; gap: 2px; color: #f5a623; }
.ib-testimonial blockquote { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.ib-testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ib-testimonial figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--signal); }
.ib-avatar-fallback {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--signal); font-weight: 800; font-size: 20px;
}
.ib-t-id { display: flex; flex-direction: column; min-width: 0; }
.ib-t-id strong { font-size: 14.5px; }
.ib-t-id span { font-size: 12.5px; color: #6b6a60; }
.ib-t-result {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: rgba(183, 245, 43, 0.25);
  border-radius: 999px;
  padding: 5px 11px;
}
@media (max-width: 980px) { .ib-testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ib-testimonial-grid { grid-template-columns: 1fr; } }

/* contact page filled testimonial */
.testimonial-slot.testimonial-filled { border-left: 3px solid var(--signal); padding-left: 14px; }
.testimonial-slot.testimonial-filled p { font-style: italic; }

/* counters are removed from content; keep them hidden if any template regresses */
.service-num, .home-insight-meta span:first-child { display: none !important; }

@media print {
  .ib-wa-float { display: none !important; }
}