/**
 * KSquare Gems - Trust Block Styles
 * Reusable 4-column trust section with icons, titles, descriptions, and CTAs
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   Trust Block Container
   ========================================================================== */

.ksq-trust-block {
  width: 100%;
  overflow: hidden;
  margin-top: 0;
}

/* PDP specific - spacing above and below */
.ksq-trust-block--pdp {
  margin-top: 100px;
  margin-bottom: 60px;
}

.ksq-trust-block__container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* ==========================================================================
   Trust Block Card
   ========================================================================== */

.ksq-trust-block__card {
  flex: 1;
  width: 360px;
  min-height: 302px;
  position: relative;
  box-sizing: border-box;

  /* Figma styles - 2px golden gradient border */
  border: 2px solid transparent;
  border-image: linear-gradient(
      180deg,
      #ae8625 0%,
      #f7ef8a 33%,
      #d2ac47 66%,
      #edc967 100%
    )
    1;

  /* Subtle gradient background from Figma */
  background:
    linear-gradient(
      180deg,
      rgba(174, 134, 37, 0.02) 0%,
      rgba(247, 239, 138, 0.02) 33%,
      rgba(210, 172, 71, 0.02) 66%,
      rgba(237, 201, 103, 0.02) 100%
    ),
    #fff;
}

/* Remove double borders between cards */
.ksq-trust-block__card:not(:first-child) {
  border-left: none;
}

.ksq-trust-block__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  gap: 20px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1; /* Above the ::before background */
}

/* ==========================================================================
   Trust Block Icon
   ========================================================================== */

.ksq-trust-block__icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Do NOT alter SVG - use as uploaded */
.ksq-trust-block__icon svg {
  width: 50px;
  height: 50px;
}

/* ==========================================================================
   Trust Block Content
   ========================================================================== */

.ksq-trust-block__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 280px;
}

.ksq-trust-block__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ==========================================================================
   Trust Block Title
   ========================================================================== */

.ksq-trust-block__title {
  width: 100%;
  margin: 0;
  padding: 0;

  /* Typography from Figma */
  font-family: "Roboto Flex", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  color: #111111;
}

/* ==========================================================================
   Trust Block Description
   ========================================================================== */

.ksq-trust-block__description {
  width: 100%;
  margin: 0;
  padding: 0;

  /* Typography from Figma */
  font-family: "Roboto Flex", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #666666;
}

/* ==========================================================================
   Trust Block CTA Link
   ========================================================================== */

.ksq-trust-block__cta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.ksq-trust-block__cta:hover {
  opacity: 0.8;
}

.ksq-trust-block__cta-text {
  /* Typography from Figma */
  font-family: "Roboto Flex", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  text-align: center;

  /* Dotted underline as per Figma */
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;

  color: #ff5100;
}

