/* CANAL PASS — Corridor content blocks.
   Colours, sizes, weights and letter-spacing are taken from the live
   site rather than invented: eyebrow 12.5px/600/1.75px in #c9a86a,
   headings 700 #192a3d, body 16px #3a4f66, ground #fafbfc, 8px radii,
   and Inter, which is what the owner's own Stackable blocks use.
   Every class is namespaced cpcc- so nothing collides with the theme
   or Stackable. */

.cpcc-empty {
  padding: 14px 16px;
  background: #f5f7fa;
  border: 1px dashed #e3e8ee;
  color: #7c8da0;
  font-size: .9rem;
  border-radius: 8px;
}

.cpcc-partner,
.cpcc-ports {
  --navy: #0a3d62;
  --gold: #c9a86a;
  --gold-deep: #8a6b3a;
  --ink: #192a3d;
  --body: #3a4f66;
  --muted: #7c8da0;
  --ground: #fafbfc;
  --line: #e3e8ee;
  --white: #fff;
  /* Inter, matching the site owner's own Stackable headings and
     eyebrows (measured: 400/500/600/700 in use, no italics). Blocksy's
     body text stays on its system stack, so the fallback chain below
     lands on the same faces the rest of the page uses if Inter ever
     fails to load. */
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
}
.cpcc-partner *,
.cpcc-ports * { box-sizing: border-box; }

/* ---------------- Partner & services ---------------- */

.cpcc-partner {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.cpcc-partner__eyebrow,
.cpcc-partner__services-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}
.cpcc-partner__name {
  /* Blocksy styles headings by element, which beats inheritance from
     the block wrapper — so the font has to be restated here or the
     heading alone drops back to the theme's stack. */
  font-family: inherit;
  font-size: clamp(26px, 3.6vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .9rem;
  text-wrap: balance;
}
.cpcc-partner__about { margin: 0 0 1.5rem; max-width: 66ch; }
.cpcc-partner__about p { font-size: 16px; line-height: 1.7; margin: 0 0 .8rem; }
.cpcc-partner__about p:last-child { margin-bottom: 0; }

/* Deliberately the same shape as the site's own "24/7 / OPERATIONAL
   DESK" strip on the homepage. */
.cpcc-partner__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  gap: 2.5rem;
  justify-content: start;
  padding: 1.25rem 0 1.4rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
}
.cpcc-partner__fact-val {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}
.cpcc-partner__fact-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.cpcc-partner__services-eyebrow { margin-bottom: .4rem; }
.cpcc-partner__services-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 1.4rem;
  max-width: 62ch;
}

.cpcc-partner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  /* clip, not hidden: both round off the tiles' square corners, but
     `hidden` also makes this a scroll container, which would capture
     the tiles' view() timelines and stop their entrance animation from
     ever running. `clip` doesn't. Older browsers keep `hidden` and
     simply lose the stagger. */
  overflow: hidden;
  overflow: clip;
}
.cpcc-service {
  background: var(--white);
  padding: 1.05rem 1.15rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.cpcc-service__tick {
  flex-shrink: 0;
  margin-top: .15rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpcc-service__name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: .2rem;
}
.cpcc-service__desc {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #5f7387;
}

.cpcc-partner__footnote {
  margin: 1.4rem 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
  padding-left: .9rem;
  border-left: 2px solid var(--gold);
}

/* ---------------- Ports ---------------- */

.cpcc-ports__head { margin-bottom: 1.25rem; }
.cpcc-ports__eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}
.cpcc-ports__title {
  font-family: inherit; /* same reason as .cpcc-partner__name above */
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.cpcc-ports__intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  margin: 0;
  max-width: 64ch;
}

.cpcc-ports__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.cpcc-ports__tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.cpcc-ports__tab {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: .6rem .75rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cpcc-ports__tab:hover { color: var(--navy); }
.cpcc-ports__tab[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--gold); }
.cpcc-ports__tab:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; border-radius: 4px; }
.cpcc-ports__count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .6rem;
  margin-left: auto;
}

