/* ============================================================
   Vijas — consistent typography + glass cards with popping images
   Loaded after every legacy stylesheet, applies site-wide.
   ============================================================ */

:root {
  --v-ink: #0f1b3d;
  --v-ink-soft: #47547a;
  --v-brand: #1e3a5f;
  --v-brand-2: #3b6fa0;
  --v-gold: #c9a84c;
  --v-glass: rgba(255, 255, 255, 0.62);
  --v-glass-strong: rgba(255, 255, 255, 0.8);
  --v-radius: 20px;
  --v-shadow: 0 18px 45px rgba(15, 27, 61, 0.12);
  --v-shadow-hover: 0 30px 70px rgba(15, 27, 61, 0.22);
}

/* ---------------------------------------------- typography scale --- */
body,
body p,
body li,
body a,
body span,
body div {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .title, body .heading {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--v-ink);
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin-top: 0;
}

body h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; }
body h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
body h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
body h4 { font-size: 1.15rem; font-weight: 600; }
body h5 { font-size: 1.02rem; font-weight: 600; }
body h6 { font-size: .92rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

body p,
body li {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--v-ink-soft);
}
body small { font-size: .85rem; }

/* ------------------------------------------------- glass cards ------ */
.filter-item,
.gallery-single,
.service_section .box,
.manufacture-card,
.article-card,
.card,
.box.glass-card,
.v-card {
  position: relative;
  background: var(--v-glass) !important;
  backdrop-filter: blur(18px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  overflow: visible;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease;
  will-change: transform;
}

.filter-item:hover,
.gallery-single:hover,
.service_section .box:hover,
.manufacture-card:hover,
.article-card:hover,
.card:hover,
.v-card:hover {
  transform: translateY(-10px);
  background: var(--v-glass-strong) !important;
  box-shadow: var(--v-shadow-hover);
}

/* image pops out of the card on hover */
.filter-item img,
.gallery-single img,
.service_section .box img,
.manufacture-card img,
.article-card img,
.card img,
.v-card img {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease;
  transform-origin: center bottom;
  will-change: transform;
}

.filter-item:hover img,
.gallery-single:hover img,
.service_section .box:hover img,
.manufacture-card:hover img,
.article-card:hover img,
.card:hover img,
.v-card:hover img {
  transform: translateY(-14px) scale(1.09);
  filter: drop-shadow(0 22px 26px rgba(15, 27, 61, 0.28));
}

/* ------------------------------------------ product card text ------- */
.filter-items .filter-item {
  padding: 1.1rem 1.1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.filter-items .filter-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: .4rem;
}

/* title: fixed 2-line block so every card lines up */
.filter-items .filter-item h1,
.filter-items .filter-item h2,
.filter-items .filter-item h3,
.filter-items .filter-item h4,
.filter-items .filter-item .item-title,
.filter-items .filter-item b,
.filter-items .filter-item strong {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  color: var(--v-ink) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.filter-items .filter-item p,
.filter-items .filter-item span,
.filter-items .filter-item a:not(.btn) {
  font-size: .875rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--v-ink-soft) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* keep the card body pinned to the bottom so rows stay even */
.filter-items .filter-item > *:last-child { margin-top: auto !important; }

/* -------------------------------------------- section headings ------ */
.section-title,
.heading_container h2,
.title h1,
.title h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--v-ink) !important;
}

/* ------------------------------------------------- form controls ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .98rem !important;
  color: var(--v-ink) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(15, 27, 61, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(15, 27, 61, 0.06);
  backdrop-filter: blur(12px) saturate(140%);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder { color: rgba(71, 84, 122, .7) !important; }
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--v-brand-2) !important;
  box-shadow: 0 0 0 4px rgba(59, 111, 160, .16) !important;
}

/* floating labels + icons on the contact form */
.input-wrap label,
.input-wrap .icon {
  color: var(--v-ink-soft) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.input-wrap input:focus ~ label,
.input-wrap textarea:focus ~ label,
.input-wrap input:valid ~ label,
.input-wrap textarea:valid ~ label { color: var(--v-brand-2) !important; }