/* ============================================================
   JUNO PORTALS · partner.css
   The B2B layer, and only that.

   Loaded third, after css/styles.css (tokens, type, buttons, fields,
   rules) and about/about.css (wrap, section, plate, statement, litany,
   header, reveal). Nothing from either is redefined here.

   What is genuinely new on this page: an inverted section, alternating
   partner blocks, numbered scenarios, and a form that has to look like
   an editorial page rather than a corporate contact sheet.
   ============================================================ */

/* ---------- an inverted passage ----------
   One section is allowed to turn dark. The tokens flip inside it, so
   every child keeps using the same variable names it always uses. */
.invert{
  --color-background:#171717;
  --color-text:#f6f2ee;
  --color-line-soft:rgba(246,242,238,.14);
  --color-line:rgba(246,242,238,.22);
  --color-disabled:rgba(246,242,238,.4);
  background:var(--color-background);
  color:var(--color-text);
}
.invert .statement--accent{color:var(--color-accent)}

/* ---------- partner types ----------
   Editorial blocks, one after another, separated by a hairline. Not a
   grid of icon cards. */
.partner-block{
  padding:var(--s-5) 0;
  border-top:1px solid var(--color-line-soft);
}
.partner-block:first-of-type{border-top:0}
.partner-kind{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;line-height:1.05;
  font-size:clamp(26px,7.5vw,42px);
}
.partner-block .copy p:first-child{margin-top:var(--s-3)}

/* a line a hotel could actually put on a card */
.quoted{
  margin-top:var(--s-4);padding-left:var(--s-4);
  border-left:1px solid var(--color-accent);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  font-size:clamp(22px,6vw,32px);line-height:1.2;
}

@media (min-width:900px){
  .partner-block{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);
    gap:var(--s-5);align-items:start}
  .partner-block .copy p:first-child{margin-top:0}
}

/* ---------- scenarios ----------
   Numbered, spare, one after the other. */
.scenario{
  padding:var(--s-5) 0;border-top:1px solid var(--color-line-soft);
}
.scenario:last-of-type{border-bottom:1px solid var(--color-line-soft)}
.scenario-no{
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-accent);
}
.scenario-name{
  margin-top:var(--s-2);
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;font-size:clamp(24px,6.5vw,36px);line-height:1.05;
}

@media (min-width:900px){
  .scenario{display:grid;grid-template-columns:auto minmax(0,6fr) minmax(0,10fr);
    gap:var(--s-4);align-items:baseline}
  .scenario-name{margin-top:0}
}

/* ---------- formats ----------
   A list of possible sizes, set as type rather than as bullets. */
.formats{margin-top:var(--s-4);list-style:none}
.formats li{
  padding:var(--s-3) 0;border-top:1px solid var(--color-line-soft);
  font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;line-height:1.5;
}
.formats li:last-child{border-bottom:1px solid var(--color-line-soft)}

/* ---------- the form ----------
   Underlined fields from the app, given room to breathe. */
.partner-form{margin-top:var(--s-6)}
.partner-form .field + .field{margin-top:var(--s-5)}

/* the select has to match the underlined inputs, including the arrow,
   because the native control looks nothing like them */
.select-wrap{position:relative}
.select-wrap::after{
  content:"\\2193";position:absolute;right:2px;bottom:14px;
  pointer-events:none;font-size:14px;color:var(--color-accent);
}
.partner-form select{
  width:100%;min-height:var(--touch);padding:12px 28px 12px 2px;
  background:none;border:0;border-bottom:1px solid var(--color-line-strong);
  border-radius:0;color:var(--color-text);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  appearance:none;-webkit-appearance:none;
}
.partner-form select:focus{outline:0;border-bottom-color:var(--color-accent)}

.field-help{margin-top:var(--s-2);font-size:13px;line-height:1.5}

/* required, said once, quietly */
.field-note{
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-disabled);
}

/* the honeypot · off screen, never focusable, never announced */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{margin-top:var(--s-4)}
.form-status[hidden]{display:none}

/* what replaces the form once it has been sent */
.form-sent{padding:var(--s-6) 0}

/* a visible focus ring everywhere, in the brand's own colour */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:3px;
}