/* ============================================================
   SECTIONS.CSS
   Hero · Projects · Stack · Contact · Footer · Responsive
   ============================================================ */

/* ── Shared section scaffolding ──────────────────────────── */
section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

.sec__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 300;
  color: var(--color-muted);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.sec__label::before {
  content: attr(data-n);
  background: var(--color-lime);
  color: var(--color-ink);
  padding: .15rem .45rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.sec__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 3.5rem;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding: 8rem var(--section-padding-x) 3rem;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  overflow: hidden;
  /* Ensure content never exceeds viewport width */
  max-width: 100vw;
  box-sizing: border-box;
}

.hero__dot-grid {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background-image: radial-gradient(circle, rgba(13, 13, 13, .18) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, .4) 0%, transparent 80%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero__tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 300;
  color: var(--color-muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0;
}

.hero__name {
  /* At 360px: 9vw = 32.4px — "PETR VINTR." wraps naturally at ~2 lines */
  font-size: clamp(2.2rem, 9vw, 9.5rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
  margin-bottom: 2.5rem;
  opacity: 0;
  /* Safe word breaking — works now that   is replaced with space */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.hero__name-period { color: var(--color-lime-text); } /* Darker blue for cream bg, WCAG AA 5.68:1 ✓ */

.hero__copy {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 2.5rem;
  opacity: 0;
}

.hero__role {
  font-size: clamp(1rem, 3.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
}

.hero__sub {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.7;
  /* Wrap long dot-separated strings on mobile */
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero__cta {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  opacity: 0;
}

/* Hero bottom availability strip */
.hero__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
  opacity: 0;
}

.hero__location {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--color-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero__availability {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--color-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.availability-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulseGreen 2.2s ease-in-out infinite;
}

/* ── Projects ────────────────────────────────────────────── */
#projects {
  background: var(--color-ink);
  color: var(--color-bg);
}

#projects .sec__label         { color: rgba(247, 245, 239, .55); } /* WCAG AA ✓ */
#projects .sec__label::before { color: var(--color-ink); }
#projects .sec__title         { color: var(--color-bg); }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  overflow-x: hidden;
}

.project-card {
  background: var(--color-ink);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  cursor: none;
  transition: color .3s;
  /* 1px borders via box-shadow — no phantom dark background */
  box-shadow:
    1px 0 0 0 rgba(247, 245, 239, .08),
    0 1px 0 0 rgba(247, 245, 239, .08),
    1px 1px 0 0 rgba(247, 245, 239, .08);
}

.project-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-lime);
  transform: translateY(101%);
  transition: transform .4s var(--ease-out-expo);
  z-index: 0;
}

.project-card:hover::before { transform: translateY(0); }
.project-card:hover          { color: var(--color-ink); }
.project-card > *            { position: relative; z-index: 1; }

.project-card__num {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: rgba(247, 245, 239, .25);
  letter-spacing: .18em;
  margin-bottom: 1.75rem;
  display: block;
  transition: color .3s;
}

.project-card:hover .project-card__num { color: rgba(13, 13, 13, .35); }

.project-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .65rem;
}

.project-card__desc {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(247, 245, 239, .55);
  margin-bottom: 1.5rem;
  transition: color .3s;
}

.project-card:hover .project-card__desc { color: rgba(13, 13, 13, .6); }

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.75rem;
}

.project-card__tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 245, 239, .22);
  padding: .2rem .55rem;
  color: rgba(247, 245, 239, .60); /* WCAG AA: ~6.9:1 on #0D0D0D ✓ */
  transition: border-color .3s, color .3s;
}

.project-card:hover .project-card__tag {
  border-color: rgba(13, 13, 13, .25);
  color: rgba(13, 13, 13, .55);
}

.project-card__link {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--color-lime);
  text-decoration: none;
  letter-spacing: .1em;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color .3s;
}

.project-card:hover .project-card__link { color: var(--color-ink); }

.project-card__link::after {
  content: '→';
  transition: transform .2s;
}

.project-card__link:hover::after { transform: translateX(4px); }

/* ── Stack ───────────────────────────────────────────────── */
.stack__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 3.5rem;
}

.stack__intro p {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-muted);
}

.stack__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-border);
}

.stack-item {
  background: var(--color-bg);
  padding: 1.75rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: background .2s;
  /* Crisp 1px borders using box-shadow — fills every cell edge cleanly */
  box-shadow:
    1px 0 0 0 var(--color-border),
    0 1px 0 0 var(--color-border),
    1px 1px 0 0 var(--color-border);
}

.stack-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--color-lime);
  transition: width .35s var(--ease-out-expo);
}

