/* ============================================================
   tldr.jorgealbertogutierrez.com — site-specific layout
   Depends on tokens.css + base.css (loaded before this file)
   ============================================================ */

html { scroll-padding-top: 80px; }

/* ===========================================================================
   Site header — fixed-top, flat silver navbar matching jag3d + works.
   The brand-v1 glassmorphism exception was dropped on works in design-system-v1;
   tldr starts there. Border-bottom is the only visual edge.
   ============================================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
}

/* Brand lockup: <jag/> + tl;dr wordmark suffix with blink-cursor. */
.site-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mark);
  font-size: 22px;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
  padding: 0;
  border-bottom: none;
  transition: opacity 200ms ease-out;
}
.site-mark:hover,
.site-mark:focus,
.site-mark:visited {
  background: transparent;
  color: var(--fg);
  border-bottom: none;
}
.site-mark.is-hidden-by-footer {
  opacity: 0;
  pointer-events: none;
}
.site-mark__wordmark {
  font-weight: var(--w-regular);
  font-size: 0.82em;
  letter-spacing: 0;
  color: var(--fg-muted);
}
.blink-cursor {
  display: inline-block;
  animation: blink 1.1s steps(2, end) infinite;
  color: var(--accent);
  font-weight: var(--w-medium);
}
@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blink-cursor { animation: none; opacity: 1; }
}

/* Primary nav — text-only mono links, signal accent on active/hover. */
.site-nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.site-nav-item {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
  transition: color var(--motion-fast);
}
.site-nav-item:hover,
.site-nav-item:focus,
.site-nav-item.is-active {
  color: var(--fg);
  background: transparent;
}

/* Right cluster: lang + theme toggles. */
.site-controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.lang-toggle,
.theme-toggle {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
  text-decoration: none;
}
.lang-toggle:hover,
.theme-toggle:hover {
  color: var(--fg);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* ===========================================================================
   Site main + sections
   ============================================================================ */

.site-main {
  padding-top: 0;   /* hero handles its own top space */
}

.site-section {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
.site-section--narrow {
  max-width: 720px;
}

.site-divider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 1px;
  background: var(--border);
  border: none;
}

.section-rule {
  height: 2px;
  width: 48px;
  background: var(--accent);
  margin: var(--s-5) 0;
  border: none;
}

.section-heading {
  margin-bottom: var(--s-7);
}
.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, var(--t-display-md));
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0 0 var(--s-4);
}
.section-lead {
  font-size: var(--t-body-lg);
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0;
}

/* ===========================================================================
   Hero — single-column centered. No 3D mark here (lives in #closing).
   ============================================================================ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  text-align: center;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-8);
  gap: var(--s-6);
}
.hero-content {
  max-width: 760px;
  width: 100%;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-meta {
  margin-bottom: var(--s-5);
  color: var(--fg-muted);
}

/* Brand lockup line — "<jag/> | Rewired, Reworked."
   <jag/> reads as the typographic brand mark (JBM Medium); the pipe is
   muted; the tagline picks up the signal-orange accent. Title case is
   preserved (no text-transform: lowercase) because the user wrote the
   tagline that way and it reads better next to the bracketed mark. */
.hero-lockup {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-body);
  margin: 0 0 var(--s-5);
}
.hero-lockup__mark {
  color: var(--fg);
}
.hero-lockup__sep {
  color: var(--fg-muted);
  font-weight: var(--w-regular);
}
.hero-lockup__tagline {
  color: var(--accent);
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
}

/* Slogan is semantically an <h3> (the brand lockup above it is the
   page's <h1>), but visually it stays display-xl — the largest text
   in the hero. The class overrides whatever the brand default for h3
   would otherwise be. */
.hero-slogan {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, var(--t-display-xl));
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0;
  max-width: 20ch;
}

/* Interactive abbreviation: TL;DR inline in the slogan. Native <abbr
   title=""> gives free accessibility (screen readers + mobile long-press).
   The custom ::after tooltip is desktop-hover polish; it falls back to
   the native title attribute when CSS hover isn't available. Tooltip
   uses the bracketed "[expansion]" idiom from the brand voice. */
.hero-tldr {
  text-decoration: none;
  border-bottom: 0.5px dotted var(--accent);
  cursor: help;
  position: relative;
  font-style: normal;          /* some UAs italicize <abbr> by default */
  padding-bottom: 1px;
  white-space: nowrap;
}
.hero-tldr::after {
  content: "[" attr(data-expansion) "]";
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--s-3));
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  color: var(--fg);
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast);
  z-index: 5;
}
.hero-tldr:hover::after,
.hero-tldr:focus::after,
.hero-tldr:focus-visible::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-tldr::after { transition: none; }
}

.hero-lead {
  font-size: var(--t-body-lg);
  color: var(--fg);
  max-width: 56ch;
  margin: var(--s-5) auto 0;
}

/* Two-paragraph prose block under the lead. "El cuento largo:" + the
   long-version paragraph, then "TL;DR:" + the brand-promise paragraph.
   For readers who want the full pitch after scanning the top of the
   hero. Eyebrow labels in mono signal-color; body in regular Inter. */
.hero-prose {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 64ch;
  margin: var(--s-6) auto 0;
  text-align: left;
}
.hero-prose__label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: var(--s-3) 0 0;
}
.hero-prose__label:first-child {
  margin-top: 0;
}
.hero-prose__body {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
}
.hero-prose__body--accent {
  font-weight: var(--w-medium);
}

