/* ================================================================
   COLOR & SPACING VARIABLES
   These are named values you can reuse anywhere below by writing
   var(--name). Change a color here and it updates everywhere on
   the page that uses it — no need to hunt through the whole file.
================================================================= */
:root {
  --bg: #F6F7F5;            /* Fondo — page background, outside the card */
  --card-bg: #FFFFFF;       /* Tarjeta — the card itself, and project cards (so they stand out from tinted sections) */
  --alt-bg: #E9EFED;        /* Fondo alterno — fill color for every section, distinguishing it from the plain white card/project cards */
  --text: #223039;          /* Texto — main text color */
  --text-muted: #66757D;    /* Texto secundario — lighter text, for secondary info */
  --accent: #45656B;        /* Teal — links, buttons, dots, borders */
  --accent-hover: #304E55;  /* Teal hover — darker teal for :hover states */
  --accent-contrast: #FFFFFF; /* Teal texto — text color used ON TOP of solid teal buttons/pills */
  --border: #D9E0DE;        /* Borde — lines/borders */
  --brass: #9A7B49;         /* Brass — used sparingly as a decorative icon accent (not for text/buttons, doesn't have enough contrast at small sizes) */
  --verde: #547961;         /* Verde — used sparingly as a decorative "positive/available" icon accent */
  --error: #B1543E;         /* Error — reserved for a future error/validation state; not currently used anywhere on the page */
  --radius: 16px;           /* how rounded the big card's corners are */
  --project-bg: #FFFFFF;    /* same as Tarjeta — project cards stand out against the tinted (--alt-bg) sections behind them */
  --project-border: #D9E0DE;  /* same as Borde */
}

/* ================================================================
   SELF-HOSTED FONT (Inter)
   Previously loaded live from Google's fonts.googleapis.com/
   fonts.gstatic.com, which sends every visitor's IP address to
   Google on each page load — a common privacy flag for EU visitors.
   These are the same Inter font files, just hosted in this site's
   own /fonts folder instead, so the page no longer makes any
   third-party network request just to render text. Licensed under
   the SIL Open Font License (see fonts/LICENSE.txt) — free to
   redistribute like this. Only the "latin" character subset is
   included (covers English, Spanish, German, Portuguese — everything
   this page actually uses); "font-display: swap" shows fallback text
   immediately instead of leaving it invisible while the font loads. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/inter-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('fonts/inter-800.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Makes width/height calculations include padding and border, so
   sizing elements is more predictable. Applies to every element. */
* {
  box-sizing: border-box;
}

/* Makes clicking a section-nav pill glide/slide smoothly down to that
   section instead of snapping there instantly. Turned back off for
   anyone whose OS/browser is set to reduce motion, since smooth
   scrolling can be disorienting for those visitors. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ================================================================
   PAGE BACKGROUND
   Centers the white card in the middle of the browser window.
================================================================= */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  /* A very soft, barely-there diagonal gradient between Fondo and
     Fondo alterno — clean and calm rather than a dramatic effect,
     matching the rest of this palette. "fixed" stops it scrolling
     oddly on tall pages. */
  background-color: var(--bg);
  background-image: linear-gradient(135deg, #F6F7F5 0%, #E9EFED 100%);
  background-attachment: fixed;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
}

/* The big white card that holds the whole page's content */
.card {
  width: 100%;
  max-width: 640px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 40px;
  /* A soft, light shadow — enough to lift the white card off the
     equally-light backdrop without needing a dramatic dark shadow. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
}

/* ================================================================
   HERO (name, avatar circle, tagline, bio, language pills, socials)
================================================================= */
.hero {
  text-align: center;
  margin-bottom: 40px;
}

/* Wide "banner" photo spanning the full width of the hero, instead
   of a small fixed-size square — bigger, and reads as a cover photo
   above the name rather than a little profile icon. */
.avatar {
  width: 100%;
  aspect-ratio: 5 / 2;
  margin: 0 auto 20px;
  border-radius: 16px;   /* same rounding as .section boxes and project cards */
  overflow: hidden;      /* crops the photo neatly to the banner shape */
  border: 1px solid var(--border);
}

/* Fills the banner and crops any extra height/width instead of
   stretching or squashing the photo out of shape. "object-position"
   favors the upper-middle of the photo — the part most likely to
   contain a face — since a wide/short crop cuts off a lot of a
   normal portrait photo's height. Adjust this (e.g. "center 15%" or
   "center 40%") if your specific photo gets cropped awkwardly. */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.hero h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* The one-line role text under your name — darker than the muted
   gray used for secondary info elsewhere, since this is effectively
   your headline/subtitle and should read clearly, not fade back. */
.tagline {
  margin: 0 0 24px;
  color: var(--text);
  font-size: 15px;
}

/* The row of small "8+ Years Experience / location / open to..."
   facts, wrapping onto multiple lines on narrow screens. */
.quick-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: -6px 0 22px;
}

