/**
 * IPTV From Canada - components/free-trial.css
 * Shared free-trial section (sections/free-trial.php).
 *
 * Used on the homepage, the IPTV Free Trial page and the IPTV Pricing page,
 * so it lives outside the homepage stylesheet. Loaded through the
 * ifc-free-trial handle (see ifc_register_component_assets()).
 */

/* --------------------------------------------------------------------------
   Free trial (ifc-trial) — "Try IPTV Canada Free for 24 Hours"
   Full-width charcoal section after the comparison: open two-column layout
   in the shared container (offer 46 % / testing guide 54 % from 1024 px,
   separated by a thin vertical rule; stacked with a horizontal rule
   below), then a full-width guarantee strip under a thin top border.
   Faint dark folds anchored to the right edge on their own clipped layer.
   No JavaScript. Natural heights throughout.
   -------------------------------------------------------------------------- */

.ifc-trial {
  --ifc-trial-pad-y: 44px;                 /* 64 px tablet, 80 px desktop */
  --ifc-trial-col-gap: 40px;               /* padding either side of the rule; 48 px desktop */
  --ifc-trial-stack-gap: 36px;             /* between stacked columns (each side of the rule) */
  --ifc-trial-heading-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);      /* 28 → 48 px */
  --ifc-trial-heading-gap: 20px;           /* h2 → paragraph; 24 px desktop */
  --ifc-trial-subheading-size: clamp(1.4375rem, 1.2rem + .9vw, 2rem); /* 23 → 32 px */
  --ifc-trial-text-size: 1rem;             /* 17 px desktop */
  --ifc-trial-text-max: 560px;             /* readable paragraph width */
  --ifc-trial-block-gap: 24px;             /* paragraph → list, list → CTA; 28 px desktop */
  --ifc-trial-benefit-gap: 16px;           /* 18 px desktop */
  --ifc-trial-check: 24px;                 /* red disc */
  --ifc-trial-check-gap: 12px;
  --ifc-trial-num-size: 1.5rem;            /* 24 px; 34 px desktop */
  --ifc-trial-num-col: 48px;               /* fixed number column; 64 px desktop */
  --ifc-trial-row-pad: 18px;               /* 20 px desktop */
  --ifc-trial-strip-gap: 40px;             /* columns → guarantee strip; 48 px desktop */
  --ifc-trial-strip-pad: 24px;             /* below the strip's top border; 28 px desktop */
  --ifc-trial-fold-w: 60vw;                /* right-edge fold layer */
  --ifc-trial-folds-opacity: .22;          /* quieter on phones; .32 tablet, .42 desktop */
  --ifc-trial-rule: var(--ifc-white-a15);

  --ifc-bg: var(--ifc-ink);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-trial-pad-y);
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Decorative folds: the dark artwork carries its facets on its right side,
   so the layer is anchored to the section's right edge and clipped there. */
.ifc-trial__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--ifc-trial-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-trial-folds-opacity);
  pointer-events: none;
}

.ifc-trial__inner {
  position: relative;
  z-index: 1;
}

/* Columns: stacked by default, side by side from 1024 px. */
.ifc-trial__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ifc-trial__offer,
.ifc-trial__guide {
  min-width: 0;
}

/* Stacked: horizontal rule between the two columns. */
.ifc-trial__guide {
  margin-block-start: var(--ifc-trial-stack-gap);
  padding-block-start: var(--ifc-trial-stack-gap);
  border-block-start: 1px solid var(--ifc-trial-rule);
}

/* Type ------------------------------------------------------------------ */

.ifc-scope .ifc-trial__heading {
  max-width: 14ch;
  font-size: var(--ifc-trial-heading-size);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-trial__lead {
  max-width: var(--ifc-trial-text-max);
  margin-block-start: var(--ifc-trial-heading-gap);
  font-size: var(--ifc-trial-text-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-trial__subheading {
  margin-block-start: var(--ifc-trial-block-gap);
  font-size: var(--ifc-trial-subheading-size);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ifc-paper);
}

/* Benefits: red disc with a white check in a fixed column, centred on the
   first text line (line box = text size × 1.6); never shrinks. */
.ifc-scope .ifc-trial__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--ifc-trial-benefit-gap);
  max-width: var(--ifc-trial-text-max);
  margin-block-start: var(--ifc-trial-block-gap);
}

