/* ==========================================================================
   Quotation Formats — 05 Key Components ("Key Components of a Quotation Format")
   Paste into the block's WP Coder shortcode (CSS tab), or WPCode > CSS Snippet.
   Fully scoped to .vyq-key-components — safe to load on any page, in any order.
   ========================================================================== */

/* --- Design tokens (scoped: they never leak to the rest of the page) ------ */
.vyq-key-components {
  --vyq-primary: #ED1A3B !important;
  --vyq-primary-light: #FDECEF !important;
  --vyq-text: #1F2937 !important;
  --vyq-text-light: #6B7280 !important;
  --vyq-border: #E5E7EB !important;
  --vyq-white: #FFFFFF !important;
  --vyq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  --vyq-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Base ----------------------------------------------------------------- */
.vyq-key-components,
.vyq-key-components * {
  box-sizing: border-box !important;
  /* Reset only has to beat the theme defaults. Equal specificity to the
     rules below, so it must stay first in the file — they re-apply the
     spacing this block actually wants. */
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Classic-theme group wrapper ------------------------------------------
   On a classic theme (Sydney), WordPress wraps every group block's children in
   an extra .wp-block-group__inner-container div at render time — it is not in
   the pasted markup. That wrapper would be the only child of our grid/flex
   containers, so every layout below would collapse to one column.
   display: contents takes it out of the layout without removing it. */
.vyq-key-components .wp-block-group__inner-container {
  display: contents !important;
}

.vyq-key-components {
  font-family: var(--vyq-font) !important;
  color: var(--vyq-text) !important;
  line-height: 1.6 !important;
  background: var(--vyq-white) !important;
  padding: 56px 0 !important;
}

.vyq-key-components-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* --- Section head --------------------------------------------------------- */
.vyq-key-components-head {
  text-align: center !important;
  margin-bottom: 36px !important;
}

.vyq-key-components-eyebrow {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vyq-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 8px !important;
}

.vyq-key-components-title {
  font-family: var(--vyq-font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--vyq-text) !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

.vyq-key-components-sub {
  font-size: 15px !important;
  color: var(--vyq-text-light) !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* --- Cards ---------------------------------------------------------------- */
.vyq-key-components-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.vyq-key-components-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: var(--vyq-white) !important;
  border: 1px solid var(--vyq-border) !important;
  border-radius: 12px !important;
  padding: 22px !important;
  transition: all 0.2s ease !important;
}

.vyq-key-components-item:hover {
  box-shadow: var(--vyq-shadow-md) !important;
  border-color: var(--vyq-primary-light) !important;
}

/* The icon tile is a ::before on the card, keyed off the card's modifier class.
   background-image (not content: url) so the 40px tile can hold a 20px icon. */
.vyq-key-components-item::before {
  content: '' !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background-color: var(--vyq-primary-light) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
}

.vyq-key-components-item--business::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ED1A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21'/%3E%3C/svg%3E") !important;
}

.vyq-key-components-item--client::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ED1A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.1a7.5 7.5 0 0115 0'/%3E%3C/svg%3E") !important;
}

.vyq-key-components-item--number::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ED1A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75'/%3E%3C/svg%3E") !important;
}

.vyq-key-components-item--items::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ED1A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z'/%3E%3C/svg%3E") !important;
}

.vyq-key-components-item--vat::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ED1A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E") !important;
}

.vyq-key-components-item--terms::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ED1A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08'/%3E%3C/svg%3E") !important;
}

.vyq-key-components-body {
  min-width: 0 !important;
}

.vyq-key-components-item-title {
  font-family: var(--vyq-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--vyq-text) !important;
  margin-bottom: 4px !important;
}

.vyq-key-components-item-text {
  font-size: 13px !important;
  color: var(--vyq-text-light) !important;
  line-height: 1.55 !important;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 992px) {
  .vyq-key-components-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .vyq-key-components {
    padding: 36px 0 !important;
  }
  .vyq-key-components-inner {
    padding: 0 16px !important;
  }
  .vyq-key-components-title {
    font-size: 22px !important;
  }
  .vyq-key-components-grid {
    grid-template-columns: 1fr !important;
  }
}