/**
 * FizjoWerka — custom Gutenberg blocks, additive styles only.
 * Everything else (steps-grid, docs-list, ev-hero, rsvp, mini-map, organizer…)
 * is already styled by assets/css/main.min.css — this file only adds the one
 * new class needed to make the "feature checklist" bullet usable outside the
 * .prose scope it originally lived in (single-event.php content area).
 *
 * @package FizjoWerka
 */

/* Mint dot bullet list — same look as .prose ul / .door-list, standalone. */
.fz-checklist { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.fz-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--navy-700); }
.fz-checklist li::before {
	content: "";
	width: 16px; height: 16px;
	flex-shrink: 0; margin-top: 4px;
	background: var(--mint);
	border-radius: 50%;
	box-shadow: inset 0 0 0 4px var(--paper-2);
}

/* Small inline-SVG wrapper used by the event-hero quickmeta icons in the editor/save output. */
.fz-icon-wrap svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; display: block; }
.ev-hero-cta .fz-icon-wrap svg,
.mini-map .fz-icon-wrap svg { width: 16px; height: 16px; stroke: currentColor; margin-top: 0; }

/* Both GenerateBlocks' Query+Looper+Loop-Item (archive-events.html,
   home-events-live.html) and WordPress core's Query+Post-Template
   (archive-blog.html, v2) wrap every repeated card in an extra div that
   isn't part of the card's own design (GB: an unclassed looper div +
   .gb-loop-item; core: .wp-block-post). Only that wrapper div ends up as
   a direct child of .grid/.events-grid, so CSS Grid only ever sees one
   item and every card below it stacks in normal flow instead of forming
   columns. Flattening it makes .card/.event true direct grid children
   again, with zero effect on their own layout/spacing. */
.grid > div,
.events-grid > div,
.gb-loop-item { display: contents; }

/* Order/checkout page (page-zamow-ksiazke.html) — compact product strip +
   sticky order-summary sidebar next to the order form. New classes only;
   everything else on that page reuses existing page-ksiazka / page-kontakt
   design tokens. Mirrored in src/scss/pages/_page-ksiazka.scss. */
.mini-cover { width: 96px; aspect-ratio: 3/4.2; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: linear-gradient(125deg, #1B2D5A 0%, #2a4480 55%, #1B2D5A 100%); flex-shrink: 0; }
.mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cart-summary style top strip — sits lower (more top padding, breathes away
   from the sticky admin/header bar) and reads like a single compact order
   line: thumb, title/author, price. No subtitle/pills/CTA — the form is
   the very next thing on the page, so there's nothing left to "sell" here. */
.cart-strip { padding: 64px 0 32px; }
.cart-strip .crumbs { margin-bottom: 24px; }
.cart-line { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 22px; }
.cart-line .mini-cover { width: 52px; }
.cart-line .cl-info { flex: 1; min-width: 0; }
.cart-line .cl-title { font-family: "PP Editorial New", Georgia, serif; font-weight: 500; font-size: 16px; color: var(--navy); line-height: 1.3; }
.cart-line .cl-author { font-size: 12px; color: var(--navy-500); margin-top: 2px; }
.cart-line .cl-price { font-family: "PP Editorial New", Georgia, serif; font-weight: 500; font-size: 22px; color: var(--navy); white-space: nowrap; text-align: right; }
.cart-line .cl-price small { display: block; font-weight: 400; font-size: 11px; color: var(--navy-500); }

/* Generic icon swatch — used instead of mini-cover on pages that don't have
   one single fixed product image (e.g. the course order page, where the
   actual course is chosen from a dropdown in the form). */
.cl-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--mint-soft); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }

.order-grid { display: grid; grid-template-columns: 1.35fr .95fr; gap: 48px; align-items: start; }
.order-summary { position: sticky; top: 110px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.order-summary .os-head { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.order-summary .os-cover { width: 64px; aspect-ratio: 3/4.2; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow-sm); background: linear-gradient(125deg, #1B2D5A 0%, #2a4480 55%, #1B2D5A 100%); flex-shrink: 0; }
.order-summary .os-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-summary .os-title { font-weight: 500; font-size: 17px; color: var(--navy); line-height: 1.25; }
.order-summary .os-author { font-size: 13px; color: var(--navy-500); margin-top: 4px; }
.order-summary .price-block { margin-bottom: 4px; }
.order-summary .price-block .now { font-size: 28px; }
.os-line { display: flex; justify-content: space-between; font-size: 14px; color: var(--navy-700); padding: 10px 0; border-bottom: 1px solid var(--line); }
.os-line span:last-child { font-weight: 600; color: var(--navy); }
.os-note { font-size: 13px; color: var(--navy-500); margin: 16px 0 0; line-height: 1.5; }
.os-pay { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--navy-700); font-weight: 500; }
.order-summary .buy-reassure { grid-template-columns: 1fr; gap: 10px; }

@media (max-width: 1000px) {
  .order-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; order: -1; }
}