/*
Theme Name: Vikka
Theme URI: https://vikka.ro
Author: Mark Benze
Description: Custom theme designed for Vikka with ACF and CPT
Version: 1.1
Text Domain: vikka
*/

:root {
  --stone-50: #F8F6F1;
  --stone-100: #EFEAE1;
  --stone-200: #E1DACB;
  --stone-300: #CBC0A8;
  --graphite-900: #1D1B18;
  --graphite-800: #28251F;
  --graphite-700: #3A362D;
  --brass-500: #9C7B45;
  --brass-400: #B8934F;
  --brass-100: #EDE0C5;
  --sky-500: #5C7A8C;
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-1: 0 1px 2px rgba(29, 27, 24, 0.08);
  --shadow-2: 0 12px 32px -12px rgba(29, 27, 24, 0.35);
  --maxw: 1220px;
  /* Actual header height, set from JS (main.js) once the header renders —
     keeps the mobile menu's top edge lined up with the header on any
     screen width instead of assuming a fixed pixel value. */
  --vikka-header-h: 73px;
}

body.nav-open {
  overflow: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  color: var(--graphite-900);
  background: var(--stone-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 0.5em 0;
  color: var(--graphite-900);
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

p {
  margin: 0 0 1em 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--brass-500);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brass-500);
  display: inline-block;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

section {
  padding: 96px 0;
}

@media (max-width:640px) {
  section {
    padding: 64px 0;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 30px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--brass-500);
  color: var(--stone-50);
}

.btn-primary:hover {
  background: var(--brass-400);
}

.btn-dark {
  background: var(--graphite-900);
  color: var(--stone-50);
}

.btn-dark:hover {
  background: var(--graphite-700);
}

.btn-outline {
  background: transparent;
  color: var(--stone-50);
  border-color: rgba(248, 246, 241, 0.55);
}

.btn-outline:hover {
  border-color: #fff;
  background: rgba(248, 246, 241, 0.08);
}

.btn-outline-dark {
  background: transparent;
  color: var(--graphite-900);
  border-color: var(--graphite-900);
}

.btn-outline-dark:hover {
  background: var(--graphite-900);
  color: var(--stone-50);
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(248, 246, 241, 0.92);
  border-bottom: 1px solid var(--stone-200);
}

/* The blur lives on its own layer instead of directly on .site-header.
   backdrop-filter on an ancestor makes it the "containing block" for any
   position:fixed descendant — which breaks the mobile slide-out nav below,
   squeezing it into the header's own ~73px height instead of covering the
   phone screen. Keeping it on this pseudo-element preserves the frosted-
   glass look without that side effect. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  line-height: 0;
  transition: transform .18s ease;
}

/* Crossfades to a second, brass-text version of the logo on hover —
   needs assets/images/logo-brass.png added (same size/proportions as
   the uploaded custom logo, text recolored to var(--brass-500)). */
.logo img {
  display: block;
  transition: opacity .18s ease;
}

.logo:hover img {
  opacity: 0;
}

.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/vikka-logo-2.png') center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.logo:hover::after {
  opacity: 1;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

nav.main-nav a {
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  border-color: var(--brass-500);
  color: var(--brass-500);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Flags come from flagcdn.com as SVGs (vector, crisp at any size) instead
   of Polylang's built-in low-resolution raster flags, which looked
   blurry/pixelated once scaled up. */
.lang-flag {
  display: inline-flex;
  padding: 10px 4px;
  margin: -10px -4px;
  line-height: 0;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity .18s ease;
}

/* Fixed width AND height (not just width, height:auto) because flag
   SVGs don't share one aspect ratio — Hungary's is squarer than
   Romania's. object-fit: cover crops each to the same box so both
   flags render at identical size instead of Hungary looking shorter. */
.lang-flag img {
  display: block;
  width: 22px;
  height: 16px;
  object-fit: cover;
}

.lang-flag:hover,
.lang-flag.active {
  opacity: 1;
}

.lang-flag:focus-visible {
  outline: 2px solid var(--sky-500);
  outline-offset: 2px;
}

@media (max-width:480px) {
  .lang-flag img {
    width: 24px;
    height: 17px;
  }
}

/* Only one "Cere ofertă" button on desktop (header-actions handles it);
   the copy inside nav-cta is reserved for the mobile slide-out menu. */
nav.main-nav .nav-cta {
  display: none;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -10px;
}

.mobile-toggle svg {
  width: 26px;
  height: 26px;
}

@media (max-width:900px) {
  nav.main-nav {
    position: fixed;
    inset: var(--vikka-header-h) 0 0 0;
    background: var(--stone-50);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 28px;
    gap: 6px;
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
  }

  nav.main-nav.open {
    transform: translateX(0);
  }

  nav.main-nav a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--stone-200);
    font-size: 1rem;
  }

  .header-actions .btn {
    display: none;
  }

  .header-actions .mobile-toggle {
    display: inline-flex;
  }

  nav.main-nav .nav-cta {
    display: block;
    width: 100%;
    margin-top: 14px;
  }

  nav.main-nav .nav-cta .btn {
    display: inline-flex;
    width: 100%;
  }
}

