/* ============================================================
   BULKBITE - partners.css
   ------------------------------------------------------------
   The Poster Partner page, and nothing else.

   WHAT IS NOT IN HERE, ON PURPOSE
   ------------------------------------------------------------
   Colours, the display font, the button shapes, the section
   bands, the form fields, the FAQ accordion, the step cards, the
   header and the footer. All of those come from css/styles.css
   and the page uses them unchanged - it is the same site, and a
   partner page in its own private design language would read as
   somebody else's website asking for a phone number.

   This file is the four things that page genuinely has and the
   homepage does not: the two-column hero with the sample poster,
   the three reward cards, the sample-poster frame, and a sticky
   button that has to get out of the way of a form.

   Everything here is namespaced .pt- so that adding a rule can
   never reach into a shared component by accident.
   ============================================================ */

/* ------------------------------------------------------------
   THE FIRST SCREEN
   ------------------------------------------------------------
   Dark, like the homepage hero, because this page opens on an
   offer rather than on an explanation. The grid is one column
   until 900px: on a phone the order is headline, copy, button,
   the two qualifying lines, and only then the poster. Somebody
   reading on a phone should reach the action before the
   illustration of the thing they would be given.
   ------------------------------------------------------------ */
.pt-hero {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(2.6rem, 8vw, 5rem);
}
.pt-hero .eyebrow { color: var(--accent); }

.pt-hero-grid { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 900px) {
  /* The poster is a fixed-proportion object and the copy is not,
     so the copy takes the elastic column. */
  .pt-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3.2rem; }
}

.pt-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  /* Three lines, and they are hard line breaks in the markup
     rather than a max-width: the shape of this headline is the
     point, and a reflow at an awkward width turns three lines
     into five. */
  font-size: clamp(2.5rem, 11vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.005em;
  margin-bottom: .45em;
}
.pt-title .hl { color: var(--accent); }

.pt-lead {
  font-size: clamp(1.05rem, 2.8vw, 1.28rem);
  color: rgba(255, 255, 255, .82);
  max-width: 42ch;
}

.pt-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem 1.4rem; margin: 1.6rem 0 1.4rem;
}
.pt-actions .btn { flex: 1 1 auto; min-width: 220px; }
@media (min-width: 620px) { .pt-actions .btn { flex: 0 0 auto; } }

/* "See the rewards" is a text link and not a second button on
   purpose. There is one primary action on this page and a ghost
   button beside it would compete with it. */
.pt-textlink {
  font-weight: 700; font-size: .98rem; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px;
  /* The minimum comfortable target, without the padding making it
     look like the button it is deliberately not. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.pt-textlink:hover { color: #fff; }

/* The two qualifying lines. Readable, not faint: they are the
   half of the offer that decides whether anybody is owed
   anything, and hiding them in 11px grey would be the thing this
   whole page is trying not to do. */
.pt-qualify {
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  max-width: 48ch;
  margin: 0 0 .45rem;
  padding-left: 1.05rem;
  position: relative;
}
.pt-qualify::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent);
}

/* ------------------------------------------------------------
   THE SAMPLE POSTER
   ------------------------------------------------------------
   Framed like a thing pinned to a wall rather than dropped onto
   the page: a warm paper card, a slight lift, and a caption that
   says out loud that it is a sample.
   ------------------------------------------------------------ */
