/* ==========================================================================
   ODEN-STEEL COMPONENT / SERVICE TRUST
   --------------------------------------------------------------------------
   Root → Layout → Intro → Items → Marker → Content → Hover → Closing
   → Responsive → Utilities
   ========================================================================== */

@import url("../../css/utilities/layout.css");

/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

.service-trust {
  --trust-section-padding-y: var(--space-trust-section-y);
  --trust-item-padding-y: var(--space-trust-item-padding-y);
  --trust-item-padding-x: var(--space-3xl);
  --trust-item-inner-gap: var(--space-trust-item-inner-gap);
  --trust-marker-size: var(--fs-marker);
  --trust-marker-size-long: calc(var(--trust-marker-size) * 0.85);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 20% 8%, var(--color-trust-glow), transparent 34%),
    linear-gradient(
      180deg,
      var(--color-trust-bg-start) 0%,
      var(--color-trust-bg-mid) 52%,
      var(--color-trust-bg-end) 100%
    );
  color: var(--color-white);
  padding: var(--trust-section-padding-y) 0;
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.service-trust > .trust-item,
.service-trust__closing {
  width: min(100% - var(--space-6xl), var(--container-main));
  margin-inline: auto;
}

.service-trust > .trust-item {
  margin-bottom: var(--space-trust-item);
}

.service-trust__closing {
  margin-top: calc(var(--space-trust-closing) - var(--space-trust-item));
}

/* --------------------------------------------------------------------------
   Intro
   Width + horizontal centering: css/utilities/layout.css (.service-section-intro)
   -------------------------------------------------------------------------- */

.service-trust__eyebrow {
  margin: 0 0 var(--space-xl);
  color: var(--color-gold);
  font-size: var(--fs-eyebrow);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.service-trust__title {
  max-width: var(--trust-title-max-width);
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  letter-spacing: -0.055em;
  overflow-wrap: var(--text-wrap-display);
}

.service-trust__lead {
  max-width: var(--trust-lead-max-width);
  margin: var(--space-xl) 0 0;
  color: var(--color-text);
  font-size: var(--fs-body-lg);
  line-height: var(--line-height-body);
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */

.trust-item {
  position: relative;
  min-height: var(--trust-item-min-height);
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--trust-item-inner-gap);
  padding: var(--trust-item-padding-y) var(--trust-item-padding-x);
  border-radius: var(--radius-xl);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  background: var(--color-surface-glass);
  box-shadow: var(--elevation-none);
  /* Text + marker stay readable; decorative wash clipped via border-radius on ::before */
  overflow: visible;
  isolation: isolate;
  transition:
    border-color var(--duration-medium) var(--easing-standard),
    color var(--duration-medium) var(--easing-standard);
}

.trust-item--reverse {
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
}

.trust-item--reverse .trust-item__marker {
  order: 2;
}

.trust-item--reverse .trust-item__content {
  order: 1;
}

.trust-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      var(--color-trust-item-overlay-gold),
      transparent 44%
    ),
    radial-gradient(
      circle at 85% 20%,
      var(--color-trust-item-overlay-light),
      transparent 36%
    );
  opacity: 0;
  transition: opacity var(--duration-medium) var(--easing-standard);
}

/* --------------------------------------------------------------------------
   Marker
   -------------------------------------------------------------------------- */

.trust-item__marker {
  display: block;
  max-width: 100%;
  min-width: 0;
  color: var(--color-gold-soft);
  font-size: var(--trust-marker-size);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  user-select: none;
  transition: color var(--duration-medium) var(--easing-standard);
}

.trust-item__marker[data-marker-length="long"] {
  font-size: var(--trust-marker-size-long);
}

.trust-item--reverse .trust-item__marker[data-marker-length="long"] {
  transform-origin: right center;
}

/*
 * „IDŐBEN”: teljes szó + Ő ékezet a marker cellán belül.
 * Manrope Ő ink ≈ 1.37em — line-height 0.8/1 + overflow:hidden levágta az ékezetet
 * (vizuálisan „IDOBEN”-nek tűnt), a GSAP negatív x pedig a bal „I”-t.
 */
.trust-item__marker[data-marker="IDŐBEN"] {
  max-inline-size: 100%;
  font-size: clamp(4.25rem, 6.8vw, 8.5rem);
  line-height: 1.32;
  letter-spacing: -0.06em;
  padding-block: 0.06em;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.trust-item__content {
  max-width: var(--trust-content-max-width);
}

.trust-item__content h3 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--fs-heading);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.045em;
  overflow-wrap: var(--text-wrap-display);
}

