/* ============================================
   TRY IT FREE
   Hero-style guarantee section with a contained content
   card sitting over a full-bleed background image.
   The card uses the family card silhouette (hairline
   border, radius, surface bg, generous padding) so the
   text stays readable regardless of the photograph
   beneath it. Editor controls placement (left / center
   / right) and surface style (solid / translucent).
   Swiss-Grid Editorial × Mediterranean warmth.
   ============================================ */

.tif {
  position: relative;
  overflow: hidden;
}

/* ─── Full-bleed background image ─────────────────────── */
.tif__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.tif__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tif__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--overlay-color, #000);
  opacity: var(--overlay-opacity, 0.35);
}

.tif > .container {
  position: relative;
  z-index: 2;
}

/* ─── Card placement ──────────────────────────────────── */
.tif__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: 720px;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--clr-surface, #fdfcfa);
  border: 1px solid var(--clr-border-light, rgba(60, 66, 46, 0.15));
  border-radius: var(--radius-lg);
  /* Soft elevation against the background image */
  box-shadow: 0 18px 50px rgba(60, 66, 46, 0.12);
  overflow: hidden;
}

@media (min-width: 768px) {
  .tif__card {
    padding: var(--space-2xl) var(--space-2xl);
    max-width: 780px;
  }
}

@media (min-width: 1024px) {
  .tif__card {
    padding: var(--space-3xl) var(--space-3xl);
    gap: var(--space-xl);
    max-width: 880px;
  }
}

/* When a card image is present, the card grows wider and switches to
   a 2-column grid (content | 4:5 image). The image bleeds to the
   card's right and bottom edges so it reads as a unified surface
   rather than a column-with-padding. */
.tif__card--has-image {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  /* Reset padding — content gets its own padding so the image can
     bleed to the card edges. */
  padding: 0;
}

.tif__card--has-image .tif__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-xl);
  min-width: 0;
}

@media (min-width: 768px) {
  .tif__card--has-image {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    max-width: 980px;
  }
  .tif__card--has-image .tif__content {
    padding: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .tif__card--has-image {
    max-width: 1100px;
  }
  .tif__card--has-image .tif__content {
    padding: var(--space-3xl) var(--space-3xl);
    gap: var(--space-xl);
    justify-content: center;
  }
}

/* When no image, .tif__content is invisible — its children flow
   directly inside the card (the original flex-column layout). */
.tif__card:not(.tif__card--has-image) .tif__content {
  display: contents;
}

/* ─── Card image — 4:5 portrait, matches product image ratio ──── */
.tif__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(60, 66, 46, 0.06);
  /* On mobile (stacked), the image sits at the top of the card
     before the content. order is set via flex/grid order below. */
}

@media (max-width: 767px) {
  .tif__image {
    /* Move image to the top on mobile via grid order */
    order: -1;
  }
}

.tif__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  /* On desktop the image stretches to match the content column's
     height, so the right edge of the card is fully filled. The 4:5
     aspect-ratio still holds at the column's natural width. */
  .tif__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
  }
  .tif__image img {
    position: absolute;
    inset: 0;
  }
}

/* Alignment variants — set on the section root */
.tif--card-center .tif__card { margin-inline: auto; }
.tif--card-left .tif__card { margin-inline: 0 auto; }
.tif--card-right .tif__card { margin-inline: auto 0; }

@media (min-width: 768px) {
  .tif--card-left .tif__card { margin-left: 0; margin-right: auto; }
  .tif--card-right .tif__card { margin-left: auto; margin-right: 0; }
}

/* Translucent variant — frosted card for atmospheric backgrounds */
.tif__card--translucent {
  background: rgba(253, 252, 250, 0.86);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border-color: rgba(253, 252, 250, 0.6);
}

/* ─── Card content ────────────────────────────────────── */
.tif__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-brand-alt, #6a6a52);
  line-height: 1.3;
}

.tif__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

@media (min-width: 1024px) {
  .tif__eyebrow { font-size: 13px; }
}

.tif__heading {
  margin: 0;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  color: var(--clr-primary);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
}

.tif__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
}

.tif__heading-line2 {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.85em;
  line-height: 1.05;
  margin-top: 4px;
}

.tif__body {
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
  max-width: 50ch;
}

.tif__body p { margin: 0 0 var(--space-sm); }
.tif__body p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .tif__body { font-size: var(--font-size-lg); }
}

/* ─── CTA + assurance ─────────────────────────────────── */
.tif__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.tif__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px var(--space-2xl);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tif__cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.tif__cta:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

.tif__assurance {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .tif__assurance { font-size: 12px; }
}

/* ============================================
   DARK BACKGROUND VARIANT — bg-accent-dark
   ============================================ */
.tif.bg-accent-dark .tif__card {
  background: rgba(253, 252, 250, 0.96);
  border-color: rgba(60, 66, 46, 0.18);
}

.tif.bg-accent-dark .tif__card--translucent {
  background: rgba(31, 38, 21, 0.72);
  border-color: rgba(253, 252, 250, 0.18);
}

.tif.bg-accent-dark .tif__card--translucent .tif__eyebrow {
  color: var(--clr-brand-accent);
}

.tif.bg-accent-dark .tif__card--translucent .tif__heading-line1 {
  color: var(--clr-text-inverse);
}

.tif.bg-accent-dark .tif__card--translucent .tif__heading-line2 {
  color: var(--clr-brand-accent);
}

.tif.bg-accent-dark .tif__card--translucent .tif__body {
  color: var(--clr-text-inverse);
  opacity: 0.85;
}

.tif.bg-accent-dark .tif__card--translucent .tif__cta {
  background: var(--clr-text-inverse);
  color: var(--clr-primary);
}

.tif.bg-accent-dark .tif__card--translucent .tif__assurance {
  color: var(--clr-text-inverse);
  opacity: 0.6;
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .tif__cta {
    transition: none;
  }
  .tif__cta:hover {
    transform: none;
  }
}