.pt-sample { margin: 0; }
.pt-sample-art {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
}
.pt-sample figcaption {
  margin: .9rem auto 0;
  max-width: 34ch;
  text-align: center;
  font-size: .84rem;
  color: rgba(255, 255, 255, .62);
}
@media (min-width: 900px) {
  /* A couple of degrees. Enough to read as a printed sheet, not
     enough to make the text on it harder to read. */
  .pt-sample-art { transform: rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-sample-art { transform: none; }
}

/* ------------------------------------------------------------
   THE THREE REWARD CARDS
   ------------------------------------------------------------
   Stacked on a phone, three abreast from 900px. The middle card
   is the monthly Standard customer, which is the acquisition the
   whole programme exists for, so it is the only one that carries
   the ink treatment and the flag.

   subgrid keeps the three "what you get" lines on one baseline
   across the row, the same way the plan cards on the homepage do
   it, so a longer line in one card cannot push its neighbours'
   numbers out of line.
   ------------------------------------------------------------ */
.pt-rewards { display: grid; gap: 1rem; margin: 0 0 2rem; }
@media (min-width: 900px) {
  .pt-rewards { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .pt-reward { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}

.pt-reward {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.5rem;
  position: relative;
}

.pt-reward-when {
  font-size: var(--micro);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
}
.pt-reward-what {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.55rem, 4.6vw, 2.05rem);
  line-height: 1.02;
  color: var(--accent-text);
  margin: 0 0 .7rem;
}
.pt-reward-body { font-size: .95rem; color: var(--muted); margin: 0; }

/* The flagship card. Ink rather than accent: an orange card in an
   orange-accented section stops being emphasis and becomes
   another block of the same colour. */
.pt-reward-lead {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow);
}
.pt-reward-lead .pt-reward-when { color: rgba(255, 255, 255, .62); }
.pt-reward-lead .pt-reward-what { color: var(--amber); }
.pt-reward-lead .pt-reward-body { color: rgba(255, 255, 255, .78); }
.pt-reward-flag {
  position: absolute; top: -.7rem; left: 1.2rem;
  background: var(--accent); color: var(--ink);
  border-radius: 999px; padding: .2rem .75rem;
  font-size: var(--micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  margin: 0;
}
/* Keep all three cards on the same baseline; colour and the flag
   already distinguish the monthly reward. */

/* The conditions, directly under the cards. Body size, not
   fine-print size, for everything except the no-stacking line. */
.pt-qualifies {
  border-top: 2px solid var(--line);
  padding-top: 1.4rem;
  max-width: 68ch;
}
.pt-qualifies p { font-size: .98rem; }
.pt-qualifies p:last-child { margin-bottom: 0; }
.pt-qualifies strong { color: var(--ink); }
.pt-qualifies a { color: var(--accent-text); }

/* The division of labour under the four steps. */
.pt-split {
  margin: 2rem 0 0;
  max-width: 62ch;
  font-size: 1.02rem;
  color: var(--muted-dark);
}

/* ------------------------------------------------------------
   THE FORM
   ------------------------------------------------------------
   .form, .field, .radios and .consent all come from styles.css.
   These are only the two things this form has that the homepage
   form does not: a help line under a field, and the "use of your
   details" line above the button.
   ------------------------------------------------------------ */
.pt-help {
  font-size: .84rem;
  color: rgba(255, 255, 255, .62);
  margin: .4rem 0 0;
}
.pt-help a { color: var(--amber); }
.pt-use {
  margin: 1.2rem 0 .2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-dark);
}

/* A button that has to look like a link: correcting a phone
   number is an action, so it is a <button>, but it reads inside a
   sentence so it must not look like one. */
.pt-linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--amber); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.pt-linkbtn:hover { color: #fff; }
.pt-fix { color: rgba(255, 255, 255, .72); font-size: .95rem; margin-bottom: 1.6rem; }

.pt-faq-foot { margin-top: 1.8rem; }

/* ------------------------------------------------------------
   THE PHONE'S BOTTOM BAR
   ------------------------------------------------------------
   Everything about it - the position, the colour, the slide, the
   .is-visible class and the fact that it disappears above 1000px
   where the header keeps its own button - comes from .sticky-cta
   in styles.css. js/partners.js drives that same class, and it
   takes it OFF the moment the application form is on screen,
   because a fixed pill sitting over the acknowledgement tick or
   an error message is worse than no pill at all.

   The one rule this page needs: the homepage pill has a label and
   a price and space-between holds them apart. This one has a
   label and nothing else, and space-between leaves it pinned to
   the left edge of a full-width pill.
   ------------------------------------------------------------ */
.pt-sticky { justify-content: center; }

/* Match the homepage's centred introductions and mobile hero. */
:is(#rewards, #how-partner) > .wrap > :is(.eyebrow, .section-title, .section-lede),
#pt-form-view > :is(.eyebrow, .section-title, .section-lede) {
  text-align: center;
  margin-inline: auto;
}
:is(#rewards, #how-partner, #pt-form-view) .section-title {
  max-width: 18ch;
  text-wrap: balance;
}
.pt-qualifies, .pt-split { margin-inline: auto; }
.pt-split, .pt-faq-foot { text-align: center; }
.pt-reward { min-width: 0; text-align: center; }
.pt-reward-flag {
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
}
.pt-hero-grid > * { min-width: 0; }
@media (min-width: 1040px) {
  #how-partner .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .pt-hero-copy { text-align: center; }
  .pt-lead, .pt-qualify { margin-inline: auto; }
  .pt-actions { justify-content: center; }
  .pt-qualify { text-align: left; }
  .pt-rewards { max-width: 560px; margin-inline: auto; gap: 1.5rem; }
}