/* Shared layout layer for landings exported from the design canvas.
   Served as /articles/public/landing-base.css (the /articles/public static mount already exists).

   What belongs here: things that repeat in EVERY canvas landing - the canvas base styles,
   the page frame and the responsive helpers. Nothing about a particular page.
   What stays in the page: its own inline styles from the export (colors, sizes, grids).
   The helpers below are opt-in - a page gets a behaviour only by carrying the class.

   The donation landings use public/mitilena-pay.css and never load this file. */

/* ── Canvas base: FALLBACK, not the source ────────────────────────────
   A copy of the <style> block an export ships. It is here only for the three pages built
   before 22.09.2026, whose own block was stripped at build time. Pages built since carry
   their own block in the head AFTER this file, so theirs wins - do not extend this one,
   and delete it once those three pages carry their own. */
html, body { background: #F5F7FC; }
body {
  margin: 0;
  color: #14161E;
  font-family: 'IBM Plex Sans', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  font-family: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: #3E56C9; text-decoration: none; }
a:hover { color: #2F44A8; }
.mono { font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; }
.ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico svg { display: block; }

/* ── Page frame ───────────────────────────────────────────────────── */
/* NOTHING here may target a bare tag: a rule on <header> or <section> hits what the design
   set on purpose. Everything is scoped to the lp-* classes put on the markup deliberately,
   or to #top - the root div every canvas export carries. */

/* the artboard is a 1280 box; a browser window is wider. The root stretches, the bands with it,
   and the content column stays the design's 1120px, centred - otherwise the page stands in a
   1280 box with empty gutters on both sides. */
#top { width: 100% !important; max-width: none !important; height: auto !important; }
.lp-header, .lp-hero, .lp-sec, .lp-band, .lp-stats, .lp-premium,
.lp-foot-top, .lp-foot-mid, .lp-foot-bot {
  padding-left: max(80px, (100% - 1120px) / 2) !important;
  padding-right: max(80px, (100% - 1120px) / 2) !important;
}

/* a band lays its items in one nowrap row, which only fits while the text is the length the
   design had. Proofreading makes it longer and the last item leaves the screen - let it wrap
   instead. When everything fits this rule changes nothing. */
.lp-band { flex-wrap: wrap !important; }
/* the text block of a band may shrink so the buttons keep their row; it wraps inside instead */
.lp-band > *:first-child { min-width: 0; flex-shrink: 1; }
/* the design gives a band no vertical padding - fine for one row, cramped for two, and two is
   what the longer text produces. 18px keeps the rows off the band's own border. */
.lp-band { padding-top: 18px !important; padding-bottom: 18px !important; }

/* an older export carries the artboard's own fixed heights on sections and step blocks;
   on a live page a block grows with its content, otherwise text is clipped when it reflows */
.lp-hero, .lp-sec, .lp-band, .lp-stats, .lp-premium, [data-step] { height: auto !important; }

/* the export keeps the header static and (since the canvas update) drops its 80px height.
   !important is required for position: the inline style wins otherwise */
.lp-header { position: sticky !important; top: 0 !important; z-index: 50; min-height: 80px; }
.lp-sec[id], .lp-band[id], .lp-hero[id] { scroll-margin-top: 96px; }

/* phone-only parts: burger + its menu, short button label, collapsed language line.
   Both toggles are CSS-only (menu on :target, language line on a hidden checkbox) - no script */
.lp-burger, .lp-menu, .lp-cta-short, .lp-langs-head, .lp-langs-more { display: none; }
.lp-langs-check { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }

/* ── Helper classes ───────────────────────────────────────────────────
   Tag the exported markup with these; the media queries below do the rest.

   .lp-header    sticky header
   .lp-online    header pill that is dropped below 1180
   .lp-hero      hero grid (two columns on desktop, stacks on tablet)
   .lp-stats     numbers band
   .lp-sec       a padded section
   .lp-g2        two-column grid            .lp-g2r  two-column grid with fixed rows
   .lp-g3        three-column card grid     .lp-g3b  three-column list grid
   .lp-g4        four-column tile grid      .lp-g2u  uneven two-column grid
   .lp-row       flex row that becomes a column on a phone
   .lp-step-p    paragraph with a min-height that has to go on a phone
   .lp-premium   full-width band with a link on the right
   .lp-band      full-width band of fixed-width items (wraps on a tablet; keep its min-height in the page)
   .lp-table-row a comparison row (label + two cells): on a phone the label takes its own line
   .lp-foot-top / .lp-foot-mid / .lp-foot-bot   footer rows
   .lp-social    row of social icons (44px targets on a phone)
   .lp-langs     the language line, with .lp-langs-head and .lp-langs-more beside it
   ──────────────────────────────────────────────────────────────────── */

/* ── Tablet: three columns become two, the hero stacks, fixed rows go auto ── */
@media (max-width: 1180px) {
  .lp-header { padding: 0 32px !important; }
  .lp-hero, .lp-stats, .lp-sec, .lp-premium, .lp-band,
  .lp-foot-top, .lp-foot-mid, .lp-foot-bot { padding-left: 32px !important; padding-right: 32px !important; }
  /* a band of fixed-width items is wider than a tablet - let it wrap instead of scrolling the page */
  .lp-band { flex-wrap: wrap !important; justify-content: center !important; }
  .lp-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .lp-g3, .lp-g3b, .lp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lp-g3, .lp-g2r { grid-template-rows: auto !important; }
  .lp-g2u, .lp-foot-top { grid-template-columns: minmax(0, 1fr) !important; }
  .lp-online { display: none !important; }
  .lp-hero h1 { font-size: 44px !important; }
  .lp-sec h2, .lp-foot-top h2 { font-size: 34px !important; }
  /* screenshots are drawn for the 1280 artboard and have to shrink with their column */
  .lp-hero img, .lp-sec img, .lp-band img, .lp-foot-top img { max-width: 100%; }
  .lp-hero figure img, .lp-sec figure img { height: auto !important; }
}

/* ── Phone: the canvas mobile layout - one column, 64px header with a burger,
      H1 34 / H2 28 / H3 18, body 15-16, buttons 52-56 full width ── */
@media (max-width: 760px) {
  .lp-header { height: 64px !important; min-height: 0 !important; padding: 0 16px 0 20px !important; }
  .lp-header nav { display: none !important; }
  .lp-logo-tile { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .lp-logo-tile img { width: 36px !important; height: 36px !important; }
  .lp-logo-name { font-size: 17px !important; }
  .lp-logo-sub { font-size: 9px !important; }
  .lp-header-cta { height: 40px !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 14px !important; }
  .lp-header-cta svg { display: none; }
  .lp-cta-long { display: none; }
  .lp-cta-short { display: inline; }

  /* the menu block stands BEFORE the header in the markup, so :target can reach the burger */
  .lp-burger-open { display: flex; }
  .lp-menu {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 49;
    background: #FFFFFF; border-bottom: 1px solid #DCE3F3;
    box-shadow: 0 12px 26px rgba(20, 22, 30, .10); padding: 4px 20px 10px;
  }
  .lp-menu:target { display: block; }
  .lp-menu:target ~ .lp-header .lp-burger-open { display: none; }
  .lp-menu:target ~ .lp-header .lp-burger-close { display: flex; }
  .lp-menu a { display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; color: #2F3542; }

  .lp-hero, .lp-stats, .lp-sec, .lp-premium, .lp-band,
  .lp-foot-top, .lp-foot-mid, .lp-foot-bot { padding-left: 20px !important; padding-right: 20px !important; }
  .lp-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .lp-hero { padding-top: 36px !important; padding-bottom: 40px !important; }
  .lp-stats { padding-top: 32px !important; padding-bottom: 32px !important; }
  .lp-stats, .lp-g2, .lp-g2r, .lp-g2u, .lp-g3, .lp-g3b, .lp-g4 { grid-template-columns: minmax(0, 1fr) !important; }
  .lp-row, .lp-premium, .lp-foot-mid { flex-direction: column !important; align-items: flex-start !important; }
  .lp-hero h1 { font-size: 34px !important; }
  .lp-sec h2, .lp-foot-top h2 { font-size: 28px !important; }
  .lp-sec h3 { font-size: 18px !important; }
  .lp-hero p { font-size: 16px !important; }
  .lp-sec p { font-size: 15px !important; }
  .lp-step-p { min-height: 0 !important; }
  /* long mono captions must not push a flex row wider than the screen */
  .lp-hero .mono, .lp-sec .mono, .lp-band .mono { overflow-wrap: break-word; min-width: 0; }
  /* comparison table: the row label moves onto its own line, the two cells stay side by side */
  .lp-table-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .lp-table-row > *:first-child { grid-column: 1 / -1; }
  .lp-premium svg { width: 120px !important; height: auto !important; }
  .lp-foot-mid { align-items: center !important; text-align: center; }
  .lp-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  section a[href*="showAddWalletModal"], footer a[href*="showAddWalletModal"], .lp-row > a {
    width: 100% !important; box-sizing: border-box; height: 56px !important;
    justify-content: center !important; padding-left: 16px !important; padding-right: 16px !important;
  }
  .lp-foot-top a[href] { height: 52px !important; }

  /* footer language line: six links + "и еще N языков", the rest by tapping the label */
  .lp-langs { font-size: 12px !important; }
  .lp-langs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .lp-langs-label { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: #5C6478; cursor: pointer; }
  .lp-langs-label::after { content: " ▾"; }
  .lp-langs-check:focus-visible ~ .lp-langs-head .lp-langs-label { outline: 2px solid #4D65DB; outline-offset: 2px; }
  .lp-langs > .mono { display: none !important; }
  .lp-langs > a:nth-of-type(n+7), .lp-langs > span:nth-of-type(n+7):not(.lp-langs-more) { display: none; }
  .lp-langs-more { display: inline; }
  .lp-langs-check:checked ~ .lp-langs-head .lp-langs-label::after { content: " ▴"; }
  .lp-langs-check:checked ~ .lp-langs > a,
  .lp-langs-check:checked ~ .lp-langs > span:not(.mono):not(.lp-langs-more) { display: inline; }
  .lp-langs-check:checked ~ .lp-langs .lp-langs-more { display: none; }
}