/* Entertainment IP & Format Development (/ip-format-development, 2 Nov 2026): a page only the live copy has, built in the
   /creator-ip shell (redesign/new-pages.json), so it carries that page's Webflow id and reuses its whole design: the
   paraglider photo first, the title large in lime, the opening statement, chapters with a sticky title on the left, a
   centred finale and the FAQ. Only what differs is below: the six and four cards, the numbered timeline, the two stat
   blocks beside the network photo, the photo beside "Great Ideas", and the closing "Let's Develop Something Great".
   Every word is from Alistair's brief (new-pages/ip-format-development.html); Thando's request Doc 12k2HrrVwy37L1QAAEZRm-M9BBsxioUtHZr1FyPSdKyE. */
@import url("/_redesign/pages/creator-ip.css");

html[data-wl-path="ip-format-development"] .section-page-hero .ima-hero-intro { color: #fff; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); font-weight: 500; }

/* the chapters carry no big outline numbers here: the timeline is the page's one numbered list (Rule 5: 1, 2, 3) */
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch > h2::before { content: none; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch:last-child > h2::before { content: none; }

/* the opening button sits under the lime-ruled paragraphs, on the same right-hand column */
html[data-wl-path="ip-format-development"] .section-cloud .wl-ip-intro .wl-ipf-cta {
  display: flex;
  justify-content: flex-start;
  max-width: 62ch;
  margin: clamp(22px, 2.6vw, 34px) 0 0 auto;
  padding-left: clamp(20px, 2.4vw, 32px);
}
/* the two ruled paragraphs keep one unbroken lime rule, with a paragraph gap inside it */
html[data-wl-path="ip-format-development"] .section-cloud .wl-ip-intro > p:nth-child(2) { padding-bottom: 1.05em; }

/* "Great Ideas": the EDGE photo beside the words, under them on the right-hand column */
html[data-wl-path="ip-format-development"] .wl-ipf-fig { margin: clamp(20px, 2.4vw, 32px) 0 0; }
html[data-wl-path="ip-format-development"] .wl-ipf-fig img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--wl-r-md);
}