/* Scroll affordance pinned at the bottom of the hero, gently pulsing. */
.hero-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: auto;
}
.hero-scroll-hint:hover {
  color: var(--fg);
  background: transparent;
  border-bottom: none;
}
.hero-scroll-hint__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  animation: hint-pulse 2.4s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint__inner { animation: none; opacity: 0.8; }
}

/* ===========================================================================
   Showcase grid — 7 category cards
   ============================================================================ */

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.category-card {
  background: var(--surface-muted);  /* off-white in light, dark interior in dark; semantic token, see tokens.css */
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.category-card__title {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-display-sm);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0;
  color: var(--fg);
}

.category-card__tagline {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  font-style: italic;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.category-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg-muted);
}
.category-card__features li {
  padding: var(--s-2) 0;
  border-top: 0.5px solid var(--border);
}
.category-card__features li:first-child {
  border-top: none;
  padding-top: 0;
}

/* Demo affordance — bottom of each card. Either a "→ See the live demo"
   link (when category.demo_url is set) or a muted "demo · coming soon"
   placeholder pill (when null). User said "leave me the placeholders"
   while real demo URLs are pending. */
.category-card__demo {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 0.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.category-card__demo a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 0.5px solid var(--accent);
  padding-bottom: 1px;
}
.category-card__demo a:hover,
.category-card__demo a:focus-visible {
  background: var(--accent);
  color: var(--surface);
  border-bottom-color: transparent;
}
.category-card__demo--placeholder {
  color: var(--fg-muted);
  font-style: italic;
  /* No link affordance — visibly inert until a real URL replaces null. */
}

/* ===========================================================================
   Walk-away — ownership pitch + manifesto + 3D mark + CTAs. The page's
   emotional climax; costs (next section) ends dry. Replaces the old
   "section-closing-block" pattern after the copy refresh dissolved the
   separate closing section into this one.
   ============================================================================ */

.walkaway-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
}
.walkaway-section .section-heading {
  margin-bottom: 0;
}

.walkaway-body {
  font-size: var(--t-body-lg);
  line-height: 1.65;
  color: var(--fg);
  max-width: 64ch;
  margin: 0;
}

.walkaway-manifesto {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, var(--t-display-lg));
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: var(--fg);
  margin: var(--s-4) 0 0;
  max-width: 22ch;
}

#jag-3d-mark {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 440px;
  margin: var(--s-4) auto;
  cursor: grab;
  user-select: none;
}
#jag-3d-mark.is-dragging { cursor: grabbing; }
@media (max-width: 1024px) {
  #jag-3d-mark { max-width: 480px; height: 360px; }
}
@media (max-width: 768px) {
  #jag-3d-mark { max-width: 320px; height: 240px; }
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

/* ===========================================================================
   Costs — two columns side by side at desktop, stacked at mobile.
   Left: fixed costs (domain + hosting), right: variable (site + custom
   modules). A muted closer note sits below both columns.
   ============================================================================ */

.costs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  margin-top: var(--s-6);
}
@media (max-width: 768px) {
  .costs-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.costs-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.costs-block__label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0;
}
.costs-block__items {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
}
.costs-block__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 0.5px solid var(--border);
  font-size: var(--t-body);
  color: var(--fg);
}
.costs-block__items > .costs-block__row:first-child {
  border-top: none;
}
.costs-block__item-label {
  font-weight: var(--w-medium);
}
.costs-block__item-price {
  color: var(--fg-muted);
  font-feature-settings: 'tnum' 1;   /* tabular nums for currency alignment */
}
.costs-block__note {
  margin: 0;
  color: var(--fg-muted);
}

.costs-closer {
  font-size: var(--t-body);
  color: var(--fg-muted);
  font-style: italic;
  margin: var(--s-6) 0 0;
  text-align: center;
}

/* ===========================================================================
   Footer — three columns, brand left, contact center, version right
   ============================================================================ */

.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-7);
  border-top: 0.5px solid var(--border);
}
@media (max-width: 768px) {
  .site-footer {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.site-footer-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mark);
  font-size: 22px;
  line-height: 1;
  color: var(--fg);
  margin: 0;
}
.site-footer-tagline {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0;
}

.site-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
@media (max-width: 768px) {
  .site-footer-contact { align-items: flex-start; }
}
.site-footer-email a {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
}
.site-footer-location {
  margin: 0;
}
.site-footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--s-4);
}
.site-footer-social a {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--fg-muted);
  border-bottom: 0.5px solid var(--accent);
}

.site-footer-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: lowercase;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-align: right;
}
@media (max-width: 768px) {
  .site-footer-meta { text-align: left; }
}

/* ===========================================================================
   Mobile breakpoints — pull body in tighter
   ============================================================================ */

@media (max-width: 768px) {
  .site-section { padding: var(--s-8) var(--s-4); }
  .hero         { padding: var(--s-9) var(--s-4) var(--s-7); }
  /* Header: stack vertically on phones so the mark/nav/controls don't
     scramble into multiple wrapped rows. Each row centers its content. */
  .site-header  {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-2);
  }
  .site-nav      { justify-content: center; flex-wrap: wrap; gap: var(--s-3); }
  .site-controls { justify-content: center; gap: var(--s-3); }
}