/* ===== Wave signature divider ===== */
.wave-divider {
  width: 100%;
  line-height: 0;
  display: block;
}

.wave-divider svg {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -1px;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  color: var(--stone-50);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-position: center 62%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero-bg-slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(29, 27, 24, 0.35), rgba(29, 27, 24, 0.78));
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px 28px 84px;
  width: 100%;
}

.hero .eyebrow {
  color: var(--brass-400);
}

.hero .eyebrow::before {
  background: var(--brass-400);
}

.hero h1 {
  color: #fff;
  max-width: 15ch;
}

.hero-sub {
  max-width: 52ch;
  font-size: 1.12rem;
  color: var(--stone-200);
  margin-bottom: 34px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== Trust strip ===== */
.trust-strip {
  background: var(--graphite-900);
  color: var(--stone-50);
  padding: 0;
}

.trust-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 34px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brass-400);
  background: rgba(184, 147, 79, 0.14);
  border-radius: 50%;
  padding: 10px;
  box-sizing: content-box;
}

.trust-item span {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width:900px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Benefits ===== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--stone-200);
  margin-top: 48px;
}

.benefit-card {
  background: var(--stone-50);
  padding: 40px 34px;
  transition: background .2s ease;
}

.benefit-card:hover {
  background: var(--stone-100);
}

.benefit-num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--stone-300);
  margin-bottom: 6px;
}