/* the cards: "What We Develop" (six) and "Why Partner" (four), two to a row */
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch > ul.wl-ipf-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch > ul.wl-ipf-cards > li.wl-ipf-card {
  margin: 0;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--wl-line-2);
  border-left: 1px solid var(--wl-line-2);
  border-radius: var(--wl-r-md);
  background: var(--wl-card-bg);
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.6;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-card::before { content: none; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-card h3,
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-step h3 {
  margin: 0 0 10px;
  color: var(--wl-lime);
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-card p,
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-step p { margin: 0; color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.6; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch > p.wl-ipf-after { margin: clamp(20px, 2vw, 28px) 0 0; color: #fff; font-size: clamp(15px, 14.4px + .25vw, 17px); }

/* "From Concept to Commercial Opportunity": a numbered timeline, the numbers on a lime rail */
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline {
  counter-reset: wl-ipf-step;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline > li.wl-ipf-step {
  counter-increment: wl-ipf-step;
  position: relative;
  margin: 0;
  padding: 0 0 clamp(26px, 3vw, 36px) 64px;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline > li.wl-ipf-step::before {
  content: counter(wl-ipf-step);
  position: absolute;
  left: 0;
  top: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-family: Bungee, sans-serif;
  font-size: 17px;
  line-height: 1;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline > li.wl-ipf-step::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: rgba(210, 248, 1, .35);
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline > li.wl-ipf-step:last-child { padding-bottom: 0; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline > li.wl-ipf-step:last-child::after { content: none; }

/* the two figures as large stat blocks, beside the network's channels */
html[data-wl-path="ip-format-development"] .wl-ipf-stats {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
  margin-top: clamp(40px, 5vw, 72px);
}
html[data-wl-path="ip-format-development"] .wl-ipf-stats-fig { margin: 0; }
html[data-wl-path="ip-format-development"] .wl-ipf-stats-fig img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: var(--wl-r-md); }
html[data-wl-path="ip-format-development"] .wl-ipf-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--wl-r-md);
  background: var(--wl-lime);
  color: var(--wl-ink);
}
html[data-wl-path="ip-format-development"] .wl-ipf-num { display: block; font-family: Bungee, sans-serif; font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.8rem); line-height: .95; }
html[data-wl-path="ip-format-development"] .wl-ipf-label { display: block; margin-top: 12px; font-size: clamp(15px, 14px + .3vw, 18px); font-weight: 600; line-height: 1.3; }

/* "Explore Our Media Properties": an outline button, so the page's lime buttons all mean "talk to us" */
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-line {
  min-height: 52px;
  margin: 0;
  padding: 14px 28px;
  border: 1.5px solid var(--wl-lime);
  background: transparent;
  color: var(--wl-lime);
  font-size: 15px;
}
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ipf-line:hover { background: var(--wl-lime); color: var(--wl-ink); }

/* the finale's second button outlined, and the small italic note under the buttons */
html[data-wl-path="ip-format-development"] .partner-button.wl-ipf-alt { background: transparent !important; color: var(--wl-lime) !important; }
html[data-wl-path="ip-format-development"] .partner-button.wl-ipf-alt:hover { background: var(--wl-lime) !important; color: var(--wl-ink) !important; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch:last-child .button-row { gap: 12px; flex-wrap: wrap; }
html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block p.wl-ipf-note { margin: 18px auto 0; color: var(--wl-muted); font-size: 14px; }

/* "Let's Develop Something Great": after the FAQ, centred, before the site's own "Let's Talk" */
html[data-wl-path="ip-format-development"] .section-cloud.wl-ipf-final {
  display: block;
  margin: 0;
  padding: 0 var(--wl-gutter) var(--wl-section);
  background: var(--wl-ink);
}
html[data-wl-path="ip-format-development"] .wl-ipf-final-in {
  max-width: 820px;
  margin: 0 auto;
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--wl-line);
  color: var(--wl-muted);
  text-align: center;
}
html[data-wl-path="ip-format-development"] .section-cloud.wl-ipf-final .wl-ipf-final-in h2 {
  margin: 0 auto clamp(20px, 2.4vw, 32px);
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}
html[data-wl-path="ip-format-development"] .wl-ipf-final-in p { max-width: 60ch; margin: 0 auto 1em; font-size: clamp(15px, 14.4px + .25vw, 17.5px); line-height: 1.6; }
html[data-wl-path="ip-format-development"] .wl-ipf-final-in p:first-of-type { color: #fff; font-size: clamp(1.1rem, .98rem + .5vw, 1.4rem); }
html[data-wl-path="ip-format-development"] .section-cloud.wl-ipf-final .wl-ipf-final-in .button-row { width: 100%; max-width: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
html[data-wl-path="ip-format-development"] .wl-ipf-final-in .partner-button,
html[data-wl-path="ip-format-development"] .section-cloud .wl-ip-intro .partner-button {
  min-height: 52px;
  margin: 0;
  padding: 14px 28px;
  border: 1.5px solid var(--wl-lime);
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-size: 15px;
}
html[data-wl-path="ip-format-development"] .wl-ipf-final-in p.wl-ipf-mail { margin-top: 22px; font-size: 16px; }
html[data-wl-path="ip-format-development"] .wl-ipf-final-in p.wl-ipf-mail a { color: #fff; text-decoration: underline; text-decoration-color: var(--wl-lime); text-underline-offset: 4px; }
html[data-wl-path="ip-format-development"] .wl-ipf-final-in p.wl-ipf-mail a:hover { color: var(--wl-lime); }

/* ---------- tablets ---------- */
@media screen and (max-width: 991px) {
  html[data-wl-path="ip-format-development"] .section-cloud .wl-ip-intro .wl-ipf-cta { margin-left: 0; }
  html[data-wl-path="ip-format-development"] .wl-ipf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-path="ip-format-development"] .wl-ipf-stats-fig { grid-column: 1 / -1; }
  html[data-wl-path="ip-format-development"] .wl-ipf-stats-fig img { height: auto; aspect-ratio: 3 / 2; }
}
/* ---------- phones ---------- */
@media screen and (max-width: 767px) {
  html[data-wl-path="ip-format-development"] .section-cloud .wl-ip-intro .wl-ipf-cta { padding-left: 0; }
  html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block .wl-ip-ch > ul.wl-ipf-cards { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-path="ip-format-development"] .wl-ipf-fig img { max-width: none; aspect-ratio: 4 / 3; }
  html[data-wl-path="ip-format-development"] .section-cloud .rich-text-block ol.wl-ipf-timeline > li.wl-ipf-step { padding-left: 54px; }
  html[data-wl-path="ip-format-development"] .partner-button { width: 100%; max-width: 340px; }
}
@media screen and (max-width: 479px) {
  html[data-wl-path="ip-format-development"] .wl-ipf-stats { grid-template-columns: minmax(0, 1fr); }
}