/* Dreem Bridge cornerstone (pillar page) styles
 * Loaded IN ADDITION to dreem-article.css, only on pages flagged
 * _dreem_cornerstone = '1'. Scoped to .dreem-cornerstone so it never touches
 * regular articles. Same rule of thumb as the base sheet: style structural
 * chrome (spacing, layout, our own custom blocks) and leave heading/body
 * COLORS to the theme so pillars still feel native to the site.
 *
 * A pillar is an evergreen hub, NOT a dated blog post — so the per-post blog
 * chrome (byline, author bio, editorial-transparency note, related-posts grid)
 * is removed: new pillars are generated without it, and pillars published before
 * that change have it stripped at render-time by the bridge the_content filter.
 * That removal is what makes a pillar read as a landing page rather than an
 * article; the rules below lean into that — a generous lead, roomy section
 * rhythm, and the down-link cluster promoted into the page's centerpiece.
 *
 * NOTE: a pillar drops the article reading aids too — the Quick Answer box
 * (.dreem-tldr) and the Table of Contents (.dreem-toc) are removed (new pillars
 * are generated without them; existing pillars have them stripped at render by
 * the bridge the_content filter) so the page leads straight into its body.
 */

/* --- Pillar page template (dreem-cornerstone-template.php) -----------------
 * These style the template's OWN wrapper/hero, which live OUTSIDE .dreem-article
 * (the template renders them, then the_content() emits the .dreem-cornerstone
 * body inside .dreem-pillar-content). Colours/fonts are left to the theme (the h1
 * inherits the theme's heading styling); we only set structural size + rhythm.
 *
 * WIDTH: we do NOT impose a column width here. The template re-opens the theme's
 * own content-grid wrapper around .dreem-pillar-wrap, so the pillar inherits the
 * theme's default content width. .dreem-pillar-wrap therefore sets only vertical
 * rhythm. The .dreem-pillar-standalone fallback (used only when the theme isn't
 * recognised as Edge/Qode, so no theme grid wraps us) supplies a centred column. */
.dreem-pillar-wrap {
  padding: 40px 0 64px;
  box-sizing: border-box;
}
.dreem-pillar-standalone {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}
.dreem-pillar-hero { margin: 0 0 2.2em; }
.dreem-pillar-title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 0.7em;
}
.dreem-pillar-hero-img { margin: 0; padding: 0; }
.dreem-pillar-hero-img img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
@media (max-width: 640px) {
  .dreem-pillar-wrap { padding: 28px 16px 48px; }
  .dreem-pillar-hero-img img { max-height: 280px; border-radius: 12px; }
}

/* Give the pillar a touch more breathing room than a standard article. */
.dreem-cornerstone { font-size: 17px; line-height: 1.7; }

/* Lead-in: with the Quick Answer + TOC gone, the body's first paragraph is now
 * the opening line, so style it as a deck/standfirst that sets a landing-page
 * tone. */
.dreem-cornerstone > p:first-of-type {
  font-size: 1.18em;
  line-height: 1.6;
  margin-bottom: 1.4em;
}

/* Hero featured image — larger, full-width within the content column. */
.dreem-cornerstone .dreem-featured-img {
  margin: 0 0 1.8em;
}
.dreem-cornerstone .dreem-featured-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Section headings get extra top spacing + a hairline rule so the pillar reads
 * as distinct chapters of a guide rather than a continuous article. */
.dreem-cornerstone h2 {
  margin-top: 2.6em;
  padding-top: 1em;
  border-top: 1px solid #ececec;
  line-height: 1.25;
}
/* …but the first H2 and the cluster/FAQ blocks bring their own top rule, so
 * don't double it up. */
.dreem-cornerstone > h2:first-of-type,
.dreem-cornerstone .dreem-cluster > h2,
.dreem-cornerstone .dreem-faqs > h2 {
  border-top: 0;
  padding-top: 0;
}

/* Inline prose links — make internal + external links clearly clickable. Needed
 * because the pillar renders via our custom template, OUTSIDE the theme's content
 * wrapper, so the theme's own link styling never reaches these and dreem-article.css
 * leaves link colour to the theme — leaving body links indistinguishable from text.
 * Scoped to prose (paragraphs, top-level lists, FAQ answers); the child combinator
 * on lists deliberately excludes the cluster card grid (.dreem-cluster ul), and the
 * GBP CTA / related / tel links keep their own more-specific styling. */
.dreem-cornerstone p a,
.dreem-cornerstone > ul a,
.dreem-cornerstone > ol a,
.dreem-cornerstone .dreem-faq-answer a {
  color: #00bad6;
  text-decoration: none;
  font-weight: 500;
}
.dreem-cornerstone p a:hover,
.dreem-cornerstone > ul a:hover,
.dreem-cornerstone > ol a:hover,
.dreem-cornerstone .dreem-faq-answer a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Down-link cluster block ("More <topic> guides") — the heart of a hub page.
 * Rendered as a prominent card grid instead of a plain bullet list, signalling
 * the spokes the pillar funnels into. The block markup is
 * <section class="dreem-cluster"><h2>..</h2><ul><li><a>..</a></li>..</ul></section>
 * injected by CornerstoneBacklinkService. */
.dreem-cornerstone .dreem-cluster {
  clear: both;
  margin: 3em 0 1em;
  padding-top: 1.8em;
  border-top: 2px solid #e5e5e5;
}
/* The directory can carry more than one labelled list ("More <topic> guides"
 * + "Related guides"), so only the first heading hugs the top; later ones get
 * spacing to separate the groups. */
.dreem-cornerstone .dreem-cluster > h2 {
  margin-top: 1.8em;
  margin-bottom: 0.2em;
}
.dreem-cornerstone .dreem-cluster > h2:first-child {
  margin-top: 0;
}
.dreem-cornerstone .dreem-cluster ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
}
.dreem-cornerstone .dreem-cluster li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dreem-cornerstone .dreem-cluster li::before,
.dreem-cornerstone .dreem-cluster li::marker {
  content: none !important;
  display: none !important;
}
.dreem-cornerstone .dreem-cluster li a {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 56px;
  padding: 16px 18px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dreem-cornerstone .dreem-cluster li a:hover {
  border-color: #00bad6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .dreem-cornerstone { font-size: 16px; }
  .dreem-cornerstone .dreem-cluster ul { grid-template-columns: 1fr; }
}