/* ORWAK — blogbejegyzes.html (the article template)
   Loaded after shared.css.

   Everything on this page that is a component already lives in shared.css:
   .nav / .mega / .mnav / .srch / .footer, .phero, .split (+ --bare, --flip),
   .list-check, .lede-lg, .postcard, .link-more, .section-head, .container.
   What is left — and all that is in this file — is the PROSE SCOPE: the
   typography and vertical rhythm of the post body itself.

   The scope is written as descendant selectors on BARE elements
   (.article__body > p / > h2 / > ul / > figure / a) and never as per-element
   classes, because WordPress's the_content() emits unclassed markup. If these
   rules are ever rewritten as .article__p / .article__h2, the WP port loses
   all of them silently. */

/* ============================================================ ARTICLE SHELL
   Figma: body runs y833→4941, i.e. 78px below the .phero (which ends at 755)
   and 78px above the footer. The footer carries no top margin of its own, so
   78px is the whole gap. */
.article{ margin-top: 78px; }

/* The artboard's rhythm is remarkably regular: 50px between every top-level
   block, 20px between a heading and the block directly under it. Both numbers
   are the design's and have no token; --sp-* would only approximate them. */
.article > *{ margin-top: 50px; }
.article > :first-child{ margin-top: 0; }
.article .split{ margin-top: 50px; }      /* overrides the shared --row-y 78px */

/* ============================================================ PROSE SCOPE */
.article__body{
  color: var(--ink);
  hyphens: auto;
  overflow-wrap: break-word;
}
.article__body > *{ margin-top: 50px; margin-bottom: 0; }
.article__body > :first-child{ margin-top: 0; }
.article__body > h2 + *{ margin-top: 20px; }

.article__body > p,
.article__body > ul{
  font: 400 var(--t-body-lg)/var(--lh-snug) var(--font-sans);
  letter-spacing: .2px;
  color: var(--ink);
  text-wrap: pretty;
}
/* Figma sets 18/24 = 1.33; --lh-snug (1.40) is the nearest token and reads
   better over 4100px of Hungarian long-form. Every block is auto-height, so a
   user forcing line-height to 1.5 (WCAG 1.4.12) grows the page, never clips. */

.article__body > h2{
  font: 700 var(--t-h4)/var(--lh-head) var(--font-display);
  letter-spacing: .2px;
  color: var(--ink);
  text-wrap: balance;
}
/* Figma draws these at 24px/24px = 1.00, below the --lh-display 1.12 hard
   floor: the ő in "jövőt épít" and "működését" would lose its double acute,
   and two of the six headings wrap to a second line. --lh-head is what the
   designer's own sixth heading (678:3006) is already authored at. */

/* The standing first paragraph is the shared .lede-lg; re-assert it so the
   `> p` rule above cannot out-specify it. */
.article__body > p.lede-lg{
  font: 300 var(--t-lead-lg)/var(--lh-snug) var(--font-display);
  margin-bottom: 0;
}

/* Lists — a real <ul>/<li>, so the accent marker is decoration and never the
   only cue that this is a list. Same marker as the shared .list-check. */
.article__body > ul{
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.article__body > ul > li{
  position: relative;
  padding-left: 26px;
}
.article__body > ul > li::before{
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

/* In-body links. Figma gives them an underline and no colour change, which
   leaves the affordance carried by decoration alone inside dense prose.
   --primary-text is 5.29:1 on --bg; --primary would be 3.52:1 and fail. */
.article__body a{
  color: var(--primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article__body a:hover{ color: var(--primary-700); }

/* CO₂ — U+2082 is not reliably in Mulish's latin-ext subset, so the glyph
   would fall back to a system font at a different weight and baseline.
   A real <sub>, nudged so it does not open up the line box. */
.article__body sub{
  font-size: .72em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  bottom: -.22em;
}

/* ============================================================ ARTICLE FIGURE
   Full-measure photograph, 1275×408 on the artboard (3.125:1). Figma draws it
   with square corners and no frame; the house treatment (.split__media,
   .pcat__media) uses --r-2 + --frame, and the blog images should not read as a
   different material from the product images. */
.article__body > figure{ margin-inline: 0; }
.article__media{
  aspect-ratio: 1275 / 408;
  background: var(--bg-2) center/cover no-repeat;
  border-radius: var(--r-2);
  box-shadow: var(--frame);
}

/* ============================================================ RELATED POSTS
   A house addition — the artboard closes straight into the footer, with no
   next action and no way back to the archive. Marked as such in the markup.
   The cards themselves are the shared .postcard. */
.related{ margin-top: var(--section-y); }
.related .section-head h2{
  font-size: var(--t-h1);
  line-height: var(--lh-display);   /* the shared rule ships line-height:1 */
}
.related__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.related .postcard__img{ aspect-ratio: 409 / 286; }
.related .postcard__title{
  font-size: var(--t-lead);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  hyphens: auto; overflow-wrap: break-word;
}
.related .postcard__excerpt{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: var(--t-body);
}
.related .postcard{ position: relative; }
.related .postcard__title a{ color: inherit; }
.related .postcard__title a::after{ content: ""; position: absolute; inset: 0; }
.related .postcard:hover .postcard__title a{ color: var(--primary-700); }

@media (max-width: 1180px){
  .article{ margin-top: var(--sp-9); }
  .article > *,
  .article .split,
  .article__body > *{ margin-top: var(--sp-7); }
  .article__body > h2 + *{ margin-top: var(--sp-4); }
  .article__body > :first-child,
  .article > :first-child{ margin-top: 0; }
  .related__grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }
}
@media (max-width: 720px){
  .related__grid{ grid-template-columns: 1fr; }
  .related .postcard__title,
  .related .postcard__excerpt{
    display: block; -webkit-line-clamp: none; overflow: visible;
  }
  .article__media{ aspect-ratio: 3 / 2; }
}