.quick-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.quick-fact svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* The short bio paragraph */
.intro {
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
}

/* Positions the row of language pills (reuses the general .tags
   look below, just centers it and adds spacing under it) */
.language-bubbles {
  justify-content: center;
  margin: 0 0 24px;
}

/* Row that holds the LinkedIn / GitHub / Email / Resume buttons */
.socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;   /* breathing room before whatever comes next (the intro text) */
}

/* Each individual button in that row (pill-shaped outline button) */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* What happens when you hover over one of those buttons */
.social-link:hover {
  border-color: var(--accent);
  background: rgba(69, 101, 107, 0.06);
}

/* Small uppercase label sitting above the "Share this page" buttons,
   to separate that row visually from the contact buttons above it */
.share-label {
  margin: 20px 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ================================================================
   SECTION JUMP NAV
   A horizontal row of pill links (Skills, Projects, Experience,
   Certifications, Contact...) that jump straight to that section's
   <a id="..."> anchor. "position: sticky" keeps it pinned to the top
   of the browser window as the page scrolls, so it stays reachable
   the whole time instead of only working from the very top of the
   page. "overflow-x: auto" makes it scroll/slide sideways instead of
   wrapping onto a second line if it doesn't all fit on one row (this
   is the main way it works on narrow phone screens).
================================================================= */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 4px;
  margin: -12px -4px 24px;
  background: var(--card-bg);
  scrollbar-width: thin;
}

.section-nav::-webkit-scrollbar {
  height: 4px;
}

.section-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

/* Solid, filled pills (rather than the light outline style used for
   tags/skills elsewhere on the page) so this nav reads as a distinct
   set of controls, not just more content — the eye should find it
   immediately as "the thing that navigates", separate from every
   other blue-accented pill on the page. */
.section-nav a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(69, 101, 107, 0.3);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.section-nav a:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

/* ================================================================
   SECTIONS
   Every block on the page (Skills, Projects, Experience, etc.) is
   wrapped in <section class="section">. This controls the spacing
   above each section and the small uppercase heading style.
================================================================= */
/* Every section (Skills, Projects, Experience, Certifications, etc.)
   sits inside its own box filled with Fondo alterno — the same
   calming tint as the "Let's talk" panel at the bottom, so every
   section on the page (including that one) shares one consistent
   color instead of some sections looking different from others. */
.section {
  margin-top: 24px;
  padding: 22px 22px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--alt-bg);
  scroll-margin-top: 64px;   /* keeps the section's heading clear of the sticky nav bar when jumped to */
}

.section h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* ================================================================
   MORNING MARKET CHECK — embedded project card (all class names
   below start with "spc-", short for "stock project card"). Styled
   to match the same light card look as every other project below
   (same background, border, and tag colors), so all four project
   cards now read as one consistent set instead of this one standing
   out with its own dark theme. Only the slideshow mechanics (arrows,
   dots, the zoom popup) keep their own look, since those sit on top
   of the actual screenshots rather than the card itself.
================================================================= */
.spc-card {
  width: 100%;
  background: var(--project-bg);
  border: 1px solid var(--project-border);
  border-radius: 12px;
  overflow: hidden;              /* keeps the screenshot's corners rounded */
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;  /* matches .project-card's hover */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.spc-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* The box that holds the sliding screenshots */
.spc-carousel {
  position: relative;
  aspect-ratio: 16 / 9;   /* keeps a widescreen shape at any size */
  background: var(--bg);   /* light neutral, matches .project-thumb's placeholder color */
}

/* The strip of screenshots placed side-by-side. script.js slides
   this left/right (using CSS "transform") to show one at a time. */
.spc-slides {
  display: flex;
  height: 100%;
  transition: transform .45s ease;   /* makes the slide movement smooth */
}

/* Each individual screenshot slot — sized to exactly fill the carousel */
.spc-slide {
  flex: 0 0 100%;
  height: 100%;
  cursor: zoom-in;   /* shows a "magnifying glass" cursor, hinting it's clickable */
}

.spc-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* shows the whole screenshot without cropping it */
  display: block;
}