.ksq-trust-block__cta-arrow {
  width: 10px;
  height: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Arrow SVG size: 10x8px as per Figma */
.ksq-trust-block__cta-arrow svg {
  width: 10px !important;
  height: 8px !important;
  min-width: 10px;
  min-height: 8px;
  max-width: 10px;
  max-height: 8px;
}

.ksq-trust-block__cta:hover .ksq-trust-block__cta-arrow {
  transform: translateX(2px);
  transition: transform 0.2s ease;
}

@media (max-width: 1480px) {
  .ksq-trust-block__container {
    padding: 0 20px;
  }
}

/* ==========================================================================
   Responsive - Large Desktop (1440px+)
   ========================================================================== */

@media (min-width: 1441px) {
  .ksq-trust-block__container {
    /* Keep max-width at 1440px */
  }
}

/* ==========================================================================
   Responsive - Desktop (1200px - 1440px)
   ========================================================================== */

@media (max-width: 1440px) {
  .ksq-trust-block__card {
    width: auto;
    min-height: 280px;
  }

  .ksq-trust-block__card-inner {
    padding: 32px 24px;
    gap: 32px;
  }
}

/* ==========================================================================
   Responsive - Tablet Landscape (992px - 1200px)
   ========================================================================== */

@media (max-width: 1200px) {
  .ksq-trust-block__container {
    flex-wrap: wrap;
  }

  .ksq-trust-block__card {
    flex: 0 0 50%;
    width: 50%;
    min-height: 260px;
  }

  /* 3rd card is first of second row - restore left border */
  .ksq-trust-block__card:nth-child(3) {
    border-left: 2px solid transparent;
  }

  /* Bottom row cards - remove top border since row above has bottom border */
  .ksq-trust-block__card:nth-child(n + 3) {
    border-top: none;
  }

  .ksq-trust-block__card-inner {
    padding: 32px 24px;
    gap: 24px;
  }

  .ksq-trust-block__title {
    font-size: 17px;
    line-height: 20px;
  }

  .ksq-trust-block__description {
    font-size: 13px;
    line-height: 19px;
  }

  .ksq-trust-block__cta-text {
    font-size: 15px;
  }
}

/* ==========================================================================
   Responsive - Tablet Portrait (768px - 992px)
   ========================================================================== */

@media (max-width: 992px) {
  .ksq-trust-block__card {
    min-height: 240px;
  }

  .ksq-trust-block__card-inner {
    padding: 28px 20px;
    gap: 20px;
  }

  .ksq-trust-block__content {
    gap: 16px;
  }

  .ksq-trust-block__title {
    font-size: 16px;
    line-height: 19px;
  }

  .ksq-trust-block__description {
    font-size: 13px;
    line-height: 18px;
  }

  .ksq-trust-block__cta-text {
    font-size: 14px;
    line-height: 17px;
  }
}

/* ==========================================================================
   Responsive - Mobile Landscape (576px - 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* 20px space on all sides for mobile */
  .ksq-trust-block {
    padding: 20px;
  }

  .ksq-trust-block--pdp {
    margin-top: 60px;
    margin-bottom: 40px;
  }

  .ksq-trust-block__card {
    flex: 0 0 100%;
    width: 100%;
    min-height: auto;
    border-left: 2px solid transparent; /* Restore left border on mobile */
  }

  /* Stacked cards - remove top border since card above has bottom border */
  .ksq-trust-block__card:not(:first-child) {
    border-top: none;
  }


  .ksq-trust-block__card-inner {
    flex-direction: row;
    align-items: flex-start;
    padding: 24px 20px;
    gap: 16px;
  }

  .ksq-trust-block__icon {
    flex-shrink: 0;
  }

  .ksq-trust-block__content {
    align-items: flex-start;
    gap: 12px;
    max-width: none;
  }

  .ksq-trust-block__text {
    align-items: flex-start;
    gap: 6px;
  }

  .ksq-trust-block__title {
    text-align: left;
    font-size: 16px;
    line-height: 19px;
  }

  .ksq-trust-block__description {
    text-align: left;
    font-size: 13px;
    line-height: 18px;
  }

  .ksq-trust-block__cta-text {
    font-size: 14px;
    line-height: 17px;
  }
}

/* ==========================================================================
   Responsive - Mobile Portrait (< 576px)
   ========================================================================== */

@media (max-width: 576px) {
  .ksq-trust-block--pdp {
    margin-top: 40px;
    margin-bottom: 30px;
  }

  .ksq-trust-block__card-inner {
    padding: 20px 16px;
    gap: 14px;
  }

  .ksq-trust-block__title {
    font-size: 15px;
    line-height: 18px;
  }

  .ksq-trust-block__description {
    font-size: 12px;
    line-height: 17px;
  }

  .ksq-trust-block__cta-text {
    font-size: 13px;
    line-height: 16px;
  }
}

/* ==========================================================================
   Responsive - Mobile Small (< 480px) - Figma 2x2 Grid Layout
   Based on Figma design: 360px viewport, 320px content width
   Cards: 160px width each in 2-column grid
   ========================================================================== */

