/* ============================================================
   D&D Parchet Design SRL
   site.css – Main stylesheet (EDITORIAL · CLEAN · LIGHT)
   Inspired by the modern look of parchet-lemn.ro:
   bright surfaces, editorial headlines, airy spacing,
   gentle buttons, no heavy full-screen dark hero.
   All class hooks used across RO + EN pages are preserved.
   ============================================================ */

:root {
  /* Paleta: acelasi registru cald / lemn, dar mai curata si mai contemporana.
     Fundalul pierde din galben si devine aproape neutru, ceea ce lasa
     lemnul din fotografii sa fie singurul accent cald al paginii.
     Accentul e un caramiziu cald (nuanta 17°), nu maro: mai rosu si mai
     luminos decat varianta anterioara, ca sa rezoneze cu tonul lemnului.
     Toate perechile text/fundal trec WCAG AA (>= 4.5:1). */
  --color-bg: #f7f5f1;
  --color-surface: #ffffff;
  --color-ink: #1a1714;
  --color-muted: #6b635a;
  --color-line: #e2ddd4;
  --color-accent: #b0522e;
  --color-accent-dark: #8a3e22;
  --color-soft: #efebe3;
  --color-dark: #1a1714;

  /* Umbre reci si mai discrete: la muchii drepte, umbra difuza
     face designul sa para neclar, nu premium. */
  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.05);
  --shadow-md: 0 8px 20px rgba(26, 23, 20, 0.07);
  --shadow-lg: 0 20px 48px rgba(26, 23, 20, 0.10);
}

/* ============================================================
   HEADER  (light, clean)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* The blur lives on a pseudo-element on purpose: `backdrop-filter` on the
   header itself would turn the header into the containing block for its
   `position: fixed` descendants, which traps the mobile drawer inside the
   ~73px header box (menu links clipped above the viewport). */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.is-scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 4px 24px rgba(26, 23, 20,0.08); }
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--pad);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand__logo { width: 34px; height: 40px; flex-shrink: 0; }
.brand__logo img, .brand__logo svg { width: 100%; height: 100%; object-fit: contain; }
.brand__name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-ink);
}
.brand__name small {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 2px;
}

.site-nav ul { display: flex; justify-content: center; gap: clamp(16px, 2.6vw, 34px); }
.site-nav a {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-muted);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.28s ease;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--color-ink); }
.site-nav a:hover::after, .site-nav a.is-active::after { width: 100%; }

.header-contact { text-align: right; line-height: 1.3; }
.header-contact .phone {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-block;
  padding-block: 4px;
}
.header-contact .label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
}

/* ---------- Language switcher ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-left: 14px;
}
.lang-switch a {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}
.lang-switch a:hover { color: var(--color-ink); }
.lang-switch a.is-active { background: var(--color-accent); color: #fff; }

/* ---------- Nav toggle (mobile) ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  position: relative;
  z-index: 110;
  background: transparent;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Open menu: the page behind is locked and dimmed, so the drawer never
   competes with the hero, the images or the cookie banner. */
html.nav-open, html.nav-open body { overflow: hidden; }
body.nav-open::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(32, 25, 19, 0.45);
  animation: nav-scrim-in 0.25s ease;
}
body.nav-open .cookie-banner {
  opacity: 0;
  visibility: hidden;
  transform: translateY(150%);
  pointer-events: none;
}
@keyframes nav-scrim-in { from { opacity: 0; } }

