/* v0.2.5 */
/* ═══════════════════════════════════════════════════════════
   Thalomex – stylesheet
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  --green:     #27352a;
  --white:     #ffffff;
  --off-white: #f7f6f3;
  --text:      #1a1a1a;
  --muted:     #6b7068;
  --border:    #e4e4e0;
  --max:       1000px;
  --radius:    10px;
  --nav-h:     64px;
  --logo-h:    28px;
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: hidden;
  /* smooth-scroll used by JS scrollTo({ behavior:'smooth' }) */
  scroll-behavior: smooth;
  /* prevent mobile browsers from auto-adjusting text size per language */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-align: justify;
}

img { display: block; max-width: 100%; }

/* ─── Utility ─────────────────────────────────────────────── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Every section except hero fills exactly one screen height on desktop.
   On mobile (≤720 px) sections become height:auto so long content isn't clipped. */
.section {
  height: 100dvh;
  overflow: hidden;
  padding: max(calc(var(--nav-h) + 0.75rem), clamp(3rem, 6dvh, 5rem)) 0 clamp(1.5rem, 3dvh, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.85rem;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 1.25rem;
}

/* ─── Nav ─────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.3s, border-color 0.3s;
}

#nav.scrolled {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#nav.scrolled .nav-logo {
  opacity: 1;
  pointer-events: auto;
}

.nav-logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}

/* White logo over hero, dark logo once nav is scrolled */
.nav-logo .logo-dark  { display: none; }
.nav-logo .logo-white { display: block; }
#nav.scrolled .nav-logo .logo-white { display: none; }
#nav.scrolled .nav-logo .logo-dark  { display: block; }

/* ── Nav right side ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255,255,255,0.8);
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--white); }
#nav.scrolled .nav-links a { color: var(--muted); }
#nav.scrolled .nav-links a:hover { color: var(--text); }

/* ── Hamburger ── */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: rgba(255,255,255,0.85);
  font-size: 1.4rem;
  line-height: 1;
}

#nav.scrolled .hamburger { color: var(--text); }

/* ── Language switcher ── */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lang-switch a {
  text-decoration: none;
  color: rgba(255,255,255,0.45);
  transition: color 0.15s;
}

.lang-switch a.active,
.lang-switch a:hover { color: var(--white); }

.lang-sep { color: rgba(255,255,255,0.2); }

#nav.scrolled .lang-switch a          { color: var(--muted); }
#nav.scrolled .lang-switch a.active,
#nav.scrolled .lang-switch a:hover   { color: var(--text); }
#nav.scrolled .lang-sep              { color: var(--border); }

/* ─── Floating contact button ─────────────────────────────── */
.contact-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  background: var(--green);
  color: var(--white);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(39,53,42,0.3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s;
}

.contact-fab.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-fab:hover { background: #1a2a1d; }

/* ─── Hero ────────────────────────────────────────────────── */
#hero {
  background: var(--green);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 7rem;
  text-align: center;
}

.hero-logo {
  margin-bottom: 3rem;
}

.hero-logo img {
  width: clamp(160px, 42vw, 440px);
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.9;
}

.hero-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  max-width: 460px;
  margin: 0 auto 2.5rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.6rem;
  background: var(--white);
  color: var(--green);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.hero-cta:hover { opacity: 0.9; }

.scroll-hint {
  margin-top: 3rem;
  color: rgba(255,255,255,0.25);
  font-size: 1.4rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ─── Services ────────────────────────────────────────────── */
#services { background: var(--white); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 1.5rem;
}

.service-block {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
}

.service-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.service-block-text {
  padding: 0.85rem 0 0;
}

.service-block h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.service-block p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── Services: medium width (480–720 px) ─────────────────── */
@media (min-width: 480px) and (max-width: 720px) {
  .services-grid  { grid-template-columns: 1fr; gap: 1rem; }
  .service-block  { flex-direction: row; align-items: stretch; }
  .service-img    { width: 42%; aspect-ratio: unset; flex-shrink: 0;
                    border-bottom: none; border-right: none; }
  .service-block-text { padding: 0.65rem 0 0.65rem 1rem; }
}

/* ─── Work carousel ───────────────────────────────────────── */
#work {
  background: var(--off-white);
  /* Natural height: fills at least the viewport but never clips card content */
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  justify-content: flex-start;
}

#work > .wrap {
  display: flex;
  flex-direction: column;
}

.carousel-outer {
  position: relative;
  margin-top: 1.5rem;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
  /* Fixed height driven by viewport: fills remaining space below heading */
  height: clamp(440px, calc(100dvh - 210px), 620px);
  align-items: stretch; /* cards fill track height */
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--green);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.carousel-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* ── Work card ── */
.work-card {
  /* Fixed 456px — exactly 2 fit in the 936px inner wrap at full width.
     As the viewport narrows the second card scrolls off naturally (no resize).
     min() prevents the card ever exceeding the visible area on small screens. */
  flex: 0 0 min(456px, calc(100vw - 64px));
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: border-color 0.2s;
}

.work-card:hover { border-color: var(--green); }

/* Card image header — always 16:9 */
.work-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--off-white);
  flex-shrink: 0;
  position: relative;
  /* top corners match card radius; card overflow:hidden clips bottom */
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.work-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.work-card:hover .work-card-img img { transform: scale(1.03); }

/* Text-only header (kept for potential future text-type cards) */
.work-card-img--text {
  display: flex;
  align-items: flex-end;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #2e3d32, #3d5142);
}

.work-card-img--text .card-org-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Badge overlaid bottom-left of image */
.work-card-badge {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(39,53,42,0.82);
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
}

/* Card body — flex column, does not scroll itself */
.work-card-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0; /* required for nested flex scroll to work */
}