/* The round left/right arrow buttons over the slideshow */
.spc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  z-index: 2;   /* keeps the arrows clickable above the screenshots */
}

.spc-arrow:hover {
  background: rgba(0,0,0,.7);
}

.spc-prev { left: 8px; }
.spc-next { right: 8px; }

/* The little dots at the bottom of the slideshow */
.spc-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}

.spc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);   /* sits on top of the photo itself, so stays light regardless of card theme */
  border: none;
  cursor: pointer;
  padding: 0;
}

/* The dot for whichever slide is currently showing — uses the same
   accent blue as everything else on the site. */
.spc-dot.active {
  background: var(--accent);
}

/* Small rounded label in the corner of the slideshow, e.g. "Valuation summary" */
.spc-caption {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  color: #fff;
}

/* The text area below the slideshow (title, description, tags, button) */
.spc-body {
  padding: 14px 16px 16px;
}

.spc-body h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text);
}

.spc-body .spc-tagline {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Small uppercase "Industry" / "Tech Stack" labels above each tag row
   (same idea as .project-meta-label used by the other project cards) */
.spc-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 5px;
}

/* Row that holds the small pill-shaped tags (industry, tech stack) */
.spc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* Same pill look as the ".tags span" tags used elsewhere on the
   site, so this card's tags match every other project's tags. */
.spc-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(69, 101, 107, 0.08);
  color: var(--accent);
}

/* Holds the "Try it live" button */
.spc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.spc-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

/* "Try it live" button — matches the site's accent-blue buttons
   elsewhere instead of the old GitHub-green. */
.spc-btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.spc-btn-primary:hover {
  background: var(--accent-hover);
}

/* Full-screen dark overlay that shows a zoomed-in screenshot when you
   click one of the slideshow images. Hidden (display:none) until
   script.js adds the "open" class to it. */
.spc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
}

.spc-lightbox.open {
  display: flex;
}

.spc-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* ================================================================
   PROJECTS GRID
   The layout that arranges all the project cards. On narrow
   (mobile) screens it's a single column; on wider screens the
   media query near the bottom of this file switches it to two
   columns side by side.
================================================================= */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* One plain project card (used for every project except the special
   Morning Market Check slideshow one above). Not a link itself —
   the "Visit site" button inside it is the actual link. Plain white
   (var(--project-bg), matching the card) on purpose — sections are
   filled with Fondo alterno, so project cards need their own
   distinct color to still stand out as individual "rectangles"
   rather than blending into the section behind them. */
.project-card {
  display: block;
  background: var(--project-bg);
  border: 1px solid var(--project-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* The screenshot at the top of a project card */
.project-thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the box, cropping edges if needed */
  display: block;
}

/* Modifier for thumbnails that are a square/logo-style image rather
   than a wide screenshot (e.g. RepuestosNow) — "contain" instead of
   "cover" so the whole logo stays visible with letterboxing on the
   sides, instead of "cover" cropping its top and bottom off to force
   it into the 16:9 frame. */
.project-thumb-contain img {
  object-fit: contain;
}

/* The text area below the screenshot */
.project-card-body {
  padding: 14px 16px 16px;
}

.project-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.project-card p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Small uppercase "Industry" / "Tech Stack" labels above each tag row
   (identical to .spc-meta-label above — both cards share one look now) */
.project-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 10px 0 5px;
}

/* The "Visit site" button at the bottom of a project card */
.project-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.project-visit-btn:hover {
  background: var(--accent-hover);
}

/* ================================================================
   TAGS
   The small rounded "pill" labels used all over the page —
   language bubbles, project tags, skill tags, timeline tags.
================================================================= */
.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tags span {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(69, 101, 107, 0.08);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ================================================================
   SKILLS SECTION LAYOUT
================================================================= */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.skill-category h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* The intro line above the AI Proficiency category grid — sized to
   match the category headings below it (Core AI Assistants, etc.)
   instead of the browser's larger default paragraph size. */
.ai-proficiency-intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Tech Stack has 5 categories — more than Skills (2) or AI
   Proficiency (3) — so rather than hand-picking a column count for
   yet another fixed breakpoint, this uses "auto-fit": the browser
   fits as many ~180px-wide columns as will comfortably fit the
   screen, wrapping the rest onto new rows automatically. Adding or
   removing a category later needs no CSS changes here. */
.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 16px;
}