.cpcc-ports__list { display: flex; flex-direction: column; gap: .6rem; }

.cpcc-port {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cpcc-port[hidden] { display: none; }

.cpcc-port__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .9rem 1.1rem;
}
.cpcc-port__main { flex: 1 1 auto; min-width: 0; }
.cpcc-port__nameline {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 .2rem;
}
.cpcc-port__name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
}
.cpcc-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.cpcc-badge--primary { background: var(--navy); color: #fff; }
.cpcc-badge--outline { background: #fff; border: 1px solid var(--line); color: var(--body); }
.cpcc-port__type { font-size: 13.5px; color: var(--body); margin: 0 0 .25rem; }
.cpcc-port__coords {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cpcc-port__coords svg { color: var(--muted); flex-shrink: 0; }

.cpcc-port__figs { display: flex; gap: 1.4rem; flex-shrink: 0; }
.cpcc-fig { text-align: right; }
.cpcc-fig__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}
.cpcc-fig__val {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cpcc-partner__grid { grid-template-columns: 1fr; }
  .cpcc-partner__facts { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
  .cpcc-port__row { flex-wrap: wrap; gap: .75rem; }
  .cpcc-port__figs { gap: 1.1rem; width: 100%; justify-content: flex-start; }
  .cpcc-fig { text-align: left; }
}

/* ============================================================
   Entrance motion.

   Three failed approaches are worth recording so they aren't retried:
   scroll-driven animations (animation-timeline: view()) do nothing in
   Safari and Firefox; hiding elements from the footer script flashes
   the content first; and hiding them unconditionally in CSS strands
   the page if the script never runs.

   What works: a one-line script in <head> puts .cpcc-js on <html>
   before the first paint, and only then does this CSS hide anything.
   No .cpcc-js — script blocked, JS off, an error — and every element
   renders normally. The head script also carries a failsafe that
   removes the class if the reveal script never checks in.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .cpcc-js .cpcc-partner__eyebrow,
  .cpcc-js .cpcc-partner__name,
  .cpcc-js .cpcc-partner__about,
  .cpcc-js .cpcc-partner__facts > *,
  .cpcc-js .cpcc-partner__services-eyebrow,
  .cpcc-js .cpcc-partner__services-lead,
  .cpcc-js .cpcc-service,
  .cpcc-js .cpcc-partner__footnote,
  .cpcc-js .cpcc-ports__head,
  .cpcc-js .cpcc-port {
    opacity: 0;
    transform: translateY(16px);
  }

  .cpcc-js .cpcc-partner__eyebrow.is-in,
  .cpcc-js .cpcc-partner__name.is-in,
  .cpcc-js .cpcc-partner__about.is-in,
  .cpcc-js .cpcc-partner__facts > .is-in,
  .cpcc-js .cpcc-partner__services-eyebrow.is-in,
  .cpcc-js .cpcc-partner__services-lead.is-in,
  .cpcc-js .cpcc-service.is-in,
  .cpcc-js .cpcc-partner__footnote.is-in,
  .cpcc-js .cpcc-ports__head.is-in,
  .cpcc-js .cpcc-port.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity .6s cubic-bezier(.22, .61, .36, 1),
      transform .6s cubic-bezier(.22, .61, .36, 1);
  }
}

/* Paper has no scroll and no script — never print a hidden state. */
@media print {
  .cpcc-js .cpcc-partner *,
  .cpcc-js .cpcc-ports * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Anchor for "Services" links (#services): lands just below the floating
   site header rather than underneath it. */
/* Two classes deep on purpose: the theme gives every element with an id
   a ~43px scroll margin, and a single class would lose to it. Uses the
   site-wide anchor offset (set in the CANAL PASS site stylesheet) so
   #services lands exactly like every other anchor; 136px if that
   stylesheet is ever missing. */
.cpcc-partner .cpcc-partner__anchor {
  display: block;
  height: 0;
  scroll-margin-top: var(--cp-anchor-offset, 136px);
}