@media (max-width:900px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Section header helper ===== */
.section-head {
  max-width: 640px;
}

.section-head.center {
  margin: 0 auto;
  text-align: center;
}

.section-foot-cta {
  margin-top: 44px;
}

/* ===== Services preview / grid ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.service-card {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  padding: 34px 30px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.service-card:hover {
  border-color: var(--brass-500);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.service-card svg {
  width: 38px;
  height: 38px;
  color: var(--brass-500);
  margin-bottom: 18px;
}

@media (max-width:900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Testimonials ===== */
.testimonials {
  background: var(--stone-100);
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.testi-card {
  background: var(--stone-50);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  border-top: 3px solid var(--brass-500);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}

.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.testi-quote {
  font-size: 1.02rem;
  font-style: italic;
  color: var(--graphite-800);
  margin-bottom: 20px;
}

.testi-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.testi-loc {
  font-size: 0.82rem;
  color: var(--graphite-700);
  opacity: 0.7;
}

@media (max-width:900px) {
  .testi-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== About preview (home) ===== */
.about-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Same fix as .story-grid: without this, the real hosted photo's natural
   size can force this column (and the whole page) wider than the mobile
   viewport. */
.about-preview > * {
  min-width: 0;
}

.about-preview img {
  width: 100%;
  /* The source photo is a tall 3:4 portrait (1200x1600) — displayed at its
     native ratio in this ~half-width column it renders absurdly elongated
     (the whole section ends up nearly a full viewport tall). Cropping it to
     a flatter ratio via object-fit keeps the column noticeably shorter,
     regardless of what aspect ratio future uploaded photos happen to be. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

/* Video + text pair (home "Din culise" section, About "Pe șantier"
   section): same two-column shell as .about-preview above, but the video
   side deliberately does NOT stretch to fill its column like the photo
   does — a portrait phone video at half the container's width would be
   enormous. Instead .video-frame video (below) is height-capped and
   centered within this column, so the column's real job is just to keep
   the video from sitting alone in an otherwise-empty row: the text
   fills the rest of the visual weight next to it. */
.video-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.video-pair > * {
  min-width: 0;
}

@media (max-width:900px) {
  .video-pair {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Used on the Despre noi video section so it doesn't just repeat the
   "Povestea noastră" text-left/photo-right block directly above it —
   video first, text second, both in the grid and stacked on mobile.
   Reorders visually only (order:-1 on the video cell); the markup itself
   still puts the text div first, so screen readers/keyboard order is
   unaffected by the flip. */
.video-pair-reverse .video-frame {
  order: -1;
}

/* An uploaded video keeps its own native proportions (see vikka_f_video()
   in functions.php — it reads the real width/height off the uploaded file
   and sets them as attributes on the <video> tag) rather than being
   force-cropped like the photo above, so there's no aspect-ratio or
   object-fit here. But "keep the ratio" still needs a ceiling: a
   landscape video is bounded by max-width (scales to fill the column,
   same as before), while a portrait/vertical upload — very likely for a
   "team at work" clip filmed on a phone — is bounded by max-height
   instead, so it shrinks to a sensible size instead of towering over the
   rest of the page. width/height:auto plus both max- values makes the
   browser fit the video within whichever limit it actually hits first,
   still at its correct ratio; margin:0 auto centers whichever dimension
   ends up narrower than the wrapper. cursor:pointer hints that clicking
   it toggles play/pause (see the data-vikka-autoplay handler in
   main.js) — there are no visible native controls in autoplay mode. */
.video-frame video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 680px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  background: #0b0b0b;
  cursor: pointer;
}

@media (max-width:700px) {
  .video-frame video {
    max-height: 70vh;
  }
}

@media (max-width:900px) {
  .about-preview {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ===== Final CTA band ===== */
.cta-band {
  background: var(--graphite-900);
  color: var(--stone-50);
  text-align: center;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  color: var(--stone-200);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band .btn-primary {
  margin-top: 8px;
}

/* ===== About page ===== */
.about-hero {
  background: linear-gradient(180deg, rgba(29, 27, 24, 0.25), rgba(29, 27, 24, 0.7)), url('assets/images/gard2.jpg') center/cover no-repeat;
  color: #fff;
  padding: 120px 0 70px;
}

.about-hero h1 {
  color: #fff;
  max-width: 18ch;
}

/* Floating stats card that overlaps the bottom edge of a photo hero —
   pulled up with a negative margin so it reads as one continuous "hero +
   proof points" moment instead of two stacked, disconnected blocks.
   Shared between the home page and the Despre noi page. */
.stats-band {
  position: relative;
  z-index: 2;
  margin-top: -56px;
  margin-bottom: 28px;
}

.stats-card {
  background: var(--stone-50);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stat {
  padding: 30px 24px;
  text-align: center;
  border-right: 1px solid var(--stone-200);
}

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

.stat-number {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--brass-500);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--graphite-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width:700px) {
  .stats-band {
    margin-top: -36px;
  }

  .stats-card {
    grid-template-columns: 1fr;
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid var(--stone-200);
  }

  .stat:last-child {
    border-bottom: none;
  }
}

.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

/* Grid items default to min-width:auto, which lets a real (large) hosted
   photo's intrinsic size push its column wider than the viewport on
   mobile — the page ends up a bit wider than the screen and everything
   looks slightly shifted/off-center. min-width:0 lets the column (and the
   img inside it, which is already width:100%) shrink to fit instead. */
.story-grid > * {
  min-width: 0;
}

.story-grid > img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

@media (max-width:900px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.mission-strip {
  background: var(--brass-100);
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.diff-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.diff-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--brass-500);
}

.diff-card svg {
  width: 22px;
  height: 22px;
  color: var(--brass-500);
  background: var(--brass-100);
  border-radius: 50%;
  padding: 14px;
  box-sizing: content-box;
  flex-shrink: 0;
}

.diff-card strong {
  display: block;
  margin-bottom: 4px;
  font-family: 'Work Sans';
  font-size: 1rem;
}

@media (max-width:700px) {
  .diff-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Services page ===== */
.services-hero {
  background: var(--graphite-900);
  color: #fff;
  padding: 130px 0 80px;
}

.services-hero h1 {
  color: #fff;
}

.services-hero p {
  color: var(--stone-200);
  max-width: 56ch;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 48px;
  counter-reset: step;
}

.step-card {
  position: relative;
  text-align: center;
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: 30px 20px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--brass-500);
}

.step-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--graphite-900);
  color: var(--brass-400);
  font-family: 'Big Shoulders Display';
  font-weight: 900;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

@media (max-width:900px) {
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
}

.faq-list {
  max-width: 820px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item:hover {
  border-color: var(--brass-500);
}

.faq-item.open {
  border-color: var(--brass-500);
  box-shadow: var(--shadow-1);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: 'Work Sans';
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--graphite-900);
}

.faq-q svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform .22s ease;
  color: var(--brass-500);
}

.faq-item.open .faq-q svg {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}

.faq-a-inner {
  padding: 0 22px 22px;
  color: var(--graphite-700);
  max-width: 70ch;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

/* ===== Listings page ===== */
.listings-hero {
  padding: 64px 0 40px;
  background: var(--stone-100);
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 36px;
}

.listing-card {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* Grid items default to min-width:auto — without this, a real hosted
     photo's intrinsic size can force this card's column (and the whole
     page) wider than the mobile viewport, which reads as the image being
     "too wide"/shifted/not centered. */
  min-width: 0;
}

.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--stone-300);
}

.listing-img-wrap {
  position: relative;
}

.listing-img {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--stone-200);
}

.listing-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.listing-card:hover .listing-img img {
  transform: scale(1.06);
}

/* Color carousel — only present when a card has more than one available
   material/color photo; stacked and cross-faded with the exact same
   timing as the homepage hero slideshow (1.6s fade, no zoom) so it reads
   as the same kind of transition instead of an abrupt swap.
   Selector is scoped as ".listing-img .listing-carousel-slide" (not just
   ".listing-carousel-slide") so it's specific enough to beat the plain
   ".listing-img img" rule above — otherwise that rule's `transition:
   transform .4s ease` (which doesn't mention opacity) wins the cascade
   and opacity changes snap instantly instead of fading.
   Transition lists both opacity AND transform (not just opacity) for the
   same reason in reverse: since this rule now wins the whole `transition`
   property on carousel slides, leaving transform out of it meant the
   hover zoom (which animates transform) had no transition of its own to
   fall back on and snapped instantly instead of easing in like it does
   on non-carousel cards. */
.listing-img .listing-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease, transform .4s ease;
}

.listing-img .listing-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .listing-img .listing-carousel-slide {
    transition: opacity .3s ease, transform .4s ease;
  }
}

.listing-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.listing-carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.listing-carousel-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.listing-body {
  padding: 20px 22px 24px;
}

.listing-card h3 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}

.listing-body p {
  font-size: 0.9rem;
  color: var(--graphite-700);
  margin-bottom: 14px;
}

.listing-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brass-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .18s ease;
}

