/* ---------------------------------------------------------------------------
   Articles → Berth Allocation Deep Dive
   Blocks unique to this deep dive. Type ramp, container rail, section padding,
   buttons and forms all come from style.css; only the .dd-* blocks live here.
   Extracted from the standalone deep-dive export when the page was ported into
   the site, the same way page-articles-berth-allocation.css was.
   --------------------------------------------------------------------------- */
    /* Blocks unique to this deep dive. Type ramp, container rail, section
       padding, buttons and forms all come from style.css.

       One rule governs the layout: every piece of running text starts on the
       container rail. Headings, intros, formulas, pull quotes and notes share
       a left edge and a 760px measure, so the page reads as a single column
       with cards and photographs hung off it. */

    /* ---------- hero ---------- */
    /* Full-bleed photograph with the copy and the stat rail sitting on it,
       matching the truck-turnaround deep dive. The product .p-hero can't be
       reused as-is: it is a fixed 415px band with an absolutely positioned
       title, which leaves nowhere for the stat rail to sit. */
    .dd-hero {
      position: relative;
      background: var(--ink-2) url('../assets/images/hero-berthing.webp') center / cover no-repeat;
      padding: 96px 0 82px;
      color: #fff;
      overflow: hidden;
    }
    /* The scrim is heaviest behind the type and clears toward the right, so the
       photograph still reads as a photograph. */
    .dd-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(16,16,16,.82) 0%, rgba(16,16,16,.60) 48%, rgba(16,16,16,.22) 100%);
    }
    .dd-hero__inner { position: relative; z-index: 1; }
    .dd-hero__title {
      max-width: 640px;
      margin: 0 0 20px;
      font-size: 48px;
      line-height: 1.2em;
      font-weight: 700;
      color: #fff;
      text-wrap: balance;
    }
    .dd-hero__lead {
      max-width: 720px;
      margin: 0;
      font-size: 17px;
      line-height: 1.7em;
      color: #d8d8d8;
    }

    /* Three counts, read as a rail rather than as cards — the numbers are the
       shape of the document, not a metric claim. */
    .dd-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 30px;
      margin-top: 52px;
      padding-top: 34px;
      border-top: 1px solid rgba(255, 255, 255, .22);
    }
    .dd-stat + .dd-stat { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 30px; }
    .dd-stat__n {
      display: block;
      font-size: 42px;
      line-height: 1;
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
    }
    .dd-stat__l { font-size: 15px; line-height: 1.5em; color: #cfcfcf; margin: 0; }

    /* ---------- the shared text column ---------- */
    /* .section-head leaves 30px under a heading, which reads as a gap when an
       intro follows it. Tightened here so heading and intro group together and
       the 40px below the intro separates them from the content. */
    .dd-head { margin-bottom: 18px; }
    .dd-lead {
      max-width: 760px;
      margin: 0 0 40px;
      font-size: 17px;
      line-height: 1.7em;
      color: var(--gray-600);
    }
    .dd-note {
      max-width: 760px;
      margin: 26px 0 0;
      font-size: 15px;
      line-height: 1.7em;
      color: var(--gray-600);
    }
    .section--soft { background: #f9f9f9; }
    /* Two sentences, one per line, so it takes the full column. */
    .dd-note--wide { max-width: none; }

    /* The definition line and the pull quotes hang off a short orange rule,
       the same mark .h-section--left puts under a heading, so their text keeps
       the rail instead of being pushed in by a border and padding. */
    /* The formula and the pull quotes are single statements, so they opt out
       of the 760px measure the paragraphs keep and take the full column. */
    .dd-formula,
    .dd-callout {
      max-width: none;
      border-top: 3px solid var(--orange);
    }
    /* The formula reads as one continuous equation, so it opts out of the
       760px measure and takes the full column to stay on a single line. */
    .dd-formula {
      max-width: none;
      margin: 32px 0 0;
      padding-top: 18px;
      font-size: 17px;
      line-height: 1.6em;
      font-weight: 600;
      color: var(--heading);
    }
    .dd-formula em { font-style: normal; color: var(--orange-600); }
    .dd-callout { margin: 44px 0 0; padding-top: 20px; }
    .dd-callout p {
      margin: 0;
      font-size: 21px;
      line-height: 1.45em;
      font-weight: 700;
      color: var(--heading);
    }

    /* Two-column section opener: copy beside a supporting photograph. */
    .dd-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
      gap: 50px;
      align-items: center;
      margin-bottom: 40px;
    }
    .dd-split .dd-lead { margin-bottom: 0; }
    /* Every photo carries height:auto. Their width/height attributes reserve
       space before the image arrives, but they also set a presentational
       height that would beat aspect-ratio and show the picture uncropped. */
    .dd-split__img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radius-card);
    }

    /* Full-width photograph used to open a section. */
    .dd-band {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 5;
      object-fit: cover;
      border-radius: var(--radius-card);
      margin-bottom: 34px;
    }

    /* ---------- stages ---------- */
    .dd-stages { display: grid; gap: 22px; }
    .dd-stage {
      display: grid;
      grid-template-columns: 58px minmax(0, 300px) minmax(0, 1fr);
      gap: 28px;
      align-items: start;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: #fff;
    }
    .dd-stage__n {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 2px solid var(--orange);
      display: grid;
      place-items: center;
      font-size: 17px;
      font-weight: 700;
      color: var(--heading);
    }
    .dd-stage__img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 10px;
      display: block;
    }
    .dd-stage h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.35em; }
    .dd-stage__d { margin: 0; color: var(--gray-600); }

    /* Process chips: a labelled sequence, so the arrows live in the markup and
       wrap with the chips instead of being drawn on the container.
       Metrics are set by the longest row, stage 04, which runs five chips
       (Customs through Cleared to operate) and needed 746px of a 728px column.
       At 13px with 11px side padding and an 8px gap it comes in around 670px,
       so every stage holds one line down to the 1200px layout. */
    .dd-flowline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
    }
    .dd-flowline__label { font-size: 13px; color: var(--muted); margin-right: 2px; }
    .dd-chip {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 7px 11px;
      font-size: 13px;
      line-height: 1.3;
      white-space: nowrap;
      color: var(--heading);
      background: #fff;
    }
    .dd-chip--end { border-color: var(--orange); color: var(--orange-600); font-weight: 600; }
    .dd-arrow { color: var(--muted); font-size: 13px; }

    .dd-practice {
      margin-top: 20px;
      padding: 20px 22px;
      background: #f9f9f9;
      border-radius: 8px;
    }
    .dd-practice__h {
      display: block;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--orange-600);
      margin-bottom: 8px;
    }
    .dd-practice p { margin: 0; font-size: 15px; line-height: 1.7em; color: var(--gray-600); }

    /* ---------- role / factor grids ---------- */
    .dd-grid2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
    .dd-role {
      padding: 28px 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: #fff;
    }
    .dd-role h3 { margin: 0 0 10px; }
    .dd-role p { margin: 0; color: var(--gray-600); }

    .dd-factor {
      padding: 30px;
      border: 1px solid var(--line);
      border-left: 3px solid var(--orange);
      border-radius: var(--radius-card);
      background: #fff;
    }
    .dd-factor h3 { margin: 0 0 10px; }
    /* The question is the test the factor applies; the line below it is the
       evidence. Holding the question in orange keeps the two apart. */
    .dd-factor__q {
      margin: 0 0 12px;
      font-size: 15px;
      line-height: 1.5em;
      font-weight: 600;
      color: var(--orange-600);
    }
    .dd-factor p:last-child { margin: 0; color: var(--gray-600); }

    /* ---------- distribution flow ---------- */
    .dd-path {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      overflow: hidden;
    }
    .dd-path__step { background: #fff; padding: 26px 22px; }
    .dd-path__k {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 10px;
    }
    .dd-path__t {
      margin: 0 0 8px;
      font-size: 18px;
      line-height: 1.35em;
      font-weight: 700;
      color: var(--heading);
    }
    .dd-path__s { margin: 0; font-size: 14px; line-height: 1.6em; color: var(--gray-600); }

    /* ---------- change columns ---------- */
    .dd-change {
      padding: 32px 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: #fff;
    }
    .dd-change h3 { margin: 0 0 6px; }
    .dd-change__s { margin: 0 0 18px; font-size: 15px; color: var(--gray-600); }
    .dd-change ul { display: grid; gap: 10px; }
    .dd-change li {
      display: grid;
      grid-template-columns: 8px 1fr;
      gap: 14px;
      align-items: baseline;
      font-size: 16px;
      line-height: 1.55em;
      color: var(--heading);
    }
    .dd-change li::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
    }

    /* ---------- Portall layers ---------- */
    .dd-layers { display: grid; gap: 20px; }
    .dd-layer {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 30px;
      align-items: start;
      padding: 30px 32px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: #fff;
    }
    .dd-layer__p { display: block; font-size: 22px; font-weight: 700; color: var(--orange); }
    .dd-layer h3 { margin: 0 0 10px; }
    .dd-layer p { margin: 0; color: var(--gray-600); }

    /* Disruption table. Scrolls on its own below the two-column breakpoint
       rather than forcing the page to scroll sideways. */
    .dd-table-wrap { margin-top: 30px; overflow-x: auto; }
    .dd-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
    .dd-table th {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0 20px 14px 0;
      border-bottom: 2px solid var(--line);
    }
    .dd-table td {
      padding: 20px 20px 20px 0;
      border-bottom: 1px solid var(--line);
      font-size: 16px;
      line-height: 1.6em;
      color: var(--gray-600);
      vertical-align: top;
    }
    .dd-table td:first-child { font-weight: 600; color: var(--heading); }
    .dd-table td:last-child { padding-right: 0; font-weight: 700; color: var(--orange); white-space: nowrap; }

    /* ---------- closing band ---------- */
    /* Built like the hero, so the document opens and closes on the same
       full-bleed photograph treatment. */
    .dd-close {
      position: relative;
      overflow: hidden;
      /* The hero photograph again, so the page opens and closes on the same
         image under the same scrim. */
      background: var(--ink-2) url('../assets/images/terminal-hd.webp') center / cover no-repeat;
      padding: 96px 0;
      color: #fff;
    }
    .dd-close::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(16,16,16,.82) 0%, rgba(16,16,16,.60) 48%, rgba(16,16,16,.22) 100%);
    }
    .dd-close__copy { position: relative; z-index: 1; }
    .dd-close h2 {
      max-width: 640px;
      margin: 0 0 20px;
      font-size: 48px;
      line-height: 1.2em;
      font-weight: 700;
      color: #fff;
      text-wrap: balance;
    }
    .dd-close p {
      max-width: 720px;
      margin: 0;
      font-size: 17px;
      line-height: 1.7em;
      color: #d8d8d8;
    }
    .dd-close__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

    @media (max-width: 1199px) {
      .dd-stage { grid-template-columns: 58px minmax(0, 1fr); }
      .dd-stage__img { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 6; }
      .dd-stage__n { grid-column: 1; grid-row: 2; }
      .dd-stage__body { grid-column: 2; grid-row: 2; }
    }
    @media (max-width: 1023px) {
      .dd-hero { padding: 72px 0 64px; }
      .dd-hero__title { font-size: 38px; }
      .dd-split { grid-template-columns: 1fr; gap: 32px; }
      .dd-split .dd-lead { margin-bottom: 0; }
      .dd-split__img { aspect-ratio: 16 / 8; }
      /* Stacked, the scrim can no longer clear to one side. */
      .dd-hero::after,
      .dd-close::after { background: rgba(16, 16, 16, .78); }
      .dd-close { padding: 72px 0; }
      .dd-close h2 { font-size: 38px; }
      .dd-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dd-layer { grid-template-columns: 1fr; gap: 14px; }
    }
    /* The equation needs 1039px at 17px and the longer pull quote 997px at
       21px. Stepping both down holds their single line a breakpoint lower;
       below that they have to wrap. */
    @media (max-width: 1099px) {
      .dd-formula { font-size: 15px; }
      .dd-callout p { font-size: 19px; }
    }
    @media (max-width: 767px) {
      .dd-hero__title,
      .dd-close h2 { font-size: 30px; }
      .dd-stats { grid-template-columns: 1fr; gap: 26px; }
      .dd-stat + .dd-stat { border-left: 0; padding-left: 0; }
      .dd-stage { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
      .dd-stage__img, .dd-stage__n, .dd-stage__body { grid-column: 1; }
      .dd-stage__img { grid-row: 1; aspect-ratio: 16 / 9; }
      .dd-stage__n { grid-row: 2; }
      .dd-stage__body { grid-row: 3; }
      .dd-band { aspect-ratio: 16 / 9; }
      .dd-grid2, .dd-path { grid-template-columns: 1fr; }
      .dd-change { padding: 24px; }
      .dd-callout p { font-size: 18px; }
    }