/* ==========================================================================
   HOME PAGE LAYOUT — Cangreja Dev Portfolio
   ==========================================================================
   Specific styles for the home/landing page composition.
   These styles arrange the design-system components into the home layout
   (hero grid, hero-side sticky notes composition, about columns, etc.).

   This file is NOT part of the reusable component library — it only applies
   to the home/landing page. Load AFTER design-system.css.

   Dependencies: design-system.css (variables, base styles, buttons, notes,
   polaroid, callout, term, stats, etc.)
   ========================================================================== */
/* ---------- Language switching ---------- */
html:not([data-ui-lang="es"]) [data-lang="es"],
html[data-ui-lang="es"] [data-lang="en"] {
  display: none !important;
}

/* ==========================================================================
   ACCESSIBILITY — Skip link
   ========================================================================== */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--plum);
  color: var(--on-plum);
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}


/* ==========================================================================
   HERO SECTION — Main grid layout
   ==========================================================================
   Two-column grid: left column holds title + CTA + stats,
   right column holds polaroid + sticky notes composition.
   ========================================================================== */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 56px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 40px;
}

.hero-title {
  margin-top: 10px;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.hero-hello {
  display: block;
}

/* Highlighted name within the hero title.
   Uses box-decoration-break so each wrapped line gets its own rounded box. */
.hl {
  display: inline;
  background: var(--plum-2);
  color: var(--on-plum);
  padding: 0 0.14em 0.04em;
  border-radius: 6px;
  line-height: 1.22;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:root[data-theme="dark"] .hl {
  background: var(--brand-soft);
  color: var(--text-strong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl {
    background: var(--brand-soft);
    color: var(--text-strong);
  }
}

/* Handwritten tagline, rotated slightly for personality. */
.hero-script {
  margin: 10px 0 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: var(--brand);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.hero-tagline {
  margin-top: 22px;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 34em;
}

/* Roles rotator (data-elements is populated by JS). */
.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

/* Primary + dashed buttons row inside the hero. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}


/* ==========================================================================
   HERO SIDE — Sticky notes composition
   ==========================================================================
   Right column of the hero: polaroid photo + layered sticky notes
   + decorative sparkles. Each piece is slightly rotated and positioned
   to feel like notes pinned to a corkboard.
   ========================================================================== */
.hero-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 10px;
}

/* Polaroid position overrides for the hero composition.
   Base .polaroid styles are in design-system.css. */
.hero-side .polaroid {
  margin: 0 0 -46px auto;
  position: relative;
  z-index: 2;
}

/* Decorative sparkles — SVG masks tinted with CSS variables. */
.sparkle {
  position: absolute;
  width: 46px;
  height: 46px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M24 4v9M24 35v9M4 24h9M35 24h9M9.9 9.9l6.4 6.4M31.7 31.7l6.4 6.4M9.9 38.1l6.4-6.4M31.7 16.3l6.4-6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M24 4v9M24 35v9M4 24h9M35 24h9M9.9 9.9l6.4 6.4M31.7 31.7l6.4 6.4M9.9 38.1l6.4-6.4M31.7 16.3l6.4-6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
.sparkle-1 {
  top: 18px;
  left: 6px;
}
.sparkle-2 {
  width: 34px;
  height: 34px;
  background: var(--green);
  bottom: 70px;
  right: 2%;
}


/* ==========================================================================
   ABOUT SECTION — Two-column layout
   ==========================================================================
   Left column: quick facts database.
   Right column: pink callout about community.
   ========================================================================== */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 36px;
  margin-top: 34px;
  align-items: start;
}

/* About bio paragraphs max-width constraint. */
#about > p[data-edit-join] {
  max-width: 44em;
}


/* ==========================================================================
   EMAIL OBFUSCATION
   ==========================================================================
   The real email address is rendered via CSS pseudo-elements so it never
   lives in the DOM text, and user-select prevents easy copying.
   ========================================================================== */
.obf-email {
  -webkit-user-select: none;
  user-select: none;
}
.obf-email::before {
  content: attr(data-user) "\0040" attr(data-domain);
}
.obf-email::selection,
.obf-email::-moz-selection {
  background: transparent;
  color: inherit;
}


/* ==========================================================================
   TOPBAR CTA — Hide "Let's talk" button on mobile topbar
   ========================================================================== */
.topbar-cta {
  /* visible by default on desktop; hidden in mobile media query below */
}


/* ==========================================================================
   RESPONSIVE — Home-specific breakpoints
   ==========================================================================
   These overrides affect ONLY home layout classes (hero-grid, hero-side,
   polaroid position, sticky notes widths, columns). Component responsive
   behavior lives in design-system.css.
   ========================================================================== */

@media (max-width: 980px) {
  /* Hero stacks vertically on tablet */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .hero-side {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
  /* About section stacks vertically */
  .columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  /* Smaller top padding on mobile hero */
  .hero-grid {
    padding-top: 36px;
  }
  /* Hero CTAs become full-width on mobile */
  .hero-actions .btn {
    flex: 1 1 100%;
  }
  /* Hide topbar CTA on mobile — the mobile menu provides contact access */
  .topbar-cta {
    display: none;
  }
  /* Stats block tighter padding */
  .stats {
    padding: 18px 18px 16px;
  }
  /* Smaller polaroid */
  .polaroid {
    width: 160px;
  }
  /* Sticky notes fill mobile width */
  .note-pink,
  .note-dark {
    width: 96%;
  }
  .note-dark {
    margin-left: 4%;
  }
  .note-chips {
    width: 80%;
  }
}


/* ==========================================================================
   HOME HERO NOTES — Dark-mode-only fine-tuning
   ==========================================================================
   The sticky notes in the hero (.note-pink, .note-dark) have specific
   color overrides for dark mode to improve contrast of the handwritten
   type and keep the "corkboard" aesthetic readable.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) .note-dark {
    color: #f3e8ef;
  }
  :root:not([data-theme="dark"]) .note-dark .note-kicker {
    color: rgba(255, 255, 255, 0.82);
  }
  :root:not([data-theme="dark"]) .note-dark .note-kicker.note-kicker-blue {
    color: var(--brand-tint);
  }
  :root:not([data-theme="dark"]) .note-dark .note-old {
    color: rgba(255, 255, 255, 0.72);
    text-decoration-color: var(--brand-tint);
  }
  :root:not([data-theme="dark"]) .note-dark .note-by {
    color: rgba(255, 255, 255, 0.78);
  }
  :root:not([data-theme="dark"]) .note-code {
    color: var(--brand-tint);
  }
  /* Handwriting fonts are thin — bump weight for both notes in dark mode */
  :root:not([data-theme="dark"]) .note blockquote,
  :root:not([data-theme="dark"]) .note-old,
  :root:not([data-theme="dark"]) .note-new {
    font-weight: 600;
  }
  :root:not([data-theme="dark"]) .note-pink {
    background: #0f2d36;
    border-color: rgba(94, 197, 219, 0.35);
  }
}

:root[data-theme="dark"] .note-dark {
  background: var(--plum-soft);
}
:root[data-theme="dark"] .note-dark .note-kicker {
  color: rgba(255, 255, 255, 0.82);
}
:root[data-theme="dark"] .note-dark .note-kicker.note-kicker-blue {
  color: var(--brand-tint);
}
:root[data-theme="dark"] .note-dark .note-old {
  color: rgba(255, 255, 255, 0.72);
  text-decoration-color: var(--brand-tint);
}
:root[data-theme="dark"] .note-dark .note-by {
  color: rgba(255, 255, 255, 0.78);
}
:root[data-theme="dark"] .note-code {
  color: var(--brand-tint);
}
:root[data-theme="dark"] .note blockquote,
:root[data-theme="dark"] .note-old,
:root[data-theme="dark"] .note-new {
  font-weight: 600;
}
:root[data-theme="dark"] .note-pink {
  background: #0f2d36;
  border-color: rgba(94, 197, 219, 0.35);
}