/* ============================================================
   BUTTONS  (clean, editorial)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
}
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: var(--color-accent-dark); color: #fff; }
.btn--ghost { border: 1px solid var(--color-ink); color: var(--color-ink); background: transparent; }
.btn--ghost:hover { background: var(--color-ink); color: #fff; }
.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--line { border: 1px solid var(--color-line); color: var(--color-ink); }
.btn--line:hover { border-color: var(--color-ink); }
/* variant used on dark/colored bands */
.btn--light { border: 1px solid #fff; color: #fff; }
.btn--light:hover { background: #fff; color: var(--color-accent); }

/* ============================================================
   HERO – HOME  (editorial, light)
   ============================================================ */
.hero {
  position: relative;
  background: var(--color-soft);
  padding: 150px 0 90px;
  color: var(--color-ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.hero__grid {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero__content { padding: 20px 0; }
.hero__index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--color-accent);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  color: var(--color-ink);
}
.hero h1 .light { font-weight: 300; color: var(--color-accent); }
.hero p {
  font-size: 19px;
  font-weight: 400;
  color: var(--color-muted);
  max-width: 680px;
  margin: 0 auto 38px;
  line-height: 1.75;
}
.hero__meta {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__meta strong { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--color-ink); }
.hero__meta span { font-size: 13px; color: var(--color-muted); }
.hero__rail { display: none; }
.hero__facts { display: none; }
.fact { display: none; }

/* ============================================================
   TICKER / MARQUEE
   ============================================================ */
.ticker {
  background: var(--color-accent);
  color: #fff;
  overflow: hidden;
  padding: 18px 0;
}
.ticker__track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: ticker 38s linear infinite;
  color: #fff;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: var(--spacing-section) 0; }
.section--light { background: var(--color-bg); }
.section--white { background: var(--color-surface); }
.section--dark { background: var(--color-dark); color: #fff; }
.section--accent { background: var(--color-accent); color: #fff; }

.section__label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section__label::before { content: '/'; font-size: 16px; }
.section--dark .section__label, .section--accent .section__label { color: #e8c9a8; }
.section h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: inherit;
}
.section h2 .light { font-weight: 300; color: var(--color-accent); }
.section--dark h2 .light, .section--accent h2 .light { color: #e8c9a8; }
.section__lead {
  margin-top: 20px;
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.8;
  max-width: 620px;
}
.section--dark .section__lead { color: #d9cfc2; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.section-head .section__lead { margin: 0; }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 56px; align-items: center; }
/* `width: 100%` is required: with only `aspect-ratio` + `min-height`, the
   minimum height is transferred to the width (300 x 4/3 = 400px) and the box
   spills out of its grid track, which widens the whole layout viewport on
   phones. A definite width keeps the ratio for the height only; the photo
   inside still covers the block (object-fit). */
.about__media { position: relative; overflow: hidden; width: 100%; border-radius: var(--radius-card); aspect-ratio: 4/3; min-height: 320px; min-width: 0; box-shadow: 0 30px 60px rgba(26, 23, 20,0.12); }
.about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__media .img-badge {
  position: absolute; bottom: 20px; left: 20px;
  background: var(--color-accent); color: #fff;
  padding: 14px 18px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: var(--radius-card);
}
.about__content { padding: 20px 0; display: flex; flex-direction: column; justify-content: center; }
.about__content h3 {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  margin: 18px 0 16px; color: var(--color-ink);
}
.about__content p { color: var(--color-muted); font-size: 16px; font-weight: 400; line-height: 1.85; margin-bottom: 16px; }
.about__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  padding: 24px 0; margin: 20px 0 28px;
}
.about__stats .n { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--color-ink); }
.about__stats .n span { color: var(--color-accent); }
.about__stats .l { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-muted); margin-top: 6px; }

/* ============================================================
   SERVICES  (clean cards)
   ============================================================ */
.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.service {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3vw, 40px);
  display: flex; gap: 20px; align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(26, 23, 20,0.1); border-color: var(--color-accent); }
.service__num {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--color-accent); width: 46px; height: 46px;
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--color-soft);
}
.service h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--color-ink); margin-bottom: 10px; }
.service p { font-size: 15.5px; font-weight: 400; color: var(--color-muted); line-height: 1.75; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product {
  position: relative; overflow: hidden; background: var(--color-surface);
  border: 1px solid var(--color-line); aspect-ratio: 4/3;
  border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(26, 23, 20,0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  min-width: 0;
}
.product:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(26, 23, 20,0.16); }
.product img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.product::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 23, 20,0.62), rgba(26, 23, 20,0) 55%); border-radius: var(--radius-card); }
.product:hover img { transform: scale(1.05); }
.product__label {
  position: absolute; left: 18px; bottom: 18px; color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: 1.2px; text-transform: uppercase; z-index: 2; display: flex; flex-direction: column;
}
.product__label em { font-style: normal; color: #f0d3b0; font-size: 10px; letter-spacing: 2.5px; margin-bottom: 6px; }

/* ============================================================
   PROJECTS (gallery)
   ============================================================ */
.projects__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 18px; }
.project { position: relative; overflow: hidden; cursor: pointer; border-radius: var(--radius-card); }
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.project:hover img { transform: scale(1.06); }
.project__hover {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 23, 20,0.88), rgba(26, 23, 20,0));
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 20px; color: #fff; opacity: 0; transition: opacity 0.3s ease;
}
.project:hover .project__hover, .project:focus-visible .project__hover { opacity: 1; }
.project__hover h3 { font-family: var(--font-heading); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.project__hover span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #f0d3b0; }
.p--span2 { grid-column: span 2; grid-row: span 2; }
.p--tall { grid-row: span 2; }
.p--wide { grid-column: span 2; }

/* projects: placeholder cards (no photo) */
.project.project--placeholder {
  background: var(--color-soft);
  display: flex; align-items: flex-end;
  padding: 20px; cursor: default; border-radius: var(--radius-card);
}
.project.project--placeholder .project__hover {
  position: static; background: none; opacity: 1; padding: 0;
  flex-direction: column; align-items: flex-start; gap: 6px;
}
.project.project--placeholder h3 { font-size: 16px; color: var(--color-ink); }
.project.project--placeholder .project__hover span { color: var(--color-muted); }

/* projects: featured project detail sections */
.featured-project { padding: var(--spacing-section) 0; border-top: 1px solid var(--color-line); background: var(--color-bg); }
.featured-project__header { margin-bottom: 28px; }
.featured-project__header h2 { font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 12px 0 8px; color: var(--color-ink); }
.featured-project__meta { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.featured-project__text { max-width: 760px; margin-bottom: 28px; }
.featured-project__text p { color: var(--color-muted); font-size: 16px; line-height: 1.8; }
.featured-project__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.featured-project__gallery .project { aspect-ratio: 4/3; }
.badge {
  display: inline-block; font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px;
  background: var(--color-line); color: var(--color-ink); border-radius: var(--radius-pill);
}
.badge--restaurare { background: var(--color-accent); color: #fff; }
  .badge--comercial { background: var(--color-ink); color: #fff; }
  .badge--rezidential { background: #b07a35; color: #fff; }
  .badge--sport { background: var(--color-accent-dark); color: #fff; }

/* projects CTA band */
.cta-band { background: var(--color-dark); color: #fff; padding: clamp(56px, 7vw, 84px) 0; text-align: center; }
.cta-band h2 { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.cta-band p { color: #d9cfc2; max-width: 620px; margin: 16px auto 28px; font-size: 16px; line-height: 1.7; }

/* gallery filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 40px 0; background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.filter-btn {
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 22px; border: 1px solid var(--color-line); color: var(--color-muted);
  background: transparent; transition: all 0.25s ease; border-radius: var(--radius-pill);
}
.filter-btn:hover, .filter-btn.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
[data-gallery-item] { transition: opacity 0.3s ease; }

/* ============================================================
   SPORTS
   ============================================================ */
.sports__wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; box-shadow: 0 30px 60px rgba(26, 23, 20,0.12); border-radius: var(--radius-card); overflow: hidden; }
.sports__media { grid-column: span 7; position: relative; min-height: 480px; overflow: hidden; }
.sports__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sports__content {
  grid-column: span 5; background: var(--color-dark); color: #fff;
  padding: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center;
}
.sports__content h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin: 16px 0 18px; }
.sports__content p { color: #d4c9ba; line-height: 1.8; font-size: 16px; margin-bottom: 16px; }
.sports__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sports__badges span {
  border: 1px solid rgba(255,255,255,0.25); padding: 8px 16px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: #fff; border-radius: var(--radius-pill);
}
.sports__list { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.sports__list li { font-size: 15px; color: #ece4d8; padding-left: 22px; position: relative; }
.sports__list li::before { content: '—'; position: absolute; left: 0; color: var(--color-accent); }

/* sports feature cards (dedicated page) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  border: 1px solid var(--color-line); background: #fff; padding: 34px 30px;
  position: relative; border-radius: var(--radius-card); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(26, 23, 20,0.12); }
.feature .fc { font-family: var(--font-heading); font-size: 46px; font-weight: 800; color: var(--color-accent); line-height: 1; }
.feature h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 700; margin: 18px 0 10px; color: var(--color-ink); }
.feature p { font-size: 15.5px; font-weight: 400; color: var(--color-muted); line-height: 1.75; }

/* ============================================================
   PAGE HERO (inner pages)  - editorial, light
   ============================================================ */
.page-hero {
  position: relative;
  padding: 120px 0 70px;
  margin-top: 72px;
  background: var(--color-soft);
  color: var(--color-ink);
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(238,230,214,0.9) 0%, rgba(238,230,214,0.5) 45%, rgba(238,230,214,0.12) 100%);
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.page-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container, 1200px); margin-left: auto; margin-right: auto; padding: 20px var(--pad); box-sizing: border-box; }
.page-hero__crumb {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent);
  font-weight: 600; margin-bottom: 18px; display: flex; gap: 10px; align-items: center;
}
.page-hero__crumb a { padding-block: 3px; }
.page-hero__crumb a:hover { color: var(--color-ink); }
.page-hero h1 {
  font-family: var(--font-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 800;
  line-height: 1.05; color: var(--color-ink);
}
.page-hero h1 .light { color: var(--color-accent); font-weight: 300; }
.page-hero .lead { margin-top: 22px; font-size: 18px; font-weight: 400; color: var(--color-muted); max-width: 660px; line-height: 1.75; }

/* Global editorial body-text consistency */
body strong, body b { font-weight: 600; color: var(--color-ink); }
.section--dark strong, .section--accent strong, .cta strong, .site-footer strong,
.sports__content strong, .hero strong { color: inherit; font-weight: 600; }

/* ============================================================
   CONTACT / FORMS
   ============================================================ */
.contact__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact__info .info-block {
  display: flex; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--color-line);
  transition: padding-left 0.25s ease;
}
.contact__info .info-block:first-child { padding-top: 6px; }
.contact__info .info-block:hover { padding-left: 10px; }
.contact__info .ic {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-accent); flex-shrink: 0; width: 96px; padding-top: 4px; font-weight: 700;
}
.contact__info .iv { font-size: 16px; color: var(--color-ink); font-weight: 500; }
.contact__info .iv a { color: var(--color-ink); border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; display: inline-block; padding-block: 3px; }
.contact__info .iv a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.contact__info .iv small { display: block; color: var(--color-muted); font-size: 12.5px; margin-top: 4px; font-weight: 400; }

.form {
  background: #fff; border: 1px solid var(--color-line); padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-card); box-shadow: 0 24px 60px rgba(26, 23, 20,0.07);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block; font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--color-ink); margin-bottom: 10px;
}
.form-group label span { color: var(--color-accent); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--color-line);
  background: #fff; font-size: 15px; color: var(--color-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border-radius: var(--radius-card); font-weight: 400;
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(138,90,59,0.12); }
.form-consent { font-size: 12.5px; color: var(--color-muted); line-height: 1.6; margin-top: 18px; }
.form-consent a { color: var(--color-accent); text-decoration: underline; }
.form-consent__check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-consent__check input { width: auto; margin-top: 3px; accent-color: var(--color-accent); flex-shrink: 0; }
.form-submit { width: 100%; justify-content: center; margin-top: 24px; }
.form-status { margin-top: 20px; padding: 14px 18px; font-size: 14px; display: none; }
.form-status.is-visible { display: block; }
.form-status--success { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.form-status--error { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }

/* ============================================================
   CTA
   ============================================================ */
.cta { background: var(--color-accent); color: #fff; padding: clamp(60px, 8vw, 90px) 0; }
.cta__grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta h2 { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.05; }
.cta .sub { margin-top: 12px; font-size: 15px; color: #f3e3d0; font-weight: 400; }
.cta .btn--dark { background: var(--color-ink); color: #fff; }
.cta .btn--dark:hover { background: #000; }
.cta .btn--ghost { border-color: #fff; color: #fff; }
.cta .btn--ghost:hover { background: #fff; color: var(--color-accent); }

/* ============================================================
   LEGAL / PROSE
   ============================================================ */
.prose h2 {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  margin: 40px 0 16px; color: var(--color-ink);
}
.prose h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 28px 0 12px; color: var(--color-ink); }
.prose p { font-size: 16px; font-weight: 400; color: var(--color-muted); line-height: 1.85; margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 0; padding-left: 20px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 15.5px; font-weight: 400; color: var(--color-muted); line-height: 1.85; margin-bottom: 8px; }
.prose a { color: var(--color-accent); text-decoration: underline; }
.prose strong { color: var(--color-ink); font-weight: 600; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed; bottom: 20px; left: 20px; right: 20px;
  width: calc(100% - 40px); max-width: 620px; z-index: 9990;
  background: var(--color-dark); color: #e6e6de; padding: 26px 28px;
  border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  transform: translateY(150%); opacity: 0; visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}
.cookie-banner.is-visible { transform: none; opacity: 1; }
.cookie-banner p { font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; color: #d9cfc2; }
.cookie-banner a { color: var(--color-accent); text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .cookie-actions .btn { padding: 12px 20px; font-size: 11px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(5,5,5,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__content { position: relative; max-width: min(1000px, 92vw); max-height: 88vh; width: 100%; }
.lightbox__content img { width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox__caption { color: #fff; text-align: center; padding: 16px 0 0; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); color: #fff; width: 52px; height: 52px;
  font-size: 26px; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease; z-index: 2; border: 1px solid rgba(255,255,255,0.15);
}
.lightbox__btn:hover { background: rgba(255,255,255,0.2); }
.lightbox__btn--prev { left: 12px; }
.lightbox__btn--next { right: 12px; }
.lightbox__close { position: absolute; top: 18px; right: 18px; color: #fff; font-size: 30px; z-index: 3; line-height: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-dark); color: #b3a697; padding: 70px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
.footer-brand .fname { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #fff; margin: 12px 0 10px; }
.footer-brand img { width: 40px; height: 48px; object-fit: contain; }
.footer-brand p { font-size: 14px; line-height: 1.7; max-width: 300px; }
.footer-col h4 { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.footer-col a, .footer-col li { display: block; color: #c0b3a2; margin-bottom: 11px; font-size: 14px; transition: color 0.2s ease; }
.footer-col a { padding-block: 3px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #a79884; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.footer-legal a { color: #a89a87; font-size: 12px; display: inline-block; padding-block: 3px; }
.footer-legal a:hover { color: #fff; }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ============================================================
   INTRINSIC-SIZE SAFETY
   Grid and flex children default to `min-width: auto`, i.e. they refuse to
   shrink below their min-content size. A full-bleed photo (1600px natural
   width) then forces the layout viewport wider than the device: the page can
   be panned sideways and fixed elements (header, cookie banner) become wider
   than the screen. Allowing children to shrink removes that failure mode
   without changing anything when the content already fits.
   ============================================================ */
.header-inner > *,
.about__grid > *,
.about__stats > *,
.services__list > *,
.products__grid > *,
.projects__grid > *,
.feature-grid > *,
.contact__grid > *,
.form-row > *,
.footer-grid > * { min-width: 0; }

/* Touch targets: the card CTA ("Detalii →") and the footer links were
   19–22px tall, below the 24px minimum target size. */
.service-card__link { padding-block: 5px; align-self: flex-start; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .header-contact { display: none; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lang-switch { margin-left: 0; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 85vw); background: var(--color-surface);
    transform: translateX(100%); transition: transform 0.35s ease;
    display: flex; align-items: flex-start; padding: 84px 0 28px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    z-index: 105;
    box-shadow: -20px 0 60px rgba(0,0,0,0.2);
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .site-nav a { display: block; padding: 18px 30px; font-size: 14px; color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
  .site-nav a::after { display: none; }
  .services__list { grid-template-columns: repeat(2, 1fr); }
  .projects__grid { grid-template-columns: repeat(2, 1fr); }
  .products__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sports__media { grid-column: span 12; min-height: 380px; }
  .sports__content { grid-column: span 12; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-project__gallery { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 130px 0 70px; }
}
@media (max-width: 920px) {
  .projects__grid { grid-auto-rows: auto; }
  .projects__grid .project { aspect-ratio: 4/3; }
  /* The span modifiers keep the 4/3 ratio here as well: the photo inside the
     card is absolutely positioned, so `aspect-ratio: auto` collapsed the card
     to the height of its caption (0–18px) between 769px and 920px. */
  .projects__grid .p--span2, .projects__grid .p--tall, .projects__grid .p--wide { aspect-ratio: 4/3; }
}
@media (max-width: 768px) {
  .about__media { min-height: 300px; }
  .about__stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .projects__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .p--span2, .p--tall, .p--wide { grid-column: span 1; grid-row: auto; aspect-ratio: 4/3; }
  .project img { position: static; aspect-ratio: 4/3; }
  .form-row { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .featured-project__gallery { grid-template-columns: 1fr; }
  .section { --spacing-section: clamp(56px, 12vw, 76px); }
  .page-hero { padding: 96px 0 56px; }
  .hero { padding: 116px 0 56px; }
  .hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .hero__meta { gap: 20px; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 640px) {
  .services__list { grid-template-columns: 1fr; }
  .hero__meta { gap: 14px; }
}
@media (max-width: 560px) {
  :root { --pad: 20px; }
  .products__grid { grid-template-columns: 1fr; gap: 16px; }
  .hero__index { font-size: 11px; }
  /* Brand: keep the header compact on small phones (was wrapping to 2–3 lines) */
  .brand__name { font-size: 11px; letter-spacing: 1px; }
  .brand__name small { display: none; }
  .brand { gap: 10px; }
  /* Keep the page-hero clear of the (taller) mobile header, without wasting space */
  .page-hero { margin-top: 76px; padding: 60px 0 38px; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 40px); }
  /* CTA band: never let a button exceed the viewport on small phones */
  .cta-band .btn, .cta .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .contact__info .ic { width: 74px; }
  .contact__info .iv { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  /* About stats: stack vertically so long words like "Neustadt" never
     overflow their grid cell on very narrow phones */
  .about__stats { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 20px 0; }
  .about__stats .n { font-size: clamp(22px, 7vw, 30px); }
  .about__stats .l { letter-spacing: 1px; }
  /* Sports feature block: give text more room on narrow phones */
  .sports__content { padding: 30px 22px; }
}
@media (max-width: 400px) {
  .hero__meta strong { font-size: 15px; }
}

/* ============================================================
   REFINAMENTE MODERNE — sesiune design
   Muchii drepte, tranzitii mai precise, feedback tactil discret.
   Adaugat la final ca sa suprascrie regulile de mai sus fara
   a modifica structura existenta.
   ============================================================ */

/* ---------- Butoane: reactie tactila, fara rotunjiri ---------- */
.btn {
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Accentul primeste o umbra proprie, ca sa iasa din plan */
.btn--accent {
  box-shadow: 0 2px 0 0 var(--color-accent-dark);
}
.btn--accent:hover {
  box-shadow: 0 4px 0 0 var(--color-accent-dark);
}
.btn--accent:active {
  box-shadow: 0 1px 0 0 var(--color-accent-dark);
}

/* ---------- Carduri: ridicare mai sobra ---------- */
.service,
.product,
.project,
.feature {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* ---------- Switch limba: segmente drepte ---------- */
.lang-switch { padding: 0; }
.lang-switch a { padding: 6px 11px; }

/* ---------- Filtre: taburi editoriale, nu pastile ---------- */
.filter-btn {
  border: 1px solid var(--color-line);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.filter-btn:hover { border-color: var(--color-ink); }

/* ---------- Formulare: focus clar, fara halou ---------- */
.form-group input,
.form-group select,
.form-group textarea {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

/* ---------- Linie de accent sub titlurile de sectiune ---------- */
.section-head h2::after,
.section__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: var(--color-accent);
}

/* ---------- Legaturi din text: subliniere care creste ---------- */
.contact__info .iv a {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  border-bottom: none;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.contact__info .iv a:hover {
  background-size: 100% 1px;
  border-bottom: none;
}

/* ---------- Imagini: zoom mai retinut ---------- */
.project img,
.product img {
  transition: transform 0.5s var(--ease-out);
}

/* ---------- Respecta preferinta de miscare redusa ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active { transform: none; }
}