.ifc-trial__benefit {
  display: grid;
  grid-template-columns: var(--ifc-trial-check) minmax(0, 1fr);
  column-gap: var(--ifc-trial-check-gap);
  align-items: start;
  font-size: var(--ifc-trial-text-size);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

.ifc-trial__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ifc-trial-check);
  height: var(--ifc-trial-check);
  margin-block-start: calc((var(--ifc-trial-text-size) * 1.6 - var(--ifc-trial-check)) / 2);
  border-radius: 50%;
  background: var(--ifc-action);
  color: var(--ifc-surface);
}

.ifc-scope .ifc-trial__check-icon {
  width: 14px;
  height: 14px;
}

/* CTA: shared primary button, 52 px tall; full width on narrow phones. */
.ifc-scope .ifc-trial__action {
  margin-block-start: var(--ifc-trial-block-gap);
}

.ifc-scope .ifc-trial__cta {
  --ifc-button-height: 52px;
  --ifc-button-padding: 14px 28px;
}

@media (max-width: 479.98px) {
  .ifc-scope .ifc-trial__cta {
    display: flex;
    width: 100%;
  }
}

/* Testing rows: fixed number column + flexible text, baseline-aligned,
   thin rules between rows only. */
.ifc-scope .ifc-trial__tests {
  margin-block-start: 20px;
}

.ifc-trial__test {
  display: grid;
  grid-template-columns: var(--ifc-trial-num-col) minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--ifc-trial-row-pad);
}

.ifc-trial__test:first-child {
  padding-block-start: 0;
}

.ifc-trial__test + .ifc-trial__test {
  border-block-start: 1px solid var(--ifc-trial-rule);
}

.ifc-trial__num {
  font-size: var(--ifc-trial-num-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ifc-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ifc-maple);
}

.ifc-scope .ifc-trial__test-text {
  font-size: var(--ifc-trial-text-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-text-dim);
}


/* Guarantee strip: full container width, thin top border, icon beside the
   first line. Visually separate from the trial CTA. */
.ifc-trial__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: var(--ifc-trial-strip-gap);
  padding-block-start: var(--ifc-trial-strip-pad);
  border-block-start: 1px solid var(--ifc-trial-rule);
}

.ifc-trial__shield {
  display: flex;
  flex: none;
  width: 24px;
  height: 24px;
  margin-block-start: calc((var(--ifc-trial-text-size) * 1.6 - 24px) / 2);
  color: var(--ifc-maple);
}

.ifc-scope .ifc-trial__guarantee-text {
  font-size: var(--ifc-trial-text-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-text-dim);
}

.ifc-trial__guarantee-text strong {
  font-weight: 700;
  color: var(--ifc-paper);
}

/* Responsive ------------------------------------------------------------ */

@media (min-width: 768px) {
  .ifc-trial {
    --ifc-trial-pad-y: 64px;
    --ifc-trial-fold-w: clamp(320px, 38vw, 720px);
    --ifc-trial-folds-opacity: .32;
  }
}

/* Side by side: 46 % / 54 %, thin vertical rule with padding on both sides. */
@media (min-width: 1024px) {
  .ifc-trial {
    --ifc-trial-pad-y: 80px;
    --ifc-trial-col-gap: 48px;
    --ifc-trial-heading-gap: 24px;
    --ifc-trial-text-size: 1.0625rem;
    --ifc-trial-block-gap: 28px;
    --ifc-trial-benefit-gap: 18px;
    --ifc-trial-num-size: 2.125rem;
    --ifc-trial-num-col: 64px;
    --ifc-trial-row-pad: 20px;
    --ifc-trial-strip-gap: 48px;
    --ifc-trial-strip-pad: 28px;
    --ifc-trial-folds-opacity: .42;
  }

  .ifc-trial__columns {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: start;
  }

  .ifc-trial__offer {
    padding-inline-end: var(--ifc-trial-col-gap);
  }

  .ifc-trial__guide {
    margin-block-start: 0;
    padding-block-start: 0;
    padding-inline-start: var(--ifc-trial-col-gap);
    border-block-start: 0;
    border-inline-start: 1px solid var(--ifc-trial-rule);
  }
}