.listing-cta:hover {
  color: var(--graphite-900);
}

.listing-cta svg {
  width: 14px;
  height: 14px;
}

@media (max-width:900px) {
  .listing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:600px) {
  .listing-grid {
    grid-template-columns: 1fr;
  }
}

.no-results {
  display: block;
  text-align: center;
  padding: 60px 20px;
  color: var(--graphite-700);
}

/* ===== Contact page ===== */
.contact-hero {
  background: var(--graphite-900);
  color: #fff;
  padding: 64px 0 70px;
}

.contact-hero h1 {
  color: #fff;
}

.contact-hero p {
  color: var(--stone-200);
  max-width: 56ch;
}

.contact-offer-note {
  background: var(--stone-50);
  border-left: 3px solid var(--brass-500);
  padding: 14px 18px;
  margin: 16px 0 24px;
  font-size: 0.9rem;
  color: var(--graphite-700);
}

/* ===== Legal pages (date-firma, confidentialitate, cookie-uri) ===== */
.legal-hero {
  background: var(--graphite-900);
  color: #fff;
  padding: 64px 0 56px;
}

.legal-hero h1 {
  color: #fff;
}

.legal-section {
  padding: 64px 0 96px;
}

.legal-content {
  max-width: 68ch;
}

.legal-content > *:first-child {
  margin-top: 0;
}

