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

   Three treatments, all 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, holiday let build);
     2. the numbered heading badge used for the AI Mode article's steps, here
        carrying the five tips and the six actions;
     3. the responsive table from /journal/why-otas-outrank-your-website/ —
        two columns on wide screens, one labelled card per row on phones.

   journal.css gives scroll-margin-top to h2 only, and the contents navigation
   plus the numbered sections rely on h3 anchors, so that is restated here. */

.bw-prose h3[id] { scroll-margin-top: 100px; }

/* ---- stat pull-quote ------------------------------------------------------ */
.bw-prose blockquote.hm-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.hm-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.hm-pull strong { color: var(--bw-accent-soft, #9FDCA9); font-weight: 800; }
.bw-prose blockquote.hm-pull .hm-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.hm-pull a {
  color: var(--bw-white, #FFFFFF); font-weight: 700;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
}
.bw-prose blockquote.hm-pull a:hover,
.bw-prose blockquote.hm-pull a:focus-visible {
  color: var(--bw-accent-soft, #9FDCA9); border-bottom-color: var(--bw-accent-soft, #9FDCA9);
}

/* ---- numbered headings ---------------------------------------------------- */
/* .bw-prose h3 (0,1,1) owns the size and margins; restated at (0,2,1). */
.bw-prose .hm-step h3 {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 40px 0 12px;
}
.hm-step__n {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1.5px solid var(--bw-accent, #3E8E4F); color: var(--bw-accent, #3E8E4F);
  font-family: 'Karla', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em;
}

@media (max-width: 560px) {
  .bw-prose blockquote.hm-pull { padding: 24px 20px; border-radius: var(--bw-r-sm, 12px); }
  .bw-prose blockquote.hm-pull p { font-size: 18px; }
  .bw-prose .hm-step h3 { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .hm-step__n { width: 38px; height: 38px; font-size: 13px; }
}

/* ---- the Instead of / Try table ---------------------------------------- */
.bw-prose .hm-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 .hm-table th,
.bw-prose .hm-table td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bw-line);
}
.bw-prose .hm-table tbody tr:last-child th,
.bw-prose .hm-table tbody tr:last-child td { border-bottom: 0; }
.bw-prose .hm-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 .hm-table tbody th {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700;
  color: var(--bw-ink); width: 22%;
}
.bw-prose .hm-table tbody tr:nth-child(even) { background: var(--bw-cream); }

@media (max-width: 640px) {
  .bw-prose .hm-table,
  .bw-prose .hm-table tbody,
  .bw-prose .hm-table tr,
  .bw-prose .hm-table th,
  .bw-prose .hm-table td { display: block; width: auto; }
  .bw-prose .hm-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 .hm-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .bw-prose .hm-table tbody tr,
  .bw-prose .hm-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 .hm-table tbody th {
    width: auto; background: var(--bw-ink); color: var(--bw-cream);
    padding: 12px 16px; font-size: 17px; border-bottom: 0;
  }
  .bw-prose .hm-table td { padding: 12px 16px; }
  .bw-prose .hm-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 .hm-table tbody tr:last-child td { border-bottom: 1px solid var(--bw-line); }
  .bw-prose .hm-table tbody tr td:last-child { border-bottom: 0; }
}


/* Closing CTA measure — the approved treatment from the recent articles. */
#holiday-let-marketing-cta .pgform__lede { max-width: 64ch; }