@media (max-width: 480px) {
  .ksq-trust-block {
    padding: 20px;
  }

  .ksq-trust-block--pdp {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  /* Container with outer border using gradient */
  .ksq-trust-block__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: auto;
    max-width: none;
    margin: 0;
    gap: 0;
    /* Reset the 20px side padding inherited from the 1480px block - with the
       border drawn here it would inset the cards from their own frame */
    padding: 0;
    /* Outer border with golden gradient */
    border: 2px solid #d4af37;
    background:
      linear-gradient(
        180deg,
        rgba(174, 134, 37, 0.02) 0%,
        rgba(247, 239, 138, 0.02) 33%,
        rgba(210, 172, 71, 0.02) 66%,
        rgba(237, 201, 103, 0.02) 100%
      ),
      #ffffff;
  }

  /* Reset all card borders and set individual borders for grid effect */
  .ksq-trust-block__card {
    flex: none;
    width: 100%;
    min-height: auto;
    box-sizing: border-box;
    border: none;
    border-image: none;
    background: transparent;
  }

  /* Top-left card (1st) - right and bottom border */
  .ksq-trust-block__card:nth-child(1) {
    border-right: 1px solid #d4af37;
    border-bottom: 1px solid #d4af37;
  }

  /* Top-right card (2nd) - bottom border only */
  .ksq-trust-block__card:nth-child(2) {
    border-bottom: 1px solid #d4af37;
  }

  /* Bottom-left card (3rd) - right border only.
     border-left is explicitly cleared because the 1200px block sets a 2px
     left border on this card for its 2-column layout, which would otherwise
     survive here and draw a doubled line inside the container edge. */
  .ksq-trust-block__card:nth-child(3) {
    border-left: none;
    border-right: 1px solid #d4af37;
  }

  /* Bottom-right card (4th) - no inner borders */
  .ksq-trust-block__card:nth-child(4) {
    border: none;
  }

  .ksq-trust-block__card-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 12px;
    gap: 20px;
    height: 100%;
    min-height: 180px;
  }

  /* Icon size: 32px per Figma */
  .ksq-trust-block__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .ksq-trust-block__icon svg {
    width: 32px;
    height: 32px;
  }

  .ksq-trust-block__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    flex: 1;
  }

  .ksq-trust-block__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  /* Title: 12px/14px per Figma */
  .ksq-trust-block__title {
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    font-weight: 600;
    color: #111111;
  }

  /* Description: 10px/12px per Figma */
  .ksq-trust-block__description {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    font-weight: 400;
    color: #666666;
  }

  /* CTA: 10px/12px per Figma */
  .ksq-trust-block__cta {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
  }

  .ksq-trust-block__cta-text {
    font-family: "Roboto Flex", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    color: #ff5100;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: none;
    text-decoration-color: #ffc2a5;
    text-decoration-thickness: auto;
    text-underline-offset: 2.5px;
    text-underline-position: from-font;
  }

  /* Arrow: 6x5px per Figma */
  .ksq-trust-block__cta-arrow {
    width: 6px;
    height: 5px;
  }

  .ksq-trust-block__cta-arrow svg {
    width: 6px !important;
    height: 5px !important;
    min-width: 6px;
    min-height: 5px;
    max-width: 6px;
    max-height: 5px;
  }
}

/* ==========================================================================
   Stacked Cards - Left Border (481px - 768px)
   Cards stack full-width in this range, so each one keeps the golden left
   border. Bounded below at 481px because the 2x2 grid layout under 480px
   draws its own borders - without the min-width this leaks into the grid
   and doubles the left edge on cards 2 and 3.
   ========================================================================== */

@media (max-width: 768px) and (min-width: 481px) {
  .ksq-trust-block__card:not(:first-child) {
    border-left: 2px solid transparent;
    border-image: linear-gradient(
        180deg,
        #ae8625 0%,
        #f7ef8a 33%,
        #d2ac47 66%,
        #edc967 100%
      )
      1;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .ksq-trust-block {
    page-break-inside: avoid;
  }

  .ksq-trust-block__card {
    background: #ffffff !important;
    border: 2px solid #e0e0e0;
  }

  .ksq-trust-block__cta {
    text-decoration: underline;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ksq-trust-block__cta,
  .ksq-trust-block__cta-arrow {
    transition: none;
  }

  .ksq-trust-block__cta:hover .ksq-trust-block__cta-arrow {
    transform: none;
  }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
  .ksq-trust-block__card {
    background: #ffffff;
    border: 4px solid #111111;
  }

  .ksq-trust-block__title {
    color: #000000;
  }

  .ksq-trust-block__description {
    color: #333333;
  }

  .ksq-trust-block__cta-text {
    color: #cc4400;
  }
}

/* ==========================================================================
   Dark Mode Support (Future)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
}