/* Article-scoped styles for /journal/holiday-let-website-build-starts-now/.
   Everything else on the page is the Journal's own components.

   Two treatments, both already in use on recent articles and copied rather than
   shared so no article can quietly restyle another:

     1. the dark stat pull-quote (mobile speed, social, AI Mode, guest comms,
        website UX);
     2. the responsive project table from /journal/why-otas-outrank-your-website/
        — three columns on wide screens, one labelled card per row on phones.

   The closing CTA keeps the wider copy measure agreed for the recent articles,
   so the dark card is not left two-thirds empty. */

/* journal.css gives scroll-margin-top to h2 only; these h3 sections can be
   linked directly, so they need the same clearance under the fixed header. */
.bw-prose h3[id] { scroll-margin-top: 100px; }

/* ---- stat pull-quote ------------------------------------------------------ */
.bw-prose blockquote.hl-pull {
  background: var(--bw-ink, #0C2A1C);
  border-left: 4px solid var(--bw-accent-mid, #7FC98B);
  border-radius: var(--bw-r-md, 18px);
  padding: 30px 32px; margin: 30px 0 28px;
}
.bw-prose blockquote.hl-pull p {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; letter-spacing: -0.015em;
  font-weight: 600; color: var(--bw-cream, #F2F6EE); margin: 0;
}
.bw-prose blockquote.hl-pull strong { color: var(--bw-accent-soft, #9FDCA9); font-weight: 800; }
.bw-prose blockquote.hl-pull .hl-pull__src {
  display: block; margin-top: 12px;
  font-family: 'Karla', system-ui, sans-serif; font-size: 15px; font-weight: 500;
  letter-spacing: 0; color: rgba(242, 246, 238, 0.7);
}
/* .bw-prose a (0,1,1) would paint a link dark green on this dark ground */
.bw-prose blockquote.hl-pull a {
  color: var(--bw-white, #FFFFFF); font-weight: 700;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
}
.bw-prose blockquote.hl-pull a:hover,
.bw-prose blockquote.hl-pull a:focus-visible {
  color: var(--bw-accent-soft, #9FDCA9); border-bottom-color: var(--bw-accent-soft, #9FDCA9);
}

@media (max-width: 560px) {
  .bw-prose blockquote.hl-pull { padding: 24px 20px; border-radius: var(--bw-r-sm, 12px); }
  .bw-prose blockquote.hl-pull p { font-size: 18px; }
}

/* ---- the project / timeline table ---------------------------------------- */
.bw-prose .hl-table {
  width: 100%; margin: 8px 0 28px;
  border-collapse: separate; border-spacing: 0;
  background: var(--bw-white);
  border: 1px solid var(--bw-line); border-radius: var(--bw-r-md);
  overflow: hidden;
  font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.55;
  color: var(--bw-body);
}
.bw-prose .hl-table th,
.bw-prose .hl-table td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bw-line);
}
.bw-prose .hl-table tbody tr:last-child th,
.bw-prose .hl-table tbody tr:last-child td { border-bottom: 0; }
.bw-prose .hl-table thead th {
  background: var(--bw-ink); color: var(--bw-cream);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 0;
}
.bw-prose .hl-table tbody th {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700;
  color: var(--bw-ink); width: 22%;
}
.bw-prose .hl-table tbody tr:nth-child(even) { background: var(--bw-cream); }

@media (max-width: 640px) {
  .bw-prose .hl-table,
  .bw-prose .hl-table tbody,
  .bw-prose .hl-table tr,
  .bw-prose .hl-table th,
  .bw-prose .hl-table td { display: block; width: auto; }
  .bw-prose .hl-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  /* the header row's job is done by each cell's own label */
  .bw-prose .hl-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .bw-prose .hl-table tbody tr,
  .bw-prose .hl-table tbody tr:nth-child(even) {
    background: var(--bw-white);
    border: 1px solid var(--bw-line); border-radius: var(--bw-r-sm);
    margin: 0 0 14px; overflow: hidden;
  }
  .bw-prose .hl-table tbody th {
    width: auto; background: var(--bw-ink); color: var(--bw-cream);
    padding: 12px 16px; font-size: 17px; border-bottom: 0;
  }
  .bw-prose .hl-table td { padding: 12px 16px; }
  .bw-prose .hl-table td::before {
    content: attr(data-label); display: block; margin: 0 0 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bw-muted);
  }
  /* rows are separate cards here, so the last one keeps its inner divider */
  .bw-prose .hl-table tbody tr:last-child td { border-bottom: 1px solid var(--bw-line); }
  .bw-prose .hl-table tbody tr td:last-child { border-bottom: 0; }
}

/* Closing CTA measure — the approved treatment from the recent articles: in a
   stacked in-article card the component's 46ch leaves a third of the dark panel
   empty. Scoped by id; the component default is untouched elsewhere. */
#holiday-let-cta-form .pgform__lede { max-width: 64ch; }