.legal-content h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-top: 1.5em;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p {
  color: var(--graphite-700);
  font-size: 1.02rem;
}

.legal-content ul {
  padding-left: 1.2em;
  margin: 0 0 1em 0;
  color: var(--graphite-700);
  font-size: 1.02rem;
}

.legal-content strong {
  color: var(--graphite-900);
}

.legal-cta {
  margin-top: 48px;
  padding: 20px 24px;
  background: var(--stone-100);
  border-left: 3px solid var(--brass-500);
  font-size: 0.95rem;
  color: var(--graphite-700);
}

.legal-cta a {
  color: var(--brass-500);
  font-weight: 600;
}

.oferta-disclaimer,
.contact-privacy-note {
  font-size: 0.78rem;
  color: var(--graphite-700);
  margin-top: 16px;
}

.oferta-disclaimer a,
.contact-privacy-note a {
  color: var(--brass-500);
  text-decoration: underline;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact-info-list {
  list-style: none;
  margin: 32px 0;
  padding: 0;
}

.contact-info-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--stone-200);
}

.contact-info-list li svg {
  width: 22px;
  height: 22px;
  color: var(--brass-500);
  flex-shrink: 0;
}

.contact-info-list li strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--graphite-700);
  margin-bottom: 3px;
}

/* ===== Product specs (single-listing.php). Scoped separately from
   .contact-info-list so the Contact page is untouched. */
/* Wraps the specs card + CTA button so they line up to the exact same
   width — inline-flex shrinks the group to its widest child (usually the
   button's text), and align-items:stretch makes the other child (the
   specs card) match that same width instead of hugging its own, narrower
   content. */
.product-cta-group {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin: 32px 0;
}

/* Phone mode: the story-grid column is already full width (it drops to
   one column below 900px — see the .story-grid media query), so let this
   group fill it too instead of shrinking to its widest child's intrinsic
   size. inline-flex → flex makes it a normal block-level box, so it takes
   the full width of the column like the gallery image does; the existing
   align-items:stretch then stretches the spec cards and button to match. */
@media (max-width:900px) {
  .product-cta-group {
    display: flex;
  }
}

.product-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.product-spec-card {
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.product-spec-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brass-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-spec-icon svg {
  width: 18px;
  height: 18px;
  color: var(--brass-500);
}

.product-spec-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--graphite-700);
}

/* Dimensiuni card shows Lungime/Înălțime/Grosime as separate mini value/
   label pairs instead of one run-on string. */
.dims-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.dims-item {
  display: flex;
  flex-direction: column;
}

.dims-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--graphite-900);
}

.dims-key {
  font-size: 0.72rem;
  color: var(--graphite-700);
}

/* ===== Product gallery + material/color variant picker (single-listing.php) */
.product-gallery-main {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  /* Caps the photo's width on a big phone/tablet instead of letting it
     keep stretching with the viewport; past this it just stays centered. */
  max-width: 520px;
  margin: 0 auto;
}

.product-gallery-main img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* On desktop the story-grid is two columns side by side (see the
   .story-grid media query — it only stacks below 900px). align-self:stretch
   (scoped to this grid item only — .story-grid itself keeps
   align-items:start, so the About page is unaffected) makes the gallery
   column match the height of the text/spec-card column next to it,
   capped at 578px so a long description + several spec cards can't push
   it too tall. .product-gallery is flexed rather than just given
   height:100% so that on gate products with a thumbnail row
   (.product-photo-gallery), the thumbs keep their natural size and only
   the main photo grows to fill the rest. */
