/**
 * IPTV From Canada — pages/reseller.css
 * The eight reseller sections (/iptv-reseller/).
 *
 *   1. Introduction + enquiry form  (ifc-ra)   charcoal
 *   2. How it works                 (ifc-rs)   warm white
 *   3. Reseller panel               (ifc-rp)   charcoal
 *   4. Wholesale credits            (ifc-rc)   warm white
 *   5. Who it is for                (ifc-rau)  charcoal
 *   6. Installation resources                  pages/home.css (.ifc-dv*)
 *   7. FAQ                                     components/faq.css
 *   8. Closing CTA                  (ifc-rx)   warm white
 *
 * Sections 6 and 7 reuse existing components whole — the homepage's devices
 * band and the shared FAQ accordion — so they are styled where they already
 * live and have nothing here.
 *
 * Tokens, containers, buttons, links and the fold artwork all come from
 * general.css; the shared fade for the fold layers lives there too. One
 * stylesheet serves the rest, so a page built from the shortcodes never
 * loads a file per section.
 */

/* --------------------------------------------------------------------------
   Shared: section shells and fold artwork layers
   Each section clips its own layer. The horizontal fade is applied centrally
   in general.css, alongside every other fold layer in the theme.
   -------------------------------------------------------------------------- */

.ifc-ra,
.ifc-rs,
.ifc-rp,
.ifc-rc,
.ifc-rau,
.ifc-rx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: 44px;
}

.ifc-ra__folds,
.ifc-rs__folds,
.ifc-rp__folds,
.ifc-rc__folds,
.ifc-rau__folds,
.ifc-rx__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  width: min(420px, 34%);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  pointer-events: none;
}

/* Dark sections carry the artwork on the right, light ones on the left, so
   the page alternates rather than stacking folds in one margin. */
.ifc-ra__folds,
.ifc-rp__folds,
.ifc-rau__folds {
  inset-inline-end: 0;
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  opacity: .5;
}

.ifc-rs__folds,
.ifc-rc__folds,
.ifc-rx__folds {
  inset-inline-start: 0;
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  opacity: .2;
  transform: scaleX(-1);
  transform-origin: center;
}

.ifc-ra__inner,
.ifc-rs__inner,
.ifc-rp__inner,
.ifc-rc__inner,
.ifc-rau__inner,
.ifc-rx__inner {
  position: relative;
  z-index: 1;
}

/* Dark bands. */
.ifc-ra,
.ifc-rp,
.ifc-rau {
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Warm-white bands. */
.ifc-rs,
.ifc-rc,
.ifc-rx {
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* --------------------------------------------------------------------------
   1. Introduction and enquiry form (ifc-ra) — charcoal
   Introduction and form stack until 1100 px. Below that the two columns
   would squeeze the form well before the content runs out of room.
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-ra__heading {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);   /* 30 -> 48 px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-ra__lead {
  margin: 18px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-text-dim);
}



/* Two fields per row once the CARD itself is wide enough, whatever the
   viewport is doing. Browsers without container queries keep one column,
   which is correct at every width, just roomier. */
/* --------------------------------------------------------------------------
   Shared heading / lead styles for sections 2, 3, 4, 5, 8
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-rs__heading,
.ifc-scope .ifc-rp__heading,
.ifc-scope .ifc-rc__heading,
.ifc-scope .ifc-rau__heading,
.ifc-scope .ifc-rx__heading {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ifc-scope .ifc-rs__heading,
.ifc-scope .ifc-rc__heading,
.ifc-scope .ifc-rx__heading {
  color: var(--ifc-ink);
}

.ifc-scope .ifc-rp__heading,
.ifc-scope .ifc-rau__heading {
  color: var(--ifc-paper);
}

.ifc-scope .ifc-rs__heading,
.ifc-scope .ifc-rp__heading {
  max-width: 24ch;
}

.ifc-scope .ifc-rs__lead,
.ifc-scope .ifc-rc__lead {
  max-width: 58ch;
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-rp__lead {
  max-width: 58ch;
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

/*
 * The panel section's introduction sits on the section's centre line above
 * the FULL six-card grid. The cards are untouched: their icons, titles and
 * text stay left-aligned.
 *
 * Each element's own ch cap is released inside the wrapper — a 24ch heading
 * box centred in a 720 px wrapper would centre its text inside a box that is
 * itself sitting off to the left. The descendant selector keeps the release
 * to this section, so the headings and leads that share those rules
 * elsewhere on the page keep their caps.
 */
.ifc-rp__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.ifc-scope .ifc-rp__head .ifc-rp__heading,
.ifc-scope .ifc-rp__head .ifc-rp__lead {
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. How it works (ifc-rs) — warm white, four numbered steps
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-rs__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-rs__step {
  padding: 22px;
  border: 1px solid var(--ifc-line);
  border-radius: 12px;
  background: var(--ifc-surface);
}

.ifc-rs__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ifc-action);
  font-family: var(--ifc-font);
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ifc-surface);
}