/* Scrollable middle zone: title + text + links only */
.work-card-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.work-card-scroll::-webkit-scrollbar        { width: 4px; }
.work-card-scroll::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 2px; }
.work-card-scroll::-webkit-scrollbar-track  { background: transparent; }

.work-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.work-card-org {
  font-size: 0.78rem;
  color: var(--muted);
}

/* PhD indicator pill */
.phd-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--green);
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  flex-shrink: 0;
}

.work-card-body h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 0.3rem 0 0;
}

.work-card-body p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

/* Links directly below text */
.work-card-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
}

.work-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--green);
  text-decoration: none;
}

.work-link:hover { text-decoration: underline; }

/* Tags pinned at the bottom — scroll div above fills the space */
.work-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-top: 0.75rem;
}

/* Shared tag pill (used in both work cards and about section) */
.tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--off-white);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--green);
}

/* ─── About ───────────────────────────────────────────────── */
#about h2 { margin-bottom: 0.6rem; }
#about {
  background-color: var(--white);
  background-image: radial-gradient(circle, #d4d4cf 1px, transparent 1px);
  background-size: 22px 22px;
}

.about-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 1rem;
}

/* ── Photo column ── */
.about-photo-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Engineering drawing frame: L-bracket corners via CSS gradients */
.photo-frame {
  position: relative;
  padding: 10px;
  background:
    linear-gradient(var(--green), var(--green)) top    left  / 2px 24px no-repeat,
    linear-gradient(var(--green), var(--green)) top    left  / 24px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) top    right / 2px 24px no-repeat,
    linear-gradient(var(--green), var(--green)) top    right / 24px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) bottom left  / 2px 24px no-repeat,
    linear-gradient(var(--green), var(--green)) bottom left  / 24px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) bottom right / 2px 24px no-repeat,
    linear-gradient(var(--green), var(--green)) bottom right / 24px 2px no-repeat;
}

.photo-frame img {
  width: 100%;
  display: block;
  border-radius: 3px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

/* Title-block caption */
.photo-caption {
  border: 1px solid var(--border);
  border-top: none;
  background: var(--white);
  padding: 0.55rem 0.8rem;
}

.caption-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Content column ── */
.about-content p {
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.about-content p:last-of-type { margin-bottom: 0; }

/* Stats strip — sits above the bio text */
.about-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0.75rem;
  background: var(--white);
}

.stat-cell {
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--border);
  text-align: center;
}

.stat-cell:last-child { border-right: none; }

.stat-nr {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--green);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* ─── Competences block (within About) ────────────────────── */
.competences {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.competences-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}

.competences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2.5rem;
}

.competence-group .competence-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--green);
}

.competence-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.competence-group ul li {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  padding: 0.18rem 0 0.18rem 1rem;
  position: relative;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.competence-group ul li:last-child {
  border-bottom: none;
}

.competence-group ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--green);
  opacity: 0.5;
  font-size: 0.75rem;
  top: 0.35rem;
}

/* ─── Contact ─────────────────────────────────────────────── */
#contact {
  background: var(--green);
  position: relative;
  overflow: hidden;
}

#contact .section-label { color: rgba(255,255,255,0.45); }
#contact h2              { color: var(--white); }

.contact-reticle {
  position: absolute;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

.contact-intro p {
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
}

.contact-details { display: flex; flex-direction: column; }

.contact-row {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  align-items: center;
  font-size: 0.9rem;
}

.contact-row:first-child { border-top: 1px solid rgba(255,255,255,0.12); }

.contact-row .lbl {
  width: 80px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
}

.contact-row span { color: rgba(255,255,255,0.8); font-weight: 500; }
.contact-row a    { color: var(--white); text-decoration: none; font-weight: 500; }
.contact-row a:hover { color: rgba(255,255,255,0.7); }

/* ─── Footer ──────────────────────────────────────────────── */
footer {
  background: var(--green);
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

footer img    { height: 22px; width: auto; opacity: 0.7; }
.footer-copy  { font-size: 0.8rem; color: rgba(255,255,255,0.4); }

/* ─── Fade-in ─────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ─── Responsive: narrow (≤999 px) — 2→1 card column jump ── */
@media (max-width: 999px) {
  /* At this width the viewport is too narrow for 2 × 456px + 24px gap.
     Constrain the carousel outer to one-card width so the second card
     sits fully off-screen — cards keep their original 456px width. */
  .carousel-outer {
    max-width: min(456px, calc(100vw - 4rem));
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Responsive: mobile (≤720 px) ───────────────────────── */
@media (max-width: 720px) {

  /* Sections: natural height on mobile — no clipping */
  .section {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: calc(var(--nav-h) + 1rem) 0 3rem;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* Carousel: let height be natural on mobile (section is already auto) */
  .carousel-track { height: auto; }

  /* Nav: hamburger + collapsible links */
  .hamburger { display: block; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem 1.5rem;
    gap: 1.25rem;
    backdrop-filter: blur(8px);
  }

  .nav-links.open     { display: flex; }
  .nav-links.open a   { color: var(--text); }

  /* About: stack photo above text, keep photo small */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2rem;
  }

  .about-photo-col { max-width: 130px; }

  /* Stats: stack to 1 col */
  .about-stats-row {
    grid-template-columns: 1fr;
  }
  .stat-cell          { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-cell:last-child { border-bottom: none; }

  /* Contact: stack columns */
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }

  /* Services: narrow (<480 px) — banner crop, stack */
  .service-block  { flex-direction: column; }
  .service-img    { aspect-ratio: 3 / 1; width: 100%; border-right: none; border-bottom: none; }
  .service-block-text { padding: 0.65rem 0 0; }
  .services-grid  { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Competences: stack to 1 col on mobile */
  .competences-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Decorative reticle overflows on small screens */
  .contact-reticle { display: none; }
}