@media (min-width:901px) {
  .product-gallery {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .product-gallery-main {
    max-height: 578px;
    flex: 1 1 0%;
    min-height: 0;
  }

  .product-gallery-main img {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Material + Culoare now live in their own product-spec-card (see
   single-listing.php), same design as the Dimensiuni/Specificații cards
   next to it — the dot's fill color comes from the product's own
   "Culoare" ACF color-picker field via an inline style, not a fixed CSS
   rule, so any hex can be set from wp-admin. */
.variant-swatch-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* A darker, semi-transparent border (instead of a light inset ring) so
     the dot reads as a distinct circle no matter how close its fill color
     is to the card's own background — matters for a near-white color like
     "Alb", which would otherwise disappear. */
  border: 1.5px solid rgba(29, 27, 24, 0.22);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
}

/* Small note under a spec card (e.g. "example fitted — made to your own
   size" on gate products, which are custom-fabricated rather than sold
   off a fixed size list). */
.product-spec-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--graphite-700);
  opacity: 0.8;
}

/* Simple thumbnail gallery for porți metalice (custom-fabricated gates) —
   replaces the material/color variant picker used by garduri, since gates
   don't have a fixed color/size to pick from. Clicking a thumbnail just
   swaps the main image (see the data-photo-gallery handler in main.js). */
.product-photo-gallery {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1.5px solid var(--stone-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb:hover {
  border-color: var(--brass-500);
}

.photo-thumb.active {
  border-color: var(--brass-500);
  box-shadow: 0 0 0 1px var(--brass-500);
}

.map-embed {
  width: 100%;
  height: 280px;
  border: 0;
  border-radius: var(--radius-md);
  filter: grayscale(0.3) contrast(1.05);
}

.social-row {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.social-row a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--stone-300);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
}

.social-row a:hover {
  background: var(--graphite-900);
  border-color: var(--graphite-900);
  color: #fff;
}

.social-row svg {
  width: 19px;
  height: 19px;
}

/* ===== Footer ===== */
footer.site-footer {
  background: var(--graphite-900);
  color: var(--stone-200);
  padding: 72px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(248, 246, 241, 0.12);
}

.footer-logo {
  margin-bottom: 14px;
  line-height: 0;
}

.footer-logo img {
  max-width: 160px;
  height: auto;
}

.footer-col h4 {
  font-family: 'Work Sans';
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone-300);
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 11px;
}

.footer-col a:hover {
  color: var(--brass-400);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-top: 26px;
  font-size: 0.82rem;
  color: var(--stone-300);
}

.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.74rem;
}

.footer-legal a {
  color: var(--stone-300);
  opacity: 0.65;
}

.footer-legal a:hover {
  color: var(--brass-400);
  opacity: 1;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(248, 246, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

@media (max-width:760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid .footer-col:first-child {
    grid-column: 1/-1;
  }
}

@media (max-width:480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 2px;
}

/* ===== Vikka form styling — opt-in via Fluent Forms' own Advanced
   Options, not a global override of every field on the site.

   How to apply, per field, in the Fluent Forms builder:
   - Text/Email/Phone/Textarea/Select fields: Advanced Options -> Container
     Class -> add "vikka-field"
   - The Submit Button field: Advanced Options -> Element Class -> add
     "vikka-submit-btn"

   Fields that don't get one of these classes are untouched by this CSS —
   no site-wide !important sweep.

   Required asterisks: don't fight those in CSS. Turn them off (or
   reposition them) at Settings & Integrations -> Settings -> Form Layout
   -> Asterisk Position -> None, per form. That's a real Fluent Forms
   setting, not a CSS hack. */

.ff-el-group.vikka-field .ff-el-input--label label {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graphite-900);
  margin-bottom: 8px;
  display: inline-block;
}

.ff-el-group.vikka-field .ff-el-form-control {
  border: 1.5px solid var(--stone-300);
  background-color: var(--stone-50);
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--graphite-900);
  width: 100%;
  box-sizing: border-box;
}

