/* =========================================================================
   Components: reusable building blocks shared by several sections.
   ========================================================================= */

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-head__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 780px;
}

/* ---- Typography ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Brass hairline before the eyebrow. */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass-500);
}

.heading-1,
.heading-2,
.heading-3 {
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

.heading-1 {
  font-size: var(--heading-1-size);
  font-weight: 800;
  line-height: var(--heading-1-leading);
  letter-spacing: -0.02em;
}

.heading-2 {
  font-size: var(--heading-2-size);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.heading-3 {
  font-size: var(--text-2xl);
  line-height: 1.2;
}

:lang(ar) .heading-1,
:lang(ar) .heading-2 {
  letter-spacing: 0;
  line-height: 1.35;
}

.lead {
  max-width: 54ch;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 52px;
  padding-inline: 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-flow),
    border-color var(--dur-base) var(--ease-flow),
    color var(--dur-base) var(--ease-flow);
}

.btn .icon--dir {
  transition: transform var(--dur-base) var(--ease-flow);
}

.btn:hover .icon--dir { transform: translateX(4px); }
[dir="rtl"] .btn:hover .icon--dir { transform: scaleX(-1) translateX(4px); }

.btn--sm { height: 44px; padding-inline: 20px; font-size: 15px; }

.btn--primary { background: var(--rova-green-blue); color: var(--rova-white); }
.btn--primary:hover { background: var(--blue-700); color: var(--rova-white); }
.btn--primary:active { background: var(--blue-800); }

.btn--light { background: var(--rova-floral); color: var(--rova-oxford-blue); }
.btn--light:hover { background: var(--rova-white); color: var(--rova-oxford-blue); }

.btn--ghost-light { border-color: rgb(249 243 236 / 0.45); color: var(--rova-floral); }
.btn--ghost-light:hover { border-color: var(--rova-floral); background: rgb(249 243 236 / 0.08); color: var(--rova-floral); }

.btn--outline { border-color: var(--color-border-strong); background: var(--rova-white); color: var(--rova-oxford-blue); }
.btn--outline:hover { border-color: var(--rova-green-blue); color: var(--rova-green-blue); }

.btn--whatsapp { background: var(--whatsapp); color: var(--rova-white); }
.btn--whatsapp:hover { background: #1FBE5B; color: var(--rova-white); }

/* Small meta text inside a button ("PDF · 9 MB"). */
.btn__meta {
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
}

.arrow-link .icon--dir { transition: transform var(--dur-base) var(--ease-flow); }
.arrow-link:hover .icon--dir { transform: translateX(4px); }
[dir="rtl"] .arrow-link:hover .icon--dir { transform: scaleX(-1) translateX(4px); }

/* ---- Chips ---- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: var(--rova-colombia);
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 600;
}

.chip--gas {
  background: #F7E7BD;
  color: #7A5810;
}

/* Glass tag pinned on dark visuals (hero). */
.spec-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 14px;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
  background: rgb(249 243 236 / 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--rova-floral);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.spec-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-400);
}

/* Brass drop bullet list (distributors). */
.drop-list {
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-strong);
}

.drop-list li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.drop-list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  inset-inline-start: 0.2rem;
  width: 10px;
  height: 10px;
  border-radius: 50% 50% 50% 0;
  background: var(--brass-500);
  transform: rotate(-45deg);
}

/* Crop marks around a photo (quality lab). */
.marks {
  position: relative;
  padding: 10px;
}

.marks::before,
.marks::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--rova-jordy-blue);
  border-style: solid;
  opacity: 0.6;
}

.marks::before {
  top: 0;
  inset-inline-start: 0;
  border-width: 1px 0 0 1px;
}

.marks::after {
  bottom: 0;
  inset-inline-end: 0;
  border-width: 0 1px 1px 0;
}

[dir="rtl"] .marks::before { border-width: 1px 1px 0 0; }
[dir="rtl"] .marks::after { border-width: 0 0 1px 1px; }