/* ================================================================
   BULLET LISTS
   Used for "Why I Add Value", Certifications, and Education.
   Draws a small colored dot instead of a default browser bullet.
   (Books Recommendations uses its own .book-list styling below,
   since it shows a cover image instead of a bullet dot.)
================================================================= */
.facts-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.facts-list li {
  position: relative;
  padding-left: 20px;   /* leaves room for the dot drawn below */
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* Draws the small colored dot to the left of each list item */
.facts-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Makes links inside these lists (e.g. the university name in
   Education) use the accent color instead of the browser default blue */
.facts-list a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.facts-list a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ================================================================
   BOOK RECOMMENDATIONS LIST
   Each row shows a small cover image next to the title, instead
   of the colored-dot bullets used above.
================================================================= */
.book-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.book-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.book-cover {
  width: 32px;
  height: 46px;          /* roughly a paperback cover's proportions */
  object-fit: cover;     /* fills the box, cropping if the image isn't that exact shape */
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;         /* stops the cover from getting squished */
}

/* ================================================================
   PROFESSIONAL EXPERIENCE TIMELINE
================================================================= */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 22px;   /* leaves room for the vertical line + dots */
}

/* The vertical line running down the left side of the timeline */
.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
}

/* The small circle marking each job on the timeline */
.timeline-dot {
  position: absolute;
  left: -22px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Row holding the job title and the date range, side by side */
.timeline-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.timeline-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.timeline-dates {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Now a small flex row: company logo badge + the linked name/city
   text, instead of plain text alone. */
.timeline-company {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
}

.timeline-badge {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
}

/* The outer span wraps both the linked institution name and the
   plain-text city that follows it ("· Stuttgart") — without this,
   the city text falls back to the browser's larger default size
   instead of matching the institution name next to it. */
.timeline-company span {
  font-size: 13px;
}

.timeline-company a {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.timeline-company a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.timeline-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* A single bolded, accent-colored "stat" line under each role's
   description — meant to hold one concrete, quantified result
   (a %, a number of people/regions, a dollar amount, etc). Once you
   swap the bracketed placeholder for a real number, this is the
   line a recruiter's eye jumps to first. */
.timeline-metric {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.5;
}

/* Adds a bit of space above the tag row inside each timeline entry */
.timeline-content .tags {
  margin-top: 8px;
}

/* ================================================================
   CERTIFICATIONS / EDUCATION extra styling
   (these lists reuse .facts-list above, this just adds the
   right-aligned year text next to each line)
================================================================= */
.cert-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cert-year {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* EDUCATION — logo badge next to each degree */
.edu-list li.edu-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.edu-badge {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
}

.edu-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* ================================================================
   CERTIFICATION BADGES
   A row of small square badge cards (logo on top, name underneath),
   wrapping onto new lines on narrow screens.
================================================================= */
.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cert-badge {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* The badge logo itself — real PNG badges and the generic SVG
   placeholder icon are both sized the same way so the row lines up. */
.cert-badge img,
.cert-badge svg {
  width: 44px;
  height: 44px;
  object-fit: contain;
  color: var(--text-muted);   /* only affects the SVG placeholder icon */
}

.cert-badge span {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Small uppercase label above the "In Progress" badge row, same
   style as .project-meta-label used on the project cards. */
.cert-progress-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 18px 0 10px;
}

/* Dashed placeholder badge for a certification that's still in
   progress — same idea as the dashed "add photo" box used in Fun
   Facts before real photos were added. A static clock icon (see the
   HTML) reads as "pending" without needing any animation. */
.cert-badge-loading {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 8px 4px;
}

/* ================================================================
   FUN FACTS SECTION
   A 2x2 grid of small cards, each with a photo placeholder box
   on top and a caption underneath.
================================================================= */
.fun-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fact-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* The dashed placeholder box that says "Add photo" — swap this out
   for a real <img> tag once you have pictures to use (see the
   comment above the Fun Facts section in index.html). */
.fact-photo {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg);
  border-bottom: 1px dashed var(--border);
  color: var(--text-muted);
}

.fact-photo span {
  font-size: 11px;
  font-weight: 600;
}

/* Once a real <img> replaces the camera-icon placeholder inside
   .fact-photo, this makes it fill the box neatly (cropping edges
   if needed) instead of showing at its native pixel size. */
.fact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fact-card p {
  margin: 0;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ================================================================
   CLOSING CALL-TO-ACTION BOX ("Let's talk")
================================================================= */
.cta {
  margin-top: 24px;
  padding: 28px 24px;
  border-radius: 14px;
  /* Same border + fill as every .section above — kept as its own
     separate rule (rather than just adding the .section class to
     this element in the HTML) only because the CTA needs extra
     things .section doesn't: centered text and a bigger top margin. */
  background: var(--alt-bg);
  border: 1px solid var(--border);
  text-align: center;
  scroll-margin-top: 64px;   /* keeps the heading clear of the sticky nav bar when jumped to */
}

.cta h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.cta p {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Row that holds the two CTA buttons side by side. Wraps onto two
   lines on very narrow screens instead of overflowing. */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cta-button {
  display: inline-flex;   /* lets the espresso icon on "Book a virtual coffee" sit neatly next to its text */
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.cta-button:hover {
  background: var(--accent-hover);
}

/* Second button — same shape as the main one, but outlined instead
   of solid, so it reads as the "alternative" action rather than
   competing equally with "Get in touch". On hover it inverts to a
   solid teal fill, same as the primary button. */
.cta-button-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.cta-button-secondary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}

/* ================================================================
   COFFEE NOTES BOX
   The free-text box above the CTA buttons, for a visitor to jot down
   why they want to chat before booking. No button/JS attached — it's
   just a space to type in, which they can select and copy themselves.
================================================================= */
.coffee-notes {
  max-width: 420px;
  margin: 0 auto 18px;
  text-align: left;
}

.coffee-notes label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.coffee-notes label span {
  font-weight: 400;
  color: var(--text-muted);
}

.coffee-notes textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.coffee-notes textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.coffee-notes textarea::placeholder {
  color: var(--text-muted);
}

/* ================================================================
   FOOTER
================================================================= */
.footer {
  margin-top: 44px;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.footer p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.footer p + p {
  margin-top: 6px;
}

.footer a {
  color: var(--text-muted);
  text-decoration: underline;
}

.footer a:hover {
  color: var(--accent-hover);
}

/* ================================================================
   RESPONSIVE LAYOUT — PHONE vs PC
   This site is written once and reshapes itself for the size of
   screen it's viewed on — that's how modern responsive sites work,
   instead of maintaining two separate copies of the page. Below,
   there are two breakpoints (screen-width thresholds):

   1. 520px and up — small tablets and larger phones: Projects and
      Skills switch from one column to two side by side.

   2. 900px and up — real "PC" sized windows: the whole page
      reflows from a single narrow phone-style column into a wide
      two-column layout, with the hero becoming a sticky sidebar
      on the left and everything else scrolling on the right.

   Below 520px (a typical phone in portrait), none of this applies
   and the page is just one simple stacked column — that's the
   "phone version".
================================================================= */
@media (min-width: 520px) {
  .projects-grid {
    grid-template-columns: 1fr 1fr;
  }

  .skills-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* AI Proficiency has 3 categories instead of Skills' 2, so it needs
   its own column count instead of inheriting the 2-column layout
   above — otherwise the third category wraps alone with empty
   space next to it. Stays 1 column until 700px, then goes to 3. */
@media (min-width: 520px) {
  .ai-skills-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 700px) {
  .ai-skills-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 16px;
  }
}

/* ---------------------------------------------------------------
   THE "PC VERSION" — active from 900px wide and up
---------------------------------------------------------------- */
@media (min-width: 900px) {

  /* Let the page use a lot more of a wide monitor instead of
     staying pinned to a narrow 640px phone-width column. */
  .card {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 300px 1fr;  /* fixed sidebar + flexible main area */
    align-items: start;                 /* don't stretch either column's height */
    column-gap: 56px;
  }

  /* Turn the hero into a left-hand sidebar: left-aligned instead
     of centered, and "sticky" so it stays in view while the
     right-hand column scrolls past underneath it. */
  .hero {
    text-align: left;
    margin-bottom: 0;
    position: sticky;
    top: 40px;                 /* how far from the top of the window it sticks */
    align-self: start;
  }

  /* These elements were centered for the phone layout (auto
     left/right margins, centered flex rows) — undo that so they
     line up flush against the sidebar's left edge instead. */
  .hero .avatar {
    margin-left: 0;
    margin-right: 0;
  }

  .hero .intro {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .hero .socials,
  .hero .language-bubbles,
  .hero .quick-facts {
    justify-content: flex-start;
  }

  /* The right-hand scrolling column that holds every section
     (Skills, Projects, Experience, etc). No special layout of its
     own needed — it just needs to not be squeezed by the sidebar. */
  .main-content {
    min-width: 0;   /* lets long text/tags wrap instead of overflowing the column */
  }

  /* The very first section shouldn't have extra empty space above
     it just because .section normally adds a gap from whatever
     came before it in the phone layout. */
  .main-content > .section:first-child {
    margin-top: 0;
  }
}

/* ================================================================
   PRINT STYLESHEET
   These rules only apply when the page is printed, or "printed" to
   a PDF (Ctrl/Cmd+P) — never on screen. A recruiter sometimes wants
   a paper or PDF copy, and without this section they'd get the
   sticky sidebar, dark carousel card, and drop-shadows all fighting
   the printed page. This simplifies everything down to plain,
   single-column, ink-friendly text — like a normal résumé.
================================================================= */
@media print {

  /* Forces every background to pure white for printing — the live
     site already uses a light palette, but Fondo/Fondo alterno would
     still print with a faint gray/sage tint that wastes ink. Because
     almost every rule in this file already reads its colors from
     var(--...) instead of a hardcoded hex, overriding the variables
     here is enough to re-theme the entire printed page without
     touching any other rule. */
  :root {
    --bg: #ffffff;
    --card-bg: #ffffff;
    --alt-bg: #ffffff;
    --text: #223039;
    --text-muted: #66757D;
    --accent: #45656B;
    --accent-hover: #304E55;
    --accent-contrast: #ffffff;
    --border: #cccccc;
    --project-bg: #ffffff;
    --project-border: #cccccc;
  }

  /* Plain white page instead of the dark navy backdrop + centered card */
  body {
    display: block;
    background: #fff;
    padding: 0;
  }

  /* Drop the shadow/border/rounded corners and the two-column PC
     layout — everything just becomes one simple stacked column,
     the same shape as the phone version. */
  .card {
    display: block;
    max-width: none;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  /* Undo the sticky sidebar behavior from the PC layout — on paper
     there's no "scrolling", so a sticky element can end up stuck
     halfway down a page. Plain, left-aligned, non-sticky instead. */
  .hero {
    position: static;
    text-align: left;
  }

  .hero .avatar,
  .hero .intro {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .hero .socials,
  .hero .language-bubbles,
  .hero .quick-facts {
    justify-content: flex-start;
  }

  /* Sections that make sense on a live, scrollable web page but not
     on a printed résumé — hide them entirely when printing. */
  .share-label,
  .share-socials,
  .section-nav,
  .cta,
  .fun-facts-grid {
    display: none;
  }

  /* The Morning Market Check card normally has a dark background —
     wasteful on a printer and hard to read once ink-saving mode
     strips background colors. Force it to plain black-on-white,
     matching the rest of the page, and hide the now-nonfunctional
     slideshow controls (only the first screenshot will show). */
  .spc-card {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .spc-body h3,
  .spc-body .spc-tagline,
  .spc-meta-label {
    color: #1a1a1a;
  }

  .spc-tag {
    background: #fff;
    border: 1px solid #ccc;
    color: #1a1a1a;
  }

  .spc-arrow,
  .spc-dots,
  .spc-caption {
    display: none;
  }

  /* Stops a job entry, project card, or fun-fact card from being
     split awkwardly across a page break — each one stays together
     on one page. */
  .timeline-item,
  .project-card,
  .fact-card {
    break-inside: avoid;
  }

  /* Shows the actual web address after a company name link, since
     a link's blue underline doesn't mean anything on paper. */
  .timeline-company a::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    font-weight: 400;
    color: #555;
  }
}