/* Newsroom additions on top of the existing theme.
   app.min.css and vendor.min.css do the heavy lifting — this file only covers
   what the theme has no class for. Keep it small; if you find yourself
   redefining colours or spacing here, use a theme utility instead. */

/* The agency hero fills the viewport, which is right for a landing page and
   wrong for a news page where the stories should be visible immediately. */
.section-hero-news,
.section-hero-article {
  min-height: 0;
  padding-top: 120px;
  padding-bottom: 56px;
}

.section-hero-news h1,
.section-hero-article h1 {
  font-size: 2rem;
  line-height: 1.25;
}

/* Publisher headlines run long; 2rem wraps to four or five lines on a phone. */
@media (max-width: 575.98px) {
  .section-hero-news,
  .section-hero-article {
    padding-top: 100px;
    padding-bottom: 40px;
  }
  .section-hero-news h1,
  .section-hero-article h1 { font-size: 1.6rem; }
}

@media (min-width: 992px) {
  .section-hero-news h1 { font-size: 2.6rem; }
  .section-hero-article h1 { font-size: 2.4rem; }
}

.ls-2 { letter-spacing: 0.12em; }

/* ── Section headings ──────────────────────────────────────────────────
   Sized for a heading inside a page. The theme's display-6 is hero scale;
   used on every subsection it competed with the h1 and made each block read
   as its own title card. */
.section-head {
  max-width: 46rem;
  margin: 0 0 1.75rem;
}

.section-head h2 {
  /* Kept clearly below the h1, which is 1.6rem on small screens — at 1.5rem
     the two were within two pixels of each other and the hierarchy vanished. */
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  padding-top: 0.85rem;
  border-top: 3px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
}

.section-head p {
  font-size: 1rem;
  font-weight: 700;
  color: #6c757d;
  margin: 0;
  max-width: 42rem;
}

@media (min-width: 576px) {
  .section-head h2 { font-size: 1.4rem; }
}

@media (min-width: 992px) {
  .section-head h2 { font-size: 1.75rem; }
  .section-head { margin-bottom: 2rem; }
}


/* ── What a service includes ───────────────────────────────────────────
   A list, not cards. As cards they stretched to a shared height and short
   entries left large empty boxes. */
.include-item {
  display: flex;
  gap: 0.9rem;
  padding: 0.75rem 0 1.5rem;
}

.include-tick {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.include-item h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
}

.include-item p {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1.65;
  margin: 0;
}

/* ── Process steps ─────────────────────────────────────────────────────
   Numbered, with a rule running between them on wide screens so the four
   read as a sequence rather than four unrelated paragraphs. */
.process-step {
  position: relative;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}

.process-step h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.process-step p {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1.65;
  margin: 0;
}

@media (min-width: 992px) {
  .process-step::before {
    content: "";
    position: absolute;
    top: calc(0.5rem + 19px);
    left: 38px;
    right: -1.5rem;
    height: 2px;
    background: rgba(0, 0, 0, 0.09);
  }
  .col-lg-3:last-child .process-step::before { display: none; }
}

/* Header navigation. The floating header sits over a dark hero on every page it
   appears on, so the links are white with a hover underline rather than a
   colour change — a colour shift would be invisible against the photograph. */
.header-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  margin-right: 1.5rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.85;
}

.header-links a:hover,
.header-links a[aria-current] {
  opacity: 1;
  border-bottom-color: currentColor;
}

/* Card titles vary wildly in length across publishers; clamping keeps the grid
   from going ragged without truncating the summary underneath.

   The comment above predates the rule that makes it true. Measured across a
   twelve-card page, titles ran 50px to 75px — two lines or three — and because
   the CTA is pinned to the bottom of the card, every line a title saved became
   dead space above "Read more": 61px in the tallest card, 107px in the
   shortest. Reserving three lines whatever the title needs moves that variance
   out of the middle of the card, where it reads as a hole. */