.trust-item__content p {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   Hover
   -------------------------------------------------------------------------- */

@media (hover: hover) {
  .trust-item:hover {
    border-color: var(--color-gold-border-hover);
  }

  .trust-item:hover::before {
    opacity: 1;
  }

  .trust-item:hover .trust-item__marker {
    color: var(--color-gold-soft-hover);
  }
}

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */

.service-trust__closing {
  text-align: center;
}

.service-trust__line {
  width: var(--trust-line-width);
  height: 2px;
  margin: 0 auto var(--space-xl);
  background: linear-gradient(
    90deg,
    var(--color-gold-line-fade),
    var(--color-gold),
    var(--color-gold-line-fade)
  );
}

.service-trust__closing p {
  max-width: var(--trust-closing-max-width);
  margin: 0 auto;
  color: var(--color-text-soft);
  font-size: var(--fs-closing);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  letter-spacing: -0.055em;
  overflow-wrap: var(--text-wrap-display);
}

.service-trust__closing span {
  display: block;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .service-trust {
    --trust-section-padding-y: var(--space-trust-section-y-tablet);
    --trust-item-padding-y: var(--space-trust-item-padding-y-tablet);
    --trust-item-padding-x: 2.625rem;
    --trust-item-inner-gap: var(--space-xl);
    --trust-marker-size: var(--fs-marker-tablet);
  }

  .service-trust > .trust-item,
  .service-trust__closing {
    width: calc(100% - var(--space-4xl));
  }

  .service-trust > .trust-item {
    margin-bottom: var(--space-xl);
  }

  .service-trust__closing {
    margin-top: calc(8.125rem - var(--space-xl));
  }

  .service-trust__title {
    font-size: var(--fs-title-tablet);
  }

  .service-trust__lead {
    max-width: var(--trust-lead-max-width-tablet);
    font-size: var(--fs-body-tablet);
  }

  .trust-item,
  .trust-item--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .trust-item--reverse .trust-item__marker,
  .trust-item--reverse .trust-item__content {
    order: unset;
  }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .service-trust {
    --trust-section-padding-y: var(--space-trust-section-y-mobile);
    --trust-item-padding-y: var(--space-xl);
    --trust-item-padding-x: var(--space-xl);
    --trust-item-inner-gap: var(--space-lg);
    --trust-marker-size: var(--fs-marker-mobile);
    --trust-marker-size-long: calc(var(--trust-marker-size) * 0.85);
  }

  .trust-item__marker[data-marker="IDŐBEN"] {
    font-size: clamp(2.75rem, 12.5vw, 4.25rem);
    line-height: 1.28;
    letter-spacing: -0.05em;
  }

  .service-trust > .trust-item,
  .service-trust__closing {
    width: calc(100% - var(--space-2xl));
  }

  .service-trust > .trust-item {
    margin-bottom: var(--space-lg);
  }

  .service-trust__closing {
    margin-top: calc(5.5rem - var(--space-lg));
  }

  .service-trust__eyebrow {
    margin-bottom: var(--space-lg);
    font-size: var(--fs-eyebrow-mobile);
    letter-spacing: 0.24em;
  }

  .service-trust__title {
    font-size: var(--fs-title-mobile);
  }

  .service-trust__lead {
    max-width: 100%;
    margin-top: var(--space-lg);
    font-size: var(--font-size-body-lg);
    line-height: 1.65;
  }

  .trust-item,
  .trust-item--reverse {
    border-radius: var(--radius-lg);
  }

  .trust-item__marker {
    color: var(--color-gold-marker-mobile);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .trust-item__content h3 {
    font-size: var(--fs-heading-sm);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .trust-item__content p {
    margin-top: var(--space-md);
    color: var(--color-text);
    font-size: var(--fs-body);
  }

  .service-trust__line {
    width: var(--trust-line-width-mobile);
    margin-bottom: var(--space-xl);
  }

  .service-trust__closing p {
    font-size: var(--fs-closing-mobile);
    line-height: var(--line-height-display);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Landscape
   -------------------------------------------------------------------------- */

@media (max-width: 767px) and (max-height: 700px) {
  .service-trust {
    --trust-section-padding-y: var(--space-trust-section-y-mobile-landscape);
    --trust-marker-size: var(--fs-marker-mobile-landscape);
  }

  .service-trust__title {
    font-size: var(--fs-title-mobile-landscape);
  }
}

/* --------------------------------------------------------------------------
   Utilities — Touch + Reduced Motion
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .trust-item:hover {
    border-color: var(--color-border-subtle);
  }

  .trust-item:hover::before {
    opacity: 0;
  }

  .trust-item:hover .trust-item__marker {
    color: var(--color-gold-soft);
  }

  .trust-item__marker {
    color: var(--color-gold-marker-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-trust__intro,
  .service-trust__closing,
  .service-trust > .trust-item,
  .trust-item__marker,
  .trust-item__content h3,
  .trust-item__content p {
    opacity: 1 !important;
    transform: none !important;
  }

  .trust-item::before {
    transition: none;
  }
}