/* =============================================
   style.css — Stiluri globale și componente reutilizabile
   ============================================= */

/* ---- Body & tipografie de bază ---- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  /* A single unbroken string — a pasted URL, a long email, a client typing a
     test value into Descriere — must never widen the document. The property is
     inherited, so this one declaration covers every section on the site. */
  overflow-wrap: break-word;
}

/* Backstop only; the rule above is the actual fix.
   `clip` rather than `hidden`: `hidden` creates a scroll container, which
   silently breaks position: sticky on every descendant. `clip` does not. */
html {
  overflow-x: clip;
}

/* A grid or flex child refuses to shrink below its content unless told it may,
   which defeats the wrap rule above. Applied to children rather than named
   classes so it survives markup changes. */
.about__container > *,
.contact__container > *,
.gallery__grid > * {
  min-width: 0;
}

/* Titluri */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 400;
}

/* Link-uri globale */
a {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-accent-hover);
}

/* ---- Container centrat ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- Secțiuni ---- */
.section {
  padding-block: var(--section-pad-y);
}
.section--alt {
  background-color: var(--color-bg-alt);
}

.section__title {
  font-size: var(--fs-4xl);
  font-family: var(--font-heading);
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}
.section__title--left {
  text-align: left;
}
.section__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3xl);
}

/* ---- Butoane ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition-base);
  cursor: pointer;
}

/* Buton principal — fundal accent */
.btn--primary {
  background-color: var(--color-accent);
  color: #000;
}
.btn--primary:hover {
  background-color: var(--color-accent-hover);
  color: #000;
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}

/* Buton outline — contur accent */
.btn--outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}
.btn--outline:hover {
  background-color: var(--color-accent);
  color: #000;
  transform: translateY(-2px);
}

/* Buton secundar — gri subtil */
.btn--secondary {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
}
.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ---- Scroll-bar customizat ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }

/* ---- Selecție text ---- */
::selection {
  background: var(--color-accent);
  color: #000;
}

/* ---- Responsive tipografie de bază ---- */
@media (max-width: 768px) {
  :root {
    --fs-hero: 3rem;
    --fs-5xl: 2.5rem;
    --fs-4xl: 2rem;
    --section-pad-y: 4rem;
  }
}