/*
Theme Name: Vikka2
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;
  --ok-green: #4E6B4F;
  --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;
}

/* 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);
}

@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: 3/4;
  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);
}

.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) — modern card grid replacing
   the old plain divider-list, same spirit as the Oferta page redesign.
   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);
}

.product-gallery-main img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  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), and a full 3:4
   portrait image at real column width runs quite tall. That pushed the
   material/culoare picker below it far enough down that it needed a
   scroll to even notice — invisible on first load, unlike mobile where
   scrolling past it is already expected. Capping the height keeps the
   crop (object-fit:cover already set above) but keeps the picker close
   enough to the fold to actually be seen. */
@media (min-width:901px) {
  .product-gallery-main img {
    aspect-ratio: auto;
    height: min(640px, 60vh);
  }
}

.product-variant-picker {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.variant-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--graphite-700);
  margin-bottom: 8px;
}

.variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The native [hidden] attribute has the same specificity as the class rule
   above, and would otherwise lose to it since .variant-row comes later in
   the cascade — without this, a hidden color row (e.g. Marmură's, while
   Beton is selected) stays visible. */
.variant-row[hidden] {
  display: none;
}

.variant-btn {
  border: 1.5px solid var(--stone-300);
  background: var(--stone-50);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}

.variant-btn:hover {
  border-color: var(--brass-500);
}

.variant-btn.active {
  background: var(--graphite-900);
  border-color: var(--graphite-900);
  color: #fff;
}

/* Unchecked material (e.g. Beton not ticked in ACF for this product) —
   still shown so the visitor knows the option exists, just not for this
   product, rather than only ever showing whichever material is available. */
.variant-btn.disabled,
.variant-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background: var(--stone-100);
  border-color: var(--stone-200);
  color: var(--graphite-700);
}

.variant-btn.disabled:hover,
.variant-btn:disabled:hover {
  border-color: var(--stone-200);
}

.variant-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--stone-300);
  background: var(--stone-50);
  padding: 7px 16px 7px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--graphite-900);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.variant-swatch:hover {
  border-color: var(--brass-500);
}

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

.variant-swatch-dot {
  width: 16px;
  height: 16px;
  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 — critical for "Alb", which is nearly
     the same tone as the swatch button itself. */
  border: 1.5px solid rgba(29, 27, 24, 0.22);
  flex-shrink: 0;
}

/* Beton */
.variant-swatch-dot[data-culoare="natur"] {
  background: #C7C1B0;
}

.variant-swatch-dot[data-culoare="cappuccino"] {
  background: #A9795A;
}

.variant-swatch-dot[data-culoare="antracit"] {
  background: #33312B;
}

/* Marmură */
.variant-swatch-dot[data-culoare="alb"] {
  background: #FBFAF6;
}

.variant-swatch-dot[data-culoare="bej"] {
  background: #EAD9BC;
}

.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;
  padding-top: 26px;
  font-size: 0.82rem;
  color: var(--stone-300);
}

.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;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

: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;
}