/**
 * IPTV From Canada — pages/contact.css
 * The five contact sections (/iptv-support/).
 *
 *   1. Introduction + form   (ifc-cm + ifc-cf)  charcoal
 *   2. What helps support    (ifc-cpr)          warm white
 *   3. Self-service          (ifc-cr)           charcoal
 *   4. After sending         (ifc-cfu)          warm white
 *   5. FAQ                                      components/faq.css (dark)
 *
 * The page alternates dark, light, dark, light, dark. Section 5 reuses the
 * homepage accordion whole, so it is styled where it already lives.
 *
 * ifc-cm is the section; ifc-cf is the form component inside it. They are
 * separate namespaces because the form is a self-contained thing that happens
 * to sit in this band — its styles are written against the card, not against
 * the section around it.
 *
 * Tokens, containers, buttons, links and the fold artwork all come from
 * general.css; the shared fade for the fold layers lives there too.
 */

/* --------------------------------------------------------------------------
   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-cm,
.ifc-cpr,
.ifc-cr,
.ifc-cfu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: 44px;
}

.ifc-cm__folds,
.ifc-cpr__folds,
.ifc-cr__folds,
.ifc-cfu__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-cm__folds,
.ifc-cr__folds {
  inset-inline-end: 0;
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  opacity: .45;
}

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

.ifc-cm__inner,
.ifc-cpr__inner,
.ifc-cr__inner,
.ifc-cfu__inner {
  position: relative;
  z-index: 1;
}

.ifc-cm,
.ifc-cr {
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

.ifc-cpr,
.ifc-cfu {
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* --------------------------------------------------------------------------
   1. Introduction and form (ifc-cm) — charcoal
   Stacked until 1024 px, then roughly 40 / 60 with the text block centred
   against the card. No forced viewport height anywhere: the section is as
   tall as the form makes it.
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-cm__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-cm__lead {
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-cm__note {
  margin: 14px 0 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ifc-paper-soft);
}

/* Contact channels: compact links, only rendered when configured. */
.ifc-scope .ifc-cm__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-cm__channel {
  min-width: 0;
}

.ifc-scope .ifc-cm__channel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--ifc-white-a35);
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ifc-paper);
  text-decoration: none;
  transition: border-color var(--ifc-duration) var(--ifc-ease),
              background-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope .ifc-cm__channel-icon {
  width: 18px;
  height: 18px;
  color: var(--ifc-maple);
}

.ifc-scope .ifc-cm__channel-link:focus-visible {
  outline: 3px solid var(--ifc-surface);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ifc-scope .ifc-cm__channel-link:hover {
    border-color: var(--ifc-maple);
    background: var(--ifc-white-a10);
    color: var(--ifc-paper);
  }
}

/* --------------------------------------------------------------------------
   2. Information that helps support (ifc-cpr) — warm white, three cards
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-cpr__heading,
.ifc-scope .ifc-cr__heading,
.ifc-scope .ifc-cfu__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-cpr__heading,
.ifc-scope .ifc-cfu__heading {
  max-width: 24ch;
  color: var(--ifc-ink);
}

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

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

/* Equal heights across the row: the grid stretches every card to the tallest,
   so the three bottom edges line up however much text each one carries. No
   height is declared, so on mobile (one column) each card is its own size. */
.ifc-cpr__card {
  padding: 22px;
  border: 1px solid var(--ifc-line);
  border-radius: 12px;
  background: var(--ifc-surface);
}

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

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

.ifc-scope .ifc-cpr__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-ink);
}

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


/* --------------------------------------------------------------------------
   3. Self-service resources (ifc-cr) — charcoal, three cards
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-cr__heading {
  max-width: 24ch;
  color: var(--ifc-paper);
}

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

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

/* --------------------------------------------------------------------------
   Centred introductions (ifc-cpr + ifc-cr)
   The heading and its paragraph sit on the section's centre line above the
   FULL 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 inside a 720 px wrapper would centre its text within a box
   that is itself sitting off to the left, which reads as a misalignment.
   -------------------------------------------------------------------------- */

.ifc-cpr__head,
.ifc-cr__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.ifc-scope .ifc-cpr__head .ifc-cpr__heading,
.ifc-scope .ifc-cpr__head .ifc-cpr__lead,
.ifc-scope .ifc-cr__head .ifc-cr__heading,
.ifc-scope .ifc-cr__head .ifc-cr__lead {
  max-width: none;
}

/* A column layout with the link pushed to the bottom: on desktop the three
   links align because the grid stretches the cards to the tallest, not
   because any height is declared. On mobile each card is its own height and
   margin-block-start:auto simply does nothing. */
.ifc-cr__card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--ifc-white-a10);
  border-radius: 12px;
  background: var(--ifc-graphite);
}

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

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

.ifc-scope .ifc-cr__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-cr__card-text {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-cr__card-actions {
  margin: 18px 0 0;
  padding-block-start: 0;
}

@media (min-width: 768px) {
  .ifc-scope .ifc-cr__card-actions {
    margin-block-start: auto;
    padding-block-start: 18px;
  }
}

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

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

/* --------------------------------------------------------------------------
   4. After sending a message (ifc-cfu) — warm white
   Deliberately not another card grid: text left, numbered rows right,
   separated by hairlines.
   -------------------------------------------------------------------------- */

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

.ifc-scope .ifc-cfu__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ifc-cfu__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-block: 20px;
}

/* Hairlines between rows only, so the last row has no trailing rule. */
.ifc-cfu__row + .ifc-cfu__row {
  border-block-start: 1px solid var(--ifc-line);
}

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

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

.ifc-cfu__number {
  font-family: var(--ifc-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--ifc-action);
}

.ifc-cfu__body {
  min-width: 0;
}

.ifc-scope .ifc-cfu__row-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--ifc-ink);
}

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

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

@media (min-width: 768px) {
  .ifc-cm,
  .ifc-cpr,
  .ifc-cr,
  .ifc-cfu {
    padding-block: 64px;
  }


  .ifc-scope .ifc-cpr__grid,
  .ifc-scope .ifc-cr__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .ifc-cfu__row {
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .ifc-scope .ifc-cm__lead {
    font-size: 1.125rem;
  }

  /* Heading and introduction left, the three rows right — with the text block
     centred against the rows rather than pinned to the top. Vertical position
     only: the text itself stays left-aligned. */
  .ifc-cfu__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 56px;
    align-items: center;
  }
}

@media (min-width: 1200px) {
  .ifc-cm,
  .ifc-cpr,
  .ifc-cr,
  .ifc-cfu {
    padding-block: 80px;
  }
}