/* blog.css — shared layout, prose and responsive rules for blog.tucarro360.co */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text-default);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
}
button.navlink:hover { background: var(--blue-50); color: var(--tc-blue) !important; }
.lic svg { width: 1em; height: 1em; display: block; }
a { color: inherit; }

/* ---- Sub-navigation ribbon ---- */
.subnav-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.subnav-scroll::-webkit-scrollbar { display: none; }
.subnav-link:hover { color: var(--tc-blue) !important; }

/* Featured renders as the big hero on desktop, as a normal card on mobile */
.feat-mobile { display: none; }

/* Horizontal-scroll affordances (shown only on mobile) */
.subnav-hint { display: none; }
.tags-hint { display: none; }
.tags-wrap { position: relative; }
@keyframes subnavNudge { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .subnav-hint, .tags-hint { animation: none !important; } }

/* ---- Article prose ---- */
.prose { font-size: 17.5px; line-height: 1.75; color: var(--text-default); }
.prose > * + * { margin-top: 1.15em; }
.prose .lead {
  font-size: 20px; line-height: 1.65; color: var(--text-strong); font-weight: 500;
  margin-top: 0;
}
.prose h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--text-strong);
  margin-top: 1.9em; margin-bottom: 0.1em; scroll-margin-top: 90px;
}
.prose h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--text-strong); margin-top: 1.5em;
}
.prose p { margin: 0; }
.prose strong { color: var(--text-strong); font-weight: 700; }
.prose a {
  color: var(--tc-blue); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; text-decoration-color: var(--blue-200);
  font-weight: 600; overflow-wrap: anywhere; transition: color .15s ease, text-decoration-color .15s ease;
}
.prose a:hover { color: var(--blue-700, #0b46b8); text-decoration-color: currentColor; }
.prose a:focus-visible { outline: 2px solid var(--tc-blue); outline-offset: 2px; border-radius: 3px; }
.prose ul, .prose ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.prose ul li, .prose ol li { position: relative; padding-left: 34px; }
.prose ul li::before {
  content: ""; position: absolute; left: 6px; top: 9px; width: 8px; height: 8px;
  border-radius: 3px; background: var(--green-400);
}
.prose ol { counter-reset: step; }
.prose ol li { counter-increment: step; }
.prose ol li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 8px; background: var(--blue-50); color: var(--tc-blue);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--green-300);
  font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.4;
  letter-spacing: -0.01em; color: var(--text-strong); font-style: italic;
}
.prose figure { margin: 1.8em 0; }
.prose figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--text-subtle); text-align: center;
}
.prose .callout {
  display: flex; gap: 14px; background: var(--green-50); border: 1px solid var(--green-200);
  border-radius: 16px; padding: 18px 20px; margin: 1.6em 0;
}
.prose .callout .callout-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: #fff; color: #0f8240;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.prose .callout strong { display: block; color: #0f6736; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.prose .callout p { font-size: 15px; line-height: 1.55; color: var(--text-default); margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .nav-desktop, .cta-desktop { display: none !important; }
  .mobile-cluster { display: flex !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .sec-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .othersec-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 860px) {
  .feat-card { grid-template-columns: 1fr !important; }
  .cards-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
  .news-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cta-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .mast-row { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
  .mast-search { width: 100% !important; }
  .subnav-eyebrow { display: none !important; }
  .subnav-scroll { overflow-x: auto; gap: 18px !important; padding-right: 40px; justify-content: flex-start !important; }
  .blog-subnav::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 46px;
    pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), #fff 72%);
  }
  .subnav-hint {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 999px; background: #fff;
    color: var(--tc-blue); box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle);
    pointer-events: none; animation: subnavNudge 1.3s ease-in-out infinite;
  }
  .tags-scroll {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 38px 4px 0; scrollbar-width: none;
  }
  .tags-scroll::-webkit-scrollbar { display: none; }
  .tags-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 4px; width: 34px;
    pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), var(--surface-base) 80%);
  }
  .tags-hint {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 999px; background: #fff;
    color: var(--tc-blue); box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle);
    pointer-events: none; animation: subnavNudge 1.3s ease-in-out infinite;
  }
}
@media (max-width: 620px) {
  .cards-2, .cards-3 { grid-template-columns: 1fr !important; }
  .blog-rail { grid-template-columns: 1fr; }
  .othersec-grid { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr !important; }
  .news-row { flex-direction: column; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 23px; }
  .feat-desktop { display: none !important; }
  .feat-mobile { display: block !important; }
}

/* ---- Article: mobile content optimizations ---- */
@media (max-width: 760px) {
  /* Tighter article header */
  .article-head { padding: 24px 20px 30px !important; }
  .article-meta { gap: 18px !important; }
  /* Share row: full-width band under the author, evenly distributed */
  .article-meta .share-row { width: 100%; flex-wrap: wrap; gap: 8px;
    padding-top: 16px; border-top: 1px solid var(--border-subtle); }
  .share-row .share-label { width: 100%; margin-bottom: 2px; }
  /* Author card: less padding, comfortable rhythm */
  .author-card { padding: 18px 18px !important; gap: 14px !important; border-radius: 16px !important; }
}
@media (max-width: 460px) {
  /* Compact article header + prose */
  .article-head { padding: 20px 16px 26px !important; }
  .prose { font-size: 16px; line-height: 1.7; }
  .prose h2 { font-size: 21px; margin-top: 1.5em; }
  .prose blockquote { font-size: 19px; padding-left: 18px; }
  .prose .callout { padding: 16px; gap: 12px; }
  .prose figure { margin: 1.4em 0; }
  /* Share: icon-first, hide the “Copiar” word to save space */
  .share-row .share-copy-text { display: none; }
  .share-row a, .share-row button { width: 42px; height: 42px; }
  .share-row button { padding: 0 !important; justify-content: center; }
  /* Author card stacks avatar over text */
  .author-card { flex-direction: column; align-items: flex-start; }
}