.ff-el-group.vikka-field .ff-el-form-control::placeholder {
  color: var(--sky-500);
  opacity: 1;
}

.ff-el-group.vikka-field .ff-el-form-control:focus {
  border-color: var(--brass-500);
  outline: none;
}

/* Submit button. Fluent Forms writes each form's own button color as an
   inline <style> tag (from that form's Settings & Integrations -> Design
   tab), injected after this stylesheet — that beats a plain class on
   specificity, so the two color lines below are the one deliberate
   !important in this file. Cleanest fix if you'd rather have zero: set
   the button color to brass (#9C7B45) directly in each form's Design tab
   instead, then delete the !important here. */
.ff-btn-submit.vikka-submit-btn {
  font-size: 0.92rem;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
  line-height: normal;
  transition: transform .18s ease, background .18s ease;
  background: var(--brass-500) !important;
  color: var(--stone-50) !important;
}

.ff-btn-submit.vikka-submit-btn:hover {
  background: var(--brass-400) !important;
  transform: translateY(-2px);
}

/* Section titles inside the Oferta form. These come from a Custom HTML
   field per section (paste the matching snippet from OFERTA-FORM-SETUP.md
   into each Custom HTML field's content), not Fluent Forms' own Section
   Break field — that way the markup and class are ours, no need to guess
   or inspect what Fluent Forms renders internally. */
.vikka-section-title {
  display: block;
  margin-top: 34px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass-500);
  border-bottom: 2px solid var(--stone-300);
}

/* ===== Pagina "Cere ofertă" — look distinct de pagina Contact ===== */
.oferta-hero {
  background: var(--graphite-900);
  color: #fff;
  padding: 64px 0 56px;
}

.oferta-hero h1 {
  color: #fff;
  max-width: 22ch;
}

.oferta-hero p {
  color: var(--stone-200);
  max-width: 56ch;
}

.oferta-section {
  background: var(--stone-100);
  padding: 56px 0 88px;
}

/* Two-column layout: form card on the left, a sticky sidebar (how it
   works / trust badges / contact note) on the right — replaces the old
   single centered card with the 3-step strip stacked in the hero and the
   trust row + note stacked underneath it. */
.oferta-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width:900px) {
  .oferta-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.oferta-card {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  box-shadow: var(--shadow-2);
  padding: 40px 44px;
}

@media (max-width:600px) {
  .oferta-card {
    padding: 28px 22px;
  }
}

.oferta-selection-note {
  background: var(--stone-50);
  border-left: 3px solid var(--brass-500);
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 0.9rem;
  color: var(--graphite-700);
}

.oferta-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}

@media (max-width:900px) {
  .oferta-sidebar {
    position: static;
  }
}

.oferta-sidebar-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass-500);
  margin: 0 0 20px;
}

.oferta-steps-card,
.oferta-contact-card {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  padding: 26px 26px 6px;
}

.oferta-contact-card {
  padding: 24px 26px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.oferta-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oferta-steps-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 26px;
}

.oferta-steps-list li:last-child {
  padding-bottom: 20px;
}

.oferta-steps-list li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 2px;
  width: 1px;
  background: var(--stone-300);
}

.oferta-step-num {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--graphite-900);
  color: var(--brass-400);
  font-family: 'Work Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.oferta-step-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--graphite-800);
  padding-top: 4px;
}

.oferta-trust-card {
  list-style: none;
  margin: 0;
  padding: 22px 26px;
  background: var(--brass-100);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oferta-trust-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--graphite-800);
}

.oferta-trust-card svg {
  width: 18px;
  height: 18px;
  color: var(--brass-500);
  flex-shrink: 0;
}

.oferta-contact-card svg {
  width: 20px;
  height: 20px;
  color: var(--brass-500);
  flex-shrink: 0;
  margin-top: 2px;
}

.oferta-contact-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--graphite-700);
}

.oferta-contact-card a {
  color: var(--brass-500);
  font-weight: 600;
}