.stack-item:hover::after { width: 100%; }
.stack-item:hover        { background: #EEEBE2; }

/* Icons — both <img> devicons and inline SVG */
.stack-item__icon-img,
.stack-item__icon-svg {
  width: 32px;
  height: 32px;
  display: block;
  margin-bottom: .2rem;
  flex-shrink: 0;
}

/* Inline SVG — inherits ink color, dims on hover */
.stack-item__icon-svg {
  color: var(--color-ink);
  opacity: .75;
  transition: opacity .2s;
}
.stack-item:hover .stack-item__icon-svg { opacity: 1; }

/* Devicon images — subtle desaturate until hover */
.stack-item__icon-img {
  filter: saturate(.7) brightness(1);
  transition: filter .2s;
}
.stack-item:hover .stack-item__icon-img { filter: saturate(1) brightness(1.05); }

.stack-item__name {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .01em;
  white-space: nowrap; /* prevent wrapping → keeps all items same height */
}

.stack-item__level {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--color-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Contact ─────────────────────────────────────────────── */
#contact {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact__wrap { max-width: 820px; }

.contact__heading {
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
  margin-bottom: 3rem;
  cursor: default;
}

.contact__heading .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-ink);
  display: inline;
  transition: color .35s, -webkit-text-stroke .35s;
}

.contact__heading:hover .outline {
  color: var(--color-lime);
  -webkit-text-stroke: 2px transparent;
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.contact__link {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 3px;
  transition: border-color .2s;
  cursor: none;
}

.contact__link:hover { border-color: var(--color-ink); }

.contact__note {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--color-muted);
  letter-spacing: .08em;
  line-height: 1.7;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  padding: 1.75rem var(--section-padding-x);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-footer p {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--color-muted);
  letter-spacing: .08em;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet (768px) */
@media (max-width: 768px) {
  :root {
    --section-padding-x: 1.5rem;
    --section-padding-y: 4rem;
  }

  .nav { padding: 1rem 1.5rem; }
  .nav__links li:not(:last-child):not(:nth-last-child(2)) { display: none; }

  .hero { padding: 6rem 1.5rem 2.5rem; }
  .hero__dot-grid { width: 100%; }
  .hero__copy { max-width: 100%; }

  .stack__intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .stack__grid  { grid-template-columns: repeat(3, 1fr); } /* 3 cols on tablet */

  .contact__heading { letter-spacing: -.025em; }
  .contact__links   { gap: 1.25rem; }

  .site-footer { flex-direction: column; gap: .6rem; text-align: center; }
}

/* Mobile (480px) */
@media (max-width: 480px) {
  :root {
    --section-padding-x: 1.25rem;
    --section-padding-y: 3rem;
  }

  /* Hero — prevent any overflow */
  .hero { padding: 5.5rem 1.25rem 2rem; }
  .hero__tag { font-size: .65rem; }
  .hero__sub {
    font-size: .7rem;
    /* Break the dot-separated string into multiple lines */
    word-break: break-word;
  }
  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
  }
  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .scroll-hint { display: none; }

  /* Stack — 2 columns on small phones */
  .stack__grid {
    grid-template-columns: repeat(3, 1fr); /* 3 cols on mobile */
  }

  /* Projects — 1 column */
  .projects__grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact__heading {
    font-size: clamp(2rem, 10vw, 2.8rem);
    letter-spacing: -.02em;
  }
}

/* Very small (360px and below) */
@media (max-width: 360px) {
  :root {
    --section-padding-x: 1rem;
  }

  .hero { padding: 5rem 1rem 2rem; }
  .hero__name {
    /* Force tighter letter-spacing at smallest sizes */
    letter-spacing: -.025em;
  }
  .stack__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cols on tiny screens */
  }
}


/* ── FAQ (GEO section) ───────────────────────────────────── */
.faq-section {
  background: var(--color-ink);
  color: var(--color-bg);
}

.faq-section .sec__label         { color: rgba(247, 245, 239, .55); } /* WCAG AA ✓ */
.faq-section .sec__label::before { color: var(--color-ink); }
.faq-section .sec__title         { color: var(--color-bg); }

.faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0;
}

.faq__item {
  background: var(--color-ink);
  padding: 2rem 2.5rem;
  cursor: pointer;
  list-style: none;
  box-shadow:
    1px 0 0 0 rgba(247, 245, 239, .08),
    0 1px 0 0 rgba(247, 245, 239, .08),
    1px 1px 0 0 rgba(247, 245, 239, .08);
}

.faq__item[open] {
  background: #161616;
}

/* Remove default marker */
.faq__item summary { list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }

.faq__question {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-bg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
}

/* Plus / minus indicator */
.faq__question::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--color-lime);
  flex-shrink: 0;
  transition: transform .3s var(--ease-out-expo);
  line-height: 1.35;
}

.faq__item[open] .faq__question::after {
  content: '−';
}

.faq__answer {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247, 245, 239, .55);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 245, 239, .08);
}

@media (max-width: 480px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
  .faq__item {
    padding: 1.5rem;
  }
}