.ifc-scope .ifc-rs__step-title {
  margin: 14px 0 0;
  font-family: var(--ifc-font);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-rs__step-text {
  margin: 9px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ifc-muted);
}

/* --------------------------------------------------------------------------
   3. Reseller panel (ifc-rp) — charcoal, six icon cards
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-rp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-rp__card {
  padding: 22px;
  border: 1px solid var(--ifc-white-a10);
  border-radius: 12px;
  background: var(--ifc-graphite);
}

.ifc-rp__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ifc-action);
}

.ifc-scope .ifc-rp__icon-svg {
  width: 100%;
  height: 100%;
}

.ifc-scope .ifc-rp__card-title {
  margin: 14px 0 0;
  font-family: var(--ifc-font);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-rp__card-text {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ifc-text-dim);
}

/* Centred beneath the whole grid, in normal flow. */
.ifc-scope .ifc-rp__actions {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.ifc-scope .ifc-rp__cta {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. Wholesale credits (ifc-rc) — warm white, text + bordered card
   -------------------------------------------------------------------------- */

.ifc-rc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.ifc-scope .ifc-rc__actions {
  margin: 24px 0 0;
}

.ifc-scope .ifc-rc__cta {
  display: flex;
  width: 100%;
}

.ifc-rc__card {
  padding: 24px 20px;
  border: 1px solid var(--ifc-line);
  border-radius: 12px;
  background: var(--ifc-surface);
}

.ifc-scope .ifc-rc__card-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-rc__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-rc__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding-block: 12px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ifc-ink-soft);
}

.ifc-rc__item + .ifc-rc__item {
  border-block-start: 1px solid var(--ifc-line);
}

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

.ifc-rc__item:last-child {
  padding-block-end: 0;
}

.ifc-scope .ifc-rc__check {
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  color: var(--ifc-action);
}

/* --------------------------------------------------------------------------
   5. Who the program is for (ifc-rau) — charcoal, two spacious cards
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-rau__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-rau__card {
  padding: 26px 22px;
  border: 1px solid var(--ifc-white-a10);
  border-radius: 14px;
  background: var(--ifc-graphite);
}

.ifc-scope .ifc-rau__card-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-rau__card-text {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-rau__actions {
  margin: 24px 0 0;
}

.ifc-scope .ifc-rau__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.ifc-scope .ifc-rau__link-icon {
  width: 18px;
  height: 18px;
}

/* Section 6 (installation resources) has no rules here: it renders the
   homepage's devices section, styled by .ifc-dv* in pages/home.css. See
   sections/reseller-guides.php. */

/* --------------------------------------------------------------------------
   8. Closing CTA (ifc-rx) — warm white, compact and centred
   -------------------------------------------------------------------------- */

.ifc-rx__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ifc-scope .ifc-rx__heading {
  max-width: 22ch;
}

.ifc-scope .ifc-rx__text {
  max-width: 54ch;
  margin: 14px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-rx__actions {
  margin: 24px 0 0;
}

.ifc-scope .ifc-rx__cta {
  display: flex;
  width: 100%;
}

.ifc-scope .ifc-rx__note {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

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

@media (min-width: 560px) {
  .ifc-scope .ifc-rp__cta,
  .ifc-scope .ifc-rc__cta,
  .ifc-scope .ifc-rx__cta {
    display: inline-flex;
    width: auto;
  }
}

@media (min-width: 768px) {
  .ifc-ra,
  .ifc-rs,
  .ifc-rp,
  .ifc-rc,
  .ifc-rau,
  .ifc-rx {
    padding-block: 64px;
  }


  /* Two across on tablet; four at desktop widths below. */
  .ifc-scope .ifc-rs__steps,
  .ifc-scope .ifc-rp__grid,
  .ifc-scope .ifc-rau__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .ifc-rc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
  }

  .ifc-rc__card {
    padding: 28px;
  }
}

@media (min-width: 1024px) {
  .ifc-scope .ifc-rs__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ifc-scope .ifc-rp__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ifc-rc__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 56px;
  }

  .ifc-scope .ifc-ra__lead,
  .ifc-scope .ifc-rp__lead {
    font-size: 1.125rem;
  }

  .ifc-rau__card {
    padding: 34px 30px;
  }
}

@media (min-width: 1200px) {
  .ifc-ra,
  .ifc-rs,
  .ifc-rp,
  .ifc-rc,
  .ifc-rau,
  .ifc-rx {
    padding-block: 80px;
  }

}