.news-card-title {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
  min-height: 4.05em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-card-title a:hover { text-decoration: underline !important; }

/* Six lines, always, with an ellipsis on anything longer.

   Summaries ran five to seven lines (five, four and three of twelve). The
   summary used to be the flex-grow element, so a short one did not make its
   card shorter — it pushed "Read more" to the bottom and left the difference as
   a hole in the middle, 61px in the tallest card against 103px in the shortest.
   Fixing the box at six lines makes every card the same height by construction,
   which closes the hole and lets the CTA sit under the text it belongs to.

   Six rather than five: it truncates three summaries instead of seven. */
.news-card-summary {
  font-size: 14px;
  line-height: 1.5;
  height: 9em;
  margin-bottom: 1.15rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

/* Single column, so the same summary needs more lines: six to eight at 375px
   against five to seven at 1280px. Holding six there truncated seven cards of
   twelve. Eight fits every summary we have with nothing cut, and the cards stay
   uniform — vertical space is the cheap thing on a phone. */
@media (max-width: 767.98px) {
  .news-card-summary {
    height: 12em;
    -webkit-line-clamp: 8;
  }
}

.news-card { transition: transform 0.15s ease, box-shadow 0.15s ease; overflow: hidden; }
.news-card:hover { transform: translateY(-3px); }

/* p-4 left "Read more" 23px off the bottom edge, which read as stuck to it
   while a gap sat above. The gap is gone now that the summary is a fixed box,
   so the remaining job is to keep the link off the rule of the card. */
.news-card .card-body { padding-bottom: 1.9rem !important; }

/* Generated cover, plus the section badge sitting over it. The aspect ratio is
   fixed so a grid of cards never reflows as images arrive. */
.news-card-cover {
  display: block;
  position: relative;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: #f2f3f4;
}

.news-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.news-card:hover .news-card-cover img { transform: scale(1.03); }

/* Right-hand side, and wholly inside the cover.

   Two things were wrong here. It sat at left: 1.25rem, where the cover's own
   caption is drawn into the SVG — that caption scales with the image while this
   badge is a fixed 44px, so at a 370px cover the badge landed on the caption's
   first letters. And bottom: -22px pushed half of it outside .news-card-cover,
   which is overflow: hidden for the hover zoom, so 22px of a 44px badge was
   being clipped away on every card.

   It now sits fully within the cover, at the opposite edge from the caption.
   The white ring matters: the badge takes the section's own colour, which is
   the colour the cover gradient is built from, so without something between
   them a purple badge on a purple cover is close to invisible. */
.news-card-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Headline list — items with no summary, linking straight to the publisher. */
.headline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: headline;
}

.headline-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.headline-item:last-child { border-bottom: 0; padding-bottom: 0; }
.headline-item:first-child { padding-top: 0; }
.headline-item a { flex: 1 1 320px; }
.headline-item a:hover { text-decoration: underline !important; }

/* The standfirst sits above the article and repeats the summary used on cards
   and in the feed, so a reader landing here gets the gist before committing. */
/* FAQ, built on <details> so it works without vendor.min.js. Styled to match
   the theme's accordion rather than the browser default. */
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-item:last-of-type { border-bottom: 0; }

.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 30px 14px 0;
  font-weight: 700;
  position: relative;
  color: #2d353c;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  transition: transform 0.15s ease;
}

.faq-item[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-item > summary:hover { color: #000; }
.faq-item > summary:focus-visible { outline: 2px solid var(--bs-indigo, #6610f2); outline-offset: 2px; }
.faq-item > p { padding: 0 30px 16px 22px; line-height: 1.75; }

/* Homepage "Latest from us" — a compact list rather than more cards, so the
   section adds a route into the content without competing with the services
   above it. */
.latest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: latest;
}

.latest-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.latest-list li:last-child { border-bottom: 0; }
.latest-list a:hover { text-decoration: underline !important; }

.article-standfirst {
  line-height: 1.7;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.article-body {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #495057;
}

.article-body p { margin-bottom: 1.35rem; }
.article-body p:last-child { margin-bottom: 0; }

/* Long-form reading wants a narrower measure than a full Bootstrap column. */
@media (min-width: 992px) {
  .article-standfirst,
  .article-body { max-width: 40rem; }
  .article-body { font-size: 1.125rem; }
}

.source-box {
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--bs-indigo, #6610f2);
}

/* The theme ships bg-indigo but no matching button variant. */
.btn-indigo {
  background: var(--bs-indigo, #6610f2);
  border-color: var(--bs-indigo, #6610f2);
  color: #fff;
}
.btn-indigo:hover,
.btn-indigo:focus {
  filter: brightness(1.1);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .news-card { transition: none; }
  .news-card:hover { transform: none; }
}